/* Cue Operations Center.
   Palette and card anatomy follow Cue_Operations_Center_Prototype_v20.html so the
   built page reads the same as the mock-up the Project Coordination team signed off. */
.sams-page {
    --navy: #0a2540;
    --navy2: #123457;
    --ink: #132436;
    --paper: #f5f7fa;
    --line: #e4e9f0;
    --line2: #eef2f7;
    --muted: #5f6f82;
    --muted2: #8a97a8;

    /* Semantic lanes, tuned to a coordinator's mental model. */
    --act: #e0524e;   --actSoft: #fdeceb;   --actLine: #f6cfcd;   /* needs my action */
    --wait: #6b62d6;  --waitSoft: #eeecfb;  --waitLine: #d8d3f4;  /* waiting on others */
    --done: #1f9d63;  --doneSoft: #e7f6ee;  --doneLine: #c6ecd6;  /* buttoned up */
    --warn: #c8791a;  --warnSoft: #fdf1df;  --warnLine: #f4dcb4;  /* soon / caution */
    --info: #1f6fb2;  --infoSoft: #e8f2fb;  --infoLine: #cfe4f6;

    --shadow: 0 10px 30px rgba(10, 37, 64, .10);
    --shadowSm: 0 2px 8px rgba(10, 37, 64, .06);
    --radius: 14px;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    color: var(--ink);
}

/* ---------- Viewing-as row ---------- */
.sams-whobar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sams-who-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sams-chips { display: flex; gap: 6px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: var(--shadowSm); }

.sams-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid transparent; background: transparent; border-radius: 8px;
    padding: 7px 11px; font-size: 13px; font-weight: 700; color: var(--muted);
    cursor: pointer; transition: .12s;
}
.sams-chip:hover { background: var(--paper); color: var(--ink); }
.sams-chip.active { color: #fff; }
.sams-chip-team.active { background: var(--navy); border-color: var(--navy); }

.sams-dot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.sams-dot-none { background: var(--muted2); }

/* ---------- Hero ---------- */
.sams-hero {
    background: linear-gradient(135deg, #0a2540 0%, #123457 62%, #17457a 100%);
    color: #fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px;
    position: relative; overflow: hidden;
}
.sams-hero::after {
    content: ""; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px;
    border-radius: 50%; background: radial-gradient(circle, rgba(143, 209, 79, .16), transparent 70%);
}
.sams-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; }
.sams-hero-lead { min-width: 280px; }
.sams-greet { font-size: 13px; color: rgba(255, 255, 255, .7); font-weight: 600; margin-bottom: 6px; }
.sams-hero-headline { font-size: 27px; font-weight: 800; letter-spacing: -.4px; line-height: 1.12; max-width: 640px; margin: 0; }
.sams-hero-sub { margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.5; max-width: 600px; }

.sams-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.sams-kpi { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 11px 15px; min-width: 104px; }
.sams-kpi-value { font-size: 26px; font-weight: 900; line-height: 1; font-family: var(--mono); }
.sams-kpi-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .72); margin-top: 5px; font-weight: 700; }
.sams-kpi-act .sams-kpi-value { color: #ffb4b0; }
.sams-kpi-wait .sams-kpi-value { color: #c8c2f7; }
.sams-kpi-done .sams-kpi-value { color: #a7e6c2; }

/* ---------- Filters ---------- */
.sams-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadowSm); padding: 14px 16px; margin-bottom: 18px; }
.sams-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; align-items: end; }
.sams-field label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: block; margin-bottom: 5px; }
.sams-filter-input { width: 100%; height: 37px; border: 1px solid #cfd8e3; border-radius: 9px; background: #fff; color: var(--ink); font-size: 13px; padding: 0 10px; }
.sams-filter-input:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 3px var(--infoSoft); }
.sams-filter-actions { display: flex; gap: 8px; align-items: end; }

.sams-btn { height: 37px; border: 1px solid #cfd8e3; background: #fff; border-radius: 9px; padding: 0 13px; color: var(--ink); font-weight: 700; cursor: pointer; font-size: 13px; white-space: nowrap; }
.sams-btn:hover { border-color: var(--info); color: var(--info); }
.sams-btn-primary { background: var(--info); border-color: var(--info); color: #fff; }
.sams-btn-primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- Tabs ---------- */
.sams-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 18px; }
.sams-tab { border: 0; background: transparent; padding: 11px 16px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.sams-tab:hover { color: var(--ink); }
.sams-tab.active { color: var(--navy); border-bottom-color: #8fd14f; }

/* ---------- Sections ---------- */
.sams-section { margin: 22px 0; }
.sams-sec-head { margin-bottom: 12px; }
.sams-sec-head h2 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.sams-sec-note, .sams-section-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 1080px; }

/* ---------- Box cards ---------- */
.sams-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 13px; }

.sams-box {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 15px; box-shadow: var(--shadowSm); min-height: 158px;
    display: flex; flex-direction: column; justify-content: space-between;
    cursor: pointer; transition: .12s;
}
.sams-box:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: #cfd8e3; }
.sams-box:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.sams-box-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sams-box-actions { display: flex; align-items: center; gap: 6px; }

.sams-box-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.sams-box-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; color: var(--muted); margin-top: 12px; }
.sams-box-value { font-size: 32px; font-weight: 900; line-height: 1.05; margin: 3px 0; font-family: var(--mono); }
.sams-box-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sams-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }

/* Tone tints the icon badge; the value stays ink so the figure reads first. */
.sams-tone-act .sams-box-icon { background: var(--actSoft); color: var(--act); }
.sams-tone-wait .sams-box-icon { background: var(--waitSoft); color: var(--wait); }
.sams-tone-warn .sams-box-icon { background: var(--warnSoft); color: var(--warn); }
.sams-tone-info .sams-box-icon { background: var(--infoSoft); color: var(--info); }
.sams-tone-done .sams-box-icon { background: var(--doneSoft); color: var(--done); }

.sams-mini-btn { border: 1px solid #cfd8e3; background: #fff; border-radius: 7px; padding: 5px 8px; font-weight: 800; font-size: 11px; color: var(--muted); cursor: pointer; }
.sams-mini-btn:hover { border-color: var(--info); color: var(--info); }
.sams-mini-btn-quiet { border-color: transparent; background: transparent; padding-left: 0; }

.sams-info-btn { border: 1px solid #cfd8e3; background: #fff; border-radius: 50%; width: 20px; height: 20px; min-width: 20px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted); cursor: pointer; padding: 0; }
.sams-info-btn:hover { border-color: var(--info); color: var(--info); }

.sams-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 9px; font-size: 11px; font-weight: 800; font-family: var(--mono); }
.sams-pill-info { background: var(--infoSoft); color: var(--info); }
.sams-pill-done { background: var(--doneSoft); color: var(--done); }

/* ---------- Drilldown ---------- */
.sams-drilldown { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 13px; overflow: hidden; box-shadow: var(--shadow); }
.sams-drilldown-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.sams-drilldown-head h3 { margin: 0; font-size: 15px; font-weight: 900; }
.sams-count-chip { background: var(--infoSoft); color: var(--info); border-radius: 99px; padding: 3px 9px; font-size: 11px; margin-left: 8px; font-family: var(--mono); }
.sams-empty { padding: 26px 16px; text-align: center; color: var(--muted); }

.sams-link { border: 0; background: transparent; color: var(--info); font-weight: 800; cursor: pointer; padding: 0; font-family: var(--mono); }
.sams-notes-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 3px 8px; cursor: pointer; }
.sams-notes-btn:hover { border-color: var(--info); }
.sams-notes-badge { font-size: 11px; font-weight: 800; color: var(--muted); }

/* Expedited requests are highlighted wherever they appear (Dev Note). */
.sams-expedited td { background-color: var(--warnSoft) !important; }

/* ---------- Job detail slide-in ----------

   Two constraints govern this block; both were learned the hard way.

   1. z-index must sit BELOW the Syncfusion dialog layer. NXJobDetailComponent
      hosts dialogs (Cancel Request, notes, and so on) that render at body level
      with SfDialog's default ZIndex of 1000 and an overlay just under it. At the
      original 1050/1040 the panel and its backdrop painted over those dialogs,
      so Cancel Request appeared greyed out and swallowed every click. This app's
      own chrome tops out around 100 (nav and layout are single digits; the 1020
      and 1030 values in the tree are unused Bootstrap utilities), which leaves a
      clean gap between 100 and 999 to sit in.

   2. Animate with `right`, not `transform`. Any non-none transform creates a
      stacking context, which would trap a popup rendered inside the panel no
      matter what z-index it asked for. Sliding the offset avoids that entirely
      and looks identical. */
.sams-slidein {
    position: fixed;
    top: 0;
    right: calc(-1 * min(920px, 92vw));
    width: min(920px, 92vw);
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 28px rgba(10, 37, 64, .18);
    transition: right .25s ease;
    z-index: 910;
    display: flex;
    flex-direction: column;
}
.sams-slidein.open { right: 0; }
.sams-slidein-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.sams-slidein-head h3 { margin: 0; font-size: 15px; font-weight: 900; }
.sams-slidein-body { overflow-y: auto; flex: 1; padding: 16px; }

.sams-slidein-backdrop { position: fixed; inset: 0; background: rgba(10, 37, 64, .35); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 900; }
.sams-slidein-backdrop.open { opacity: 1; pointer-events: auto; }