/* ============================================================
   CableCast — the one staff header (backend + CRM pages share it).
   Admin and store manager see the same chrome; only the links and
   the figures behind them differ. Tokens: ds.css.
   ============================================================ */
.crm-nav { display: flex; align-items: center; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--border-hairline); background: var(--bg-surface); flex: none; flex-wrap: wrap; }
.crm-brand { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: var(--fg-1); text-decoration: none; }
.crm-brand:hover { color: var(--fg-1); }
.crm-brand .m { width: 24px; height: 24px; border-radius: 7px; background: var(--fg-1); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
.crm-brand span { font-size: 13px; font-weight: 700; }
.crm-brand small { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-2); }
.crm-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.crm-tab { font-size: 12px; font-weight: 600; color: var(--fg-2); padding: 13px 12px; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.crm-tab:hover { color: var(--fg-1); }
.crm-tab.active { font-weight: 700; color: var(--brand); border-bottom-color: var(--brand); }
.crm-tab.soon { color: var(--fg-3); cursor: default; }
.crm-tab.soon::after { content: '·'; margin-left: 5px; color: var(--fg-3); }
.crm-menu { position: relative; }
.crm-menu summary { list-style: none; cursor: pointer; display: inline-block; user-select: none; }
.crm-menu summary::-webkit-details-marker { display: none; }
.crm-menu-list { position: absolute; top: calc(100% - 2px); left: 0; z-index: 60; min-width: 190px; background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: 10px; box-shadow: var(--shadow-medium); padding: 6px; display: flex; flex-direction: column; }
.crm-menu-list a { font-size: 12px; font-weight: 600; color: var(--fg-1); padding: 8px 10px; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.crm-menu-list a:hover { background: var(--bg-tinted); color: var(--fg-1); }
.crm-menu-list a.active { color: var(--brand); font-weight: 700; }
.crm-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-role { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .4px; white-space: nowrap; }
.crm-role.admin { background: #1C1C1C; color: #fff; }
.crm-role.manager { background: var(--bg-tinted); color: var(--brand-soft-fg); }
.crm-role.preview { background: #FBF3E4; color: #7a5a17; }
.crm-user { font-size: 12px; color: var(--fg-2); text-decoration: none; }
a.crm-user:hover { color: var(--brand); text-decoration: underline; }
.crm-signout { font-size: 11px; font-weight: 700; color: var(--fg-1); background: transparent; border: 1px solid var(--border-hairline); padding: 6px 12px; border-radius: 9999px; cursor: pointer; font-family: inherit; }
.crm-signout:hover { background: var(--bg-tinted); }
.crm-signout.warn { border-color: #c58c2a; color: #7a5a17; }
.crm-flash { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; }
.crm-flash.ok { background: #EAF6EE; color: var(--semantic-success); }
.crm-flash.err { background: #FDF0F0; color: var(--semantic-negative); }
.crm-preview-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 16px; background: #FBF3E4; color: #7a5a17; font-size: 12px; font-weight: 600; border-bottom: 1px solid #efd9a5; flex: none; flex-wrap: wrap; }
.crm-preview-bar form { margin: 0; }
.crm-preview-bar button { font-size: 11px; font-weight: 700; border: 1px solid #c58c2a; background: #fff; color: #7a5a17; border-radius: 9999px; padding: 4px 12px; cursor: pointer; font-family: inherit; }
.crm-preview-bar button:hover { background: #fff7e6; }
.crm-preview-bar.paused { background: #FCECEC; color: #8a2b2b; border-bottom-color: #f0c2c2; }
@media (max-width: 900px) { .crm-nav { gap: 10px; padding: 0 12px; } .crm-tab { padding: 11px 8px; } }