/* Salon Operations suite look — loaded AFTER styles.css.
   Same top bar, headers, pill tabs, KPI cards and colors as SalonOverview and Salon PTO. */
:root {
  --s-green: #1E5B3C; --s-btn: #3B8A5C; --s-btn-d: #2F7450; --s-link: #2F7D52; --s-tint: #E4F2EA;
  --s-ink: #16231D; --s-ink2: #44524B; --s-mute: #5C6862; --s-line: #E3E8E5; --s-line2: #EDF1EF;
  --s-head: #F3F6F4; --s-bg: #F5F7F6;
  --s-red: #B42318; --s-redbg: #FDECEA; --s-amber: #B7791F; --s-amberbg: #FBF0DA; --s-blue: #3567B5; --s-bluebg: #E6EEFB;
  --jade: #3B8A5C; --dark: #1E5B3C; --text: #16231D; --muted: #5C6862; --line: #E3E8E5; --surface-soft: #F3F6F4; --surface-muted: #EEF2F0;
}
body { background: var(--s-bg) !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--s-ink); }
body::before, body::after { display: none !important; }
[hidden] { display: none !important; }
h1, h2, h3, h4, .btn, .pill, .metric-value, .modal-title, .column-title { font-family: "Poppins", Arial, sans-serif; }

/* ---------- suite top bar ---------- */
.suitebar { background: #fff; border-bottom: 1px solid var(--s-line); position: sticky; top: 0; z-index: 40; }
.suitebar .in { max-width: 1360px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; justify-content: space-between; }
.suite-brand { display: flex; align-items: center; gap: 12px; color: var(--s-ink); }
.suite-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--s-green); display: flex; align-items: center; justify-content: center; flex: none; }
.suite-name { font: 700 15px "Poppins", sans-serif; line-height: 1.2; }
.suite-name small { display: block; font: 500 12px "Inter", sans-serif; color: var(--s-mute); }
.appswitch { display: flex; gap: 4px; background: var(--s-head); border-radius: 999px; padding: 4px; }
.appswitch a { font: 600 14px "Poppins", sans-serif; padding: 8px 16px; border-radius: 999px; color: var(--s-ink2); display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 38px; }
.appswitch a.on { background: var(--s-tint); color: var(--s-green); }
.appswitch a:hover:not(.on) { background: #fff; }
.userbox { display: flex; align-items: center; gap: 10px; font: 500 13px "Inter", sans-serif; color: var(--s-mute); }
.userbox .suite-chip { background: none; border: 0; padding: 0; color: var(--s-mute); font: 500 13px "Inter", sans-serif; }
.u-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--s-tint); color: var(--s-green); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- page ---------- */
.suite-main { max-width: 1360px; margin: 0 auto; padding: 28px 20px 60px !important; display: grid; gap: 24px; align-content: start; }
.phead { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; justify-content: space-between; }
.phead .ttl { display: flex; gap: 16px; align-items: center; min-width: 0; }
.appicon { width: 60px; height: 60px; border-radius: 16px; background: #fff; border: 1px solid var(--s-line); display: flex; align-items: center; justify-content: center; flex: none; color: var(--s-btn); }
.phead h1 { font: 800 30px "Poppins", sans-serif; color: var(--s-green); margin: 0; letter-spacing: -.4px; }
.phead .lede { margin: 4px 0 0; font-size: 16px; color: var(--s-ink2); }
.phead .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.sectionpills { display: flex; flex-wrap: wrap; gap: 8px; }
.sectionpills a { font: 500 14px "Inter", sans-serif; padding: 9px 18px; border-radius: 999px; border: 1px solid #DCE3DF; background: #fff; color: var(--s-ink); white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
.sectionpills a:hover { border-color: #BFD3C7; }
.sectionpills a.on { background: #16231D; border-color: #16231D; color: #fff; }

/* ---------- buttons ---------- */
.btn { border-radius: 10px !important; min-height: 44px; padding: 0 18px; font: 600 14px "Poppins", sans-serif !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary { background: var(--s-btn) !important; color: #fff !important; border: 0 !important; }
.btn-primary:hover { background: var(--s-btn-d) !important; }
.btn-secondary { background: #fff !important; color: var(--s-green) !important; border: 1px solid #CFE0D6 !important; }
.btn-secondary:hover { background: var(--s-tint) !important; }
.btn-success { background: var(--s-btn) !important; color: #fff !important; border: 0 !important; }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 13px !important; }

/* ---------- KPI cards ---------- */
.summary-strip { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 18px !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.metric { background: #fff !important; border: 1px solid var(--s-line) !important; border-radius: 16px !important; padding: 20px !important; box-shadow: 0 1px 2px rgba(20, 40, 30, .04) !important;
  display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "l i" "v i" "n i"; column-gap: 12px; align-items: start; }
.metric .metric-label { grid-area: l; font: 500 15px "Inter", sans-serif !important; color: var(--s-mute) !important; text-transform: none !important; letter-spacing: 0 !important; }
.metric .metric-value { grid-area: v; font: 700 32px "Poppins", sans-serif !important; color: var(--s-ink) !important; letter-spacing: -.5px; margin: 4px 0 2px; }
.metric .metric-note { grid-area: n; font: 400 13px "Inter", sans-serif !important; color: var(--s-mute) !important; }
.metric .m-ic { grid-area: i; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.m-ic.red { background: var(--s-redbg); color: var(--s-red); } .m-ic.amber { background: var(--s-amberbg); color: var(--s-amber); }
.m-ic.green { background: var(--s-tint); color: var(--s-link); } .m-ic.gray { background: #EEF1F0; color: var(--s-ink2); }
.m-ic.blue { background: var(--s-bluebg); color: var(--s-blue); }

/* ---------- panels / board ---------- */
.panel, .digest-card, .modal-card { background: #fff !important; border: 1px solid var(--s-line) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(20, 40, 30, .04) !important; backdrop-filter: none !important; }
.panel-head h3, .digest-card h3 { font: 700 19px "Poppins", sans-serif !important; color: var(--s-green) !important; }
.panel-head p, .digest-card p { color: var(--s-ink2) !important; }
.board-panel { display: grid; gap: 18px; padding: 22px !important; }
.board-panel .panel-head { margin-bottom: 0 !important; }
.pill { border-radius: 999px !important; font: 500 13px "Inter", sans-serif !important; min-height: 38px; padding: 7px 14px !important; border: 1px solid #DCE3DF !important; background: #fff !important; color: var(--s-ink) !important; box-shadow: none !important; }
.pill.active { background: var(--s-tint) !important; border-color: #BFDCCB !important; color: var(--s-green) !important; font-weight: 600 !important; }
.search { border-radius: 10px !important; border: 1px solid #DCE3DF !important; background: #fff !important; min-height: 44px; }
input, select, textarea { border-radius: 10px !important; border-color: #DCE3DF !important; }
.board-column { background: #EEF2F0 !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; padding: 16px !important; }
.column-title { font: 700 16px "Poppins", sans-serif !important; color: var(--s-ink) !important; }
.column-count { background: #fff !important; color: var(--s-ink2) !important; font: 600 13px "Inter", sans-serif !important; border-radius: 999px !important; border: 0 !important; }
.status-inbox { background: #D14B3A !important; } .status-progress { background: #D99A2B !important; } .status-resolved { background: #3B8A5C !important; }
.card { background: #fff !important; border: 1px solid var(--s-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.card:hover { border-color: #BFD3C7 !important; transform: none !important; box-shadow: 0 2px 8px rgba(20, 40, 30, .06) !important; }
.card.featured { border-color: var(--s-line) !important; background: #fff !important; }
.ticket-id { color: var(--s-link) !important; font: 700 13px "Inter", sans-serif !important; }
.ticket-title { font: 600 16px "Poppins", sans-serif !important; color: var(--s-ink) !important; }
.ticket-salon { color: var(--s-ink2) !important; font: 500 13px "Inter", sans-serif !important; }
.meta-chip { background: var(--s-head) !important; color: var(--s-ink2) !important; border: 0 !important; border-radius: 8px !important; font: 500 12px "Inter", sans-serif !important; }
.tag { border-radius: 999px !important; font: 600 12px "Inter", sans-serif !important; border: 0 !important; }
.tag.high { background: var(--s-redbg) !important; color: var(--s-red) !important; }
.tag.medium { background: var(--s-amberbg) !important; color: #8A5A12 !important; }
.tag.low { background: var(--s-tint) !important; color: #23804F !important; }
.ticket-footer { border-top: 1px solid var(--s-line2) !important; }
.avatar { background: var(--s-tint) !important; color: var(--s-green) !important; }
.icon-btn { background: #fff !important; color: var(--s-green) !important; border: 1px solid #CFE0D6 !important; border-radius: 10px !important; font: 600 13px "Poppins", sans-serif !important; }
.eyebrow { color: var(--s-link) !important; }
.modal-title { color: var(--s-green) !important; }
.closed-board-panel { background: #fff !important; border: 1px solid var(--s-line) !important; box-shadow: 0 1px 2px rgba(20, 40, 30, .04) !important; }

@media (max-width: 760px) {
  .phead h1 { font-size: 24px; }
  .appicon { width: 48px; height: 48px; border-radius: 12px; }
  .phead .acts { justify-content: flex-start; }
  .userbox .suite-chip { display: none; }
  .appswitch { order: 3; width: 100%; justify-content: center; }
}
.focus-card .eyebrow { color: rgba(255, 255, 255, .78) !important; }