/* ═══════════════════════════════════════════════════════════════
   shop.css  ─  ONE STYLE Color System v1.0（店舗管理画面）
   Primary Color : ONE STYLE Pink

   Primary    : #F50078（重要な行動・選択・ブランドの強調色）
                 Primary CTA = Pink Fill／Secondary Action = Pink Outline
   Background : #F7F7F8（アプリ全体の背景）  Card White : #FFFFFF
   Primary Text   : #2B2B2B   Secondary Text : #6F6A66   Disabled Text : #BEB8B2
   Standard Border: #ECE7E2（Greige）
   Cast Card Border（キャスト専用）: #FFD6E8（Soft Pink。操作色ではない）
   Chevron / Neutral accent（Brand Main Greige流用）: #A99A92

   Status colors（Matching Status のPill Badgeにのみ使用。数字はPrimary Textのまま）
   Success/成立   : #F50078（Primaryと同色）
   Warning/承認待ち: #FF9500
   Error/辞退     : #FF3B30
   Applying/申請中 : #34C759
   Disabled/期限切れ: #8E8E93

   Brand Colors（ロゴ専用。UI要素には機械的に使用しない）
   Highlight #D8CCC3 / Main #A99A92 / Shadow #72675F
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
body.role-shop {
    --sp:       #F50078;  /* ONE STYLE Pink（Primary） */
    --sp-dark:  #C40062;  /* hover：Primary CTAのピンクをやや濃く */
    --sp-press: #FA4DA0;  /* press：Primary CTAのピンクをやや薄く */
    --sp-tint:  #FDE6F0;  /* Secondary Actionの押下フィードバック等、ごく薄いピンク */
    --spbg:     #F7F7F8;  /* アプリ全体の背景 */
    --st:       #2B2B2B;  /* Primary Text */
    --ss:       #6F6A66;  /* Secondary Text */
    --text-disabled: #BEB8B2; /* Disabled Text */
    --sg:       #ECE7E2;  /* Standard Border（Greige） */
    --cast-border: #FFD6E8; /* Soft Pink：キャストコンテンツ専用ボーダー（操作色ではない） */
    --chevron:  #A99A92;  /* Chevron等のニュートラルアクセント（Brand Main Greige） */

    /* Status colors（Pill Badgeのみに使用。カード全体やテキストの数字には使わない） */
    --success:  #F50078; /* 成立（Primaryと同色） */
    --warn:     #FF9500; /* 承認待ち・確認待ち */
    --danger:   #FF3B30; /* 辞退・却下・エラー */
    --active:   #34C759; /* 申請中 */
    --disabled: #8E8E93; /* 期限切れ */
}

/* ── Global ─────────────────────────────────────────────────── */
body.role-shop {
    background: var(--spbg);
    color: var(--st);
}

body.role-shop a { color: var(--sp); }

body.role-shop .layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.role-shop .site-header,
body.role-shop .site-footer,
body.role-shop .role-nav {
    background: #fff;
    border-bottom-color: var(--sg);
}

body.role-shop .nav-action-btn {
    border-radius: 10px;
    border-color: var(--sp);
    color: var(--sp);
    background: #fff;
}
body.role-shop .nav-action-btn:hover {
    background: #fff;
    border-color: var(--sp-dark);
    color: var(--sp-dark);
}

body.role-shop .nav-links a:hover { color: var(--sp); border-bottom-color: var(--sp); }

/* ── Page card / Surface（Card Whiteを基準に） ─────────────── */
body.role-shop .page-card {
    background: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
}

/* ── Notices ────────────────────────────────────────────────── */
body.role-shop .notice {
    border-radius: 10px;
    border: 1px solid var(--sg);
}

body.role-shop .notice-info {
    background: #fff;
    border-color: var(--sg);
    border-left: 4px solid var(--sp);
    color: var(--st);
}

body.role-shop .notice-warning {
    background: #FFF6EB;
    border-color: var(--warn);
    border-left: 4px solid var(--warn);
    color: var(--st);
}

/* ── Buttons ────────────────────────────────────────────────────────────
   Primary CTA（.button）    ：Pink Fill が基本。画面で最も重要な操作に使用する
   Secondary Action（.button-secondary）：Pink Outline。補助的な操作に使用する
   ───────────────────────────────────────────────────────────────────── */
body.role-shop .button {
    background: var(--sp);
    border: 1px solid var(--sp);
    border-radius: 14px;
    color: #fff;
    font-weight: 600;
    transition: background-color .15s, border-color .15s, color .15s;
}
body.role-shop .button:hover {
    background: var(--sp-dark);
    border-color: var(--sp-dark);
    color: #fff;
}
body.role-shop .button:active {
    background: var(--sp-press);
    border-color: var(--sp-press);
    color: #fff;
}
body.role-shop .button:disabled,
body.role-shop .button[disabled] {
    background: #fff;
    border-color: var(--sg);
    color: var(--text-disabled);
    cursor: not-allowed;
}

body.role-shop .button-secondary {
    background: #fff;
    border: 1px solid var(--sp);
    color: var(--sp);
    font-weight: 600;
}
body.role-shop .button-secondary:hover {
    background: #fff;
    border-color: var(--sp-dark);
    color: var(--sp-dark);
}
body.role-shop .button-secondary:active {
    background: var(--sp-tint);
    border-color: var(--sp);
    color: var(--sp);
}
body.role-shop .button-secondary:disabled,
body.role-shop .button-secondary[disabled] {
    background: #fff;
    border-color: var(--sg);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* 「今夜の急募」など緊急CTAは例外的に固有色の塗りつぶしを維持（Primary Pinkとは無関係） */
body.role-shop .button-recruit-start {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
body.role-shop .button-recruit-start:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff;
}

/* ── Form inputs ────────────────────────────────────────────── */
body.role-shop .form-input {
    border-color: var(--sg);
    border-radius: 8px;
    background: #fff;
}
body.role-shop .form-input:focus {
    outline: none;
    border-color: var(--sp);
    box-shadow: 0 0 0 3px rgba(245, 0, 120, .12);
}

/* ── Checkbox / Radio（選択状態にのみPrimary Colorを使用） ─── */
body.role-shop input[type="checkbox"],
body.role-shop input[type="radio"] {
    accent-color: var(--sp);
}

/* ── Badges（Pill Badge：状態専用カラーで塗りつぶし、白文字） ─
   数字（件数）はPrimary Textのまま強調し、色は小さなバッジにのみ使う ── */
body.role-shop .badge {
    border: none;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}
body.role-shop .badge-approved   { background: var(--active); }
body.role-shop .badge-pending    { background: var(--warn); }
body.role-shop .badge-rejected   { background: var(--danger); }
body.role-shop .badge-resubmit   { background: var(--warn); }
body.role-shop .badge-suspended,
body.role-shop .badge-unverified { background: var(--disabled); }

/* 未読件数バブル：注意喚起の赤を使用しPrimary Pinkとは区別する */
body.role-shop .badge-count { background: var(--danger); color: #fff; }

/* 書類審査ステータス（documents.php） */
body.role-shop .reg-status-badge {
    color: #fff;
    border-radius: 999px;
}
body.role-shop .reg-status-badge--pending               { background: var(--warn); }
body.role-shop .reg-status-badge--approved               { background: var(--active); }
body.role-shop .reg-status-badge--rejected,
body.role-shop .reg-status-badge--resubmission_required  { background: var(--danger); }

/* 通知フィルタータブ（notifications.php）：文字ではなく下線でPrimaryを表現 */
body.role-shop .notification-tabs a {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ss);
    background: none;
}
body.role-shop .notification-tabs a.active {
    border-bottom-color: var(--sp);
    background: none;
    color: var(--st);
    font-weight: 700;
}

/* 通知一覧の未読表示：塗りつぶしではなく左アクセント線のみ */
body.role-shop .notification-item.is-unread,
body.role-shop .dashboard-notification-item.is-unread {
    background: #fff;
    border-color: var(--sg);
    border-left: 3px solid var(--sp);
}

/* ── Toggle Switch（通知ON/OFF設定：Apple Green系の例外運用） ── */
body.role-shop .notif-switch-ui { background: #E5E5EA; }
body.role-shop .notif-switch input:checked + .notif-switch-ui { background: var(--active); }

/* ── Cast Card（キャスト専用カラー：Soft Pink Border） ─────────
   Primary(#F50078)を枠線に直接使用せず、操作色とは別のSoft Pinkで
   「キャストコンテンツであること」を示す。 ─────────────────── */
body.role-shop .cast-card,
body.role-shop .tonight-cast-card {
    border-color: var(--cast-border);
    border-radius: 14px;
    box-shadow: none;
}
body.role-shop .cast-card-btn,
body.role-shop .tonight-cast-btn {
    background: var(--sp);
    color: #fff;
    border-radius: 10px;
    transition: background-color .15s;
}
body.role-shop .cast-card-btn:hover,
body.role-shop .tonight-cast-btn:hover { background: var(--sp-dark); }
body.role-shop .cast-card-offer-count { color: var(--danger); }

/* ── Tabs：文字色はPrimary Textのまま、下線だけPrimaryにする ── */
body.role-shop .tab-bar { border-bottom-color: var(--sg); }
body.role-shop .tab-item { color: var(--ss); }
body.role-shop .tab-item.is-active {
    color: var(--st);
    border-bottom-color: var(--sp);
}
body.role-shop .tab-item:hover {
    color: var(--st);
    background: none;
    border-bottom-color: var(--sg);
}

/* ── Dashboard cards（旧汎用版。points.php等で使用） ───────── */
body.role-shop .dashboard-cards {
    gap: 14px;
}

body.role-shop .dashboard-card {
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
    transition: transform .15s, box-shadow .15s;
}

body.role-shop .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(43, 43, 43, .12);
}

body.role-shop .dashboard-card-title { color: var(--ss); }
body.role-shop .dashboard-card-count { color: var(--st); }
body.role-shop .dashboard-card-links a { color: var(--sp); }

body.role-shop .dashboard-links a:hover { color: var(--sp); }

/* ── Notifications（旧汎用版） ──────────────────────────────── */
body.role-shop .dashboard-notifications {
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
}

body.role-shop .dashboard-notification-item {
    border: 1px solid var(--sg);
    border-radius: 10px;
    background: #fff;
}

body.role-shop .dashboard-notification-title { color: var(--st); }
body.role-shop .dashboard-notification-title:hover { color: var(--sp); }
body.role-shop .dashboard-notification-meta { color: var(--ss); }

/* ── Mini calendar ──────────────────────────────────────────── */
body.role-shop .mini-cal-nav {
    border-color: var(--sg);
    color: var(--ss);
    background: var(--spbg);
}
body.role-shop .cal-today .mini-cal-num { background: var(--sp); }
body.role-shop .mini-cal-day:hover { background: var(--sp-tint); }

/* カレンダーの状態チップ：確定＝Success(=Primary)、承認待ち＝Warning、完了＝Disabled */
body.role-shop .chip-confirmed,
body.role-shop .item-confirmed .cal-detail-badge { background: var(--success); }
body.role-shop .chip-pending,
body.role-shop .item-pending .cal-detail-badge { background: var(--warn); }
body.role-shop .chip-completed,
body.role-shop .item-completed .cal-detail-badge { background: var(--disabled); }
body.role-shop .item-confirmed { background: var(--sp-tint); }
body.role-shop .item-pending   { background: #FFF3E0; }
body.role-shop .item-completed { background: #F2F2F1; }

/* ══════════════════════════════════════════════════════════════
   Header (logo + icons)
   ══════════════════════════════════════════════════════════════ */
body.role-shop .site-header {
    position: sticky;
    top: 0;
    z-index: 150;
    height: 56px;
}

body.role-shop .site-header .container {
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

body.role-shop .site-header-row {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.role-shop .shop-logo-link {
    font-size: 17px;
    font-weight: bold;
    color: var(--st);
    text-decoration: none;
}

body.role-shop .shop-logo-link img {
    display: block;
    height: 22px;
    width: auto;
}

.shop-header-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.role-shop .shop-header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st);
    font-size: 21px;
    line-height: 1;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

body.role-shop .shop-header-logout { color: var(--ss); }

/* 未読件数バッジは状態（要対応）を示すため、Primary Pinkではなく警戒色を使用 */
.shop-header-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--danger);
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 10px;
    min-width: 14px;
    text-align: center;
    line-height: 1.6;
    pointer-events: none;
}

.shop-header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F5F5F6;
    border: 1.5px solid var(--sg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}

.shop-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* デスクトップ：ロゴはサイドバー側にあるため、ヘッダーはページタイトル＋検索を表示する */
.shop-header-desktop-only { display: none; }

.shop-header-title-block {
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}
.shop-header-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--st);
    white-space: nowrap;
}
.shop-header-date {
    font-size: 12px;
    color: var(--ss);
    white-space: nowrap;
}

.shop-header-search {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
    margin: 0 16px;
    padding: 8px 14px;
    border: 1px solid var(--sg);
    border-radius: 20px;
    background: var(--spbg);
    color: var(--ss);
}
.shop-header-search:focus-within {
    border-color: var(--sp);
    background: #fff;
}
.shop-header-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: var(--st);
}

/* Suppress old role nav */
body.role-shop .role-nav { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   Bottom nav (mobile-first)
   選択中：アイコン・ラベルをPinkに、背景は常にWhite
   未選択：Secondary Text
   ══════════════════════════════════════════════════════════════ */
body.role-shop .shop-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid var(--sg);
    display: flex;
    align-items: stretch;
    z-index: 150;
    box-shadow: 0 -2px 16px rgba(43, 43, 43, .06);
}

body.role-shop .shop-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--ss);
    padding: 6px 4px 4px;
    transition: color .15s;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

body.role-shop .shop-bottom-nav-item.is-active { color: var(--sp); background: none; }
body.role-shop .shop-bottom-nav-item:hover     { color: var(--sp); }

.shop-bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
}

.shop-bottom-nav-label {
    font-size: 9px;
    line-height: 1;
    display: block;
    white-space: nowrap;
}

body.role-shop .shop-bottom-nav-item.is-center {
    background: none;
    color: var(--ss);
    border-radius: 0;
    margin: 0;
    padding-top: 6px;
}

body.role-shop .shop-bottom-nav-item.is-center:hover     { background: none; color: var(--sp); }
body.role-shop .shop-bottom-nav-item.is-center.is-active { background: none; color: var(--sp); }

.shop-nav-badge {
    position: absolute;
    top: 5px;
    left: calc(50% + 4px);
    background: var(--danger);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════════════════════════
   Sidebar navigation (desktop, ≥900px)
   選択状態は背景を塗らず、左アクセント線＋アイコン/文字色で表現する
   （タブ・ボトムナビの「塗りつぶさない」原則をサイドバーにも適用）
   ══════════════════════════════════════════════════════════════ */
body.role-shop .shop-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 248px;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--sg);
    z-index: 160;
    overflow-y: auto;
}

.shop-sidebar-top {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--sg);
}

body.role-shop .shop-sidebar-logo {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--st);
    text-decoration: none;
}

body.role-shop .shop-sidebar-logo img {
    display: block;
    height: 26px;
    width: auto;
}

.shop-sidebar-shopname {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ss);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-sidebar-nav {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.role-shop .shop-sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 9px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: var(--st);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s, color .12s, border-color .12s;
}

body.role-shop .shop-sidebar-item:hover { background: var(--spbg); }

/* 選択中：背景は塗らず、左のアクセント線とPinkの文字/アイコンで「現在地」を示す */
body.role-shop .shop-sidebar-item.is-active {
    background: #fff;
    border-left-color: var(--sp);
    color: var(--sp);
    font-weight: bold;
}

.shop-sidebar-item-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
}

.shop-sidebar-item-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-sidebar-item-badge {
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 9px;
    text-align: center;
    padding: 0 5px;
    flex-shrink: 0;
}

body.role-shop .shop-sidebar-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--sg);
    text-decoration: none;
    color: var(--st);
}

body.role-shop .shop-sidebar-account:hover { background: var(--spbg); }

.shop-sidebar-account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F5F5F6;
    border: 1.5px solid var(--sg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--ss);
}
.shop-sidebar-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-sidebar-account-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.shop-sidebar-account-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-sidebar-account-role {
    font-size: 11px;
    color: var(--ss);
}
.shop-sidebar-account-chevron {
    color: var(--chevron);
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Main content area ───────────────────────────────────────── */
body.role-shop .site-main {
    padding: 0 0 68px;
    flex: 1;
}

body.role-shop .site-main .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 24px 0 0;
}

/* ── Footers ─────────────────────────────────────────────────── */
body.role-shop .shop-footer-nav { display: none; }
body.role-shop .site-footer     { display: none; }

/* ── Flash / Notice ─────────────────────────────────────────── */
body.role-shop .flash,
body.role-shop .notice {
    margin: 12px 16px 0;
    border-radius: 10px;
    font-size: 13px;
}

body.role-shop .flash-success  { background: #E9F9EE; border-color: var(--active); }
body.role-shop .flash-error    { background: #FFEBEA; border-color: var(--danger); }

/* ══════════════════════════════════════════════════════════════
   Dashboard components
   ══════════════════════════════════════════════════════════════ */

.shop-page { padding-bottom: 16px; }

/* ── Greeting ────────────────────────────────────────────────── */
.shop-greeting {
    padding: 22px 16px 0;
}

.shop-greeting-hello {
    font-size: 17px;
    font-weight: bold;
    color: var(--st);
    line-height: 1.4;
}

.shop-greeting-hello .shop-name-highlight { color: var(--sp); }

.shop-greeting-sub {
    font-size: 13px;
    color: var(--ss);
    margin-top: 4px;
}

/* ── Section wrapper ─────────────────────────────────────────── */
.shop-section { margin-top: 24px; }

.shop-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 12px;
}

.shop-section-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--st);
}

body.role-shop .shop-section-more {
    font-size: 12px;
    color: var(--ss);
    text-decoration: none;
}

body.role-shop .shop-section-more:hover { color: var(--sp); }

/* ── Stats bar ──────────────────────────────────────────────── */
.shop-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 16px;
}

body.role-shop .shop-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 6px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(43, 43, 43, .06);
    text-decoration: none;
    color: var(--st);
    display: block;
    transition: box-shadow .15s, transform .15s;
}

body.role-shop .shop-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(43, 43, 43, .12);
    color: var(--st);
}

/* 件数はPrimary Textで強調する（Status Colorはバッジのみに使用するため数字には使わない） */
.shop-stat-count {
    font-size: 24px;
    font-weight: bold;
    color: var(--st);
    line-height: 1.1;
}

.shop-stat-count.has-alert { color: var(--danger); }

.shop-stat-label {
    font-size: 10px;
    color: var(--ss);
    margin-top: 5px;
    line-height: 1.3;
}

/* ── Notification card ───────────────────────────────────────── */
.shop-notification-card {
    margin: 0 16px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
}

body.role-shop .shop-notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    text-decoration: none;
    color: var(--st);
    border-bottom: 1px solid var(--spbg);
    transition: background .12s;
}

body.role-shop .shop-notification-item:last-child { border-bottom: none; }
body.role-shop .shop-notification-item:hover      { background: var(--spbg); }

/* 未読ドットは小面積のアクセントとしてPrimaryを維持（iOS標準の未読表現に準拠） */
.shop-notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sp);
    flex-shrink: 0;
    margin-top: 5px;
}

.shop-notification-dot.is-read { background: var(--sg); }

.shop-notification-body { flex: 1; min-width: 0; }

.shop-notification-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--st);
    line-height: 1.4;
    margin-bottom: 2px;
}

.shop-notification-title.is-read {
    font-weight: normal;
    color: var(--ss);
}

.shop-notification-meta {
    font-size: 10px;
    color: var(--ss);
    line-height: 1.4;
}

.shop-notification-arrow {
    font-size: 14px;
    color: var(--chevron);
    flex-shrink: 0;
    align-self: center;
}

.shop-notification-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--ss);
    font-size: 13px;
}

/* ── Calendar wrapper ───────────────────────────────────────── */
.shop-calendar-wrap {
    margin: 0 16px;
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
    overflow: hidden;
}

/* ── Menu card ──────────────────────────────────────────────── */
.shop-menu-card {
    margin: 0 16px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(43, 43, 43, .06);
}

body.role-shop .shop-menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--st);
    border-bottom: 1px solid var(--spbg);
    transition: background .12s;
}

body.role-shop .shop-menu-row:last-child { border-bottom: none; }
body.role-shop .shop-menu-row:hover      { background: var(--spbg); }

.shop-menu-row--urgent .shop-menu-icon { color: var(--warn); }
.shop-menu-row--urgent .shop-menu-label { color: #B25900; font-weight: bold; }

/* アイコン背景はPinkの円で囲まない。円はニュートラル、アイコン線のみPrimary */
.shop-menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F5F5F6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp);
    flex-shrink: 0;
}

.shop-menu-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.shop-menu-arrow {
    font-size: 20px;
    color: var(--chevron);
    line-height: 1;
}

/* ── Menu grid (home-page shortcut icons) ─────────────────────── */
.shop-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
    padding: 0 16px;
}

body.role-shop .shop-menu-tile {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 16px 4px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(43, 43, 43, .06);
    text-decoration: none;
    color: var(--st);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: box-shadow .15s, transform .15s;
}

body.role-shop .shop-menu-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(43, 43, 43, .12);
    color: var(--st);
}

/* アイコン背景はPinkの円で囲まない。円はニュートラルグレー、アイコン線のみPrimary */
.shop-menu-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F5F5F6;
    color: var(--sp);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-menu-tile-icon svg {
    width: 26px;
    height: 26px;
}

.shop-menu-tile--urgent .shop-menu-tile-icon { background: #FFF3E0; color: var(--warn); }
.shop-menu-tile--urgent .shop-menu-tile-label { color: #B25900; font-weight: bold; }

.shop-menu-tile-label {
    font-size: 11.5px;
    line-height: 1.3;
}

.shop-menu-tile-badge {
    position: absolute;
    top: 6px;
    right: 14px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ── Dashboard grid（index.php：メイン＋右レール） ───────────── */
.shop-dashboard-main { min-width: 0; }

.shop-dashboard-rail {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.shop-rail-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(43, 43, 43, .06);
}

.shop-rail-card-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--st);
    margin-bottom: 10px;
}

.shop-rail-empty {
    font-size: 12px;
    color: var(--ss);
    padding: 8px 0;
}

.shop-rail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.role-shop .shop-rail-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--spbg);
    text-decoration: none;
    color: var(--st);
    font-size: 12px;
}
body.role-shop .shop-rail-event:hover { background: var(--sp-tint); }

.shop-rail-event-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pill Badge：状態専用カラーで塗りつぶす（Primary/数字とは別要素として扱う） */
.shop-rail-status {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
}
.shop-rail-status--confirmed { background: var(--success); }
.shop-rail-status--pending   { background: var(--warn); }
.shop-rail-status--completed { background: var(--disabled); }

body.role-shop .shop-rail-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    text-decoration: none;
    color: var(--st);
    border-radius: 8px;
}
body.role-shop .shop-rail-message:hover { background: var(--spbg); }

.shop-rail-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F5F5F6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 15px;
}
.shop-rail-message-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-rail-message-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.shop-rail-message-name {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-rail-message-preview {
    font-size: 11px;
    color: var(--ss);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.role-shop .shop-rail-more {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--ss);
    text-decoration: none;
    text-align: right;
}
body.role-shop .shop-rail-more:hover { color: var(--sp); }

.shop-rail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shop-rail-action-btn {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   Desktop layout  (≥ 900px) — left sidebar navigation
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

    /* モバイルの下部ナビは非表示にし、左サイドバーに切り替える */
    body.role-shop .shop-bottom-nav { display: none; }
    body.role-shop .shop-sidebar    { display: flex; }

    /* ヘッダー：ロゴ(モバイル用)を隠し、ページタイトル＋検索を表示 */
    .shop-header-mobile-only  { display: none; }
    .shop-header-desktop-only { display: flex; }

    body.role-shop .site-header {
        margin-left: 248px;
    }

    body.role-shop .site-main {
        margin-left: 248px;
        padding: 0 0 40px;
    }

    body.role-shop .site-footer {
        display: block;
        margin-left: 248px;
        background: #fff;
        border-top: 1px solid var(--sg);
        padding: 14px 0;
        text-align: center;
        font-size: 12px;
        color: var(--ss);
    }

    /* 未ログイン画面には左サイドバーがないため、本文を画面中央に戻す */
    body.role-shop.shop-guest .site-header,
    body.role-shop.shop-guest .site-main,
    body.role-shop.shop-guest .site-footer {
        margin-left: 0;
    }

    .shop-page {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 24px 24px;
    }

    body.role-shop .page-card {
        max-width: 760px;
        margin: 0 auto;
        padding: 24px;
    }

    body.role-shop .shop-greeting        { padding-left: 0; padding-right: 0; }
    body.role-shop .shop-section-header  { padding-left: 0; padding-right: 0; }
    body.role-shop .shop-stats-row       { padding-left: 0; padding-right: 0; }
    body.role-shop .shop-notification-card { margin-left: 0; margin-right: 0; }
    body.role-shop .shop-calendar-wrap   { margin-left: 0; margin-right: 0; }
    body.role-shop .shop-menu-card       { margin-left: 0; margin-right: 0; }
    body.role-shop .shop-menu-grid       { padding-left: 0; padding-right: 0; }
    body.role-shop .flash,
    body.role-shop .notice {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .shop-greeting-hello { font-size: 24px; }
    .shop-stat-count      { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   Wide desktop (≥ 1180px) — home page gains a right rail
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1180px) {
    .shop-page { max-width: 1100px; }

    .shop-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 24px;
        align-items: start;
    }

    .shop-dashboard-grid.shop-dashboard-grid--no-rail {
        display: block;
    }

    .shop-dashboard-rail { display: flex; margin-top: 40px; }
}

/* ══════════════════════════════════════════════════════════════
   アイコン写真編集（profile_edit.php）
   ══════════════════════════════════════════════════════════════ */
body.role-shop .avatar-edit-actions { align-items: flex-start; }

body.role-shop .avatar-upload-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

body.role-shop .avatar-edit-hint {
    width: auto;
    padding-left: 0;
    margin-top: 0;
}