/* =============================================================
   売上管理システム  スタイル（style.css）
   ・モバイル最優先（スマホで片手で見やすい）
   ・ネイビー（紺）×ゴールド（金）の上品な配色
   ・数字を大きく、一目で分かるレイアウト
   ============================================================= */

/* ----- 配色などの共通設定（ここを変えれば全体の色が変わる） ----- */
:root {
    --navy:        #1a2b4a;   /* 基調のネイビー */
    --navy-deep:   #111d33;   /* 濃いネイビー（背景の締め） */
    --navy-soft:   #25395e;   /* 少し明るいネイビー */
    --gold:        #c9a24b;   /* ゴールド */
    --gold-light:  #e3c982;   /* 明るいゴールド */
    --silver:      #c9ced6;   /* シルバー */
    --silver-light:#eef1f5;   /* 明るいシルバー */
    --serif: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --bg:          #f4f5f8;   /* 画面の背景 */
    --card:        #ffffff;   /* カードの背景 */
    --text:        #1f2733;   /* 基本の文字色 */
    --text-sub:    #6b7280;   /* 補助の文字色 */
    --line:        #e6e8ee;   /* 区切り線 */
    --danger:      #c0392b;   /* 削除など注意色 */
    --radius:      14px;      /* 角丸 */
    --shadow:      0 2px 10px rgba(17, 29, 51, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
                 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

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

/* ----- 上部の帯（ヘッダー） ----- */
.topbar {
    background: var(--navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; gap: 3px; }
.topbar-logo { display: block; height: 30px; width: auto; max-width: 190px; }
.brand-mark {
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    font-size: 1.05rem;
}
.brand-sub { font-size: 0.7rem; color: #c3cbdb; }

.topbar-right { display: flex; align-items: center; gap: 10px; }
.badge {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(227,201,130,0.4);
    color: var(--gold-light);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    white-space: nowrap;
}
.badge-admin { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); font-weight: 700; }
.logout-link { font-size: 0.8rem; color: #c3cbdb; }

.adminnav {
    display: flex;
    gap: 4px;
    padding: 0 8px 8px;
    overflow-x: auto;
}
.adminnav a {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: #d6dbe6;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}
.adminnav a:active { background: rgba(227,201,130,0.25); }

/* ----- 本文の幅 ----- */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

.page-head { margin: 8px 0 4px; }
.page-title { font-size: 1.4rem; margin: 0; }
.updated { color: var(--text-sub); font-size: 0.82rem; margin: 2px 0 0; }

/* ----- セクション ----- */
.section { margin-top: 22px; }
.section-title {
    font-size: 0.95rem;
    color: var(--navy);
    border-left: 4px solid var(--gold);
    padding-left: 10px;
    margin: 0 0 12px;
}
.section-title small { color: var(--text-sub); font-weight: normal; margin-left: 6px; }

/* ----- 大きな数字カード（今日いくら？が一目で） ----- */
.hero-card {
    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
    color: #fff;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.hero-card::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(201,162,75,0.35), transparent 70%);
}
.hero-card-month {
    background: linear-gradient(135deg, #2a2f3f, #3a3326);
}
.hero-tag {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--navy-deep);
    background: var(--gold-light);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
    font-weight: 700;
}
.hero-amount {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.hero-meta {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #d8def0;
}
.hero-meta strong { color: var(--gold-light); font-size: 1.05rem; }

/* ----- 小さな内訳カード（施術/店販/その他） ----- */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.mini-card {
    background: var(--card);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    box-shadow: var(--shadow);
}
.mini-label { display: block; font-size: 0.72rem; color: var(--text-sub); }
.mini-val { display: block; font-weight: 700; font-size: 0.95rem; margin-top: 2px; }

/* ----- 2カラム ----- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* 全店合計：横並びの数字カードが狭い画面で見切れないよう、文字と余白を調整 */
.two-col .hero-card { padding: 16px 14px; }
.two-col .hero-amount { font-size: clamp(1.35rem, 6vw, 2.2rem); }
.panel {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}
.panel-title { font-size: 0.85rem; color: var(--navy); margin: 0 0 8px; }

/* ----- 表 ----- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text);
    padding: 7px 4px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.data-table td {
    padding: 7px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--text-sub);
}
.data-table .num { text-align: right; color: var(--navy); font-weight: 700; white-space: nowrap; }
.ranking th { font-weight: 500; }

/* ----- カード型一覧（店舗別比較） ----- */
.store-cards { display: grid; gap: 12px; }
.store-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.store-card-head {
    background: var(--navy);
    color: var(--gold-light);
    padding: 10px 14px;
    font-weight: 700;
    font-size: 0.95rem;
}
.store-card-body { padding: 12px 14px; }
.sc-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.sc-row-month { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; }
.sc-label {
    flex: 0 0 44px;
    font-size: 0.75rem;
    color: var(--text-sub);
}
.sc-amt { font-size: 1.25rem; font-weight: 800; color: var(--navy); }
.sc-sub { margin-left: auto; font-size: 0.78rem; color: var(--text-sub); }
.store-card-foot {
    padding: 6px 14px 10px;
    font-size: 0.72rem;
    color: var(--text-sub);
    text-align: right;
}

/* ----- グラフ ----- */
.chart-wrap {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
}

/* ----- ボタン ----- */
.btn {
    display: inline-block;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}
.btn-primary { background: var(--navy); color: var(--gold-light); }
.btn-primary:active { background: var(--navy-deep); }
.btn-ghost { background: #e9ebf1; color: var(--text); }
.btn-block { display: block; width: 100%; }
.btn-small { padding: 7px 12px; font-size: 0.8rem; }
.btn-danger { background: #f5e3e1; color: var(--danger); }

/* ----- フォーム部品 ----- */
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: 0.8rem; color: var(--text-sub); margin-bottom: 5px; }
.field select, .field input[type="text"], .field input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
    font-family: inherit;
}
select { appearance: none; -webkit-appearance: none; background-image: none; }

/* =============================================================
   IBO ポータル（トップ画面）
   ============================================================= */
.portal-body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--navy), var(--navy-deep));
    color: #fff;
}
.portal {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 18px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.portal-head { text-align: center; margin-bottom: 26px; }
.portal-logo {
    display: inline-block;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.14em;
    color: var(--navy-deep);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    padding: 8px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.portal-title { font-size: 1.5rem; margin: 14px 0 4px; letter-spacing: 0.02em; }
.portal-sub { color: #c3cbdb; font-size: 0.9rem; margin: 0; }

.portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}
.portal-card {
    position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(227,201,130,0.25);
    border-radius: 16px;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: transform .12s ease, background .12s ease;
}
.portal-card:active { transform: scale(0.98); background: rgba(227,201,130,0.14); }
.portal-icon { font-size: 2.2rem; line-height: 1; color: var(--gold-light); }
.portal-icon svg { width: 44px; height: 44px; display: block; }

@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(22px) scale(0.96); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ログイン画面のロゴは軽くふわっと */
.login-logo-top .logo-img { animation: floatUp 1.2s cubic-bezier(.22,.61,.36,1) both; }

/* ===== イントロ演出：ロゴが画面いっぱいに浮き上がる ===== */
@keyframes introRise {
    0%   { opacity: 0; transform: translateY(46px) scale(0.72); filter: blur(16px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.intro {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 90% at 50% 45%, #1a2b4a 0%, #0c1729 70%);
    transition: opacity 0.8s ease;
}
.intro-logo { width: min(44vw, 380px); height: auto; animation: introRise 2s cubic-bezier(.2,.7,.2,1) both; }
.intro.intro-hide { opacity: 0; pointer-events: none; }

/* メニューはイントロ後に出す（reveal） */
.reveal { opacity: 0; transform: translateY(16px); }
body.ready .reveal { animation: fadeUp 0.7s ease forwards; }
body.ready .portal-head.reveal      { animation-delay: 0.05s; }
body.ready .cat-group.reveal:nth-of-type(1) { animation-delay: 0.20s; }
body.ready .cat-group.reveal:nth-of-type(2) { animation-delay: 0.32s; }
body.ready .cat-group.reveal:nth-of-type(3) { animation-delay: 0.44s; }
body.ready .cat-group.reveal:nth-of-type(4) { animation-delay: 0.56s; }
@media (prefers-reduced-motion: reduce) {
    .intro-logo, .login-logo-top .logo-img { animation: none; }
    .reveal { opacity: 1; transform: none; }
}

/* ===== カテゴリ見出し（シルバー・上品な書体＋ライン） ===== */
.cat-group { margin-top: 22px; }
.cat-label { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.cat-label::before, .cat-label::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,206,214,0.55), transparent);
}
.cat-label span {
    font-family: var(--serif);
    letter-spacing: 0.22em; font-size: 0.95rem; white-space: nowrap;
    background: linear-gradient(180deg, #ffffff, #aeb6c2);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== ナビボタン（シルバーのライン） ===== */
.cat-btns { display: grid; gap: 12px; }
.nav-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 16px; border-radius: 14px;
    border: 1px solid rgba(201,206,214,0.35);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    position: relative;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.nav-btn:active { transform: scale(0.985); background: rgba(201,206,214,0.12); border-color: rgba(238,241,245,0.6); }
.nav-ic { flex: 0 0 auto; color: var(--silver); }
.nav-ic svg { width: 30px; height: 30px; display: block; }
.nav-body { display: flex; flex-direction: column; }
.nav-title {
    font-family: var(--serif); letter-spacing: 0.08em; font-size: 1.12rem;
    background: linear-gradient(180deg, #ffffff, #c4cad3);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-desc { font-size: 0.74rem; color: #9aa6bf; margin-top: 2px; }
.nav-badge {
    margin-left: auto; font-size: 0.66rem; color: var(--silver);
    border: 1px solid rgba(201,206,214,0.4); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.portal-card-title { font-size: 1.05rem; font-weight: 700; color: var(--gold-light); }
.portal-card-desc { font-size: 0.76rem; color: #c3cbdb; line-height: 1.4; }
.portal-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.66rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
}
.portal-badge-link { background: rgba(227,201,130,0.25); color: var(--gold-light); }

/* ロゴ画像（背景透過のlogo.pngを表示・幅で大きさ指定） */
.logo-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.portal-head .logo-img { width: min(42%, 150px); }
.login-logo-top { text-align: center; margin-bottom: 18px; }
.login-logo-top .logo-img { width: min(72%, 240px); }
.portal-foot { margin-top: auto; padding-top: 26px; text-align: center; color: #8290ac; font-size: 0.72rem; }

/* 準備中カード */
.coming-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(227,201,130,0.25);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    margin-top: 10px;
}
.coming-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--navy-deep);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.coming-lead { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.coming-desc { color: #d8def0; font-size: 0.9rem; margin: 0 0 6px; }
.coming-note { color: #8290ac; font-size: 0.82rem; margin: 0 0 20px; }

@media (min-width: 600px) {
    .portal-title { font-size: 1.9rem; }
}

/* ----- ログイン画面 ----- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, var(--navy), var(--navy-deep));
}
.login-card {
    background: var(--card);
    border-radius: 18px;
    padding: 28px 22px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo .brand-mark { font-size: 1.6rem; color: var(--gold); display: block; }
.login-logo .brand-sub { color: var(--text-sub); font-size: 0.85rem; }

.login-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.login-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--line);
    background: #f3f4f7;
    border-radius: 10px;
    font-size: 0.88rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-sub);
}
.login-tab.is-active { background: var(--navy); color: var(--gold-light); border-color: var(--navy); font-weight: 700; }
.is-hidden { display: none; }
.login-back { display: block; text-align: center; margin-top: 18px; color: var(--text-sub); font-size: 0.85rem; }
.login-eyebrow {
    text-align: center; font-size: 0.72rem; letter-spacing: 0.28em;
    color: var(--gold); margin-bottom: 4px;
}
.login-module-title {
    font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.12em;
    text-align: center; margin: 0 0 4px; color: var(--navy);
}
.login-card { position: relative; }
.login-module-title + .alert, .login-module-title + form { margin-top: 18px; }
/* 見出し下の細い金線 */
.login-card .login-module-title::after {
    content: ""; display: block; width: 46px; height: 2px; margin: 10px auto 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 2px;
}

/* ===== ログイン画面：白ブロック無し・紺背景に直接配置 ===== */
.auth-page { margin: 0; background: var(--navy-deep); }
.auth-page .login-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: 360px;
    margin: 0 auto;
}
.auth-page .login-eyebrow { color: var(--gold-light); }
.auth-page .login-module-title {
    color: transparent;
    background: linear-gradient(180deg, #ffffff, #aeb6c2);
    -webkit-background-clip: text; background-clip: text;
}
.auth-page .login-module-title::after { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.auth-page .field-label { color: #c3cbdb; }
.auth-page .field input,
.auth-page .field select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,206,214,0.30);
    color: #fff;
}
.auth-page .field input::placeholder { color: #8290ac; }
.auth-page .field input:focus,
.auth-page .field select:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.10);
}
/* プルダウンの▼を明るく見せる */
.auth-page .field select { color: #fff; }
.auth-page .field select option { color: #1f2733; }
/* ログインボタンはゴールドで主役に */
.auth-page .btn-primary {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    color: var(--navy-deep);
}
.auth-page .btn-primary:active { background: var(--gold); }
.auth-page .login-back { color: #9aa6bf; }
.auth-page .alert-error { background: rgba(192,57,43,0.18); color: #ffb4ab; border-color: rgba(192,57,43,0.4); }

/* ===== マイページ：プレミアムなヘッダー ===== */
.member-hero {
    background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
    border: 1px solid rgba(201,206,214,0.18);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.member-hero::after {
    content: ""; position: absolute; right: -40px; top: -40px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(201,162,75,0.30), transparent 70%);
}
.member-hero-label { font-size: 0.78rem; color: #c3cbdb; }
.member-hero-amount { font-size: 2.4rem; font-weight: 800; line-height: 1.1; margin: 2px 0 6px; }
.member-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.member-chip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(201,206,214,0.25);
    border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; color: #d8def0;
}
.member-chip strong { color: var(--gold-light); margin-left: 4px; }
.member-greeting { font-family: var(--serif); letter-spacing: 0.06em; }

/* =============================================================
   発注管理
   ============================================================= */
.order-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-form .field { margin-bottom: 12px; }
.order-form input[type="number"], .order-form input[type="date"] {
    width: 100%; padding: 12px; border: 1px solid var(--line);
    border-radius: 10px; font-size: 1rem; font-family: inherit; background: #fff;
}
.order-total-preview {
    text-align: right; font-weight: 700; color: var(--navy);
    margin: 2px 0 12px; font-size: 1.05rem;
}
.order-cat {
    font-size: 0.85rem; color: var(--navy); margin: 16px 0 8px;
    padding-bottom: 4px; border-bottom: 2px solid var(--gold-light);
}
.order-list { display: grid; gap: 8px; }
.order-item {
    background: var(--card); border-radius: 10px; padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.order-item-main { display: flex; flex-direction: column; }
.order-item-name { font-weight: 700; }
.order-item-sup { font-size: 0.74rem; color: var(--text-sub); }
.order-item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-method { font-size: 0.78rem; color: var(--text-sub); }

.order-rec {
    background: var(--card); border-radius: 10px; padding: 12px 14px;
    box-shadow: var(--shadow); margin-bottom: 8px; position: relative;
}
.order-rec-head { display: flex; justify-content: space-between; align-items: baseline; }
.order-rec-name { font-weight: 700; }
.order-rec-name small { font-size: 0.7rem; color: var(--text-sub); font-weight: normal; margin-left: 4px; }
.order-rec-amt { font-weight: 800; color: var(--navy); }
.order-rec-meta { font-size: 0.76rem; color: var(--text-sub); margin-top: 4px; }
.order-rec-del { position: absolute; top: 10px; right: 12px; }
.order-rec-del .btn-small { padding: 4px 10px; font-size: 0.72rem; }

/* 申請ステータスのバッジ */
.req-status { font-size: 0.74rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.req-pending { background: #fff3d6; color: #9a6b00; }
.req-ok { background: #eef7ed; color: #2e7d32; }
.req-ng { background: #fdecea; color: var(--danger); }

/* ----- 各種カード ----- */
.upload-target, .store-switch {
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}
.upload-target strong { color: var(--navy); }
.store-switch .field { margin-bottom: 0; }

.csv-upload-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 14px 16px;
    border: 2px solid #f39c12;
    border-left: 8px solid #d35400;
    border-radius: 12px;
    background: #fff4df;
    color: #7a3300;
    box-shadow: 0 10px 24px rgba(211, 84, 0, 0.14);
    font-size: 1rem;
    line-height: 1.45;
}
.csv-upload-warning strong {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: #d35400;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.csv-upload-warning span {
    font-weight: 850;
}

.upload-form { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.filepick {
    display: block;
    border: 2px dashed var(--gold);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    margin-bottom: 14px;
    color: var(--navy);
    cursor: pointer;
}
.filepick input[type="file"] { display: block; margin: 8px auto 0; width: 100%; }
.filepick-label { font-weight: 700; }

.confirm-card, .done-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.confirm-lead { font-size: 1.05rem; margin: 0 0 14px; }
.confirm-store { color: var(--gold); font-weight: 800; }
.confirm-table, .map-form { width: 100%; }
.confirm-table { border-collapse: collapse; margin-bottom: 16px; }
.confirm-table th, .confirm-table td {
    padding: 9px 4px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 0.95rem;
}
.confirm-table th { color: var(--text-sub); font-weight: 500; width: 42%; }
.confirm-table td strong { font-size: 1.1rem; color: var(--navy); }
.confirm-table .small { font-size: 0.78rem; color: var(--text-sub); }

.confirm-actions { display: flex; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { flex: 1; }
.inline-form { flex: 1; display: flex; }
.inline-form .btn { width: 100%; }
.warn { color: var(--danger); font-size: 0.8rem; margin-top: 12px; }

.done-check {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
}
.done-title { text-align: center; font-weight: 700; font-size: 1.1rem; margin: 0 0 16px; }

/* ----- メニュー集約 ----- */
.map-form { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.map-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: var(--shadow);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.map-input {
    flex: 1 1 120px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
}
.map-arrow { color: var(--gold); font-weight: 700; }

/* ----- お知らせ・補助テキスト ----- */
.alert { padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; margin: 12px 0; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; }
.alert-ok { background: #eef7ed; color: #2e7d32; border: 1px solid #c5e3c2; }
.empty { color: var(--text-sub); font-size: 0.9rem; padding: 8px 0; }
.note { color: var(--text-sub); font-size: 0.8rem; margin-top: 8px; }

.pagefoot {
    text-align: center;
    color: var(--text-sub);
    font-size: 0.72rem;
    padding: 24px 0 32px;
}

/* ----- タブレット・PC（広い画面）でも崩れないように ----- */
@media (min-width: 600px) {
    .hero-amount { font-size: 2.8rem; }
    .store-cards { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   目標・進捗バー
   ============================================================= */
/* ヒーローカード内の進捗 */
.hero-card .progress { margin-top: 14px; }
.progress { width: 100%; }
.progress-none {
    margin-top: 12px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}
.progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.82rem;
    color: #d8def0;
    margin-bottom: 5px;
}
.progress-pct { font-weight: 800; color: var(--gold-light); font-size: 1rem; }
.progress-pct.is-done { color: #7ee0a0; }
.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 999px;
    transition: width .4s ease;
}
.progress-fill.is-done { background: linear-gradient(90deg, #2e9e5b, #7ee0a0); }
.progress-foot {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #d8def0;
    text-align: right;
}
.progress-foot.ok { color: #7ee0a0; font-weight: 700; }

/* 目標設定画面：日別目標の自動計算の注記 */
.calc-note {
    margin-top: 12px;
    background: #fbf7ec;
    border: 1px solid #ecdfbc;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: var(--text);
}
.calc-result { margin: 6px 0 0; }
.calc-result strong { color: var(--navy); font-size: 1.05rem; }

/* 目標設定画面：スタッフ目標の行 */
.staff-target-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.staff-target-store { margin: 18px 0 4px; font-size: 0.85rem; font-weight: 800; color: var(--gold, #c9a24b); border-bottom: 1px solid var(--line, #e4e4e4); padding-bottom: 4px; }
.staff-target-store:first-of-type { margin-top: 0; }
.staff-target-name { flex: 1; font-weight: 600; }
.staff-target-input { flex: 0 0 150px; }
.staff-nocomm { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: #555; white-space: nowrap; cursor: pointer; }
.staff-nocomm input { width: 16px; height: 16px; accent-color: var(--gold, #c9a24b); }
@media (max-width: 560px) {
    .staff-target-row { flex-wrap: wrap; }
    .staff-target-name { flex: 1 1 100%; }
    .staff-target-input { flex: 1 1 auto; }
}

/* ダッシュボード：スタッフ別（進捗バー付き） */
.staff-list { display: grid; gap: 10px; }
.staff-item {
    background: var(--card);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
}
.staff-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.staff-item-name { font-weight: 600; }
.staff-item-amt { font-weight: 800; color: var(--navy); }
.progress-bar-sm { height: 8px; background: var(--line); }
.staff-item .progress-fill { background: linear-gradient(90deg, var(--navy-soft), var(--navy)); }
.staff-item .progress-fill.is-done { background: linear-gradient(90deg, #2e9e5b, #7ee0a0); }
.staff-item-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-sub);
    margin-top: 5px;
}
.staff-item-foot.muted { justify-content: flex-end; }
.staff-item-note { font-size: 0.72rem; color: var(--gold); margin: 2px 0 6px; }

/* 前年比較ブロック（今年｜昨年同日/同月） */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-card { border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.cmp-now { background: linear-gradient(135deg, var(--navy), var(--navy-soft)); color: #fff; }
.cmp-now-month { background: linear-gradient(135deg, #2a2f3f, #3a3326); }
.cmp-last { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.cmp-label { font-size: 0.74rem; color: var(--text-sub); line-height: 1.3; }
.cmp-now .cmp-label { color: #c3cbdb; }
.cmp-label small { display: block; font-size: 0.66rem; opacity: 0.85; }
.cmp-amount { font-size: 1.5rem; font-weight: 800; margin-top: 4px; letter-spacing: 0.01em; }
.cmp-now .cmp-amount { color: #fff; }
.cmp-last .cmp-amount { color: var(--navy); }
.cmp-sub { font-size: 0.74rem; color: var(--text-sub); margin-top: 2px; }
.cmp-now .cmp-sub { color: #d8def0; }
.cmp-yoy { display: inline-block; margin-top: 6px; font-size: 0.76rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cmp-yoy.up { background: #eef7ed; color: #2e7d32; }
.cmp-yoy.down { background: #fdecea; color: var(--danger); }
.cmp-yoy.muted { background: #eef0f4; color: var(--text-sub); font-weight: 500; }
/* 比較ブロックの下に置く目標進捗（数値カードは上に出したので進捗だけ） */
.hero-progress { margin-top: 10px; padding: 16px; }

/* 当日 / 今月 の見出し帯 */
.day-band {
    margin: 26px 0 4px;
    background: var(--navy);
    color: var(--gold-light);
    font-weight: 800;
    font-size: 1.05rem;
    padding: 8px 14px;
    border-radius: 10px;
    letter-spacing: 0.04em;
}
.day-band.month-band { background: #3a3326; color: var(--gold-light); }

/* 目標差の表示 */
.hero-diff { margin-top: 10px; font-size: 0.9rem; color: #d8def0; }
.hero-diff .plus  { color: #7ee0a0; }
.hero-diff .minus { color: #ffb4ab; }

/* 件数・金額カード（プレミアムパス／店販／オプション／指名） */
.ca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ca-card {
    background: var(--card);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--shadow);
}
.ca-label { font-size: 0.82rem; color: var(--text-sub); margin-bottom: 4px; }
.ca-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ca-count { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.ca-count small { font-size: 0.6em; font-weight: 600; color: var(--text-sub); margin-left: 1px; }
.ca-amount { font-size: 0.95rem; font-weight: 700; color: var(--gold); }

/* テーブル内の注記（※◯店の統合分） */
.tbl-note { display: block; font-size: 0.68rem; color: var(--gold); font-weight: normal; }
.mini-val small { font-size: 0.7em; color: var(--text-sub); font-weight: 600; }

/* グラフ（モバイル最適化） */
.chart-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    margin-top: 10px;
}
.chart-2col { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) {
    .chart-2col { grid-template-columns: 1fr 1fr; }
}

/* スタッフ管理：カード型編集 */
.staff-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}
.staff-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.alias-input { margin-bottom: 6px; }
@media (max-width: 480px) {
    .staff-card-grid, .alias-grid { grid-template-columns: 1fr; }
}
.staff-item-pct { font-weight: 700; color: var(--navy); }
.staff-item-pct.is-done { color: #2e9e5b; }

/* モニター表示ボタン */
.btn-monitor {
    display: inline-block;
    margin-top: 8px;
    background: var(--gold);
    color: var(--navy-deep);
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* =============================================================
   モニター表示（16:9 横・大画面）
   ============================================================= */
.monitor-body {
    background: linear-gradient(150deg, var(--navy-deep), #0c1729);
    color: #fff;
    margin: 0;
    min-height: 100vh;
}
.monitor {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    padding: 3vh 3vw;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
/* 上段 */
.mon-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mon-store {
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    font-weight: 800;
    color: var(--gold-light);
    letter-spacing: 0.02em;
}
.mon-right { display: flex; align-items: center; gap: 1.2vw; flex-wrap: wrap; }
.mon-clock { font-size: clamp(1.1rem, 2.4vw, 1.9rem); font-weight: 700; }
.mon-date { font-size: clamp(0.9rem, 1.6vw, 1.2rem); color: #c3cbdb; }
.mon-updated { font-size: clamp(0.7rem, 1.1vw, 0.95rem); color: #9aa6bf; }
.mon-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(227,201,130,0.5);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    cursor: pointer;
    font-family: inherit;
}
.mon-btn-ghost { border-color: rgba(255,255,255,0.25); }

/* 中央 */
.mon-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mon-label { font-size: clamp(1rem, 2.2vw, 1.8rem); color: #c3cbdb; }
.mon-amount {
    font-size: clamp(3.2rem, 13vw, 11rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: #fff;
    margin: 0.5vh 0;
}
.mon-target { font-size: clamp(1rem, 2.4vw, 2rem); color: #d8def0; margin-bottom: 1.4vh; }
.mon-target strong { color: var(--gold-light); }
.mon-pct.is-done { color: #7ee0a0; }
.mon-noset { color: #9aa6bf; }
.mon-bar {
    width: min(80vw, 1100px);
    height: clamp(16px, 2.4vh, 30px);
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    overflow: hidden;
}
.mon-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 999px;
    transition: width .5s ease;
}
.mon-bar-fill.is-done { background: linear-gradient(90deg, #2e9e5b, #7ee0a0); }
.mon-diff { font-size: clamp(1rem, 2.2vw, 1.8rem); margin-top: 1.4vh; font-weight: 700; color: var(--gold-light); }

/* 下段 */
.mon-bottom {
    display: flex;
    gap: 2vw;
    align-items: stretch;
    flex-wrap: wrap;
}
.mon-stats { display: flex; gap: 1.5vw; flex: 1; min-width: 280px; }
.mon-stat {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.4vh 1.2vw;
    text-align: center;
}
.mon-stat-label { font-size: clamp(0.75rem, 1.2vw, 1rem); color: #9aa6bf; }
.mon-stat-val { font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; color: #fff; }
.mon-stat-val span { font-size: 0.5em; color: #c3cbdb; margin-left: 2px; }
.mon-stat-val-sm { font-size: clamp(1.1rem, 2.2vw, 1.9rem); color: var(--gold-light); }
.mon-bar-sm { width: 100%; height: 8px; margin-top: 6px; }

.mon-staff {
    flex: 1;
    min-width: 280px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1.2vh 1.4vw;
}
.mon-staff-title { font-size: clamp(0.8rem, 1.3vw, 1.05rem); color: #9aa6bf; margin-bottom: 0.8vh; }
.mon-staff-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4vh 1.5vw;
}
.mon-staff-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.5vh 0;
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
}
.mon-staff-name { color: #d8def0; }
.mon-staff-amt { font-weight: 700; color: #fff; }

/* =============================================================
   店舗売上管理：モダンSaaS風 UIリファイン
   ============================================================= */
:root {
    --navy: #1A2536;
    --navy-deep: #101827;
    --navy-soft: #24334A;
    --gold: #D8A84E;
    --gold-light: #F1CB79;
    --bg: #F5F7FB;
    --card: #FFFFFF;
    --text: #172033;
    --text-sub: #667085;
    --line: #E6EAF0;
    --dash-container-width: 1040px;
    --dash-section-gap: 24px;
    --dash-card-gap: 12px;
    --dash-card-radius: 14px;
    --dash-card-padding: 16px;
    --dash-main-card-padding: 22px;
    --dash-heading-size: 16px;
    --dash-main-metric-size: 43px;
    --dash-small-metric-size: 25px;
    --dash-compare-metric-size: 32px;
    --dash-chart-height: 430px;
    --dash-card-columns: 2;
    --dash-shadow: 0 14px 36px rgba(16, 24, 39, 0.08);
    --radius: var(--dash-card-radius);
    --shadow: var(--dash-shadow);
}

body {
    font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                 Meiryo, sans-serif;
    background:
        linear-gradient(180deg, rgba(26,37,54,0.04), rgba(26,37,54,0) 260px),
        var(--bg);
    color: var(--text);
}

.topbar {
    background: rgba(26, 37, 54, 0.98);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 28px rgba(16,24,39,0.14);
    backdrop-filter: blur(16px);
}

.topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 20px;
}

.brand {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.topbar-logo {
    height: 34px;
    max-width: 168px;
    padding: 0;
    background: transparent;   /* 透過ロゴをそのまま表示（白い下敷きを撤去） */
    box-shadow: none;
}

.brand-sub {
    color: #D8DEE9;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
}

.badge {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(241,203,121,0.34);
    color: #F9D98D;
    font-weight: 700;
}

.logout-link {
    color: #BAC4D3;
    transition: color .16s ease;
}

.logout-link:hover { color: #FFFFFF; }

.adminnav {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 12px;
    gap: 8px;
}

.adminnav a {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    color: #C6D0DD;
    border-radius: 9px;
    padding: 8px 14px;
    font-weight: 650;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.adminnav a:hover,
.adminnav a.is-active {
    background: rgba(255,255,255,0.08);
    border-color: rgba(241,203,121,0.42);
    color: #FFFFFF;
}

.adminnav a.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: var(--gold-light);
}

.container {
    max-width: var(--dash-container-width);
    padding: 22px 20px 56px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 18px 0 10px;
}

.page-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-identity {
    min-width: 260px;
}

.identity-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 4px;
}

.identity-date span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(216,168,78,0.16);
    color: #94681E;
    font-size: 0.82rem;
    font-weight: 850;
}

.identity-date strong {
    color: var(--navy);
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.identity-date em {
    color: var(--text-sub);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 750;
}

.ref-day-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 12px 28px rgba(16,24,39,0.07);
    color: var(--text-sub);
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.ref-date-input {
    display: grid;
    gap: 5px;
}

.ref-date-input span {
    color: var(--navy);
    font-weight: 850;
    line-height: 1.1;
}

.ref-date-input input[type="date"] {
    width: 150px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 750;
}

.ref-day-metrics {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.page-action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.yp-metric { display: inline-flex; align-items: baseline; gap: 5px; }
.yp-metric i { font-style: normal; color: var(--text-sub); font-size: 0.72rem; font-weight: 700; }
.yp-metric b { color: var(--text); font-size: 1.05rem; font-weight: 900; white-space: nowrap; }
.yp-metric .yp-target { color: var(--text-sub); }
.yp-badge { font-weight: 800; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; white-space: nowrap; }
.yp-badge.is-hit { background: #e7f6ec; color: #1f8b4c; }
.yp-badge.is-miss { background: #fde9e7; color: #d23f31; }

.page-eyebrow {
    margin: 0 0 2px;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-title {
    color: var(--text);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 0;
}

.updated {
    margin-top: 4px;
    color: var(--text-sub);
    font-size: 0.84rem;
}

.btn-monitor {
    margin-top: 0;
    background: #FFFFFF;
    color: var(--navy);
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(16,24,39,0.07);
}

.btn-monitor:hover {
    border-color: rgba(216,168,78,0.52);
    color: var(--navy-deep);
}

.day-band {
    display: inline-flex;
    align-items: center;
    margin: 26px 0 2px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(26,37,54,0.08);
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0;
}

.day-band.month-band {
    background: rgba(216,168,78,0.14);
    color: #8A611D;
}

.dashboard-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.dashboard-layout > [data-dashboard-block] {
    order: var(--block-order, 0);
    width: var(--block-width, 100%);
    max-width: 100%;
    align-self: var(--block-align-self, stretch);
    text-align: var(--block-text-align, left);
    position: relative;
}

body.is-design-editing .dashboard-layout > [data-dashboard-block] {
    cursor: pointer;
    outline: 1px dashed rgba(216,168,78,0.55);
    outline-offset: 4px;
    transition: outline-color .14s ease, box-shadow .14s ease;
}

body.is-design-editing .dashboard-layout > [data-dashboard-block]:hover {
    outline-color: rgba(26,37,54,0.7);
}

body.is-design-editing .dashboard-layout > [data-dashboard-block].is-design-selected {
    outline: 3px solid #3B82F6;
    box-shadow: 0 0 0 7px rgba(59,130,246,0.16);
}

.section { margin-top: var(--dash-section-gap); }

.section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    border-left: none;
    padding-left: 0;
    margin-bottom: 13px;
    color: var(--text);
    font-size: var(--dash-heading-size);
    font-weight: 850;
    letter-spacing: 0;
}

.section-title::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: var(--gold);
    -webkit-mask: var(--icon) center / 16px 16px no-repeat;
    mask: var(--icon) center / 16px 16px no-repeat;
}

.title-sales { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 19h16v2H4zM6 10h3v7H6zm5-5h3v12h-3zm5 8h3v4h-3z'/%3E%3C/svg%3E"); }
.title-customers { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8m0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5'/%3E%3C/svg%3E"); }
.title-products { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7.5 12 3l8 4.5v9L12 21l-8-4.5zm8 2.2 4.9-2.7L12 4.3 7.1 7zM6 8.7v6.6l5 2.8v-6.6zm7 9.4 5-2.8V8.7l-5 2.8z'/%3E%3C/svg%3E"); }
.title-route { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5'/%3E%3C/svg%3E"); }
.title-chart { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 19h16v2H4zm2-2 4-5 3 3 5-8 2 1.2-6.7 10.6-3.1-3.1L7.8 18z'/%3E%3C/svg%3E"); }
.title-staff { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m8.5 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6M8 13c-3.3 0-6 1.7-6 4v2h12v-2c0-2.3-2.7-4-6-4m8.5 1c-.9 0-1.7.2-2.4.5 1.2.9 1.9 2 1.9 3.5v1h6v-1.5c0-2-2.5-3.5-5.5-3.5'/%3E%3C/svg%3E"); }

.cmp-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--dash-card-gap);
}

.cmp-card,
.hero-card,
.mini-card,
.ca-card,
.chart-card,
.staff-item,
.data-table {
    box-shadow: var(--shadow);
}

.cmp-card {
    border-radius: var(--dash-card-radius);
    padding: var(--dash-card-padding);
}

.cmp-now {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0)),
        var(--navy);
}

.cmp-last {
    background: #FFFFFF;
    border: 1px solid rgba(230,234,240,0.95);
}

.cmp-label {
    color: #7A8494;
    font-size: 0.78rem;
    font-weight: 650;
}

.cmp-now .cmp-label { color: #C8D1DE; }

.cmp-amount {
    font-size: var(--block-compare-metric-size, var(--dash-compare-metric-size));
    font-weight: 900;
    line-height: 1.02;
    margin-top: 8px;
}

.cmp-sub {
    margin-top: 8px;
    color: #D5DCE7;
    font-weight: 650;
}

.cmp-last .cmp-sub { color: var(--text-sub); }

.cmp-yoy {
    margin-top: 10px;
    padding: 4px 10px;
    font-weight: 800;
}

.hero-card {
    border-radius: var(--dash-card-radius);
    background:
        radial-gradient(circle at 94% 0%, rgba(241,203,121,0.20), transparent 30%),
        linear-gradient(135deg, var(--navy), var(--navy-soft));
    box-shadow: 0 18px 42px rgba(26,37,54,0.16);
}

.hero-card::after { display: none; }

.hero-progress { margin-top: 12px; padding: 18px; }

.today-summary-card {
    padding: var(--dash-main-card-padding);
}

.hero-amount {
    font-size: var(--block-metric-size, var(--dash-main-metric-size));
}

.month-summary-card {
    background:
        radial-gradient(circle at 94% 0%, rgba(241,203,121,0.18), transparent 30%),
        linear-gradient(135deg, #202A3A, #3A3326);
}

.today-summary-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.today-summary-meta {
    min-width: 94px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    text-align: right;
}

.today-summary-meta span {
    display: block;
    color: #C8D1DE;
    font-size: 0.75rem;
    font-weight: 700;
}

.today-summary-meta strong {
    display: block;
    color: #FFFFFF;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 4px;
}

.today-summary-card .progress {
    position: relative;
    z-index: 1;
}

.today-last-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.today-last-card .cmp-amount {
    font-size: var(--block-compare-metric-size, clamp(1.35rem, 3.6vw, 2rem));
}

.today-last-badge {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.month-last-card {
    border-color: rgba(216,168,78,0.24);
}

.progress-head {
    color: #D5DCE7;
    font-weight: 650;
}

.progress-pct {
    color: #F6D58C;
    font-size: 1.08rem;
    font-weight: 900;
}

.progress-bar {
    height: 11px;
    background: rgba(255,255,255,0.16);
}

.progress-fill {
    background: linear-gradient(90deg, #D8A84E, #F1CB79);
    box-shadow: 0 0 18px rgba(241,203,121,0.28);
}

.progress-foot {
    color: #C8D1DE;
    font-weight: 650;
}

.mini-grid {
    gap: var(--dash-card-gap);
    margin-top: 0;
}

.mini-card {
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: var(--dash-card-radius);
    padding: var(--dash-card-padding);
    text-align: left;
}

.mini-label,
.ca-label {
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 700;
}

.mini-val {
    color: var(--navy);
    font-size: var(--block-small-metric-size, var(--dash-small-metric-size));
    font-weight: 900;
    line-height: 1.1;
    margin-top: 7px;
}

.mini-metric-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.mini-metric-line .mini-val {
    margin-top: 0;
}

.mini-val small {
    color: var(--gold);
    font-weight: 850;
}

.mini-prev {
    display: inline-flex;
    margin-top: 0;
    color: #7A8494;
    font-size: 0.74rem;
    font-weight: 750;
    white-space: nowrap;
}

.ca-grid {
    gap: var(--dash-card-gap);
    grid-template-columns: repeat(var(--dash-card-columns), minmax(0, 1fr));
}

.ca-grid-details {
    align-items: start;
}

.ca-card {
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: var(--dash-card-radius);
    padding: var(--dash-card-padding);
}

.metric-detail {
    min-width: 0;
}

.metric-detail[open] {
    grid-column: 1 / -1;
}

.metric-detail > summary {
    list-style: none;
}

.metric-detail > summary::-webkit-details-marker {
    display: none;
}

.ca-card-click {
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.ca-card-click:hover {
    border-color: rgba(216,168,78,0.45);
    box-shadow: 0 18px 38px rgba(16,24,39,0.10);
    transform: translateY(-1px);
}

.ca-more {
    display: block;
    margin-top: 8px;
    color: var(--text-sub);
    font-size: 0.74rem;
    font-weight: 750;
}

.metric-detail[open] .ca-more {
    color: #9A6B1F;
}

.metric-detail-body {
    grid-column: 1 / -1;
    margin-top: 10px;
    overflow-x: auto;
}

.metric-table {
    min-width: 620px;
    box-shadow: 0 10px 24px rgba(16,24,39,0.06);
}

.metric-table td,
.metric-table th {
    white-space: nowrap;
}

.metric-count-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(216,168,78,0.14);
    color: #8A611D;
    font-size: 0.68rem;
    font-weight: 850;
}

.ca-count {
    color: var(--navy);
    font-size: var(--block-small-metric-size, var(--dash-small-metric-size));
    font-weight: 900;
}

.ca-amount {
    color: #B77C1C;
    font-size: 1.02rem;
    font-weight: 850;
}

.data-table {
    overflow: hidden;
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: 14px;
    background: #FFFFFF;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
}

.data-table th {
    color: var(--text);
    font-weight: 750;
}

.data-table .num {
    color: var(--navy);
    font-weight: 900;
}

.chart-card {
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: var(--dash-card-radius);
    padding: var(--dash-card-padding);
}

.daily-chart-card {
    height: var(--dash-chart-height);
}

.daily-chart-card canvas {
    width: 100% !important;
    height: 100% !important;
}

.staff-list { gap: 12px; }

.staff-item {
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: var(--dash-card-radius);
    padding: var(--dash-card-padding);
}

.btn-design-tuner {
    margin-top: 0;
    background: var(--navy);
    color: #fff;
    border: 1px solid rgba(26,37,54,0.16);
    box-shadow: 0 10px 26px rgba(16,24,39,0.08);
}

.btn-design-tuner:hover {
    background: var(--navy-soft);
}

.design-tuner-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
    pointer-events: none;
}

.design-tuner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: min(390px, 100vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid rgba(230,234,240,0.95);
    box-shadow: -24px 0 48px rgba(16,24,39,0.18);
    transform: translateX(104%);
    transition: transform .22s ease;
}

.design-tuner.is-open {
    transform: translateX(0);
}

.design-tuner-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--line);
}

.design-tuner-kicker {
    margin: 0 0 2px;
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.design-tuner h2 {
    margin: 0;
    color: var(--navy);
    font-size: 1.15rem;
    line-height: 1.2;
}

.tuner-block-select {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.tuner-block-select span {
    color: var(--text-sub);
    font-size: 0.76rem;
    font-weight: 850;
}

.tuner-block-select select {
    width: min(260px, 100%);
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 850;
}

.design-tuner-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text-sub);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.design-tuner-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.tuner-field {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(230,234,240,0.85);
}

.tuner-field span,
.tuner-color span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 800;
}

.tuner-field output {
    color: var(--text-sub);
    font-size: 0.78rem;
    font-weight: 750;
}

.tuner-field input[type="range"] {
    width: 100%;
    margin-top: 10px;
    accent-color: var(--gold);
}

.tuner-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 14px;
}

.tuner-color {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #F8FAFC;
}

.tuner-color input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.design-tuner-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.design-tuner-foot .btn {
    width: 100%;
    padding: 11px 12px;
}

.design-tuner-status {
    min-height: 22px;
    margin: 0;
    padding: 0 20px 16px;
    color: var(--text-sub);
    font-size: 0.82rem;
}

.design-tuner-status.is-ok { color: #1f8b4c; font-weight: 800; }
.design-tuner-status.is-error { color: var(--danger); font-weight: 800; }

.tuner-selected {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid rgba(216,168,78,0.35);
    border-radius: 14px;
    background: #FFF8E8;
}

.tuner-selected-label {
    color: #8A611D;
    font-size: 0.72rem;
    font-weight: 850;
}

.tuner-selected strong {
    color: var(--navy);
    font-size: 1rem;
}

.tuner-selected small {
    color: var(--text-sub);
    line-height: 1.45;
}

.tuner-block-tools {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.tuner-block-tools.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.tuner-move-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tuner-align {
    display: grid;
    gap: 9px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(230,234,240,0.85);
}

.tuner-align > span,
.tuner-divider {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 850;
}

.tuner-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.tuner-segmented button {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text-sub);
    padding: 9px 6px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.tuner-segmented button.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.tuner-divider {
    margin: 6px 0 2px;
    padding-top: 12px;
}

.staff-item-name { font-weight: 800; color: var(--text); }
.staff-item-amt { color: var(--navy); font-weight: 900; font-size: var(--block-small-metric-size, 1rem); }
.staff-item-foot { font-weight: 650; }
.staff-item .progress-fill { background: linear-gradient(90deg, var(--navy-soft), var(--gold)); }

[data-dashboard-block] .section-title,
[data-dashboard-block] .hero-tag,
[data-dashboard-block] .hero-amount,
[data-dashboard-block] .cmp-label,
[data-dashboard-block] .cmp-amount,
[data-dashboard-block] .ca-label,
[data-dashboard-block] .mini-label {
    text-align: var(--block-text-align, left);
}

@media (max-width: 640px) {
    .topbar-inner { padding: 10px 14px; }
    .adminnav { padding: 0 14px 10px; }
    .container { padding: 16px 14px 48px; }
    .page-head { align-items: flex-start; flex-direction: column; }
    .page-head-actions { align-items: stretch; }
    .dashboard-identity { min-width: 0; width: 100%; }
    .identity-date { flex-wrap: wrap; }
    .ref-day-card { width: 100%; justify-content: space-between; }
    .page-action-buttons { width: 100%; }
    .page-action-buttons .btn { flex: 1; }
    .btn-monitor { padding: 8px 12px; white-space: nowrap; }
    .cmp-grid { grid-template-columns: 1fr; }
    .today-summary-head,
    .today-last-card { flex-direction: column; align-items: stretch; }
    .today-summary-meta { text-align: left; }
    .today-last-badge { justify-content: flex-start; }
    .mini-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .mini-card { padding: 13px 10px; }
    .mini-val { font-size: 1.08rem; }
    .ca-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ca-grid-details { grid-template-columns: 1fr; }
    .ca-card { padding: 13px 12px; }
    .daily-chart-card { height: min(var(--dash-chart-height), 340px); }
    .topbar-logo { max-width: 124px; }
    .dashboard-layout > [data-dashboard-block] {
        width: 100%;
        align-self: stretch;
    }
}

@media (max-width: 390px) {
    .page-head { flex-direction: column; }
    .page-head-actions { width: 100%; }
    .ref-date-input input[type="date"] { width: 100%; }
    .ref-day-metrics { width: 100%; justify-content: space-between; }
    .mini-grid,
    .ca-grid { grid-template-columns: 1fr; }
}

/* ===== 目標達成日数 / 残額ペース目標（店舗売上画面） ===== */
.goal-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
}
.goal-summary-cell {
    flex: 1 1 140px;
    background: var(--card, #fff);
    border: 1px solid rgba(230,234,240,0.95);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 22px rgba(16,24,39,0.05);
}
.goal-summary-label { display: block; font-size: 0.74rem; color: var(--text-sub); font-weight: 700; }
.goal-summary-val { font-size: 1.5rem; font-weight: 900; color: var(--navy); }
.goal-summary-val i { font-size: 0.8rem; font-weight: 700; color: var(--text-sub); font-style: normal; }
.goal-summary-val.gs-pct { color: #1f8b4c; }
.goal-summary-note { flex-basis: 100%; font-size: 0.72rem; color: var(--text-sub); }

.pace-targets {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(26,37,54,0.97), rgba(33,47,68,0.97));
    border-radius: 16px;
    padding: 16px;
    color: #fff;
}
.pace-head { font-size: 0.82rem; color: #c3cbdb; font-weight: 700; margin-bottom: 10px; }
.pace-grid { display: flex; gap: 12px; }
.pace-cell {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
}
.pace-label { display: block; font-size: 0.78rem; color: #c3cbdb; font-weight: 700; }
.pace-val { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: 0.01em; }
.pace-weekend .pace-label { color: #f1cb79; }
.pace-note { margin-top: 10px; font-size: 0.72rem; color: rgba(255,255,255,0.62); line-height: 1.5; }

/* ===== 休業日設定（カレンダー） ===== */
.closure-form { margin-top: 6px; }
.closure-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.closure-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--line, #e6e8ee);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.closure-day input { display: none; }
.closure-num { font-size: 1rem; font-weight: 800; color: var(--navy); }
.closure-wd { font-size: 0.68rem; color: var(--text-sub); }
.closure-day.is-weekend { background: #f4f7fc; }
.closure-day.is-weekend .closure-wd { color: #c08a2b; }
.closure-day.is-closed {
    background: #fdecea;
    border-color: #f3b5ad;
}
.closure-day.is-closed .closure-num { color: #d23f31; }
.closure-day.is-closed::after {
    content: '休';
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    background: #d23f31;
    border-radius: 999px;
    padding: 0 5px;
    margin-top: 1px;
}
@media (max-width: 520px) {
    .closure-grid { gap: 5px; }
    .closure-num { font-size: 0.9rem; }
}

/* ===== スタッフ別売上：達成率バー（見やすく） ===== */
.staff-goal { margin-top: 8px; }
.staff-goal-bar {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}
.staff-goal-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9a24b, #e3c982);
    transition: width 0.4s ease;
}
.staff-goal-fill.is-done { background: linear-gradient(90deg, #1f8b4c, #34c477); }
.staff-goal-pct {
    position: absolute;
    top: 0; right: 10px;
    line-height: 22px;
    font-size: 0.74rem;
    font-weight: 900;
    color: var(--navy);
}
.staff-goal-pct.is-done { color: #0f5f33; }
.staff-goal-foot { margin-top: 4px; font-size: 0.7rem; color: var(--text-sub); }

/* ===== スタッフ別内訳：棒グラフランキング ===== */
.metric-rank { display: flex; flex-direction: column; gap: 12px; }
.mrank-row { }
.mrank-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.mrank-name { font-size: 0.9rem; font-weight: 800; color: var(--navy); display: inline-flex; align-items: baseline; gap: 6px; }
.mrank-no {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 900;
    color: #fff;
    background: var(--navy);
    border-radius: 999px;
}
.mrank-note { font-size: 0.66rem; color: var(--gold, #c9a24b); font-weight: 600; margin-left: 4px; }
.mrank-vals { font-size: 0.78rem; color: var(--text-sub); white-space: nowrap; }
.mrank-vals b { color: var(--navy); font-weight: 900; margin-right: 6px; }
.mrank-vals em { font-style: normal; font-weight: 800; color: var(--text); }
.mrank-bar {
    height: 14px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}
.mrank-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1a2b4a, #5b7aa8);
    transition: width 0.4s ease;
}

/* ===== モニター（情報量の多いレイアウト） ===== */
.monitor-rich { gap: 2.4vh; }
.mon-hero { text-align: center; }
.mon-hero .mon-bar { margin: 10px auto 0; }
.mon-h {
    font-size: clamp(1rem, 1.9vw, 1.45rem);
    color: var(--gold-light);
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
}
.mon-block { width: 100%; }
.monitor-rich .hero-card-month { width: 100%; box-sizing: border-box; }
.mon-panel { background: #fff; border-radius: 16px; padding: 16px; }
.mon-rank-3col { display: grid; grid-template-columns: 1fr; gap: 2.4vh; }
@media (min-width: 900px) {
    .mon-rank-3col { grid-template-columns: repeat(3, 1fr); }
    .mon-rank-3col .mon-h { font-size: 1.05rem; }
}

/* ===== モニター（16:9・スクロールなし1画面） ===== */
.monitor-fit {
    height: 100vh;
    min-height: 0;
    padding: 1.6vh 1.6vw;
    gap: 1.2vh;
    overflow: hidden;
}
.monitor-fit .mon-top { flex: 0 0 auto; }
.monitor-fit .mon-store { font-size: clamp(1.2rem, 2.6vw, 2.2rem); }
.monitor-fit .mon-clock { font-size: clamp(1rem, 2vw, 1.6rem); }
.monitor-fit .mon-btn { padding: 6px 12px; }

/* 上段：本日売上＋今月達成率（横並び）／その下に内訳／右に引継ぎ（広め・高め） */
.mon-grid-top {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.85fr 1fr 1.55fr;   /* 本日売上 | 今月達成率 | 引継ぎ(広) */
    grid-template-rows: minmax(0, 1fr) minmax(0, 0.5fr);
    grid-template-areas:
        "today month notes"
        "brk   brk   notes";
    gap: 1.2vh 1vw;
}
/* 下段：スタッフ別（プレミアムパス列を広めに） */
.mon-grid-bottom {
    flex: 1.15 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.8fr 1.7fr 0.8fr 0.8fr;
    grid-template-areas: "sg prem ten opt";
    gap: 1.2vh 1vw;
    margin-top: 1.2vh;
}
.mg-today    { grid-area: today; }
.mg-month    { grid-area: month; }
.mg-notes    { grid-area: notes; }
.mg-brk      { grid-area: brk; }
.mg-staffgoal{ grid-area: sg; }
.mg-prem     { grid-area: prem; }
.mg-tenpan   { grid-area: ten; }
.mg-option   { grid-area: opt; }

.mon-card {
    box-sizing: border-box;
    background: #fff;
    color: var(--navy);
    border-radius: 14px;
    padding: 1.4vh 1vw;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mon-card-dark {
    background: linear-gradient(135deg, #1a2b4a, #233453);
    color: #fff;
    border: 1px solid rgba(227,201,130,0.18);
}

/* カード共通の小見出し */
.mc-title {
    font-size: clamp(0.75rem, 1.7vh, 1.05rem);
    font-weight: 700;
    color: #c3cbdb;
    letter-spacing: 0.02em;
}
.mc-title-dark {
    font-size: clamp(0.78rem, 1.8vh, 1.1rem);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.6vh;
}
.mc-sub { font-size: clamp(0.78rem, 1.7vh, 1.15rem); color: #d8def0; margin-top: 0.4vh; }
.mc-sub strong { color: var(--gold-light); }
.mc-sub .is-done { color: #7ee0a0; }

/* 本日の売上 */
.mc-today-amt { font-size: clamp(2.2rem, 8.5vh, 6rem); font-weight: 900; line-height: 1; }
.mc-month-amt { font-size: clamp(1.6rem, 5vh, 3.4rem); font-weight: 900; line-height: 1.05; }
.mc-bar {
    height: clamp(8px, 1.5vh, 16px);
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.8vh;
}
.mc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 999px; }
.mc-bar-fill.is-done { background: linear-gradient(90deg, #2e9e5b, #7ee0a0); }
.mc-diff { font-size: clamp(0.82rem, 1.8vh, 1.2rem); font-weight: 800; color: var(--gold-light); margin-top: 0.8vh; }
.mc-diff strong { color: #fff; }

/* 本日の内訳（4セル） */
.mc-brk-row { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8vw; }
.mc-brk-cell {
    background: #f4f6fa;
    border-radius: 10px;
    padding: 0.8vh 0.7vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.mc-brk-cell span { font-size: clamp(0.62rem, 1.4vh, 0.9rem); color: var(--text-sub); }
.mc-brk-cell b { font-size: clamp(1rem, 3.2vh, 2rem); font-weight: 900; color: var(--navy); line-height: 1.1; }
.mc-brk-cell b i { font-size: 0.45em; font-style: normal; font-weight: 700; margin-left: 2px; color: var(--text-sub); }
.mc-brk-cell em { font-size: clamp(0.7rem, 1.6vh, 1rem); font-style: normal; font-weight: 700; color: var(--gold); }

/* スタッフ系リスト */
.mc-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.5vh; }
.mc-empty { color: var(--text-sub); font-size: clamp(0.7rem, 1.5vh, 0.95rem); }
.mc-goal-row { display: grid; grid-template-columns: 4.5em 1fr 2.8em; align-items: center; gap: 0.5vw; }
.mc-goal-name { font-size: clamp(0.62rem, 1.4vh, 0.88rem); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-goal-bar { height: clamp(8px, 1.6vh, 15px); background: #eef1f6; border-radius: 999px; overflow: hidden; }
.mc-goal-fill { height: 100%; background: linear-gradient(90deg, #c9a24b, #e3c982); }
.mc-goal-fill.is-done { background: linear-gradient(90deg, #1f8b4c, #34c477); }
.mc-goal-pct { font-size: clamp(0.6rem, 1.3vh, 0.82rem); font-weight: 800; text-align: right; color: var(--navy); }
.mc-rank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5vw; }
.mc-rank-name { font-size: clamp(0.62rem, 1.4vh, 0.88rem); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-rank-val { font-size: clamp(0.6rem, 1.3vh, 0.85rem); color: var(--text-sub); font-weight: 700; white-space: nowrap; }
.mc-rank-val b { color: var(--navy); }

/* モニター：店販・オプションの金額バー付き行 */
.mc-rank2 { display: flex; flex-direction: column; gap: 2px; }
.mc-rank2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5vw; }
.mc-rank2-bar { height: clamp(7px, 1.3vh, 12px); background: #eef1f6; border-radius: 999px; overflow: hidden; }
.mc-rank2-fill { height: 100%; background: linear-gradient(90deg, #1a2b4a, #5b7aa8); border-radius: 999px; }

/* 1件＝1ブロックの積み上げバー（プレミアムパス等） */
.block-bar { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.block-cell {
    width: clamp(10px, 1.5vh, 15px);
    height: clamp(10px, 1.5vh, 15px);
    border-radius: 3px;
    background: linear-gradient(135deg, #2a4877, #1a2b4a);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.block-bar.is-premium .block-cell { background: linear-gradient(135deg, #e7cf8d, #c9a24b); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }

/* スタッフ別 縦積みブロック（プレミアムパス：獲得日＋顧客苗字） */
.pstack {
    display: flex;
    gap: 10px;
    align-items: flex-end;       /* スタッフ名の高さをそろえ、ブロックは上へ伸びる */
    overflow-x: auto;
    padding: 6px 2px 4px;
}
.pstack-col {
    flex: 0 0 auto;
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pstack-blocks {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* 下づめで上に積み上がる */
    gap: 2px;
}
.pstack-block {
    background: linear-gradient(135deg, #f0dca0, #c9a24b);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    padding: 1px 4px;
    color: #3a2c08;
    display: flex;
    flex-direction: row;          /* 日付と苗字を横並びに */
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1.25;
}
/* 新規/継続/未分類で色分け（プレミアムパスのブロック） */
.pstack-block.is-new { background: linear-gradient(135deg, #45c46e, #1f8b4c); border-color: rgba(255,255,255,0.55); }
.pstack-block.is-cont { background: linear-gradient(135deg, #5b8fd4, #2a5fa0); border-color: rgba(255,255,255,0.55); }
.pstack-block.is-new .pstack-date, .pstack-block.is-new .pstack-cust,
.pstack-block.is-cont .pstack-date, .pstack-block.is-cont .pstack-cust { color: #fff; }
/* 未分類は従来の金色のまま（.pstack-block既定） */
.pstack-legend { display: flex; gap: 14px; margin: 4px 0 8px; font-size: 0.72rem; color: var(--text-sub, #6b7588); flex-wrap: wrap; }
.psl::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.psl.is-new::before { background: #2e9e5b; }
.psl.is-cont::before { background: #2a5fa0; }
.psl.is-unclass::before { background: #c9a24b; }

/* ドラッグ移動（お客様ブロックの付け替え） */
.pstack-draggable .pstack-block[draggable="true"] { cursor: grab; }
.pstack-draggable .pstack-block.is-dragging { opacity: 0.4; }
.pstack-draggable .pstack-col { transition: background 0.12s, box-shadow 0.12s; border-radius: 8px; }
.pstack-draggable .pstack-col.is-drop-over { background: rgba(201,162,75,0.18); box-shadow: inset 0 0 0 2px var(--gold, #c9a24b); }
.pstack-hint { color: var(--text-sub, #6b7588); margin-top: 8px; }

.pstack-date { font-size: 0.56rem; font-weight: 700; opacity: 0.85; }
.pstack-cust { font-size: 0.64rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstack-more { font-size: 0.56rem; font-weight: 700; color: var(--text-sub, #6b7588); text-align: center; padding: 1px 0; }
.pstack-foot {
    margin-top: 6px;
    text-align: center;
    border-top: 2px solid var(--navy, #1a2b4a);
    padding-top: 4px;
}
.pstack-name { font-size: 0.78rem; font-weight: 800; color: var(--navy, #1a2b4a); display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstack-rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4em; height: 1.4em; border-radius: 999px;
    background: var(--navy, #1a2b4a); color: #fff; font-size: 0.7em; font-weight: 800;
}
.pstack-count { font-size: 0.7rem; color: var(--text-sub, #6b7588); margin-top: 2px; }
.pstack-note { font-size: 0.6rem; color: var(--text-sub, #6b7588); margin-top: 1px; }

/* モニター内のプレミアムパス縦積み（画面に収めるため小さめ＆あふれは隠す） */
.mc-list-stack { overflow: hidden; }
.mc-list-stack .pstack { height: 100%; gap: clamp(4px, 0.5vw, 10px); overflow: hidden; justify-content: space-between; }
.mc-list-stack .pstack-col { width: clamp(48px, 4.5vw, 86px); }
.mc-list-stack .pstack-blocks { gap: clamp(1px, 0.25vh, 3px); }
.mc-list-stack .pstack-block { padding: clamp(0px, 0.2vh, 2px) 3px; border-radius: 4px; }
.mc-list-stack .pstack-date { font-size: clamp(0.46rem, 0.95vh, 0.66rem); }
.mc-list-stack .pstack-cust { font-size: clamp(0.52rem, 1.1vh, 0.76rem); }
.mc-list-stack .pstack-name { font-size: clamp(0.58rem, 1.2vh, 0.86rem); }
.mc-list-stack .pstack-count { font-size: clamp(0.52rem, 1.05vh, 0.74rem); }
.mc-list-stack .pstack-foot { margin-top: clamp(2px, 0.5vh, 6px); padding-top: clamp(2px, 0.4vh, 4px); }

/* モニター：本日の引き継ぎ事項ブロック */
.mon-card-note {
    background: linear-gradient(135deg, #2a2333, #3a2f1f);
    color: #fff;
    border: 1px solid rgba(227,201,130,0.35);
}
.mc-note-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1vh; margin-top: 0.8vh; }
.mc-note-empty { color: #c8b89a; font-size: clamp(0.9rem, 2vh, 1.3rem); }
.mc-note-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1vh 0.9vw;
    background: rgba(255,255,255,0.08);
    border-left: 4px solid var(--gold-light);
    border-radius: 8px;
}
.mc-note-when { font-size: clamp(0.7rem, 1.5vh, 0.95rem); font-weight: 800; color: var(--gold-light); }
/* 引継ぎ事項は広いブロックに合わせて文字を大きく（読みやすさ優先） */
.mc-note-body { font-size: clamp(1.05rem, 2.7vh, 1.9rem); font-weight: 700; line-height: 1.3; color: #fff; }

/* 引き継ぎ事項 管理画面 */
.handover-today { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.handover-today li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: #fff7e6; border-left: 4px solid var(--gold); border-radius: 8px; }
.ho-when { font-weight: 800; color: var(--gold); white-space: nowrap; }
.ho-body { color: var(--navy); }
.handover-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.handover-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line, #d7dce5); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.handover-list { display: flex; flex-direction: column; gap: 10px; }
.handover-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--line, #e4e8f0); border-radius: 10px; }
.ho-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ho-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; color: #fff; background: #5b7aa8; }
.ho-tag-weekly { background: #2e9e5b; }
.ho-tag-monthly { background: #c9a24b; }
.ho-tag-once { background: #5b7aa8; }
.ho-tag-daily { background: #7c5bb8; }
.ho-text { color: var(--navy); font-weight: 600; }
.btn-mini { padding: 6px 12px; font-size: 0.85rem; }
.btn-danger { background: #d35454; color: #fff; border: none; border-radius: 8px; cursor: pointer; }

.choice-grid {
    display: grid;
    gap: 8px;
}
.choice-grid-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-grid-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.choice-pill {
    position: relative;
    display: block;
    cursor: pointer;
}
.choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice-pill span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 7px 8px;
    border: 1px solid var(--line, #d7dce5);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    font-weight: 800;
    font-size: 0.88rem;
}
.choice-pill input:checked + span {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.multi-date-picker {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.multi-date-picker input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line, #d7dce5);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
}
.selected-date-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.date-chip {
    border: 1px solid rgba(201,162,75,0.45);
    border-radius: 999px;
    background: #fff7e6;
    color: #8a611d;
    padding: 6px 11px;
    font-family: inherit;
    font-weight: 850;
    cursor: pointer;
}

@media (max-width: 520px) {
    .choice-grid-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choice-grid-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .multi-date-picker { grid-template-columns: 1fr; }
}

/* スタッフ別売上の順位バッジ */
.staff-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.35em;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: 0.78em;
    font-weight: 800;
}

/* ===== 詳細表のスタッフ入れ替えプルダウン ===== */
.js-reassign-select {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 4px 6px;
  border: 1px solid var(--line, #d7dce5);
  border-radius: 6px;
  background: #fff;
  max-width: 9em;
}
.js-reassign-select:disabled { opacity: 0.5; }

/* ===== 月次確定（month_close） ===== */
.mc-controls { display: inline-block; margin-right: 16px; }
.mc-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px; font-weight: 600;
}
.mc-status.is-open { background: #fff7e6; border: 1px solid #e3c982; }
.mc-status.is-closed { background: #e9f7ef; border: 1px solid #34c477; }
.mc-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: #fff; white-space: nowrap; }
.mc-badge-open { background: #c9a24b; }
.mc-badge-closed { background: #1f8b4c; }
.mc-count { margin-left: 10px; font-size: 0.85rem; color: var(--text-sub, #6b7588); font-weight: 700; }
.mc-change .mc-from { color: var(--text-sub, #6b7588); }
.mc-change .mc-to { color: var(--navy, #1a2b4a); font-weight: 800; }

/* スタッフ管理：氏名グリッド・店舗別CSV名グリッド */
.staff-name-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.store-alias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 6px 0 14px; }
@media (max-width: 640px) { .staff-name-grid { grid-template-columns: 1fr; } }
/* 店舗管理：追加店舗の削除行 */
.store-del-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e4e8f0); }

/* ===== マイページ：シフトカレンダー ===== */
.mini-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .mini-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.shift-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.shift-cal-head {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub, #6b7588);
  padding: 2px 0;
}
.shift-cal-head.is-sun { color: #d35454; }
.shift-cal-head.is-sat { color: #3b74c4; }
.shift-cal-cell {
  appearance: none;
  font-family: inherit;
  border: 1px solid var(--line, #e4e8f0);
  background: #fff;
  border-radius: 8px;
  min-height: 50px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
}
.shift-cal-cell.is-empty { border: none; background: transparent; cursor: default; min-height: 0; }
.scc-day { font-size: 0.74rem; font-weight: 700; color: var(--navy, #1a2b4a); }
.scc-time { font-size: 0.66rem; font-weight: 800; line-height: 1.1; }
.shift-cal-cell.is-work { background: #eaf3ff; border-color: #bcd6f5; }
.shift-cal-cell.is-work .scc-time { color: #2a5fa0; }
.shift-cal-cell.is-off { background: #f4f6fa; }
.shift-cal-cell.is-off .scc-time { color: var(--text-sub, #6b7588); }
.shift-cal-cell.is-paid { background: #fff1f4; border-color: #f3c2cf; }
.shift-cal-cell.is-paid .scc-time { color: #c0436a; }
.shift-cal-cell.is-today { box-shadow: 0 0 0 2px var(--gold, #c9a24b); }
.shift-cal-cell.is-sun .scc-day { color: #d35454; }
.shift-cal-cell.is-sat .scc-day { color: #3b74c4; }
.shift-cal-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 0.74rem; color: var(--text-sub, #6b7588); }
.scl::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.scl.is-work::before { background: #bcd6f5; }
.scl.is-off::before { background: #e3e8f0; }
.scl.is-paid::before { background: #f3c2cf; }

/* 出勤メンバー モーダル */
.shift-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(20,28,44,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.shift-modal-overlay[hidden] { display: none; }
.shift-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 420px;
  max-height: 80vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.shift-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line, #e4e8f0); }
.shift-modal-head h3 { margin: 0; font-size: 1rem; color: var(--navy, #1a2b4a); }
.shift-modal-close { appearance: none; border: none; background: none; font-size: 1.2rem; cursor: pointer; color: var(--text-sub, #6b7588); }
.shift-modal-body { padding: 12px 16px 18px; }
.shift-modal-store + .shift-modal-store { margin-top: 14px; }
.sms-name { font-weight: 800; color: var(--gold, #c9a24b); font-size: 0.85rem; margin-bottom: 6px; }
.shift-modal-list { list-style: none; margin: 0; padding: 0; }
.shift-modal-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line, #eef1f6); }
.shift-modal-list li.is-me { font-weight: 800; }
.shift-modal-list .smn { color: var(--navy, #1a2b4a); }
.shift-modal-list .smt { color: var(--text-sub, #6b7588); white-space: nowrap; }

/* 経営管理ナビ：申請通知バッジ */
.nav-badge { display: inline-block; background: #d9453f; color: #fff; font-size: 0.68rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 5px; vertical-align: 1px; }
/* マイページ：シフトカレンダーの月切替 */
.shift-cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 8px; }
.shift-cal-arrow { color: var(--navy, #1a2b4a); font-weight: 700; text-decoration: none; padding: 6px 12px; border: 1px solid var(--line, #e4e8f0); border-radius: 8px; font-size: 0.85rem; background: #fff; }
.shift-cal-arrow:active { background: #f1f4f9; }
.shift-cal-month { font-weight: 800; color: var(--navy, #1a2b4a); font-size: 1.05rem; }
.req-hint { color: #c0436a; }
.field small { color: var(--text-sub, #6b7588); font-weight: 500; }

/* hidden属性を確実に効かせる（.field等のdisplay指定に上書きされないように） */
.field[hidden], .req-cond[hidden] { display: none !important; }

/* ===== モニター：プレミアムパス 新規/継続 入力ポップアップ ===== */
.pp-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(8,15,30,0.82); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.pp-overlay[hidden] { display: none; }
.pp-modal { background: #fff; border-radius: 22px; padding: 4.5vh 4vw; text-align: center; max-width: 660px; width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.pp-badge { display: inline-block; background: linear-gradient(135deg,#e7cf8d,#c9a24b); color: #3a2c08; font-weight: 800; padding: 6px 20px; border-radius: 999px; font-size: clamp(0.95rem, 2.2vh, 1.35rem); }
.pp-customer { font-size: clamp(1.9rem, 6vh, 3.6rem); font-weight: 900; color: var(--navy, #1a2b4a); margin: 2.2vh 0 0.6vh; }
.pp-meta { font-size: clamp(0.95rem, 2.4vh, 1.45rem); color: var(--text-sub, #6b7588); font-weight: 700; }
.pp-q { font-size: clamp(1.05rem, 2.6vh, 1.7rem); font-weight: 800; color: var(--navy, #1a2b4a); margin: 3vh 0 2vh; }
.pp-actions { display: flex; gap: 2vw; justify-content: center; flex-wrap: wrap; }
.pp-btn { appearance: none; border: none; cursor: pointer; font-family: inherit; font-weight: 900; font-size: clamp(1.15rem, 3vh, 1.9rem); padding: 2.4vh 3.2vw; border-radius: 16px; color: #fff; min-width: 210px; }
.pp-new { background: linear-gradient(135deg,#2e9e5b,#1f8b4c); }
.pp-cont { background: linear-gradient(135deg,#3a6fb0,#2a5fa0); }
.pp-btn:active { transform: translateY(1px); }
.pp-remain { margin-top: 2.4vh; color: var(--text-sub, #6b7588); font-size: clamp(0.85rem, 1.8vh, 1.1rem); font-weight: 700; }

/* マイページ：現在の売上ラベル */
.member-hero-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.member-hero-amount-label { font-size: 0.85rem; font-weight: 600; color: #9aa6bf; }

/* マイページ：歩合の内訳ブロック */
.comm-list { display: flex; flex-direction: column; gap: 2px; }
.comm-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line, #eef1f6); }
.comm-label { color: var(--navy, #1a2b4a); font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.comm-label small { color: var(--text-sub, #6b7588); font-weight: 500; font-size: 0.74rem; }
.comm-amt { color: var(--navy, #1a2b4a); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comm-row.comm-total { border-bottom: none; border-top: 2px solid var(--navy, #1a2b4a); margin-top: 4px; padding-top: 12px; }
.comm-row.comm-total .comm-label, .comm-row.comm-total .comm-amt { font-size: 1.15rem; font-weight: 900; color: var(--gold, #c9a24b); }

/* 経費まとめの合計行 */
.data-table tr.exp-total th, .data-table tr.exp-total td { font-weight: 900; color: var(--gold, #c9a24b); border-top: 2px solid var(--navy, #1a2b4a); }

/* 経費の開閉リスト（給与・歩合はタップで内訳） */
.exp-list { display: flex; flex-direction: column; gap: 6px; }
.exp-acc { border: 1px solid var(--line, #e4e4e4); border-radius: 10px; background: #fff; overflow: hidden; }
.exp-acc-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.exp-acc-sum::-webkit-details-marker { display: none; }
.exp-acc-flat .exp-acc-sum { cursor: default; }
.exp-acc-name { color: var(--ink, #222); }
.exp-acc-name small { color: #999; font-weight: 500; }
.exp-acc-hint { font-size: 0.72rem; color: var(--gold, #c9a24b); font-weight: 700; margin-left: 4px; }
.exp-acc[open] .exp-acc-hint { opacity: 0.5; }
.exp-acc-amt { font-variant-numeric: tabular-nums; font-weight: 900; color: var(--ink, #222); white-space: nowrap; }
.exp-acc-body { padding: 0 14px 12px; border-top: 1px dashed var(--line, #e4e4e4); }
.exp-acc-body .data-table { margin-top: 8px; font-size: 0.85rem; }

/* 店舗カードの経費内訳 */
.sc-exp { border-top: 1px dashed var(--line, #e4e4e4); margin-top: 8px; padding-top: 8px; }
.sc-exp-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; font-size: 0.82rem; color: #777; margin-bottom: 4px; }
.sc-exp-total { font-weight: 900; color: var(--gold, #c9a24b); font-size: 0.95rem; }
.sc-exp-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: #555; padding: 2px 0; font-variant-numeric: tabular-nums; }