/* ============================================================
   shadcn/ui Style CSS
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* ============================================================
   1. CSS変数（カラーパレット・サイズ変数）
   ============================================================ */

@layer base {
    :root {
        /* 基本カラー */
        --background: 0 0% 100%;
        --foreground: 0 0% 0%;
        --menu-color: 0 0% 24%;
        --image-color: 220 30% 54%;
        --company-color: 222 63% 36%;
        --highlight-color: 200 87% 50%;
        
        /* カード */
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;

        /* ポップオーバー */
        --popover: 0 0% 100%;
        --popover-foreground: 240 50% 3.9%;

        /* プライマリ */
        --primary: 220 30% 95%;
        --primary-foreground: 240 20% 34%;
      
        /* セカンダリ */
        --secondary: 231 14% 39%;
        --secondary-foreground: 0 0% 98%;

        /* ミュート */
        --muted: 220 14% 96%;
        --muted-foreground: 240 20% 34%;

        /* アクセント */
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;

        /* デストラクティブ */
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        /* ボーダー */
        --border: 240 5.9% 88%;
        --input: 0 0% 83%;
        --ring: 240 5.9% 10%;

        /* ラディウス */
        --radius: 2px;
        --radius-card: 0px;

        /* レイアウト */
        --header-height: 54px;
        --sidebar-width: 196px;
        --sidebar-collapsed-width: 54px;
        --sidebar-background: #ffffff;
        --sidebar-foreground: var(--muted-foreground);
        --nav-item-height: 35px;
        --group-menu-height: 54px;

        /* 余白 */
        --main-margin: 16px;

        /* 間隙 */
        --gap-small: 2px;
        --gap-medium: 4px;
        --gap-large: 8px;
    }

    .dark {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;
        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 240 4.9% 83.9%;
    }
}

/* カラーパレット変数 */
:root {
    /* ===== 白系（White） ===== */
    --white-50: 0 0% 100%;
    --white-100: 0 0% 99.5%;
    --white-150: 0 0% 99%;
    --white-200: 0 0% 98.5%;
    --white-250: 0 0% 98%;
    --white-300: 0 0% 97.5%;
    --white-350: 0 0% 97%;
    --white-400: 0 0% 96.5%;
    --white-450: 0 0% 96%;
    --white-500: 0 0% 95%;
    --white-550: 0 0% 94.5%;
    --white-600: 0 0% 94%;
    --white-650: 0 0% 93.5%;
    --white-700: 0 0% 93%;
    --white-750: 0 0% 92.5%;
    --white-800: 0 0% 92%;
    --white-850: 0 0% 91.5%;
    --white-900: 0 0% 91%;
    --white-950: 0 0% 90.5%;
    --white-1000: 0 0% 90%;

    /* ===== 黒系（Black） ===== */
    --black-50: 0 0% 20%;
    --black-100: 0 0% 18%;
    --black-150: 0 0% 17%;
    --black-200: 0 0% 15%;
    --black-250: 0 0% 13%;
    --black-300: 0 0% 12%;
    --black-350: 0 0% 11%;
    --black-400: 0 0% 10%;
    --black-450: 0 0% 9%;
    --black-500: 0 0% 8%;
    --black-550: 0 0% 7%;
    --black-600: 0 0% 6%;
    --black-650: 0 0% 5.5%;
    --black-700: 0 0% 5%;
    --black-750: 0 0% 4%;
    --black-800: 0 0% 3%;
    --black-850: 0 0% 2.5%;
    --black-900: 0 0% 2%;
    --black-950: 0 0% 1%;
    --black-1000: 0 0% 0%;

    /* ===== グレー系（Gray） ===== */
    --gray-50: 0 0% 98%;
    --gray-100: 0 0% 96%;
    --gray-150: 0 0% 93%;
    --gray-200: 0 0% 90%;
    --gray-250: 0 0% 87%;
    --gray-300: 0 0% 83%;
    --gray-350: 0 0% 79%;
    --gray-400: 0 0% 74%;
    --gray-450: 0 0% 68%;
    --gray-500: 0 0% 62%;
    --gray-550: 0 0% 54%;
    --gray-600: 0 0% 46%;
    --gray-650: 0 0% 42%;
    --gray-700: 0 0% 38%;
    --gray-750: 0 0% 32%;
    --gray-800: 0 0% 26%;
    --gray-850: 0 0% 19%;
    --gray-900: 0 0% 13%;
    --gray-950: 0 0% 9%;
    --gray-1000: 0 0% 6%;

    /* ===== 赤系（Red） ===== */
    --red-50: 0 100% 97%;
    --red-100: 0 100% 94%;
    --red-150: 0 100% 90%;
    --red-200: 0 100% 86%;
    --red-250: 0 100% 80%;
    --red-300: 0 100% 74%;
    --red-350: 0 100% 68%;
    --red-400: 0 100% 62%;
    --red-450: 0 92% 61%;
    --red-500: 0 84% 60%;
    --red-550: 0 78% 56%;
    --red-600: 0 72% 51%;
    --red-650: 0 73% 47%;
    --red-700: 0 74% 42%;
    --red-750: 0 72% 38%;
    --red-800: 0 70% 35%;
    --red-850: 0 66% 33%;
    --red-900: 0 63% 31%;
    --red-950: 0 69% 23%;
    --red-1000: 0 75% 15%;

    /* ===== 黄系（Yellow） ===== */
    --yellow-50: 48 100% 96%;
    --yellow-100: 48 96% 89%;
    --yellow-150: 48 97% 83%;
    --yellow-200: 48 97% 77%;
    --yellow-250: 47 97% 71%;
    --yellow-300: 46 97% 65%;
    --yellow-350: 44 96% 60%;
    --yellow-400: 43 96% 56%;
    --yellow-450: 40 94% 53%;
    --yellow-500: 38 92% 50%;
    --yellow-550: 35 93% 47%;
    --yellow-600: 32 95% 44%;
    --yellow-650: 29 92% 40%;
    --yellow-700: 26 90% 37%;
    --yellow-750: 24 86% 34%;
    --yellow-800: 23 83% 31%;
    --yellow-850: 22 80% 28%;
    --yellow-900: 22 78% 26%;
    --yellow-950: 21 85% 20%;
    --yellow-1000: 21 92% 14%;

    /* ===== 緑系（Green） ===== */
    --green-50: 138 76% 97%;
    --green-100: 141 84% 93%;
    --green-150: 141 82% 89%;
    --green-200: 141 79% 85%;
    --green-250: 142 78% 79%;
    --green-300: 142 77% 73%;
    --green-350: 142 73% 65%;
    --green-400: 142 69% 58%;
    --green-450: 142 70% 51%;
    --green-500: 142 71% 45%;
    --green-550: 142 73% 40%;
    --green-600: 142 76% 36%;
    --green-650: 142 74% 32%;
    --green-700: 142 72% 29%;
    --green-750: 143 68% 26%;
    --green-800: 143 64% 24%;
    --green-850: 143 62% 22%;
    --green-900: 144 61% 20%;
    --green-950: 144 70% 15%;
    --green-1000: 145 80% 10%;

    /* ===== 青系（Blue） ===== */
    --blue-50: 210 100% 97%;
    --blue-100: 210 100% 94%;
    --blue-150: 210 100% 90%;
    --blue-200: 210 100% 86%;
    --blue-250: 210 100% 80%;
    --blue-300: 210 100% 74%;
    --blue-350: 210 100% 68%;
    --blue-400: 210 100% 62%;
    --blue-450: 210 100% 56%;
    --blue-500: 210 100% 50%;
    --blue-550: 210 100% 47%;
    --blue-600: 210 100% 44%;
    --blue-650: 210 100% 40%;
    --blue-700: 210 100% 36%;
    --blue-750: 210 100% 32%;
    --blue-800: 210 100% 28%;
    --blue-850: 210 100% 24%;
    --blue-900: 210 100% 20%;
    --blue-950: 210 100% 17%;
    --blue-1000: 210 100% 14%;

    /* ===== ネイビー系（Navy） ===== */
    --navy-50: 220 30% 96%;
    --navy-100: 220 30% 92%;
    --navy-150: 220 29% 87%;
    --navy-200: 220 28% 82%;
    --navy-250: 220 27% 76%;
    --navy-300: 220 26% 70%;
    --navy-350: 220 25% 62%;
    --navy-400: 220 24% 55%;
    --navy-450: 220 37% 47%;
    --navy-500: 220 50% 40%;
    --navy-550: 220 55% 36%;
    --navy-600: 220 60% 32%;
    --navy-650: 220 65% 28%;
    --navy-700: 220 70% 25%;
    --navy-750: 220 72% 21%;
    --navy-800: 220 75% 18%;
    --navy-850: 220 77% 15%;
    --navy-900: 220 80% 12%;
    --navy-950: 220 82% 10%;
    --navy-1000: 220 85% 8%;

    /* ===== オレンジ系（Orange） ===== */
    --orange-50: 34 100% 97%;
    --orange-100: 34 100% 92%;
    --orange-200: 34 100% 86%;
    --orange-300: 34 100% 78%;
    --orange-400: 34 96% 68%;
    --orange-500: 25 95% 53%;
    --orange-600: 21 90% 48%;
    --orange-700: 17 88% 40%;
    --orange-800: 15 79% 34%;
    --orange-900: 15 75% 28%;

    /* ===== パープル系（Purple） ===== */
    --purple-50: 270 100% 98%;
    --purple-100: 269 100% 95%;
    --purple-200: 269 100% 92%;
    --purple-300: 269 97% 85%;
    --purple-400: 270 95% 75%;
    --purple-500: 270 50% 60%;
    --purple-600: 271 81% 56%;
    --purple-700: 272 72% 47%;
    --purple-800: 273 67% 39%;
    --purple-900: 274 66% 32%;

    /* ===== Zinc系パレット ===== */
    --zinc-50: 240 5% 96%;
    --zinc-100: 240 5% 93%;
    --zinc-200: 240 5% 84%;
    --zinc-300: 240 5% 74%;
    --zinc-400: 240 4% 56%;
    --zinc-500: 240 4% 41%;
    --zinc-600: 240 4% 31%;
    --zinc-700: 240 5% 23%;
    --zinc-800: 240 4% 18%;
    --zinc-900: 240 5% 13%;
    --zinc-950: 240 6% 10%;
    --zinc-1000: 240 10% 4%;

    /* ===== Slate系パレット ===== */
    --slate-50: 210 40% 98%;
    --slate-100: 210 40% 96%;
    --slate-200: 214 32% 91%;
    --slate-300: 213 27% 84%;
    --slate-400: 215 20% 65%;
    --slate-500: 215 16% 47%;
    --slate-600: 215 19% 35%;
    --slate-700: 215 25% 27%;
    --slate-800: 217 33% 17%;
    --slate-900: 222 47% 11%;
    --slate-950: 225 65% 8%;
    --slate-1000: 229 84% 5%;
}

/* ============================================================
   2. リセットスタイル・基本スタイル
   ============================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    font-size: 16px;
}

body {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: hsl(var(--muted-foreground) / 0.5);
}

.inline-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: hsl(var(--foreground));
}

.inline-controls:has(input[type="radio"]) {
    margin-top: 3px;
    margin-left: 6px
}

.inline-controls:has(input[type="checkbox"]) {
    margin-top: 5px;
    margin-left: 6px;
}

.inline-controls label:not(:first-child) {
    margin-left: 16px
}

.inline-controls .select {
    width: auto;
    min-width: 86px;
}

.inline-controls .input {
    width: auto;
    min-width: 330px;
}

.inline-controls .label {
    width: auto;
    min-width: 330px;
}

/* ============================================================
   3. ボタン
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    height: 28px;
    padding: 3px 12px;
    transition: all 0.2s;
    outline: none;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.6;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Default */
.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: transparent;
}

.btn-primary:hover {
    background: hsl(var(--primary) / 0.9);
}

/* Primary（btn-primaryの別名） */
.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--border));
}

.btn-primary:hover {
    background: hsl(var(--primary) / 0.9);
}

/* Secondary */
.btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: transparent;
}

.btn-secondary:hover {
    background: hsl(var(--secondary) / 0.8);
}

/* White */
.btn-white {
    background: #fff;
    border-color: hsl(var(--input));
    color: hsl(var(--muted-foreground));
}

.btn-white:hover {
    background: #f8f8f8;
    color: hsl(var(--accent-foreground));
}

/* Outline */
.btn-white {
    background: transparent;
    border-color: hsl(var(--input));
    color: hsl(var(--muted-foreground));
}

.btn-white:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Danger */
.btn-danger {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border-color: transparent;
}

.btn-danger:hover {
    background: hsl(var(--destructive) / 0.85);
    border-color: hsl(var(--destructive) / 0.85);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: hsl(var(--foreground));
    border-color: transparent;
}

.btn-ghost:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.btn-ghost-dark {
    background: transparent;
    color: hsl(var(--foreground));
    border-color: transparent;
}

.btn-ghost-dark:hover {
    background: hsl(var(--gray-200));
    color: hsl(var(--accent-foreground));
}

/* Destructive */
.btn-destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border-color: transparent;
}

.btn-destructive:hover {
    background: hsl(var(--destructive) / 0.9);
}

/* User */
.btn-user {
    background: hsl(var(--blue-500));
    color: #fff;
    border-color: transparent;
}

.btn-user:hover {
    background: hsl(var(--blue-500) / 0.8);
}

/* Link */
.btn-link {
    background: transparent;
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 4px;
    border-color: transparent;
}

.btn-link:hover {
    text-decoration: none;
}

/* Sizes */
.btn-sm {
    height: 24px;
    padding: 3px 8px;
    font-size: 12px;
}

.btn-lg {
    height: 36px;
    padding: 3px 16px;
    font-size: 14px;
}

.btn-md {
    height: 28px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-icon {
    height: 28px;
    width: 28px;
    padding: 1px;
}

.btn-sm.btn-icon {
    height: 24px;
    width: 24px;
}

.btn-md.btn-icon {
    height: 28px;
    width: 28px;
    padding: 0;
}

/* ============================================================
   4. インプット・フォーム
   ============================================================ */

.input {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    background: hsl(var(--background));
    padding: 3px 8px;
    font-size: 13px;
    color: hsl(var(--foreground));
    transition: all 0.2s;
}

.input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* テキストエリア */
.textarea {
    min-height: 80px;
    height: auto;
    padding: 8px;
    resize: vertical;
}

/* セレクト */
.select {
    display: block;
    width: 100%;
    height: 28px;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    background: hsl(var(--background));
    padding: 3px 8px;
    font-size: 13px;
    color: hsl(var(--foreground));
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    cursor: pointer;
    transition: all 0.2s;
}

.select:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.select:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ラベル */
.label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 2px;
    padding-left: 2px;
}

.label-sm {
    font-size: 12px;
}

/* フォームグループ */

/* リンクホバー */
.link-hover {
    text-decoration: none;
}

.link-hover:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ブラウザ標準パスワード表示ボタンを非表示 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* ============================================================
   5. チェックボックス・スイッチ
   ============================================================ */

.checkbox {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid hsl(var(--primary));
    background: hsl(var(--background));
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.checkbox:hover {
    background: hsl(var(--accent));
}

.checkbox:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.checkbox:checked {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
}

.checkbox:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.checkbox-label input {
    margin-top: 2px;
}

/* スイッチ */

.switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: hsl(var(--background));
    border-radius: 8px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch.active {
    background: hsl(var(--primary));
}

.switch.active::before {
    transform: translateX(16px);
}

/* ============================================================
   6. カード
   ============================================================ */

.card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-radius: var(--radius-card);
    border: 1px solid hsl(var(--border));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* .card + .card {
  margin-top: 5px;
} */

.card-header {
    padding: 12px 12px 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.card-description {
    margin-left: 2px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.card-content {
    padding: 12px;
}

.card-footer {
    padding: 0 12px 12px;
    display: flex;
    align-items: center;
}

/* ============================================================
   7. KPIカード
   ============================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.kpi-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kpi-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-label {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: hsl(var(--foreground));
}

.kpi-change {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.kpi-change.positive {
    color: hsl(var(--green-600));
}

.kpi-change.negative {
    color: hsl(var(--red-600));
}

/* ============================================================
   8. バッジ
   ============================================================ */

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin: 0 4px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    color: white;
    line-height: 1.2;
}

.badge-default {
    background: hsl(var(--primary));
}

.badge-secondary {
    background: hsl(var(--gray-500));
}

.badge-outline {
    background: hsl(var(--gray-500));
}

.badge-destructive {
    background: hsl(var(--destructive));
}

.badge-green {
    background: hsl(var(--green-600));
}

.badge-red {
    background: hsl(var(--red-500));
}

.badge-yellow {
    background: hsl(var(--yellow-500));
}

.badge-blue {
    background: hsl(var(--blue-500));
}

.badge-gray {
    background: hsl(var(--gray-500));
}

.badge-purple {
    background: hsl(var(--purple-500));
}

.badge-navy {
    background: hsl(var(--navy-600));
}

/* ============================================================
   9. アラート
   ============================================================ */

.alert {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid;
    border-left: 4px solid;
    padding: 12px 14px;
    display: flex;
    gap: 10px;
}

.alert-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.alert-body {
    flex: 1;
}

.alert-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.2;
}

.alert-description {
    font-size: 12px;
    line-height: 1.5;
}

.alert-destructive {
    border-color: hsl(var(--red-400));
    background: hsl(var(--red-100));
    color: hsl(var(--red-800));
}

.alert-warning {
    border-color: hsl(var(--orange-400));
    background: hsl(var(--orange-100));
    color: hsl(var(--orange-800));
}

.alert-success {
    border-color: hsl(var(--green-400));
    background: hsl(var(--green-100));
    color: hsl(var(--green-800));
}

.alert-info {
    border-color: hsl(var(--blue-400));
    background: hsl(var(--blue-100));
    color: hsl(var(--blue-800));
}

/* ============================================================
   10. タブ
   ============================================================ */

.tabs {
    width: 100%;
}

.tabs-list {
    display: inline-flex;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--muted));
    padding: 3px;
    color: hsl(var(--muted-foreground));
}

.tab-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius);
    padding: 3px 10px;
    height: 22px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: hsl(var(--muted-foreground));
}

.tab-trigger:hover {
    background: hsl(var(--muted) / 0.8);
    color: hsl(var(--foreground));
}

.tab-trigger.active {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.tab-content {
    margin-top: 16px;
}

/* ============================================================
   11. テーブル
   ============================================================ */

.table-wrapper {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow-x: auto;
}

.card .table-wrapper {
    border: none;
    border-radius: 0;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.table thead {
    background: hsl(var(--primary));
}

.table th,
.table td {
    border-top: 1px solid hsl(var(--border));
    border-right: 1px solid hsl(var(--border));
    vertical-align: middle;
    white-space: nowrap;
    color: hsl(var(--foreground));
}

.table th {
    padding: 4px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.table td {
    max-width: 300px;
    padding: 2px 8px;
    line-height: 1.5;
    background: hsl(var(--card));
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 共通: 一覧テーブルの日付/日時列。各画面で日付列の th / td に付与する */
.table th.col-datetime,
.table td.col-datetime {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

.table th:first-child,
.table td:first-child {
    border-left: none;
}

.table th:last-child,
.table td:last-child {
    border-right: none;
}

.table thead tr:first-child th {
    border-top: none;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover td {
    background: hsl(var(--accent));
}

.table-actions {
    display: flex;
    gap: var(--gap-small);
    justify-content: center;
}

.table td .checkbox,
.table th .checkbox {
    display: block;
    margin-top: 2px;
}

.table td .btn,
.table th .btn {
    margin: 0;
}

.table td .badge,
.table th .badge {
    margin: 0;
}

.table td svg,
.table th svg {
    margin: 0;
}

/* スクロール式テーブル */
.table-scroll {
    max-height: 400px;
    overflow: auto;
    border-radius: var(--radius);
}

.table-scroll .table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: hsl(var(--muted));
    backdrop-filter: blur(8px);
}

/* ページネーション */
.table-wrapper+.table-pagination {
    border-top: 1px solid hsl(var(--border));
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    font-size: 13px;
    color: hsl(var(--foreground));
}

/* 件数表示（例: 「1 - 2 件を表示（全 2件）」）。テーブル系画面で共通利用する */
.table-pagination-info {
    font-size: 13px;
    color: hsl(var(--foreground));
}

.table-pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
}

.table-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: hsl(var(--foreground));
}

.table-pagination-btn:hover:not(:disabled) {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

.table-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-pagination-btn.active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.table-page-size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-page-size select {
    height: 28px;
    padding: 3px 8px;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    font-size: 13px;
    font-family: inherit;
}

/* ============================================================
   12. ダイアログ（モーダル）
   ============================================================ */

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    padding: 16px;
}

.dialog-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dialog {
    position: relative;
    z-index: 50;
    width: 100%;
    max-width: 512px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--gray-700));
    border-radius: var(--radius);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    transition: transform 0.2s;
}

.dialog-overlay.open .dialog {
    transform: scale(1);
}

.dialog-header {
    padding: 24px 24px 0;
}

.dialog-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 4px 4px 4px;
}

.dialog-description {
    margin-top: 8px;
    margin-left: 2px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.dialog-content {
    padding: 24px;
}

.dialog-footer {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

@media (min-width: 640px) {
    .dialog-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

.dialog-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    color: hsl(var(--foreground));
}

.dialog-close:hover {
    opacity: 1;
}

/* ============================================================
   13. ドロップダウンメニュー
   ============================================================ */

.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================================
   14. ヘッダー
   ============================================================ */

.header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 100;
    height: var(--header-height);
    background: hsl(var(--background));
    border-bottom: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(var(--main-margin) * 0.5);
    transition: left 0.2s ease;
}

.sidebar.collapsed~.header,
.header.sidebar-collapsed {
    left: var(--sidebar-collapsed-width);
}

.header-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    padding: 0 12px 0 2px;
    gap: 8px;
}

.header-client-area {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--sidebar-foreground));
}

/* メニュー開閉ボタン */
.sidebar-menu-btn {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-card);
    color: hsl(var(--muted-foreground));
    transition: all 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
}

.sidebar-menu-btn:hover {
    background: hsl(var(--navy-500) / 0.1);
    color: hsl(var(--foreground));
}

.sidebar-menu-btn svg {
    width: 18px;
    height: 18px;
}

/* サイドバーオーバーレイ */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 104;
}

.sidebar-overlay.active {
    display: block;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content:end;
    flex:1;
    margin: 0 32px;
}

/* ヘッダー中央のロゴ画像。ヘッダー高に収める */
.header-center-img {
    height: 32px;
    width: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-user-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--sidebar-foreground));
}

.header-user-role {
    font-size: 11px;
    font-weight: 500;
    color: hsl(var(--sidebar-foreground));
    white-space: nowrap;
}

.header-logout-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    transition: all 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
}

.header-logout-btn:hover {
    background: hsl(var(--navy-100));
}

.header-logout-btn svg {
    width: 16px;
    height: 16px;
}

/* パンくず */
.header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 6px;
    font-size: 13px;
    line-height: 1;
    overflow: hidden;
}

.header-breadcrumb-item {
    display: flex;
    align-items: center;
    height: 24px;
    color: hsl(var(--sidebar-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.header-breadcrumb-sep {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: hsl(var(--sidebar-foreground));
    opacity: 0.8;
}

/* ============================================================
   15. サイドバー
   ============================================================ */

   .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-background);
    border-right: 1px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    z-index: 105;
    overflow-x: hidden;
    overflow-y: visible;
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* ブランド */
.sidebar-brand-section {
    display: flex;
    align-items: center;
    height: var(--header-height);
    padding: 0 14px;
    border-bottom: 1px solid hsl(var(--border));
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-brand-logo {
    width: 30px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
}

.sidebar-brand-name {
    font-size: 11px;
    font-weight: 700;
    width: 136px;
    letter-spacing: -0.15em;
    white-space: nowrap;
    overflow: hidden;
    color: hsl(var(--company-color));
    line-height: 1.4;
}

.sidebar-brand-company-name {
    font-size: 11px;
    font-weight: 700;
    margin-left: -1px;
    margin-bottom: 2px;
    width: 136px;
    letter-spacing: -0.18em;
    white-space: nowrap;
    overflow: hidden;
    color: hsl(var(--company-color));
    line-height: 1.3;
}

.sidebar.collapsed .sidebar-brand {
    display: none;
}

/* サイドバーコンテンツ */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
}

.sidebar.collapsed .sidebar-content {
    padding: 12px 4px;
}

/* サイドバーフッター */
.sidebar-footer {
    padding: 10px 14px;
    border-top: 1px solid hsl(var(--border));
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.sidebar-copyright {
    font-size: 11px;
    font-weight: 500;
    color: hsl(var(--sidebar-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    line-height: 1.6;
}

.sidebar.collapsed .sidebar-footer {
    display: none;
}

/* サイドバーナビ */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    height: 30px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--sidebar-foreground));
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    line-height: 1;
}

.sidebar-nav-item:hover {
    background: hsl(var(--primary) / 0.8);
    color: hsl(var(--sidebar-foreground));
}

.sidebar-nav-item.active {
    background: hsl(var(--primary));
    border: 1px solid hsl(var(--border));
    font-weight: 600;
}

.sidebar-nav-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
    margin-top: 1px;
}

.sidebar-nav-item.active .sidebar-nav-item-icon {
    opacity: 1;
}

.sidebar-nav-item-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-nav-item-text {
    display: none;
}

.sidebar.collapsed .sidebar-nav-item {
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border-radius: 6px;
}

.sidebar.collapsed .sidebar-nav {
    gap: 2px;
}

.sidebar.collapsed .badge {
    display: none;
}

/* ツールチップ */
.sidebar-tooltip {
    position: absolute;
    left: calc(var(--sidebar-collapsed-width) + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s, visibility 0.12s;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.sidebar.collapsed .sidebar-nav-item:hover .sidebar-tooltip,
.sidebar.collapsed .sidebar-toggle:hover .sidebar-tooltip {
    opacity: 1;
    visibility: visible;
    position: fixed;
    left: calc(var(--sidebar-collapsed-width) + 6px);
    top: var(--tooltip-y, 50vh);
    transform: translateY(-50%);
}

/* サイドバーグループアコーディオン */
.sidebar-nav-group {
    display: flex;
    flex-direction: column;
}

.sidebar-nav-group-toggle {
    justify-content: flex-start;
}

.sidebar-nav-group-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-left: auto;
    color: hsl(var(--sidebar-foreground));
    opacity: 0.5;
    transition: transform 0.2s;
}

.sidebar-nav-group.open .sidebar-nav-group-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.sidebar.collapsed .sidebar-nav-group-chevron {
    display: none;
}

.sidebar-sub-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 17px;
    padding-left: 12px;
    border-left: 1px solid hsl(var(--border));
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s ease, opacity 0.2s ease;
    opacity: 0;
}

.sidebar-nav-group.open .sidebar-sub-nav {
    max-height: 500px;
    padding-top: 3px;
    padding-bottom: 4px;
    opacity: 1;
}

.sidebar.collapsed .sidebar-sub-nav {
    display: none;
}

.sidebar-sub-item {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--sidebar-foreground));
    text-decoration: none;
    border-radius: var(--radius);
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.12s;
}

.sidebar-sub-item:hover {
    background: hsl(var(--primary) / 0.8);
}

.sidebar-sub-item.active {
    background: hsl(var(--primary));
    border: 1px solid hsl(var(--border));
    opacity: 1;
    font-weight: 500;
}

.sidebar-sub-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* サイドバーセクション */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-section+.sidebar-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid hsl(var(--border));
}

.sidebar-section-title {
    padding: 2px 10px 6px;
    font-size: 10px;
    font-weight: 600;
    color: hsl(var(--sidebar-foreground));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-section-title {
    display: none;
}

.sidebar.collapsed .sidebar-section+.sidebar-section {
    margin-top: 8px;
    padding-top: 8px;
}

/* ============================================================
   16. メインコンテンツ
   ============================================================ */

.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    min-width: 786px;
    padding: 12px var(--main-margin) 12px var(--main-margin);
    transition: margin-left 0.2s ease;
    background: hsl(var(--muted));
}

.sidebar.collapsed~.main-content,
.main-content.sidebar-collapsed {
    margin-left: var(--sidebar-collapsed-width);
}

.group-page-menu {
    position: fixed;
    top: var(--header-height);
    left: var(--sidebar-width);
    right: 0;
    height: var(--group-menu-height);
    border-bottom: 1px solid hsl(var(--border));
    padding: 2px;
    background: #fff;
    overflow: hidden;
    transition: left 0.2s ease;
    z-index: 10;
}

.main-content.with-group-menu {
    margin-top: calc(var(--header-height) + var(--group-menu-height));
    min-height: calc(100vh - var(--header-height) - var(--group-menu-height));
}

.sidebar.collapsed~.group-page-menu {
    left: var(--sidebar-collapsed-width);
}

/* グループドロップダウンメニュー */
.sidebar-nav-item-dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-menu.open {
    display: flex;
}

.dropdown-menu-item.active {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* グループセレクト */
.group-selector {
    padding: 8px 12px 8px 28px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-color: white;
    color: hsl(var(--foreground));
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"/></svg>");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px 16px;
    padding-right: 28px;
}

.group-selector:hover {
    border-color: hsl(var(--ring));
}

.group-selector:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.1);
}

.group-page-menu .group-selector {
    background-color: white;
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

/* ページ表示切り替え */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* ============================================================
   17. ページヘッダー
   ============================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    min-height: 28px;
    flex-wrap: wrap;
}

/* ページタイトルと補足を横並びにする */
.page-title-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.page-title {
    margin-left: 2px;
    font-size: 14px;
    text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
}

.page-subtitle {
    margin-left: 12px;
    font-size: 12px;
    color: black;
    line-height: 1.8;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ============================================================
   18. アコーディオン
   ============================================================ */

.accordion-trigger svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.accordion-item.open .accordion-trigger svg {
    transform: rotate(180deg);
}

.accordion-item.open .accordion-content {
    max-height: 600px;
}

/* ============================================================
   19. プログレスバー
   ============================================================ */

.progress {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 9999px;
    background: hsl(var(--secondary));
}

/* ============================================================
   20. セパレーター
   ============================================================ */

/* ============================================================
   21. アバター
   ============================================================ */

/* ============================================================
   22. トースト通知
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-card);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    min-width: 260px;
    max-width: 380px;
    pointer-events: all;
    animation: toast-in 0.25s ease;
    transition: opacity 0.2s, transform 0.2s;
}

.toast.hiding {
    opacity: 0;
    transform: translateX(20px);
}

.toast-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.toast-description {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: color 0.15s;
}

.toast-close:hover {
    color: hsl(var(--foreground));
}

.toast-success {
    border-left: 4px solid hsl(var(--green-600));
}

.toast-success .toast-icon {
    color: hsl(var(--green-600));
}

.toast-error {
    border-left: 4px solid hsl(var(--red-500));
}

.toast-error .toast-icon {
    color: hsl(var(--red-500));
}

.toast-warning {
    border-left: 4px solid hsl(var(--yellow-500));
}

.toast-warning .toast-icon {
    color: hsl(var(--yellow-500));
}

.toast-info {
    border-left: 4px solid hsl(var(--blue-500));
}

.toast-info .toast-icon {
    color: hsl(var(--blue-500));
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   23. スペーシングユーティリティ
   ============================================================ */

/* margin */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-6 { margin: 24px; }
.m-8 { margin: 32px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* padding */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

/* gap */
.gap-0 { gap: 0; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }

/* ============================================================
   24. Flexbox ユーティリティ
   ============================================================ */

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

/* ============================================================
   25. Grid ユーティリティ
   ============================================================ */

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================================
   26. タイポグラフィ
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 15px;
}

.text-xs {
    font-size: 11px;
    line-height: 14px;
}

.text-sm {
    font-size: 12px;
    line-height: 16px;
}

.text-base {
    font-size: 13px;
    line-height: 18px;
}

.text-lg {
    font-size: 15px;
    line-height: 22px;
}

.text-xl {
    font-size: 18px;
    line-height: 26px;
}

.text-2xl {
    font-size: 22px;
    line-height: 30px;
}

.text-3xl {
    font-size: 28px;
    line-height: 36px;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-destructive {
    color: hsl(var(--destructive));
}

/* ============================================================
   27. カラーユーティリティ（主要なもの）
   ============================================================ */

.border-border {
    border-color: hsl(var(--border));
}

/* ============================================================
   28. サイズ・表示ユーティリティ
   ============================================================ */

.min-h-screen {
    min-height: 100vh;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.border {
    border: 1px solid hsl(var(--border));
}

.border-0 {
    border: none;
}

.border-t {
    border-top: 1px solid hsl(var(--border));
}

.border-b {
    border-bottom: 1px solid hsl(var(--border));
}

/* ============================================================
   29. モバイル対応（@media queries）
   ============================================================ */

@media (max-width: 768px) {

    .sidebar-toggle {
        display: none;
    }

    /* モバイル: 左へ隠す */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease, width 0.2s ease;
        width: var(--sidebar-width) !important;
        z-index: 105;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* collapsed状態をモバイルでフルサイズにリセット */
    .sidebar.collapsed,
    .sidebar.collapsed.mobile-open {
        width: var(--sidebar-width) !important;
    }

    .sidebar.collapsed .sidebar-brand {
        display: flex !important;
    }

    .sidebar.collapsed .sidebar-brand-name,
    .sidebar.collapsed .sidebar-brand-company-name {
        display: block !important;
    }

    .sidebar.collapsed .sidebar-content {
        padding: 12px 10px !important;
    }

    .sidebar.collapsed .sidebar-footer {
        display: block !important;
    }

    .sidebar.collapsed .sidebar-section-title {
        display: block !important;
        opacity: 0.45 !important;
    }

    .sidebar.collapsed .sidebar-nav-item {
        justify-content: flex-start !important;
        padding: 0 10px !important;
        width: 100% !important;
        height: 36px !important;
        margin: 0 !important;
        gap: 9px !important;
        border-radius: 5px !important;
    }

    .sidebar.collapsed .sidebar-nav-item-text {
        display: block !important;
    }

    .sidebar.collapsed .sidebar-nav-group-chevron {
        display: block !important;
    }

    .sidebar.collapsed .sidebar-sub-nav {
        display: flex !important;
    }

    .sidebar.collapsed .sidebar-tooltip {
        display: none !important;
    }

    .sidebar.collapsed .sidebar-nav {
        gap: 1px !important;
    }

    /* ヘッダーは左端から */
    .header,
    .header.sidebar-collapsed {
        left: 0 !important;
        padding: 0 calc(var(--main-margin) * 0.2);
    }

    .header-center {
        display: none;
    }

    .header-user {
        display: none;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 12px calc(var(--main-margin) * 0.5) 12px calc(var(--main-margin) * 0.5);
    }

    /* グループメニューバーは左端から */
    .group-page-menu,
    .sidebar.collapsed~.group-page-menu {
        left: 0 !important;
        padding: 2px calc(var(--main-margin) * 0.5);
    }

    /* ページヘッダー縦積み */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-actions {
        width: 100%;
    }

    /* KPIグリッド */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* KPIアイコン非表示 */
    .kpi-icon {
        display: none;
    }

    /* タブ折り返し */
    .tabs-list {
        flex-wrap: wrap;
        height: auto;
        padding: 4px;
    }

    .tab-trigger {
        flex: 1;
        min-width: 60px;
    }

    /* グリッド */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .toast {
        min-width: unset;
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   30. コピペコントロール
   ============================================================ */

.copy-row>.btn {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   31. セマンティックカラーユーティリティ
   ============================================================ */

.text-blue-600 {
    color: hsl(var(--blue-600));
}

.text-blue-800 {
    color: hsl(var(--blue-800));
}

.text-green-600 {
    color: hsl(var(--green-600));
}

.text-green-800 {
    color: hsl(var(--green-800));
}

.text-red-600 {
    color: hsl(var(--red-600));
}

.text-red-800 {
    color: hsl(var(--red-800));
}

.text-yellow-600 {
    color: hsl(var(--yellow-600));
}

.text-yellow-800 {
    color: hsl(var(--yellow-800));
}

.text-navy-600 {
    color: hsl(var(--navy-600));
}

.text-navy-800 {
    color: hsl(var(--navy-800));
}

.text-gray-500 {
    color: hsl(var(--gray-500));
}

.text-gray-600 {
    color: hsl(var(--gray-600));
}

/* ============================================================
   デュアルリスト（グループ編集・スケジュール編集で共用）
   ============================================================ */

.dual-list {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 88px minmax(240px, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--gap-small);
    align-items: stretch;
}

.dual-list-head {
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--foreground));
    padding: 2px 2px 0;
    align-self: end;
}

.dual-list-filter {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.listbox {
    height: 200px;
    border: 1px solid hsl(var(--input));
    background: hsl(var(--card));
    overflow: auto;
    padding: 4px;
    border-radius: var(--radius);
}

.listbox .list-item {
    padding: 4px 6px;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 13px;
    color: hsl(var(--foreground));
}

.listbox .list-item:hover {
    background: hsl(var(--accent));
}

.listbox .list-item.selected {
    background: hsl(var(--blue-500));
    color: #fff;
}

.middle-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: center;
    justify-self: center;
}

@media (max-width: 980px) {
    .dual-list {
        grid-template-columns: 1fr;
    }
}

.attach-row {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    font-size: 13px;
    padding: 3px 0;
}

.attach-row-pending {
    color: hsl(var(--muted-foreground));
}

/* 編集画面グリッド共通 */
/* edit-grid を縦に積むラッパー（行間 2px） */
.edit-grid-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.edit-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--gap-small);
    align-items: start;
}

.edit-label {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-card);
    background: hsl(var(--navy-100));
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.edit-grid p {
    font-size:12px;
    color:hsl(var(--muted-foreground));
    margin-top:4px;
    margin-bottom:4px;
    margin-left:4px;
}

.required {
    color: hsl(var(--destructive));
}

/* パスワード表示切替（目アイコン）ボタン。入力枠の縦中央に配置する。
   親要素に position:relative を付けること。flex 中央寄せで SVG のベースライン余白を消す。 */
.pwd-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
}

/* ============================================================
   28. 共通コンポーネント（インライン集約）
   ============================================================ */

/* テーブルのローディング表示（JS で display を切り替える） */
.table-loading {
    display: none;
    padding: 40px;
    text-align: center;
}

.table-loading .spinner {
    margin: 0 auto;
}

/* テーブル空状態セル（データなし行の td に付与） */
.table-empty {
    text-align: center;
    padding: 32px;
    color: hsl(var(--muted-foreground));
}

/* 操作列の削除アイコン（赤）。btn btn-ghost と併用する */
.btn-ghost-danger {
    color: hsl(var(--destructive));
}

.btn-ghost-danger:hover {
    background: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive));
}