/*
 * ヘッダー共通トークン（--header-height, --color-header, --color-header-text,
 * --font-family, --font-title-header）は、Keycloakカスタムログインテーマ側
 * docker/keycloak/themes/lgpf/login/resources/css/common.css の同名トークンと
 * 値を必ず一致させること（ログイン画面とアプリ画面でヘッダーの見た目を揃えるため）。
 * 一方だけ変更してズレた場合は HeaderDesignTokenConsistencyTest（mvn test）がFailする。
 */
:root {
    /* カラーパレット（デザインシステム.md §2-1 準拠） */
    --color-header: #0b1f3a;
    --color-primary-start: #2563eb;
    --color-primary-end: #4f46e5;
    --color-primary-hover: #1d4ed8;
    --color-primary: #2563eb;
    --color-text-main: #1f2a44;
    --color-text-sub: #6b7280;
    --color-error: #dc2626;
    --color-card-bg: #ffffff;
    --color-info-bg: #eef2f9;
    --color-table-head-bg: #f7f9fc;
    /* 下部タブ背景 */
    --color-segment-bg: #eef2f9;
    --color-border: #d7dde8;
    --color-bg-gradient: linear-gradient(135deg, #e8eefc 0%, #dfe8fb 100%);
    --color-hover-bg: #f1f5f9;
    --color-focus-ring: #93c5fd;
    --color-primary-bg: #e6efff;
    --color-header-text: #ffffff;
    --color-header-hover-overlay: rgba(255, 255, 255, 0.12);
    --color-dialog-overlay: rgba(15, 25, 45, .45);
    --color-error-bg: #fff8f8;
    /* デザインシステム.md §4-14：全画面エラーの円バッジ専用。--color-error-bgはエラーバナー(§4-4)の
       WCAG AA(4.5:1)文字コントラスト用に調整済みの値でカード背景と差がほぼ無いため、
       64pxアイコンバッジ（文字を伴わずアイコンとの非文字コントラストのみ要件）には別トークンで淡いピンクを確保する */
    --color-error-icon-bg: #fde8e8;
    --color-success: #16a34a;
    --color-warning: #b45309;
    --color-warning-bg: #fef3e2;
    --color-disabled-bg: #cbd5e1;
    --color-disabled-text: #94a3b8;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);

    /* メニューアイコン配色（デザインシステム.md §2-1 準拠） */
    --icon-menu-local: #2563eb;
    --icon-menu-biz: #16a34a;
    --icon-menu-external: #7c3aed;
    --icon-menu-default: #1f2a44;
    --icon-menu-logout: #dc2626;

    /* 画面既定背景（ログイン画面等は body.login-page でグラデーションに上書き） */
    --color-background: #F5F5F5;

    /* ヘッダー（ヘッダー.md「ヘッダーのスタイル定義」準拠） */
    --header-height: 60px;

    /* タイポグラフィ（デザインシステム.md §2-2 準拠） */
    --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-title-header: 700 16px/1.4 var(--font-family);
    --font-card-title: 700 16px/1.4 var(--font-family);
    --font-label: 700 13px/1.4 var(--font-family);
    --font-tab-top: 700 15px/1.4 var(--font-family);
    --font-body: 400 13px/1.6 var(--font-family);
    --font-button: 700 14px/1.4 var(--font-family);
    --font-table-head: 700 12px/1.4 var(--font-family);
    --font-badge: 700 11px/1.4 var(--font-family);
    --font-caption: 400 11px/1.4 var(--font-family);
    --font-error-title: 700 22px/1.4 var(--font-family);
    --font-error-reason: 400 15px/1.6 var(--font-family);

    /* スペーシング（デザインシステム.md §2-3 準拠） */
    --gap-unit: 12px;
    --grid-gap: 24px;
    --card-padding: 20px 24px;
    --stage-padding-y: 32px;
    --stage-padding-x: 40px;
    --stage-padding: var(--stage-padding-y) var(--stage-padding-x);
    --stage-padding-mobile: 24px 20px;
    --context-bar-padding-x: 14px;
    /* 注意事項／お知らせ一覧など「カード内スクロールで吸収する」領域が、
       残余スペース不足時に実質見えなくなるほど潰れないようにする最低保証高さ */
    --scroll-area-min-height: clamp(3rem, 8vh, 4.5rem);
    /* テーブルセルの上下余白（デザインシステム.md §2-3／§4-9 準拠） */
    --table-cell-padding-y: 12px;
    --table-cell-padding-y-compact: 6px;
    --table-cell-padding-x: 16px;
    /* 項目バリデーションエラー欄（デザインシステム.md §2-3/§4-4 準拠） */
    --field-error-gap: 2px;
    --field-error-height: 16px;

    /* 角丸・影（デザインシステム.md §2-4 準拠） */
    --radius-card: 12px;
    --radius-el: 8px;
    --shadow-card: 0 18px 40px rgba(20, 40, 80, .12);
    /* セグメントタブ選択中 */
    --shadow-bar: 0 4px 14px rgba(20, 40, 80, .08);
    --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-bar: 0 4px 14px rgba(20, 40, 80, .08);
    /* モーダル/ダイアログの浮き上がり影（デザインシステム.md §2-1・§4-15 準拠） */
    --shadow-pop: 0 24px 60px rgba(15, 25, 45, .28);
    --badge-local-admin-bg: #1e3a5f;
    --badge-local-admin-tx: #ffffff;
    --badge-local-user-bg: #dbeafe;
    --badge-local-user-tx: #1e40af;
    --badge-biz-admin-bg: #dcfce7;
    --badge-biz-admin-tx: #166534;
    --badge-biz-user-bg: #ccfbf1;
    --badge-biz-user-tx: #115e59;
    --badge-cat-system-bg: #e5e7eb;
    --badge-cat-system-tx: #374151;
    --badge-cat-local-bg: #dbeafe;
    --badge-cat-local-tx: #1e40af;
    --modal-width-s: min(480px, 92vw);
    --modal-width-m: min(680px, 92vw);
    /* モーダル幅（デザインシステム.md §4-15 準拠。利用規約表示.md 等の画面設計書から
       --modal-width-l を参照する。値の直書きを禁止し、本トークン経由で統一する） */
    --modal-width-l: min(920px, 92vw);
    --modal-height-form: min(640px, calc(100vh - 48px));
    --modal-height-compact: min(580px, calc(100vh - 48px));
    --modal-height-confirm: min(380px, calc(100vh - 48px));

    /* サイズ・アクセント（重複ハードコード解消用の共通トークン） */
    --accent-border-width: 4px;
    --size-header-control: 40px;
    --size-touch-target-min: 40px;
    --size-icon-badge: 32px;
    --size-context-icon: 34px;
}

* {
    box-sizing: border-box;
}

/* Edge's native reveal control duplicates the LGPF eye toggle. */
input[type="password"]::-ms-reveal {
    display: none;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-main);
    background-color: var(--color-background);
}

button {
    font-family: inherit;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* アクセシビリティ：キーボード操作時のフォーカスリング（デザインシステム.md §4-4/§5） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* カード見出しの円バッジアイコン（デザインシステム.md §4-5 準拠、全画面共通） */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-badge);
    height: var(--size-icon-badge);
    border-radius: 50%;
    font-size: 20px;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

/* ダッシュボード画面の背景（デザインシステム.md §2-1/§4-13準拠。業務画面は
   背景グラデーション（--color-bg-gradient）のみとし、無地の--color-backgroundにしない）。
   bodyはmin-height:100vhのみ指定し、直下のmainはflex:noneで内容の実寸高さのまま積み上げる。
   PowerBI表示領域の高さとスクロールは、各ダッシュボードの表示領域CSS／JSで制御する。 */
.dashboard-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-gradient);
}

.dashboard-main {
    flex: none;
    display: flex;
    flex-direction: column;
    padding: var(--gap-unit) var(--stage-padding-x) var(--stage-padding-y);
}

/* 視覚的に隠しつつスクリーンリーダーには読み上げさせるテキスト */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ページャ共通部品（デザインシステム.md §4-16 準拠） */
.pager {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-unit);
}

.pager__size {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pager__size label {
    font: var(--font-body);
    color: var(--color-text-sub);
}

.pager__size select {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-el);
    font: var(--font-body);
    color: var(--color-text-main);
    background: var(--color-card-bg);
}

.pager__size select:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

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

.pager__button {
    min-width: 24px;
    min-height: 32px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-main);
    font: var(--font-button);
    line-height: 1;
    cursor: pointer;
}

.pager__button:hover:not(:disabled) {
    color: var(--color-primary);
}

.pager__button:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
    background: transparent;
}

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

.pager__indicator {
    min-width: 32px;
    padding: 0 4px;
    text-align: center;
    font: var(--font-button);
    color: var(--color-text-sub);
}

@media (max-width: 1024px) {
    .pager {
        flex-direction: column;
        align-items: stretch;
    }
}