/* ============================================================
   pos-theme.css — MagicSystem レジ・勤怠画面テーマ
   ととレジ（tomiso）のレイアウトを踏襲、配色は濃紺・青・黄色で統一。
   ============================================================ */

:root {
    --ms-navy: #0f1f3d;        /* 濃紺（ヘッダー・強調枠） */
    --ms-blue: #1d4ed8;        /* 青（インタラクティブ要素） */
    --ms-blue-light: #3b82f6;
    --ms-blue-pale: #eff6ff;
    --ms-yellow: #eab308;      /* 黄色（アクセント・強調） */
    --ms-yellow-dark: #a16207;
    --ms-yellow-pale: #fef9c3;
    --ms-bg-panel: #eef2f9;
    --ms-radius-md: 0.6em;
    --ms-radius-lg: 0.9em;
    --ms-radius-pill: 999px;
    --ms-shadow-sm: 0 2px 8px rgba(15, 31, 61, .1);
}

/* 部門タブの並び（行間・列間を確保）。スクロールしても常に見えるヘッダー扱い。
   以前はpadding-block(0.5rem)とmargin-block(-0.5rem)を打ち消し合わせて上下の
   余白をゼロ調整していたが、タブが2行以上に折り返すとTailwindのspace-y-4が
   付与する下マージンまで打ち消してしまい、次のコンテンツ（商品グリッド）と
   重なるバグになっていた。marginは持たせず、paddingのみで内側の余白を確保する。 */
.ms-dept-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f9fafb;
    padding-block: 0.5rem;
}
.dark .ms-dept-tabs { background: rgb(17 24 39); }

/* カート表のヘッダー行（商品/数量/値引/金額）。カード内スクロールでも常に見える。 */
.ms-cart-thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.dark .ms-cart-thead th { background: rgb(31 41 55); }

/* 部門タブ・フィルター（背景色ボタン） */
.ms-pill {
    border-radius: 0.375rem;
    padding: 0.5em 1.15em;
    font-size: 0.9rem;
    font-weight: bold;
    border: none;
    background: var(--ms-navy);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--ms-shadow-sm);
    transition: all .15s;
}
.ms-pill:hover { background: var(--ms-blue); }
.ms-pill.active {
    background: var(--ms-yellow);
    color: var(--ms-navy);
}
.ms-pill.active:hover { background: var(--ms-yellow); }

/* 商品カード */
.ms-item-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75em 1em;
    border: 2px solid #ddd;
    border-radius: var(--ms-radius-md);
    background: #fff;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all .15s;
}
.dark .ms-item-card { background: rgb(31 41 55); border-color: rgb(55 65 81); }
.ms-item-card:hover {
    border-color: var(--ms-blue);
    background: var(--ms-blue-pale);
}
.dark .ms-item-card:hover { background: rgba(29, 78, 216, .2); }
.ms-item-card .ms-item-name {
    font-weight: bold;
    font-size: 0.95rem;
}
.ms-item-card .ms-item-price {
    font-weight: bold;
    color: var(--ms-yellow-dark);
    margin-top: 0.2em;
}

/* 数量 +/- ボタン（円形） */
.ms-btn-qty {
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    border: 2px solid var(--ms-blue);
    background: #fff;
    color: var(--ms-blue);
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.dark .ms-btn-qty { background: rgb(31 41 55); }
.ms-btn-qty:hover { background: var(--ms-blue); color: #fff; }

/* プライマリボタン（大きめ・タップしやすい）。幅は呼び出し側で指定（例: Tailwindのw-full）。 */
.ms-btn-primary {
    display: inline-block;
    padding: 0.65em 1.4em;
    background: var(--ms-navy);
    color: #fff;
    border: none;
    border-radius: var(--ms-radius-md);
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.ms-btn-primary:hover { background: var(--ms-blue); }
.ms-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* セカンダリボタン（アウトライン） */
.ms-btn-secondary {
    display: inline-block;
    padding: 0.65em 1.4em;
    background: #fff;
    color: var(--ms-navy);
    border: 2px solid var(--ms-navy);
    border-radius: var(--ms-radius-md);
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
}
.dark .ms-btn-secondary { background: rgb(31 41 55); }
.ms-btn-secondary:hover { background: var(--ms-navy); color: #fff; }
.ms-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* アクセントボタン（黄色地）。休憩開始/終了など、主要操作(ms-btn-primary)とは別に注意を引きたい操作向け。 */
.ms-btn-accent {
    display: inline-block;
    padding: 0.65em 1.4em;
    background: var(--ms-yellow);
    color: var(--ms-navy);
    border: none;
    border-radius: var(--ms-radius-md);
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.ms-btn-accent:hover { background: var(--ms-yellow-dark); color: #fff; }
.ms-btn-accent:disabled { opacity: .5; cursor: not-allowed; }

/* 数値入力欄（数量・値引等）。Filamentの.fi-inputはborder-style:noneをリセットで
   持っているため、Tailwindのborder-*ユーティリティだけでは枠線が出ない。
   ここで明示的に枠線を持つ入力欄スタイルを定義し、fi-inputと併用する。 */
.ms-input {
    border: 2px solid #d1d5db;
    border-radius: var(--ms-radius-md);
    background: #fff;
    transition: border-color .15s;
}
.dark .ms-input { border-color: rgb(75 85 99); background: rgb(55 65 81); }
.ms-input:focus { border-color: var(--ms-blue); outline: none; }
.ms-input:disabled { opacity: .5; }
/* 表形式の数値セル入力（数量・値引等）向け。中央寄せ・太字で数字を見やすく。 */
.ms-input-num { font-weight: bold; text-align: center; }

/* 金額強調 */
.ms-price { color: var(--ms-yellow-dark); font-weight: bold; }

/* 削除ボタン（赤地に白抜き文字） */
.ms-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 0.35em;
    background: #dc2626;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    transition: background .15s;
}
.ms-btn-delete:hover { background: #b91c1c; }

/* 打刻画面などの大型丸ボタン */
.ms-btn-tap {
    border-radius: var(--ms-radius-md);
    font-weight: bold;
    padding: 1em;
    color: #fff;
    transition: opacity .15s;
}
.ms-btn-tap:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   POSレジ画面レイアウト（商品ボタン＋カートの横並び）
   Tailwindの任意値クラス(flex-[2]等)はFilamentの事前ビルド済みCSSに
   含まれず効かないため、レイアウトに関わる部分は素のCSSで組む。

   ページ全体のスクロールに頼るとFilament側のレイアウト（どの要素が
   実際のスクロールコンテナか）に挙動が左右されるため、商品エリアと
   カートをそれぞれ「高さ固定・内部スクロール」の独立ペインにし、
   sticky要素はその内部スクロールに対して効かせる（外側のページ自体は
   スクロールしない前提）。
   ============================================================ */
.ms-pos-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.5rem;
    height: calc(100vh - 11rem);
    min-height: 420px;
}
.ms-pos-products {
    flex: 1 1 320px;
    min-width: 280px;
    height: 100%;
    overflow-y: auto;
}
.ms-pos-cart-col {
    flex: 2 1 480px;
    min-width: 420px;
    height: 100%;
    overflow-y: auto;
}

/* ログイン画面ブランドヘッダー */
.ms-login-brand {
    text-align: center;
    padding: 1.5rem 1rem 0;
}
.ms-login-brand .ms-brand-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--ms-navy);
}
.ms-login-brand .ms-brand-tagline {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.2rem;
}

/* ============================================================
   店舗ダッシュボード（top.php 準拠）
   ============================================================ */
.ms-dash {
    max-width: 720px;
    margin: 0 auto;
}
.ms-dash-header {
    text-align: center;
    padding: 0.5em 0 1em;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 1em;
}
.ms-dash-header .ms-dash-store {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--ms-navy);
}
.ms-dash-header .ms-dash-date {
    font-size: 0.85em;
    color: #888;
    margin-top: 0.2em;
}

.ms-dash-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
    margin-bottom: 1.2em;
}
.ms-dash-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6em;
    margin-bottom: 1.2em;
}
.ms-dash-card {
    background: #fff;
    border-radius: var(--ms-radius-lg);
    border: 2px solid #e0e0e0;
    padding: 0.8em 1em;
    text-align: center;
    box-shadow: var(--ms-shadow-sm);
}
.dark .ms-dash-card { background: rgb(31 41 55); border-color: rgb(55 65 81); }
.ms-dash-card.main {
    grid-column: 1 / -1;
    border-color: var(--ms-navy);
    background: linear-gradient(135deg, var(--ms-navy), var(--ms-blue));
    color: #fff;
}
.ms-dash-card .ms-dash-label {
    font-size: 0.7em;
    opacity: .75;
    margin-bottom: 0.2em;
}
.ms-dash-card.main .ms-dash-label { color: #fff; }
.ms-dash-card .ms-dash-value {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.1;
    color: var(--ms-blue);
}
.ms-dash-card.main .ms-dash-value { color: var(--ms-yellow); font-size: 2.2em; }
.ms-dash-card .ms-dash-sub {
    font-size: 0.72em;
    color: #888;
    margin-top: 0.3em;
}
.ms-dash-card.main .ms-dash-sub { color: rgba(255, 255, 255, .75); }

.ms-dash-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}
.ms-dash-navbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 1em 0.5em;
    border-radius: var(--ms-radius-lg);
    border: 2px solid var(--ms-navy);
    background: #fff;
    color: var(--ms-navy);
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    transition: all .15s;
    box-shadow: var(--ms-shadow-sm);
}
.dark .ms-dash-navbtn { background: rgb(31 41 55); }
.ms-dash-navbtn:hover { background: var(--ms-navy); color: #fff; }
.ms-dash-navbtn .ms-dash-navicon { font-size: 1.8em; line-height: 1; }
.ms-dash-navbtn.primary { background: var(--ms-navy); color: #fff; }
.ms-dash-navbtn.primary:hover { background: var(--ms-blue); }

.ms-dash-notice {
    margin: 1.2em 0 0;
    border-radius: var(--ms-radius-lg);
    overflow: hidden;
    box-shadow: var(--ms-shadow-sm);
}
.ms-dash-notice-title {
    background: var(--ms-navy);
    color: #fff;
    font-size: 0.82em;
    font-weight: bold;
    padding: 0.4em 0.9em;
    letter-spacing: .06em;
}
.ms-dash-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    padding: 0.8em 1em;
    background: var(--ms-yellow-pale);
    border-left: 4px solid var(--ms-yellow);
}
.dark .ms-dash-notice-item { background: rgba(234, 179, 8, .12); }
.ms-dash-notice-icon { font-size: 1.4em; flex-shrink: 0; }
.ms-dash-notice-head {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--ms-yellow-dark);
    margin-bottom: 0.35em;
}
.ms-dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}
.ms-dash-chip {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-yellow);
    color: var(--ms-navy);
    font-size: 0.78em;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.ms-dash-chip:hover { background: var(--ms-yellow-dark); color: #fff; }

/* ============================================================
   ユーザーメニューのアバター（右上）。Filament標準は黒丸＋イニシャルSVG画像。
   背景色はNavyAvatarProvider（イニシャルSVG自体をnavyで生成）で揃え、
   ここでは形状（角丸横長）と浮き出し効果のみ上書きする。
   object-fit:containでSVG（正方形・navy地）をレターボックス表示し、
   はみ出す左右をbackground-colorの同色navyでシームレスに繋げる。
   ============================================================ */
.fi-user-menu-trigger img.fi-avatar {
    width: 2.75rem;
    height: 2rem;
    border-radius: var(--ms-radius-md);
    background-color: var(--ms-navy);
    object-fit: contain;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .25),
        inset 0 -1px 2px rgba(0, 0, 0, .4),
        0 2px 4px rgba(0, 0, 0, .35);
}