/* ============================================================
   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% 24;

        /* ミュート */
        --muted: 0 0% 95%;
        --muted-foreground: 0 0% 40%;

        /* 要素カラー */
        --menu-color: 0 0% 24%;
        --image-color: 220 30% 54%;
        --company-color: 222 63% 36%;
        --highlight-color: 210, 100%, 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%;

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

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

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

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

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

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

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

        /* フォント */
        --font-family: "Noto Sans JP", sans-serif; 
        --font-size: 13px;
        --font-weight: 500;
    }

    .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 {

}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight:var(--font-weight);
    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-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;
    line-height: 1.5;
}

.inline-controls label:has(input[type="radio"]),
.inline-controls label:has(input[type="checkbox"]) {
    font-family: var(--font-family);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: var(--font-weight);
    height: 28px;
    padding: 0px 12px 1px 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 {
    background: hsl(var(--navy-100));
    pointer-events: none;
    opacity: 0.7;
}

/* 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: hsl(var(--navy-400) / 0.1);
    color: hsl(var(--accent-foreground));
}

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

.btn-outline:hover {
    background: hsl(var(--navy-400) / 0.1);
    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(--navy-400) / 0.1);
    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: 11px;
}

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

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

.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: 1px;
}

.btn svg {
    margin-top: 2px;
}

/* ============================================================
    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: var(--font-size);
    font-weight:var(--font-weight);
    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 {
    background: hsl(var(--navy-100));
    cursor: not-allowed;
    opacity: 0.7;
}

/* テキストエリア */
.textarea {
    font-size: var(--font-size);
    font-weight:var(--font-weight);
    color: hsl(var(--foreground));
    min-height: 80px;
    height: auto;
    padding: 8px;
    resize: vertical;
}

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

textarea:disabled {
    background: hsl(var(--navy-100));
    cursor: not-allowed;
    opacity: 0.7;
}

/* セレクト */
.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: var(--font-size);
    font-weight:var(--font-weight);
    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 {
    background: hsl(var(--navy-100));
    cursor: not-allowed;
    opacity: 0.7;
}

/* ラベル */
.label {
    display: block;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    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;
    color: hsl(var(--navy-400));
}

.card-description {
    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: var(--font-weight);
}

.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: var(--font-weight);
    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: var(--font-size);
    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(--navy-100));
    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: var(--font-weight);
    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: var(--font-size);
}

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

.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: calc(var(--font-size) - 1px);
    font-weight: var(--font-weight);
    line-height: 1.5;
}

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

.table td div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.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;
    margin-top: -2px;
}

.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: var(--font-size);
    color: hsl(var(--foreground));
}

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

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

.table-pagination-btn:disabled {
    background: hsl(var(--navy-100));
    opacity: 0.7;
    cursor: not-allowed;
}

.table-pagination-btn.active {
    background: hsl(var(--navy-100));
    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: var(--font-size);
    font-weight: var(--font-weight);
    color: hsl(var(--foreground));
    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 {
    z-index: 1;
    padding-left: 8px;
    font-size: 16px;
    font-weight: bold;
    color: hsl(var(--foreground));
}

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

.dialog-content {
    padding: 24px;
}

.dialog-footer {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
}

.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: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    min-width: 786px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--navy-100));
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 calc((var(--main-margin) + 20px) * 0.5);
}

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

/* ヘッダーロゴ */
.header-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    padding-right: 14px;
    margin-right: 6px;
    border-right: none;
}

.header-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid hsl(var(--border));
    border-radius: 50%;
    padding: 4px 2px 4px 6px;
}

.header-logo-text {
    display: flex;
    flex-direction: column;
    margin-top: -2px;
}

.header-logo-title {
    margin-top: 2px;
    font-size: var(--font-size);
    font-weight: 700;
    letter-spacing: -0.06em;
    color: hsl(var(--navy-600));
    line-height: 1.2;
    white-space: nowrap;
}

.header-logo-company {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    /* letter-spacing: -0.12em; */
    color: hsl(var(--navy-600));
    line-height: 1.3;
    white-space: nowrap;
}

/* 中央：メインメニュー */
.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: visible;
}

.header-client-area {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid hsl(var(--border));
    height: calc(var(--header-height) - 6px);
    background: hsl(var(--white-200));
    border-radius: var(--radius-card);
    font-size: var(--font-size);
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--navy-600));
    letter-spacing: -0.08em;
}

@media (max-width: 768px) {
    .header-client-area { display: none; }
}

/* 右：ユーザー情報 */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

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

.header-user-name {
    font-size: var(--font-size);
    font-weight: var(--font-weigh);
    white-space: nowrap;
}

.header-user-role {
    font-size: 10px;
    font-weight: var(--font-weigh);
    /* color: hsl(var(--navy-600)); */
    white-space: nowrap;
}

.header-logout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 76px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-card);
    color: rgba(0, 0, 0, 0.72);
    transition: background 0.15s;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

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

.header-logout-btn svg {
    width: 16px;
    height: 16px;
    color: rgba(0, 0, 0, 0.58);
}

.header-logout-btn-text {
    font-size: calc(var(--font-size) - 1.5px);
    font-weight: 600;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.72);
}

/* ヘッダーナビ（group_menuと同デザイン・borderなし） */
.header-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 2px 3px 2px 3px;
    margin: 0 2px;
    border: 1px solid hsl(var(--border));
    height: calc(var(--header-height) - 6px);
    background: hsl(var(--white-200));
    border-radius: var(--radius-card);
}

.header-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 76px;
    height: 46px;
    padding: 0;
    background: transparent;
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: hsl(var(--foreground));
    border: none;
    flex-shrink: 0;
}

.header-nav-item:hover {
    background: hsl(var(--navy-50));
}

.header-nav-item.active,
.header-nav-dropdown.active > .header-nav-item {
    background: hsl(var(--navy-50));
    border: 1px solid hsl(var(--navy-150));
    font-weight: var(--font-weight);
}

.header-nav-item-icon {
    width: 16px;
    height: 16px;
    color: hsl(var(--foreground));
}

.header-nav-item.active .header-nav-item-icon,
.header-nav-dropdown.active > .header-nav-item .header-nav-item-icon {
    color: hsl(var(--foreground));
}

.header-nav-item-text {
    font-size: calc(var(--font-size) - 1.5px);
    font-weight: 600;
    white-space: nowrap;
    color: hsl(var(--foreground));
}

.header-nav-item.active .header-nav-item-text,
.header-nav-dropdown.active > .header-nav-item .header-nav-item-text {
    color: hsl(var(--foreground));
}

.header-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.header-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 136px;
    background: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-card);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 200;
}

.header-nav-dropdown-toggle {
    padding: 5px 6px 7px 6px;
}

.header-nav-dropdown:hover .header-nav-dropdown-menu {
    display: flex;
}

.header-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding: 0 14px;
    font-size: var(--font-size);
    font-weight: 600;
    color: hsl(var(--foreground));
    text-decoration: none;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background 0.12s;
}

.header-nav-dropdown-item:hover {
    background: hsl(var(--navy-50));
}

.header-nav-dropdown-item.active {
    background: hsl(var(--navy-100));
    font-weight: var(--font-weight);
}

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

   .main-content {
    margin-left: 0;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    padding: var(--main-margin) calc(var(--main-margin) + 20px);
    background: hsl(var(--gray-100));
}

.group-page-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: var(--group-menu-height);
    border-bottom: 1px solid hsl(var(--border));
    padding: 3px;
    background: hsl(var(--navy-50));
    overflow: hidden;
    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-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));
}

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

.page.active {
    display: block;
}

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

.page-header {
    /* margin-bottom: 20px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--main-margin);
    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-header p {
    display: flex;
    align-items: center;
    margin-top: 0px;
    color: hsl(var(--muted-foreground));
}

/* グループページ: page-title 先頭に挿入するグループ名スパン */
.page-title-group-prefix {
    z-index: 1;
    font-size: calc(var(--font-size) - 1px);
    font-weight: 600;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--white-200));
    padding: 5px 10px;
    margin-right: 15px;
    border-radius: 999px;
    color: hsl(var(--navy-400));
}

.page-title {
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: var(--font-size);
    font-weight: bold;
    color: hsl(var(--foreground));
}

.page-subtitle {
    display: flex;
    align-items: center;
    margin-left: 12px;
    font-size: calc(var(--font-size) - 1px);
    font-weight: var(--font-weight);
    color: hsl(var(--muted-foreground));
}

.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));
}

/* ============================================================
   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: var(--font-size);
    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; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.align-baseline { align-items: baseline; }

/* ============================================================
   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: var(--font-size); 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: var(--font-weight); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.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)); }

/* ============================================================
   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: var(--font-size);
    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;
}

.attach-row {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    font-size: var(--font-size);
    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-medium);
}

/* 編集画面グリッド共通 */
.edit-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: var(--gap-medium);
    align-items: start;
}

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

.edit-grid label:has(input[type="radio"]),
.edit-grid label:has(input[type="checkbox"]) {
    font-family: var(--font-family);
}

.edit-grid p {
    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));
}