/* ============================================================================
   FASHION BUG CUSTOMER FEEDBACK MANAGEMENT PLATFORM
   Dark, modern, mobile-responsive theme
   System By Harees KR | 0773 207 160 | harees@fashionbug.lk
   ============================================================================ */

:root {
    --bg: #0d0f14;
    --bg-soft: #12151d;
    --panel: #171b26;
    --panel-2: #1e2330;
    --border: #2a2f3d;
    --border-soft: #232838;
    --text: #eceef3;
    --text-dim: #9aa1b1;
    --text-faint: #6b7285;

    /* Re-themed 2026-09-02 to Microsoft Edge blue, replacing the original rose/violet pair —
       "the all pages colours and relevant button colours as Microsoft edge colour". --accent
       (was rose #ff4d7e) is Edge Blue; --accent-2 (was violet #7c5cff) is a deeper Edge Blue,
       so anywhere the two were used together for contrast (two-series charts, KPI card
       accents) still reads as two distinct shades rather than one flat color.
       Re-themed again 2026-09-17 to the user's own brand blue #005DCA — every literal
       instance of the old Edge Blue pair (#0078D4 / #005A9E, and their rgba() shadow/glow
       variants) was swapped 1:1 for this color and a proportionally-deeper shade of it,
       so the two-tone contrast relationship above is preserved. */
    --accent: #005DCA;          /* Brand Blue */
    --accent-2: #004698;        /* Brand Blue, deep */
    --accent-grad: linear-gradient(135deg, #005DCA 0%, #004698 100%);

    --success: #22c55e;
    --success-bg: rgba(34,197,94,.14);
    --warning: #eab308;
    --warning-bg: rgba(234,179,8,.14);
    --danger: #f43f5e;
    --danger-bg: rgba(244,63,94,.14);
    --info: #38bdf8;
    --info-bg: rgba(56,189,248,.14);
    --mixed: #f59e0b;
    --mixed-bg: rgba(245,158,11,.14);

    /* Per-emotion palette (distinct from the coarser sentiment colors above,
       used by the Emotion Breakdown widget + emotion badges wherever the
       specific emotion — not just POSITIVE/NEGATIVE — needs its own color). */
    --emo-happy: #22c55e;        --emo-happy-bg: rgba(34,197,94,.14);
    --emo-excited: #ec4899;      --emo-excited-bg: rgba(236,72,153,.14);
    --emo-neutral: #9aa1b1;      --emo-neutral-bg: rgba(154,161,177,.14);
    --emo-disappointed: #eab308; --emo-disappointed-bg: rgba(234,179,8,.14);
    --emo-angry: #f43f5e;        --emo-angry-bg: rgba(244,63,94,.14);
    --emo-frustrated: #f97316;   --emo-frustrated-bg: rgba(249,115,22,.14);

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --sidebar-w: 264px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3a4257; }

/* ---------------------------------------------------------------------------
   App shell
--------------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

/* ---------------------------------------------------------------------------
   Sidebar — modern redesign (2026-09-01, "change the nice and Modern side bar
   with the new looks"). Same dark shell + accent gradient language as the rest
   of the app, but with a soft ambient glow behind the brand mark, pill-shaped
   nav items with an icon "chip" that lights up on the active route, labeled
   section groups for scannability, and a slightly denser custom scrollbar.
--------------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, #14161f 0%, #0e1017 60%, #0c0e14 100%);
    border-right: 1px solid var(--border-soft);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform .25s ease;
    overflow: hidden; /* clips .sidebar-glow to the sidebar's own bounds */
}
/* Soft ambient glow behind the brand area — same blurred-radial-gradient technique
   as .dash-hero-glow / .pf-hero-glow elsewhere, toned down for an admin chrome. */
.sidebar-glow {
    position: absolute; top: -60px; left: -40px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(0,93,202,.22) 0%, rgba(0,70,152,.14) 45%, transparent 72%);
    filter: blur(30px); pointer-events: none; z-index: 0;
}
.sidebar-brand {
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 22px 20px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.sidebar-brand .brand-logo-img { height: 28px; filter: drop-shadow(0 4px 14px rgba(0,93,202,.28)); }
.sidebar-brand .brand-tagline { font-size: 11px; color: var(--text-dim); letter-spacing: .2px; }

/* Fashion Bug wordmark logo (assets/img/logo.png) — used on the sidebar, login
   page and public feedback header in place of the old square "FB" letter mark. */
.brand-logo-img { width: auto; display: block; }
@keyframes fbLogoGlow {
    0%, 100% { filter: drop-shadow(0 6px 16px rgba(0,93,202,.35)); }
    50%      { filter: drop-shadow(0 6px 26px rgba(0,93,202,.55)); }
}

.sidebar-nav {
    position: relative; z-index: 1;
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 16px 12px;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.sidebar-section {
    font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
    color: var(--text-faint); margin: 18px 10px 8px;
}
.sidebar-section:first-child { margin-top: 2px; }
.sidebar-nav a.nav-link {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 11px;
    color: var(--text-dim); font-size: 13.5px; font-weight: 600;
    margin-bottom: 3px;
    transition: background .18s ease, color .18s ease, transform .15s ease;
}
.sidebar-nav a.nav-link .ic {
    width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: 15px;
    background: var(--panel-2);
    transition: background .18s ease, transform .18s ease;
}
.sidebar-nav a.nav-link .nav-label { flex: 1; }
.sidebar-nav a.nav-link .nav-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px var(--accent); flex-shrink: 0;
}
.sidebar-nav a.nav-link:hover { background: var(--panel); color: var(--text); transform: translateX(2px); }
.sidebar-nav a.nav-link:hover .ic { background: var(--panel-2); transform: scale(1.06); }
.sidebar-nav a.nav-link.active {
    background: linear-gradient(90deg, rgba(0,93,202,.18), rgba(0,70,152,.11));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,93,202,.25);
}
.sidebar-nav a.nav-link.active .ic {
    background: var(--accent-grad);
    box-shadow: 0 4px 14px rgba(0,93,202,.35);
}
.sidebar-footer {
    position: relative; z-index: 1;
    padding: 14px 18px 16px; border-top: 1px solid var(--border-soft);
    font-size: 11px; color: var(--text-faint);
}
.sidebar-footer .sf-row { margin-bottom: 3px; }
.sidebar-footer .sf-row:last-child { margin-bottom: 0; }
.sidebar-footer .sf-sep { margin: 0 6px; opacity: .5; }
.sidebar-footer strong { color: var(--text-dim); }

.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 14px 24px;
    background: rgba(13,15,20,.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; }
.topbar .crumb { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.hamburger {
    display: none; background: var(--panel); border: 1px solid var(--border);
    color: var(--text); width: 38px; height: 38px; border-radius: 9px; font-size: 16px; cursor: pointer;
}
.user-chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 30px; }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.user-chip .meta { line-height: 1.15; }
.user-chip .meta strong { display: block; font-size: 12.5px; }
.user-chip .meta span { font-size: 10.5px; color: var(--text-dim); }

.content { padding: 22px 24px 60px; flex: 1; }

.page-footer {
    padding: 16px 24px 26px; text-align: center; font-size: 12px; color: var(--text-faint);
    border-top: 1px solid var(--border-soft);
}
.page-footer strong { color: var(--text-dim); }
.page-footer a { color: var(--accent); }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999; }

/* ---------------------------------------------------------------------------
   Cards / grid
--------------------------------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Every .card app-wide now uses the same frosted-glass surface piloted on the Main Dashboard's
   .dashx-glass in the 2026-09 "premium glass" refresh (2026-09-09: "rebuild with the Modern
   looks and classy for all the pages" — rolled out everywhere rather than staying scoped to
   just the dashboard, since the request now explicitly covers the whole app). Because nearly
   every admin page builds its panels from this one shared class (Complaints, Feedback, Reports,
   Outlets, Settings, QR, Reviews, modals — confirmed via grep, 19 of 43 PHP files reference
   class="card" directly, and the handful that don't use .table-wrap/.filter-bar instead, also
   updated below), this single rule change carries the modern look to essentially the entire
   app with no per-page markup edits. */
.card {
    position: relative;
    background: linear-gradient(165deg, rgba(30,35,48,.62) 0%, rgba(23,27,38,.5) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 20px 22px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 20px 40px -16px rgba(0,0,0,.5);
}
.card-title { font-size: 13.5px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; }
.card-title .muted { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }

.kpi-card { position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.kpi-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 24px 44px -16px rgba(0,0,0,.55); }
.kpi-card .kpi-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi-card .kpi-value { font-size: 32px; font-weight: 800; margin: 10px 0 4px; letter-spacing: -.6px; }
.kpi-card .kpi-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }
.kpi-card .kpi-icon { position: absolute; right: 18px; top: 18px; font-size: 22px; opacity: .55; }

/* ---------------------------------------------------------------------------
   Badges / pills
--------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.badge-positive, .badge-low { background: var(--success-bg); color: var(--success); }
.badge-negative, .badge-critical { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: rgba(154,161,177,.15); color: var(--text-dim); }
.badge-mixed, .badge-medium { background: var(--mixed-bg); color: var(--mixed); }
.badge-info, .badge-high { background: var(--info-bg); color: var(--info); }
.badge-closed { background: rgba(154,161,177,.12); color: var(--text-faint); }

/* Per-emotion badges — used wherever a specific emotion (not just the coarser
   sentiment bucket) should carry its own color, e.g. next to the emoji on
   feedback rows, feedback detail, and complaint cases. */
.badge-emo-happy { background: var(--emo-happy-bg); color: var(--emo-happy); }
.badge-emo-excited { background: var(--emo-excited-bg); color: var(--emo-excited); }
.badge-emo-neutral { background: var(--emo-neutral-bg); color: var(--emo-neutral); }
.badge-emo-disappointed { background: var(--emo-disappointed-bg); color: var(--emo-disappointed); }
.badge-emo-angry { background: var(--emo-angry-bg); color: var(--emo-angry); }
.badge-emo-frustrated { background: var(--emo-frustrated-bg); color: var(--emo-frustrated); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot-green { background: var(--success); box-shadow: 0 0 8px var(--success); }
.dot-yellow { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.dot-red { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */
/* Glass table wrap — matches .card's frosted surface (2026-09-09 app-wide rollout). The wrap is
   the glass surface; the table itself stays transparent so the blur/gradient shows through. */
.table-wrap {
    overflow-x: auto; border-radius: 20px; border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(165deg, rgba(30,35,48,.62) 0%, rgba(23,27,38,.5) 100%);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 20px 40px -16px rgba(0,0,0,.5);
}
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; background: transparent; }
table.data-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-dim); background: rgba(255,255,255,.03); padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07);
    white-space: nowrap;
}
table.data-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
table.data-table tbody tr:hover { background: rgba(255,255,255,.03); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr.row-clickable { cursor: pointer; }
table.data-table tbody tr.row-clickable:hover { background: rgba(0,93,202,.08); }

/* Generic centered modal dialog — used by Settings edit forms, QR add, outlet delete confirm etc.
   The dialog itself is a .card, so it already inherits the glass treatment; the scrim behind it
   gets a touch of blur too so the modal reads as floating above the page. */
.fb-modal {
    display: none; position: fixed; inset: 0; background: rgba(5,7,12,.66);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 2000; align-items: center; justify-content: center; padding: 16px;
}
.fb-modal > .card { max-height: 90vh; overflow-y: auto; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ---------------------------------------------------------------------------
   Forms / buttons
--------------------------------------------------------------------------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.form-row { margin-bottom: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=search], select, textarea {
    width: 100%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
    padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,93,202,.15);
}
textarea { resize: vertical; min-height: 90px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
    border: 1px solid transparent; cursor: pointer; transition: transform .1s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 18px rgba(0,93,202,.25); }
.btn-primary:hover { opacity: .92; }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: var(--panel-2); color: var(--text-dim); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }

/* Glass filter bar — matches .card/.table-wrap (2026-09-09 app-wide rollout). */
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
    background: linear-gradient(165deg, rgba(30,35,48,.62) 0%, rgba(23,27,38,.5) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 20px 40px -16px rgba(0,0,0,.5);
    padding: 16px; margin-bottom: 18px;
}
.filter-bar .form-row { margin-bottom: 0; min-width: 150px; }

/* ---------------------------------------------------------------------------
   Misc
--------------------------------------------------------------------------- */
.section-title { font-size: 15px; font-weight: 700; margin: 26px 0 14px; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.progress { height: 8px; border-radius: 20px; background: var(--panel-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent-grad); border-radius: 20px; }
.divider { height: 1px; background: var(--border-soft); margin: 18px 0; border: none; }

.alert-box { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,.3); }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(244,63,94,.3); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(56,189,248,.3); }

.timeline { position: relative; margin-left: 6px; padding-left: 22px; border-left: 2px solid var(--border-soft); }
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item::before { content:''; position: absolute; left: -28px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-grad); border: 2px solid var(--bg); }
.timeline-item .t-time { font-size: 11px; color: var(--text-faint); }
.timeline-item .t-title { font-weight: 700; font-size: 13.5px; margin: 2px 0 3px; }
.timeline-item .t-desc { font-size: 12.5px; color: var(--text-dim); }

.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.heat-cell {
    border-radius: var(--radius-sm); padding: 14px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.heat-cell .hc-name { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.heat-cell .hc-score { font-size: 22px; font-weight: 800; }
.heat-cell.green { border-color: rgba(34,197,94,.35); }
.heat-cell.yellow { border-color: rgba(234,179,8,.35); }
.heat-cell.red { border-color: rgba(244,63,94,.35); }

/* ---------------------------------------------------------------------------
   Staff Performance — tile/grid view (added 2026-09-28, reports/staff_performance_grid.php).
   One card per staff member instead of the grouped list on staff_outlet_performance.php —
   "i need separate report page with the gride view like a tile view". Same glass-card
   language as .emo-tile/.heat-cell; border + avatar ring color reflect the rating band.
--------------------------------------------------------------------------- */
.staff-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; }
.staff-tile {
    position: relative; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 18px 14px 14px; text-align: center; transition: transform .15s, box-shadow .15s;
    cursor: pointer; /* every tile opens its improvement-details panel on click — added 2026-09-29 */
}
.staff-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.staff-tile:focus-visible { outline: 2px solid var(--accent, #005DCA); outline-offset: 2px; }
.staff-tile.unqualified { opacity: .5; }
.staff-tile.green { border-color: rgba(34,197,94,.35); }
.staff-tile.yellow { border-color: rgba(234,179,8,.35); }
.staff-tile.red { border-color: rgba(244,63,94,.35); }
.staff-tile-ribbon {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .2px;
}
.staff-tile-ribbon.top { background: rgba(34,197,94,.18); color: var(--success, #22c55e); border: 1px solid rgba(34,197,94,.35); }
.staff-tile-ribbon.attention { background: rgba(244,63,94,.18); color: var(--danger, #f43f5e); border: 1px solid rgba(244,63,94,.35); }
.staff-tile-avatar {
    width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 10px; background: var(--accent-grad);
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff;
}
.staff-tile.green .staff-tile-avatar { background: linear-gradient(135deg, #22c55e, #16a34a); }
.staff-tile.yellow .staff-tile-avatar { background: linear-gradient(135deg, #eab308, #ca8a04); }
.staff-tile.red .staff-tile-avatar { background: linear-gradient(135deg, #f43f5e, #be123c); }
.staff-tile-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-tile-outlet { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-tile-rating { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.staff-tile.green .staff-tile-rating { color: var(--success, #22c55e); }
.staff-tile.yellow .staff-tile-rating { color: var(--warning, #eab308); }
.staff-tile.red .staff-tile-rating { color: var(--danger, #f43f5e); }
.staff-tile-stats { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; }
.staff-tile-more {
    margin-top: 10px; font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .2px;
    opacity: 0; transition: opacity .15s;
}
.staff-tile:hover .staff-tile-more, .staff-tile:focus-visible .staff-tile-more { opacity: 1; color: var(--accent, #005DCA); }

/* Staff Detail panel (reports/staff_detail.php fragment, loaded into #staffDetailModal by
   reports/staff_performance_grid.php) — added 2026-09-29 for "what to improve and why Attention
   need it". Uses the app's existing .fb-modal / .card / .badge / .progress building blocks, plus
   these few panel-specific rules. */
.spd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.spd-reason { border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
.spd-reason-danger { background: var(--danger-bg); color: var(--text); border: 1px solid rgba(244,63,94,.3); }
.spd-reason-success { background: var(--success-bg); color: var(--text); border: 1px solid rgba(34,197,94,.3); }
.spd-subhead { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin: 18px 0 8px; }
.spd-subhead:first-of-type { margin-top: 0; }
.spd-suggestions { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.spd-suggestions li { margin-bottom: 4px; }
.spd-cats { display: flex; flex-direction: column; gap: 8px; }
.spd-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.spd-cat-name { color: var(--text); }
.spd-cat-meter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.spd-comments { display: flex; flex-direction: column; gap: 10px; }
.spd-comment { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.spd-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; flex-wrap: wrap; }
.spd-comment-text { font-size: 13px; color: var(--text-dim); font-style: italic; }

/* Frequently Visiting Customers (reports/frequent_customers.php, added 2026-09-29) — same
   card-grid + click-to-modal language as .staff-tile / .spd-* above, but loyalty-tier colored
   (blue/purple/amber = Regular/Frequent/VIP) instead of rating-colored, since this report is
   about visit frequency, not a performance score. */
.cust-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.cust-tile {
    position: relative; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 18px 14px 14px; text-align: center; transition: transform .15s, box-shadow .15s; cursor: pointer;
}
.cust-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.cust-tile:focus-visible { outline: 2px solid var(--accent, #005DCA); outline-offset: 2px; }
.cust-tile.regular { border-color: rgba(0,93,202,.35); }
.cust-tile.frequent { border-color: rgba(139,92,246,.4); }
.cust-tile.vip { border-color: rgba(245,158,11,.5); box-shadow: 0 0 0 1px rgba(245,158,11,.15), 0 8px 20px rgba(245,158,11,.12); }
.cust-tile-ribbon {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .2px;
}
.cust-tile-ribbon.frequent { background: rgba(139,92,246,.18); color: #a78bfa; border: 1px solid rgba(139,92,246,.4); }
.cust-tile-ribbon.vip { background: rgba(245,158,11,.2); color: #fbbf24; border: 1px solid rgba(245,158,11,.5); }
.cust-tile-avatar {
    width: 52px; height: 52px; border-radius: 50%; margin: 4px auto 10px; background: linear-gradient(135deg, #005DCA, #004698);
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff;
}
.cust-tile.frequent .cust-tile-avatar { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.cust-tile.vip .cust-tile-avatar { background: linear-gradient(135deg, #f59e0b, #b45309); }
.cust-tile-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-tile-phone { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.cust-tile-outlet { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-tile-visits { font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.cust-tile.regular .cust-tile-visits { color: var(--accent, #005DCA); }
.cust-tile.frequent .cust-tile-visits { color: #a78bfa; }
.cust-tile.vip .cust-tile-visits { color: #fbbf24; }
.cust-tile-dates { font-size: 10.5px; color: var(--text-faint); margin-bottom: 8px; }
.cust-tile-stats { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.cust-tile-more { margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .2px; opacity: 0; transition: opacity .15s; }
.cust-tile:hover .cust-tile-more, .cust-tile:focus-visible .cust-tile-more { opacity: 1; color: var(--accent, #005DCA); }

/* Outlet Feedback Summary — Tile View (reports/outlet_feedback_grid.php, added 2026-09-29) —
   same card-grid language as .staff-tile / .cust-tile above, rating-tier colored like the Staff
   tiles (this report is about outlet quality, not loyalty), plus a live Positive/Neutral/
   Negative stacked bar for the "bit colourful" ask. */
.outlet-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 14px; }
.outlet-tile {
    position: relative; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 18px 14px 14px; text-align: center; transition: transform .15s, box-shadow .15s;
}
.outlet-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.outlet-tile.green { border-color: rgba(34,197,94,.35); }
.outlet-tile.yellow { border-color: rgba(234,179,8,.35); }
.outlet-tile.red { border-color: rgba(244,63,94,.35); }
.outlet-tile-icon {
    width: 52px; height: 52px; border-radius: 16px; margin: 4px auto 10px; background: var(--accent-grad);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.outlet-tile.green .outlet-tile-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }
.outlet-tile.yellow .outlet-tile-icon { background: linear-gradient(135deg, #eab308, #ca8a04); }
.outlet-tile.red .outlet-tile-icon { background: linear-gradient(135deg, #f43f5e, #be123c); }
.outlet-tile-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outlet-tile-code { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }
.outlet-tile-count { font-size: 30px; font-weight: 800; line-height: 1.1; }
.outlet-tile.green .outlet-tile-count { color: var(--success); }
.outlet-tile.yellow .outlet-tile-count { color: var(--warning); }
.outlet-tile.red .outlet-tile-count { color: var(--danger); }
.outlet-tile-count-label { font-size: 10.5px; color: var(--text-faint); margin-bottom: 8px; }
.outlet-tile-rating { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; }
.outlet-tile-sentiment-bar { display: flex; height: 7px; border-radius: 20px; overflow: hidden; background: var(--bg-soft); margin-bottom: 6px; }
.outlet-tile-sentiment-bar span:empty { display: none; }
.outlet-tile-sentiment-legend { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; color: var(--text-dim); margin-bottom: 12px; }
.outlet-tile-sentiment-legend span { display: flex; align-items: center; gap: 4px; }
.outlet-tile-sentiment-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.outlet-tile-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.outlet-tile-stat { flex: 1; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 6px 4px; }
.outlet-tile-stat .ots-label { display: block; font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; }
.outlet-tile-stat .ots-value { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }
.outlet-tile-complaints { margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.outlet-tile-more { display: block; font-size: 11px; font-weight: 700; color: var(--accent, #005DCA); text-decoration: none; }
.outlet-tile-more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Emotion Breakdown widget — modern, color-coded tiles. Each emotion's emoji
   and % grow with its share of the total, so the biggest slice of customer
   mood reads as the biggest tile at a glance. Used on the Sentiment/AI report
   (3-across) and the Dashboard (6-across ribbon via .emo-grid-wide).
--------------------------------------------------------------------------- */
.emo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.emo-grid-wide { grid-template-columns: repeat(6, 1fr); }
.emo-tile {
    background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    padding: 14px 10px; text-align: center; transition: transform .15s, border-color .15s, box-shadow .15s;
}
/* Clickable = has feedback in this period, so opening the shadow panel makes sense (added
   2026-09-01, "if any Emotion Breakdown having feedback then if i clicks ... show me like a
   shadow panel details"). Zero-count tiles stay visually inert — no pointer, no hover lift. */
.emo-tile.clickable { cursor: pointer; }
.emo-tile.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.emo-tile.clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,93,202,.35); }
.emo-tile.no-data { opacity: .5; }
.emo-tile .emo-emoji { display: block; line-height: 1; margin-bottom: 6px; transition: font-size .2s; }
.emo-tile .emo-label { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.emo-tile .emo-value { font-weight: 800; font-size: 19px; margin: 3px 0 9px; }
.emo-tile .emo-bar { height: 6px; border-radius: 20px; background: var(--bg-soft); overflow: hidden; }
.emo-tile .emo-bar > span { display: block; height: 100%; border-radius: 20px; transition: width .3s; }

.emo-tile.happy { border-color: rgba(34,197,94,.3); }
.emo-tile.happy .emo-value { color: var(--emo-happy); }
.emo-tile.happy .emo-bar > span { background: var(--emo-happy); }
.emo-tile.excited { border-color: rgba(236,72,153,.3); }
.emo-tile.excited .emo-value { color: var(--emo-excited); }
.emo-tile.excited .emo-bar > span { background: var(--emo-excited); }
.emo-tile.neutral { border-color: rgba(154,161,177,.3); }
.emo-tile.neutral .emo-value { color: var(--emo-neutral); }
.emo-tile.neutral .emo-bar > span { background: var(--emo-neutral); }
.emo-tile.disappointed { border-color: rgba(234,179,8,.3); }
.emo-tile.disappointed .emo-value { color: var(--emo-disappointed); }
.emo-tile.disappointed .emo-bar > span { background: var(--emo-disappointed); }
.emo-tile.angry { border-color: rgba(244,63,94,.3); }
.emo-tile.angry .emo-value { color: var(--emo-angry); }
.emo-tile.angry .emo-bar > span { background: var(--emo-angry); }
.emo-tile.frustrated { border-color: rgba(249,115,22,.3); }
.emo-tile.frustrated .emo-value { color: var(--emo-frustrated); }
.emo-tile.frustrated .emo-bar > span { background: var(--emo-frustrated); }

/* Emotion Breakdown "shadow panel" — a slide-in side panel (added 2026-09-01) that opens when
   an Emotion Breakdown tile with feedback in it is clicked, showing the individual feedback
   entries behind that tile without leaving the page. Used on reports/sentiment.php and
   dashboard/index.php via the shared includes/emotion_breakdown.php partial. */
.emo-panel-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2100;
}
.emo-panel-backdrop.open { display: block; }
.emo-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
    background: var(--panel); border-left: 1px solid var(--border); z-index: 2101;
    box-shadow: -18px 0 40px rgba(0,0,0,.4);
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.emo-panel.open { transform: translateX(0); }
.emo-panel-header {
    display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
}
.emo-panel-header .eph-emoji { font-size: 28px; line-height: 1; }
.emo-panel-header .eph-title { flex: 1; }
.emo-panel-header .eph-title h3 { margin: 0; font-size: 15.5px; }
.emo-panel-header .eph-title .muted { font-size: 12px; }
.emo-panel-close {
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.emo-panel-close:hover { color: var(--text); border-color: var(--accent); }
.emo-panel-body { flex: 1; overflow-y: auto; padding: 14px 20px 24px; }
.emo-panel-item {
    padding: 13px 0; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit;
    display: block; transition: background .15s;
}
.emo-panel-item:last-child { border-bottom: none; }
.emo-panel-item:hover { background: rgba(255,255,255,.03); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.emo-panel-item .epi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.emo-panel-item .epi-outlet { font-weight: 700; font-size: 13px; }
.emo-panel-item .epi-date { font-size: 11px; color: var(--text-faint); }
.emo-panel-item .epi-comment { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.emo-panel-item .epi-comment.faint { font-style: italic; }
.emo-panel-item .epi-stars { color: var(--emo-excited); font-size: 12px; margin-top: 4px; }
.emo-panel-loading, .emo-panel-empty { text-align: center; color: var(--text-faint); padding: 40px 10px; font-size: 13px; }
.emo-panel-footer-note { text-align: center; color: var(--text-faint); font-size: 11px; padding: 10px 0 0; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 30px; font-size: 12px; color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   Dashboard modern refresh — added 2026-09-01. Deliberately scoped to its own
   .dash-* classes rather than editing the shared .card/.kpi-card/.section-title
   rules above, so this refresh doesn't ripple onto Complaints, Feedback,
   Reports, Settings etc. (all of which reuse those shared classes). Used by
   dashboard/index.php (Main Dashboard) and dashboard/kpi.php (KPI Detail).
--------------------------------------------------------------------------- */
.dash-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgba(0,93,202,.10), rgba(0,70,152,.08) 60%, var(--panel) 100%);
    border: 1px solid rgba(0,93,202,.22);
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 20px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.dash-hero-glow {
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,70,152,.35), transparent 70%);
    top: -140px; right: -80px; pointer-events: none;
}
.dash-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.dash-hero-title { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.3px; }
.dash-hero-sub { font-size: 13px; color: var(--text-dim); margin: 0; max-width: 580px; }
.dash-hero-badges { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero-badge {
    flex-shrink: 0; text-align: center; min-width: 96px;
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: 16px; padding: 12px 18px;
}
.dash-hero-badge-value { font-size: 24px; font-weight: 800; }
.dash-hero-badge-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-top: 2px; }
.dash-hero-badge.good .dash-hero-badge-value { color: var(--success); }
.dash-hero-badge.warning .dash-hero-badge-value { color: var(--warning); }
.dash-hero-badge.critical .dash-hero-badge-value { color: var(--danger); }

.dash-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-kpi-card {
    position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: 16px 18px 17px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-kpi-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--dash-accent, var(--accent-grad));
}
.dash-kpi-card:hover { transform: translateY(-3px); border-color: var(--border); box-shadow: 0 14px 28px rgba(0,0,0,.3); }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.dash-kpi-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; background: var(--dash-icon-bg, var(--panel-2)); flex-shrink: 0;
}
.dash-kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.dash-kpi-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-top: 5px; }
.dash-kpi-delta { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dash-kpi-delta.up { background: var(--success-bg); color: var(--success); }
.dash-kpi-delta.down { background: var(--danger-bg); color: var(--danger); }

.dash-kpi--rose   { --dash-accent: linear-gradient(90deg,#005DCA,#4FA8E8); --dash-icon-bg: rgba(0,93,202,.14); }
.dash-kpi--violet { --dash-accent: linear-gradient(90deg,#004698,#3E8FC4); --dash-icon-bg: rgba(0,70,152,.14); }
.dash-kpi--green  { --dash-accent: linear-gradient(90deg,#22c55e,#4ade80); --dash-icon-bg: rgba(34,197,94,.14); }
.dash-kpi--blue   { --dash-accent: linear-gradient(90deg,#38bdf8,#7dd3fc); --dash-icon-bg: rgba(56,189,248,.14); }
.dash-kpi--amber  { --dash-accent: linear-gradient(90deg,#eab308,#fbbf24); --dash-icon-bg: rgba(234,179,8,.14); }
.dash-kpi--red    { --dash-accent: linear-gradient(90deg,#f43f5e,#fb7185); --dash-icon-bg: rgba(244,63,94,.14); }
.dash-kpi--gray   { --dash-accent: linear-gradient(90deg,#6b7285,#9aa1b1); --dash-icon-bg: rgba(154,161,177,.14); }

.dash-section-title { font-size: 15px; font-weight: 700; margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; }
.dash-section-title .dst-bar { width: 4px; height: 18px; border-radius: 4px; background: var(--accent-grad); flex-shrink: 0; }
.dash-section-title .muted { font-size: 11.5px; font-weight: 500; color: var(--text-dim); }

.dash-chart-card { position: relative; overflow: hidden; }
.dash-chart-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--dash-chart-accent, var(--accent-grad)); opacity: .9;
}

.dash-rank-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.dash-rank-row:last-child { border-bottom: none; }
.dash-rank-medal {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; font-size: 11px; font-weight: 800; margin-right: 8px; flex-shrink: 0;
    background: var(--panel-2); color: var(--text-dim);
}
.dash-rank-medal.gold   { background: rgba(234,179,8,.18); color: #eab308; }
.dash-rank-medal.silver { background: rgba(154,161,177,.18); color: #c7ccd6; }
.dash-rank-medal.bronze { background: rgba(249,115,22,.18); color: #f97316; }

/* Outlet Comparison "ranked cards" list — replaced the 17-outlet-tall bar chart on the Main
   Dashboard, 2026-09-01, per the user's request for "a better look". A scrollable leaderboard
   of outlets (best composite first) with a rank badge + two mini progress bars per row. */
.dash-outlet-rank-list { max-height: 430px; overflow-y: auto; padding-right: 4px; margin-right: -4px; }
.dash-outlet-rank-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.dash-outlet-rank-row:last-child { border-bottom: none; }
.dash-outlet-rank-row .dash-rank-medal { margin-right: 0; margin-top: 1px; }
.dash-outlet-rank-body { flex: 1; min-width: 0; }
.dash-outlet-rank-name { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-mini-bar-group { display: flex; flex-direction: column; gap: 5px; }
.dash-mini-bar { display: flex; align-items: center; gap: 8px; }
.dash-mini-bar-label { font-size: 9.5px; color: var(--text-faint); width: 34px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .3px; }
.dash-mini-bar-track { flex: 1; height: 6px; border-radius: 20px; background: var(--bg-soft); overflow: hidden; }
.dash-mini-bar-fill { display: block; height: 100%; border-radius: 20px; transition: width .3s; }
.dash-mini-bar-fill.violet { background: linear-gradient(90deg,#004698,#3E8FC4); }
.dash-mini-bar-fill.rose { background: linear-gradient(90deg,#005DCA,#4FA8E8); }
.dash-mini-bar-value { font-size: 10.5px; font-weight: 700; width: 30px; text-align: right; flex-shrink: 0; }

@media (max-width: 1080px) { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
/* The Outlet Comparison + SLA row uses an inline grid-template-columns (2fr/1fr) that isn't
   otherwise responsive — stack it on narrow screens so the new ranked outlet list (and the SLA
   card next to it) don't get squeezed into a sliver. Added 2026-09-01 alongside the Outlet
   Comparison redesign. */
@media (max-width: 700px) {
    .dash-oc-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    .dash-kpi-grid { grid-template-columns: 1fr; }
    .dash-hero { padding: 20px; }
    .dash-hero-top { flex-direction: column; align-items: flex-start; }
    .dash-hero-badges { width: 100%; }
    .dash-hero-badge { flex: 1; }
}

/* ============================================================================
   Head Office Dashboard — "premium glass" refresh (2026-09-02)
   "dashboard/index.php can you change Modern new look this is like old looks
   i need better one" — the user felt the 2026-09-01 .dash-* refresh (above)
   already looked dated. This is a from-scratch visual pass: frosted-glass
   panels (translucent fill + backdrop-filter blur + hairline border + layered
   shadow), floating ambient glow blobs behind the content, circular glass
   icon chips, and bigger/bolder numbers — Stripe/Vercel-style.

   Deliberately a fully separate, parallel class family (.dashx-*) rather than
   edits to the .dash-* rules above. dashboard/kpi.php (Executive Dashboard)
   reuses many of those exact class names (dash-hero, dash-kpi-*, dash-rank-*,
   dash-section-title, dash-chart-card — confirmed via grep) and the user's
   request named only dashboard/index.php, so kpi.php must render pixel-
   identical to before. Only dashboard/index.php's markup references .dashx-*.
   ============================================================================ */

/* Page wrapper — establishes the positioning context for the ambient glow
   blobs and a subtle base gradient so the glass cards have something to
   show through. Nothing outside dashboard/index.php uses .dashx-page. */
.dashx-page { position: relative; }
.dashx-glow {
    position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
    filter: blur(70px); opacity: .5;
}
.dashx-glow-a { top: -120px; left: 15%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,93,202,.35), transparent 70%); }
.dashx-glow-b { top: 320px; right: 5%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(0,70,152,.28), transparent 70%); }
.dashx-glow-c { top: 900px; left: 40%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(56,189,248,.16), transparent 70%); }

/* Shared glass surface — every .dashx-* panel builds on this. */
.dashx-glass {
    position: relative;
    background: linear-gradient(165deg, rgba(30,35,48,.62) 0%, rgba(23,27,38,.5) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 20px 40px -16px rgba(0,0,0,.5);
}

/* ---- Hero ---- */
.dashx-hero { padding: 30px 32px; margin-bottom: 22px; overflow: hidden; }
.dashx-hero-glow {
    position: absolute; top: -90px; right: -60px; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,93,202,.4) 0%, rgba(0,70,152,.18) 45%, transparent 72%);
    filter: blur(10px); pointer-events: none;
}
.dashx-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dashx-hero-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: #7dc4f5; margin: 0 0 10px; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,93,202,.14); padding: 5px 12px; border-radius: 30px;
}
.dashx-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.6px; }
.dashx-hero-sub { font-size: 13.5px; color: var(--text-dim); margin: 0; max-width: 600px; line-height: 1.6; }
.dashx-hero-badges { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.dashx-hero-badge {
    min-width: 92px; text-align: center; padding: 14px 20px; border-radius: 16px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.dashx-hero-badge-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.dashx-hero-badge-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; margin-top: 3px; }
.dashx-hero-badge.good .dashx-hero-badge-value { color: #4ade80; }
.dashx-hero-badge.warning .dashx-hero-badge-value { color: #fbbf24; }
.dashx-hero-badge.critical .dashx-hero-badge-value { color: #fb7185; }

/* ---- Filter bar wrapper — same <form class="filter-bar"> markup/inputs,
   just given a glass container so it reads as part of the new page instead
   of the old flat toolbar. .dashx-filter-bar strips the default filter-bar
   chrome since the glass wrapper now supplies it. ---- */
.dashx-filter-wrap { padding: 14px 18px; margin-bottom: 22px; }
.dashx-filter-wrap .filter-bar.dashx-filter-bar { background: none; border: none; padding: 0; margin: 0; box-shadow: none; }

/* ---- KPI cards ---- */
/* 3 columns, not 4 — the grid always renders exactly 9 KPI cards (8 fixed + 1 conditional
   Google Rating/Outlets card), and 9 divides evenly into 3 full rows with no lone orphan card
   stretching an uneven last row (2026-09-03, "match all the metric boxes are same size"). */
.dashx-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.dashx-kpi-card {
    padding: 22px 22px 20px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dashx-kpi-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 26px 48px -16px rgba(0,0,0,.55);
}
.dashx-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 8px; }
.dashx-kpi-icon {
    width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 19px; background: var(--dashx-icon-bg, rgba(0,93,202,.16));
    border: 1px solid rgba(255,255,255,.08);
}
.dashx-kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.1; }
.dashx-kpi-label { font-size: 11.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; margin-top: 6px; }
.dashx-kpi-delta { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dashx-kpi-delta.up { background: rgba(34,197,94,.15); color: #4ade80; }
.dashx-kpi-delta.down { background: rgba(244,63,94,.15); color: #fb7185; }

.dashx-kpi--rose   { --dashx-icon-bg: rgba(0,93,202,.16); }
.dashx-kpi--violet { --dashx-icon-bg: rgba(0,70,152,.18); }
.dashx-kpi--green  { --dashx-icon-bg: rgba(34,197,94,.16); }
.dashx-kpi--blue   { --dashx-icon-bg: rgba(56,189,248,.16); }
.dashx-kpi--amber  { --dashx-icon-bg: rgba(234,179,8,.16); }
.dashx-kpi--red    { --dashx-icon-bg: rgba(244,63,94,.16); }
.dashx-kpi--gray   { --dashx-icon-bg: rgba(154,161,177,.16); }
.dashx-kpi--teal   { --dashx-icon-bg: rgba(20,184,166,.18); }

/* 4-column variant — used by the Executive/KPI Dashboard's hero score row (dashboard/kpi.php,
   migrated from the old .dash-kpi-grid to this family 2026-09-09), which always shows exactly
   4 metrics rather than the 9-card layout .dashx-kpi-grid defaults to. */
.dashx-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .dashx-kpi-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .dashx-kpi-grid--4 { grid-template-columns: 1fr; } }

/* ---- Section titles ---- */
.dashx-section-title { font-size: 15.5px; font-weight: 700; margin: 30px 0 16px; display: flex; align-items: center; gap: 10px; }
.dashx-section-title .dst-bar { width: 4px; height: 18px; border-radius: 4px; background: var(--accent-grad); flex-shrink: 0; box-shadow: 0 0 10px rgba(0,93,202,.5); }
.dashx-section-title .muted { font-size: 11.5px; font-weight: 500; color: var(--text-dim); }

/* ---- Chart / content cards ---- */
.dashx-card { padding: 20px 22px; }
.dashx-card .card-title { font-size: 13.5px; font-weight: 700; margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; }
.dashx-card .card-title .muted { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }

/* ---- Outlet ranking list ---- */
.dashx-rank-medal {
    width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,.06); color: var(--text-dim);
}
.dashx-rank-medal.gold   { background: rgba(234,179,8,.2); color: #eab308; }
.dashx-rank-medal.silver { background: rgba(154,161,177,.2); color: #c7ccd6; }
.dashx-rank-medal.bronze { background: rgba(249,115,22,.2); color: #f97316; }
.dashx-outlet-rank-list { max-height: 430px; overflow-y: auto; padding-right: 4px; margin-right: -4px; }
.dashx-outlet-rank-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px; border-radius: 12px; transition: background .15s ease; }
.dashx-outlet-rank-row:hover { background: rgba(255,255,255,.03); }
.dashx-outlet-rank-row .dashx-rank-medal { margin-top: 1px; }
.dashx-outlet-rank-body { flex: 1; min-width: 0; }
.dashx-outlet-rank-name { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashx-mini-bar-group { display: flex; flex-direction: column; gap: 6px; }
.dashx-mini-bar { display: flex; align-items: center; gap: 8px; }
.dashx-mini-bar-label { font-size: 9.5px; color: var(--text-faint); width: 34px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .3px; }
.dashx-mini-bar-track { flex: 1; height: 6px; border-radius: 20px; background: rgba(255,255,255,.06); overflow: hidden; }
.dashx-mini-bar-fill { display: block; height: 100%; border-radius: 20px; transition: width .3s; }
.dashx-mini-bar-fill.violet { background: linear-gradient(90deg,#004698,#3E8FC4); }
.dashx-mini-bar-fill.rose { background: linear-gradient(90deg,#005DCA,#4FA8E8); }
.dashx-mini-bar-value { font-size: 10.5px; font-weight: 700; width: 30px; text-align: right; flex-shrink: 0; }

/* ---- Problem-area chips / live feed rows, glass table wrap ---- */
.dashx-chip { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
.dashx-page .table-wrap { background: transparent; border-radius: 20px; }
.dashx-page table.data-table { background: transparent; }
.dashx-page table.data-table th { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.07); }
.dashx-page table.data-table td { border-bottom-color: rgba(255,255,255,.06); }
.dashx-page table.data-table tbody tr:hover { background: rgba(255,255,255,.03); }
.dashx-feed-row {
    display: flex; justify-content: space-between; gap: 10px; padding: 13px 6px;
    border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 10px;
    transition: background .15s ease;
}
.dashx-feed-row:last-child { border-bottom: none; }
.dashx-feed-row:hover { background: rgba(255,255,255,.03); }
.dashx-feed-source { font-size: 13px; margin-right: 6px; opacity: .85; }

/* ---- AI Insights & Categorization tag cloud (2026-09-03) — tag size reflects volume (set
   inline per-tag in PHP), tag color reflects average rating for that category. ---- */
.dashx-tagcloud { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: baseline; padding: 4px 2px 2px; }
.dashx-tag {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 30px;
    font-weight: 700; line-height: 1.3; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); white-space: nowrap; transition: transform .15s ease;
}
.dashx-tag:hover { transform: translateY(-2px); }
.dashx-tag-cnt { font-size: 10px; font-weight: 700; opacity: .6; }
.dashx-tag--good { color: #4ade80; border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.dashx-tag--warning { color: #fbbf24; border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.08); }
.dashx-tag--critical { color: #fb7185; border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.08); }

/* No 2-column tier for the KPI grid — 9 cards over 2 columns leaves the same kind of lone
   orphan card the 3-column base was chosen to avoid, so it stays 3-wide until there's truly
   not enough room, then drops straight to 1 column (9 is also evenly divisible by 1). */
@media (max-width: 700px) {
    .dashx-oc-row { grid-template-columns: 1fr !important; }
    .dashx-trend-split-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
    .dashx-kpi-grid { grid-template-columns: 1fr; }
    .dashx-hero { padding: 22px; }
    .dashx-hero-top { flex-direction: column; align-items: flex-start; }
    .dashx-hero-badges { width: 100%; }
    .dashx-hero-badge { flex: 1; }
}

.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(0,93,202,.16), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(0,70,152,.16), transparent 40%),
        var(--bg);
    padding: 24px;
}
/* Glass login card — matches .card/.table-wrap/.filter-bar (2026-09-09 app-wide rollout). */
.login-card {
    width: 100%; max-width: 400px;
    background: linear-gradient(165deg, rgba(30,35,48,.62) 0%, rgba(23,27,38,.5) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    padding: 34px 30px;
    box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 20px 40px -16px rgba(0,0,0,.5);
}
.login-card .brand-logo-img { height: 48px; margin: 0 auto 18px; animation: fbLogoGlow 2.6s ease-in-out infinite; }
/* Generic circular emoji badge — used by non-brand icons like the 403 page's 🚫
   (kept separate from .brand-logo-img now that the logo itself is an image). */
.icon-badge { width: 58px; height: 58px; border-radius: 16px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; margin: 0 auto 16px; }
.demo-creds { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 11.5px; color: var(--text-dim); margin-top: 18px; }
.demo-creds code { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Public / mobile feedback pages (customer-facing, no sidebar)
   Vibrant colorful refresh — added 2026-09-01 ("more attractive, modern,
   colourful"). Every rule below is scoped to .public-* / .pf-* classes that
   only exist on public/f.php and public/thankyou.php — confirmed via grep,
   nothing here can leak into the admin app's shared .card/.panel styling.
--------------------------------------------------------------------------- */
.public-wrap {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    position: relative; overflow-x: hidden;
    background:
        radial-gradient(circle at 12% -8%, rgba(0,93,202,.30), transparent 45%),
        radial-gradient(circle at 92% 6%, rgba(0,70,152,.28), transparent 45%),
        radial-gradient(circle at 20% 55%, rgba(56,189,248,.14), transparent 40%),
        radial-gradient(circle at 85% 78%, rgba(34,197,94,.12), transparent 40%),
        var(--bg);
}
.public-header { width: 100%; text-align: center; padding: 36px 18px 20px; position: relative; }
.public-header .brand-logo-img { height: 54px; margin: 0 auto 16px; animation: fbLogoGlow 2.6s ease-in-out infinite; }
.public-header h1 {
    font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 10px;
    background: linear-gradient(90deg, #4FA8E8 0%, var(--accent) 35%, var(--accent-2) 75%, #38bdf8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 200% auto; animation: fbHeadingShine 6s ease-in-out infinite;
}
@keyframes fbHeadingShine { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.public-header p { font-size: 12.5px; color: var(--text-dim); margin: 0; }
.public-header .outlet-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 30px;
    background: linear-gradient(180deg, rgba(0,93,202,.14), rgba(0,70,152,.10));
    border: 1px solid rgba(0,93,202,.3); font-size: 12.5px; color: var(--text); font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,93,202,.12);
}
.public-card { width: 100%; max-width: 480px; padding: 0 18px 40px; margin-top: 8px; position: relative; }
.public-panel {
    position: relative; overflow: hidden;
    background: var(--panel); border: 1px solid var(--border-soft); border-radius: 20px; padding: 22px 22px 22px 25px;
    margin-bottom: 16px; animation: fbFadeUp .45s ease both;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
/* Left accent bar, colored per section via a modifier class on the panel —
   the "colourful" part of this refresh: each card in the form reads as its
   own distinct, purposeful color rather than one flat repeated panel. */
.public-panel::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: var(--pf-accent, var(--accent-grad));
}
.public-panel--rose   { --pf-accent: linear-gradient(180deg, #005DCA, #4FA8E8); }
.public-panel--blue   { --pf-accent: linear-gradient(180deg, #38bdf8, #004698); }
.public-panel--violet { --pf-accent: linear-gradient(180deg, #004698, #3E8FC4); }
.public-panel--green  { --pf-accent: linear-gradient(180deg, #22c55e, #4ade80); }
.public-panel--gold   { --pf-accent: linear-gradient(180deg, #eab308, #fb923c); }
.public-panel.hero {
    padding: 26px 24px;
    border-color: rgba(0,93,202,.32);
    background: linear-gradient(160deg, rgba(0,93,202,.12), rgba(0,70,152,.08) 55%, var(--panel) 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
.public-panel.hero::before { display: none; }
.public-panel.hero .pf-hero-glow {
    position: absolute; width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(0,70,152,.30), transparent 70%);
    top: -120px; right: -70px;
}
@keyframes fbFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.panel-heading .ph-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--pf-icon-bg, var(--panel-2));
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.public-panel--rose .ph-icon   { --pf-icon-bg: rgba(0,93,202,.18); }
.public-panel--blue .ph-icon   { --pf-icon-bg: rgba(56,189,248,.18); }
.public-panel--violet .ph-icon { --pf-icon-bg: rgba(0,70,152,.18); }
.public-panel--green .ph-icon  { --pf-icon-bg: rgba(34,197,94,.18); }
.public-panel--gold .ph-icon   { --pf-icon-bg: rgba(234,179,8,.18); }
.panel-heading h3 { margin: 0; font-size: 15px; }

.emoji-row { display: flex; justify-content: space-between; gap: 4px; margin: 20px 0 10px; }
.emoji-opt {
    flex: 1; text-align: center; padding: 10px 2px; border-radius: 16px; cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease; border: 2px solid transparent;
}
.emoji-opt:hover { transform: translateY(-3px); background: var(--bg-soft); }
/* Each emoji now carries its own name underneath it (added 2026-09-02) — "give me the name of
   each Emotion like this Excellent its good for customers" — instead of only the two endpoint
   captions ("Very Bad"/"Excellent") the row used to show. */
.emoji-opt-glyph { font-size: 32px; line-height: 1.1; }
.emoji-opt-label { font-size: 10.5px; font-weight: 600; color: var(--text-faint); margin-top: 4px; white-space: nowrap; }
.emoji-opt.selected .emoji-opt-label { color: var(--text); }
.emoji-opt.selected {
    background: linear-gradient(180deg, rgba(0,93,202,.18), rgba(0,70,152,.12));
    box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 20px rgba(0,93,202,.22);
    transform: translateY(-4px) scale(1.08);
}
/* Each emoji glows its own semantic color when picked, red→green across the scale —
   same "attention needed → all good" color logic already used by heat-cells and KPI
   tone thresholds elsewhere in the app, now carried into the public form. */
#emojiRow .emoji-opt:nth-child(1).selected { background: linear-gradient(180deg, rgba(244,63,94,.24), rgba(244,63,94,.08)); box-shadow: 0 0 0 2px #f43f5e inset, 0 10px 20px rgba(244,63,94,.3); }
#emojiRow .emoji-opt:nth-child(2).selected { background: linear-gradient(180deg, rgba(249,115,22,.24), rgba(249,115,22,.08)); box-shadow: 0 0 0 2px #f97316 inset, 0 10px 20px rgba(249,115,22,.3); }
#emojiRow .emoji-opt:nth-child(3).selected { background: linear-gradient(180deg, rgba(234,179,8,.24), rgba(234,179,8,.08)); box-shadow: 0 0 0 2px #eab308 inset, 0 10px 20px rgba(234,179,8,.3); }
#emojiRow .emoji-opt:nth-child(4).selected { background: linear-gradient(180deg, rgba(56,189,248,.24), rgba(56,189,248,.08)); box-shadow: 0 0 0 2px #38bdf8 inset, 0 10px 20px rgba(56,189,248,.3); }
#emojiRow .emoji-opt:nth-child(5).selected { background: linear-gradient(180deg, rgba(34,197,94,.24), rgba(34,197,94,.08)); box-shadow: 0 0 0 2px #22c55e inset, 0 10px 20px rgba(34,197,94,.3); }
.emoji-caption { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); margin-bottom: 6px; }
.star-row { display: flex; justify-content: center; gap: 8px; font-size: 36px; margin: 14px 0; }
.star { cursor: pointer; color: #3a4056; transition: color .12s, transform .12s; }
.star:hover { transform: scale(1.12); }
.star.active { color: #ffcc4d; transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,204,77,.5)); }
.mini-star-row { display: flex; gap: 3px; font-size: 19px; }
.mini-star { cursor: pointer; color: #3a4056; transition: transform .1s; }
.mini-star:hover { transform: scale(1.15); }
.mini-star.active { color: #ffcc4d; }
/* Public feedback form — category groups (added 2026-09-01, for the admin-configurable
   "What did you like?" / "Rate specific areas" sections, grouped by feedback_category_groups). */
.ff-group { margin-top: 12px; }
.ff-group:first-child { margin-top: 0; }
.ff-group-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-faint); margin-bottom: 8px;
}
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.check-opt {
    display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 12px; font-size: 12.5px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.check-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.check-opt input { width: 16px; height: 16px; accent-color: var(--accent); }
.check-opt.selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(0,93,202,.16), rgba(0,70,152,.1)); }
/* "What did you like?" tap-to-toggle tag buttons — added 2026-09-01, replacing the checkbox
   grid above for that one section (checkboxes are unused now but left defined in case a future
   change needs them again). Flat wrap, no grouping — a real <button>, not a checkbox+label, so
   there's exactly one click target and no risk of the native label/checkbox double-toggle. */
/* Grid (not flex-wrap) so every button is the same size regardless of its label's length —
   "i need all buttons same size" (added 2026-09-01) — a short label like "Price" and a long one
   like "Fashion Collection" now occupy identical equal-width/equal-height cells instead of each
   button hugging its own text. Column count matches the .check-grid breakpoints below (2 on
   phones, 1 on very narrow phones, 3 on portrait tablet, 4 on landscape tablet) for consistency
   with how this same section used to lay out before it became flat/ungrouped. */
.tagbtn-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 4px; }
.tagbtn {
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
    background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 30px;
    width: 100%; min-height: 46px; padding: 10px 14px; display: flex; align-items: center;
    justify-content: center; text-align: center; line-height: 1.25; white-space: normal;
    cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.tagbtn:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.tagbtn.selected {
    background: var(--accent-grad); border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px rgba(0,93,202,.35); transform: translateY(-1px) scale(1.04);
}
.tagbtn:active { transform: scale(.96); }
.rating-line { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.rating-line:last-child { border-bottom: none; }
.rating-line .rl-label { font-size: 13px; }
.nps-opt {
    width: 34px; height: 34px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.nps-opt:hover { transform: translateY(-2px); }
.nps-opt.selected {
    background: var(--accent-grad); border-color: transparent; color: #fff;
    transform: translateY(-2px) scale(1.08); box-shadow: 0 8px 16px rgba(0,93,202,.3);
}
/* NPS 0-10 scale reads as a red→amber→green heatmap once a number is picked (0-6
   detractor, 7-8 passive, 9-10 promoter — the same NPS banding used in reports),
   instead of every score turning the same brand-pink regardless of what it means. */
#npsRow .nps-opt:nth-child(-n+7).selected { background: linear-gradient(135deg, #f43f5e, #fb7185); box-shadow: 0 8px 16px rgba(244,63,94,.35); }
#npsRow .nps-opt:nth-child(n+8):nth-child(-n+9).selected { background: linear-gradient(135deg, #eab308, #fb923c); box-shadow: 0 8px 16px rgba(234,179,8,.35); }
#npsRow .nps-opt:nth-child(n+10).selected { background: linear-gradient(135deg, #22c55e, #4ade80); box-shadow: 0 8px 16px rgba(34,197,94,.35); }
/* Public form's submit button — a gentle attention-drawing pulse, scoped to this
   one button via .pf-submit-btn rather than touching the shared .btn-primary
   used across the whole admin app. */
.pf-submit-btn { position: relative; border-radius: 14px; letter-spacing: .2px; animation: pfPulse 2.6s ease-in-out infinite; }
@keyframes pfPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0,93,202,.28); }
    50% { box-shadow: 0 8px 26px rgba(0,93,202,.5), 0 0 0 6px rgba(0,93,202,.08); }
}
.thankyou-emoji {
    font-size: 60px; text-align: center; margin-bottom: 6px; animation: fbBounceIn .6s ease;
    filter: drop-shadow(0 6px 18px rgba(0,93,202,.35));
}
@keyframes fbBounceIn {
    0% { opacity: 0; transform: scale(.5); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Public-page brand footer (added 2026-09-01, "new look" for the plain "Fashion Bug Customer
   Feedback Management Platform / System By Harees KR" credit line at the bottom of
   public/thankyou.php) — a small branded sign-off instead of one flat line of faint text,
   matching the rest of the page's colorful/modern treatment without competing with it. */
.public-footer { text-align: center; margin-top: 6px; padding-top: 22px; }
.pf-foot-divider {
    height: 1px; margin: 0 auto 20px; max-width: 220px;
    background: linear-gradient(90deg, transparent, rgba(0,93,202,.4), rgba(0,70,152,.4), transparent);
}
.pf-foot-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.pf-foot-logo { height: 20px; opacity: .85; }
.pf-foot-tagline { font-size: 11px; color: var(--text-faint); letter-spacing: .2px; font-weight: 600; }
.pf-foot-contact { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-foot-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px;
    background: var(--panel-2); border: 1px solid var(--border-soft);
    font-size: 11.5px; color: var(--text-dim); font-weight: 600;
    transition: border-color .15s, color .15s, transform .15s;
}
.pf-foot-chip:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
.pf-foot-credit { font-size: 10.5px; color: var(--text-faint); }
.pf-foot-credit strong { color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,.4); }
    .sidebar-backdrop.show { display: block; }
    .main { margin-left: 0; }
    .hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .topbar { padding: 12px 16px; }
    .content { padding: 16px 14px 50px; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
    .user-chip .meta { display: none; }
    .emo-grid-wide { grid-template-columns: repeat(3, 1fr); }
}
@media print {
    .sidebar, .topbar, .filter-bar, .btn, .page-footer, .no-print { display: none !important; }
    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    body, .card, table.data-table { background: #fff !important; color: #000 !important; }
    table.data-table th { background: #eee !important; color: #000 !important; }
    table.data-table td, table.data-table th { border-color: #ccc !important; }
}
@media (max-width: 560px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .form-row { min-width: 0; }
    .topbar h1 { font-size: 16px; }
    .kpi-card .kpi-value { font-size: 26px; }
    .check-grid { grid-template-columns: 1fr; }
    .tagbtn-wrap { grid-template-columns: 1fr; }
    .emo-grid, .emo-grid-wide { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Tablet (Samsung Galaxy Tab and similar: 800x1280 portrait / 1280x800 landscape)
--------------------------------------------------------------------------- */
/* Portrait tablet (~601px-900px wide, e.g. Galaxy Tab 800px): sidebar still goes
   off-canvas via the 860px rule above, but give admin grids a roomier 2-up layout
   and the public feedback card more breathing room instead of a phone-narrow column. */
@media (min-width: 601px) and (max-width: 900px) {
    .content { padding: 20px 22px 50px; }
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .heat-grid { grid-template-columns: repeat(3, 1fr); }
    .public-card { max-width: 620px; }
    .check-grid { grid-template-columns: repeat(3, 1fr); }
    .tagbtn-wrap { grid-template-columns: repeat(3, 1fr); }
    .emo-grid-wide { grid-template-columns: repeat(3, 1fr); }
}

/* Landscape tablet (short, wide viewport — e.g. Galaxy Tab 1280x800): the >1080px
   rule already keeps the full desktop grid, but a shallow viewport needs tighter
   vertical rhythm so the topbar/content don't feel cramped, and the public form
   can use the extra width instead of staying phone-narrow. */
@media (min-width: 900px) and (max-height: 850px) and (orientation: landscape) {
    .topbar { padding: 10px 22px; }
    .content { padding: 16px 22px 40px; }
    .public-card { max-width: 640px; }
    .check-grid { grid-template-columns: repeat(4, 1fr); }
    .tagbtn-wrap { grid-template-columns: repeat(4, 1fr); }
    .login-wrap { padding: 16px; }
    .login-card { padding: 26px 28px; }
}

/* Touch devices generally (tablets included): bigger tap targets, no hover-only cues. */
@media (hover: none) and (pointer: coarse) {
    .btn { padding: 12px 18px; min-height: 44px; }
    .btn-sm { padding: 9px 14px; min-height: 38px; }
    .sidebar-nav a.nav-link { padding: 13px 12px; }
    .hamburger { width: 44px; height: 44px; }
    .check-opt { padding: 12px 14px; }
    .check-opt input { width: 20px; height: 20px; }
    .tagbtn { padding: 12px 20px; min-height: 44px; }
    .star { padding: 4px; }
    .mini-star { padding: 3px; }
    .emoji-opt { padding: 10px 4px; }
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=tel], input[type=search], select, textarea {
        padding: 12px 14px;
    }
    .nps-opt { width: 36px !important; height: 36px !important; }
}

/* Outlet Feedback Details (reports/outlet_feedback_details.php, added 2026-10-05) — one panel per
   outlet, one card per feedback laid out like the public form (experience / liked / could do
   better / area ratings + mobile). Rating-tier colored like .staff-tile / .outlet-tile. */
.ofd-outlet { background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 4px solid var(--border); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 20px; }
.ofd-outlet.green { border-left-color: var(--success); }
.ofd-outlet.yellow { border-left-color: var(--warning); }
.ofd-outlet.red { border-left-color: var(--danger); }
.ofd-outlet-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ofd-outlet-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.ofd-outlet.green .ofd-outlet-icon { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ofd-outlet.yellow .ofd-outlet-icon { background: linear-gradient(135deg, #eab308, #ca8a04); }
.ofd-outlet.red .ofd-outlet-icon { background: linear-gradient(135deg, #f43f5e, #be123c); }
.ofd-outlet-title { flex: 1; min-width: 160px; }
.ofd-outlet-title h3 { margin: 0 0 2px; font-size: 16px; }
.ofd-outlet-stat { text-align: center; min-width: 84px; }
.ofd-outlet-stat strong { display: block; font-size: 20px; font-weight: 800; }
.ofd-outlet-stat span { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; }
.ofd-green { color: var(--success); } .ofd-yellow { color: var(--warning); } .ofd-red { color: var(--danger); }
.ofd-outlet-mix { display: flex; flex: 0 0 160px; height: 9px; border-radius: 20px; overflow: hidden; background: var(--bg-soft); }
.ofd-mix-seg { display: block; height: 100%; }
.ofd-mix-5 { background: #16a34a; } .ofd-mix-4 { background: #4ade80; } .ofd-mix-3 { background: #eab308; } .ofd-mix-2 { background: #fb923c; } .ofd-mix-1 { background: #f43f5e; }

.ofd-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.ofd-entry { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s; }
.ofd-entry:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.ofd-entry.green { border-top: 3px solid var(--success); }
.ofd-entry.yellow { border-top: 3px solid var(--warning); }
.ofd-entry.red { border-top: 3px solid var(--danger); }
.ofd-entry-head { display: flex; align-items: center; gap: 12px; }
.ofd-exp { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 6px 8px; border-radius: 12px; font-size: 10.5px; font-weight: 700; background: var(--panel-2); }
.ofd-exp-emoji { font-size: 24px; line-height: 1.1; }
.ofd-exp.green { color: var(--success); } .ofd-exp.yellow { color: var(--warning); } .ofd-exp.red { color: var(--danger); }
.ofd-entry-who { flex: 1; min-width: 0; font-size: 13px; }
.ofd-phone { font-weight: 700; color: var(--text); text-decoration: none; }
.ofd-phone:hover { text-decoration: underline; }
.ofd-entry-date { text-align: right; font-size: 11px; line-height: 1.35; }
.ofd-block-label { font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.ofd-none { font-size: 12px; }
.ofd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ofd-chip { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border-soft); }
.ofd-chip.like { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.3); }
.ofd-chip.area b { margin-left: 2px; }
.ofd-chip.area.green { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
.ofd-chip.area.yellow { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.3); }
.ofd-chip.area.red { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.3); }
.ofd-quote { font-size: 12.5px; font-style: italic; color: var(--text-dim); background: var(--panel-2); border-radius: 9px; padding: 8px 10px; }
.ofd-entry-foot { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; border-top: 1px solid var(--border-soft); padding-top: 8px; margin-top: auto; }
.ofd-more { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .ofd-entries { grid-template-columns: 1fr; } .ofd-outlet-mix { flex-basis: 100%; } }
@media print { .ofd-entry:hover { transform: none; box-shadow: none; } .ofd-entry { break-inside: avoid; } }

/* Outlet Feedback Details — "By Answer" view (added 2026-10-05): view tabs, answer tiles, Outlet x Answer matrix. */
.ofd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ofd-subtabs { margin-bottom: 12px; }
.ofd-tab { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border-soft); text-decoration: none; }
.ofd-tab:hover { color: var(--text); }
.ofd-tab.active { color: #fff; background: var(--accent-grad); border-color: transparent; }
.ofd-tab.active .faint { color: rgba(255,255,255,.75); }
.ofd-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ofd-opt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border-soft); text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s; }
.ofd-opt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.ofd-opt.green { border-color: rgba(34,197,94,.4); } .ofd-opt.yellow { border-color: rgba(234,179,8,.4); } .ofd-opt.red { border-color: rgba(244,63,94,.4); }
.ofd-opt.like { border-color: rgba(244,63,94,.3); } .ofd-opt.area { border-color: rgba(34,197,94,.3); }
.ofd-opt.selected { outline: 2px solid var(--accent, #005DCA); background: var(--bg-soft); }
.ofd-opt.empty { opacity: .5; }
.ofd-opt-emoji { font-size: 24px; line-height: 1.1; }
.ofd-opt-name { font-size: 12.5px; font-weight: 700; }
.ofd-opt-count { font-size: 26px; font-weight: 800; line-height: 1.15; }
.ofd-opt-sub { font-size: 10.5px; color: var(--text-faint); }
.ofd-picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 4px solid var(--accent, #005DCA); font-size: 13.5px; scroll-margin-top: 80px; }
.ofd-matrix th.text-center, .ofd-matrix td.text-center { text-align: center; }
.ofd-cell { display: inline-block; min-width: 38px; padding: 4px 10px; border-radius: 8px; font-weight: 700; color: var(--text); text-decoration: none; background: rgba(0,93,202,calc(var(--heat, .2))); }
.ofd-cell:hover { outline: 1px solid var(--accent, #005DCA); }
.ofd-chip.hit { outline: 2px solid var(--accent, #005DCA); font-weight: 700; }
.ofd-outlet { scroll-margin-top: 80px; }

/* Outlet Feedback Details — "By Question" view (added 2026-10-05): question blocks, answer accordions,
   outlet rows that lazy-load their feedback cards. */
.ofd-q { margin-bottom: 26px; }
.ofd-q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.ofd-q-head h3 { margin: 0; font-size: 16px; }
.ofd-q-emoji { font-size: 22px; }
.ofd-q-answer { background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 4px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; }
.ofd-q-answer.green { border-left-color: var(--success); } .ofd-q-answer.yellow { border-left-color: var(--warning); } .ofd-q-answer.red { border-left-color: var(--danger); }
.ofd-q-answer.like { border-left-color: #f43f5e; } .ofd-q-answer.area { border-left-color: #22c55e; } .ofd-q-answer.comment { border-left-color: #3b82f6; }
.ofd-q-answer.empty { opacity: .5; }
.ofd-q-answer > summary, .ofd-q-outlet > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ofd-q-answer > summary::-webkit-details-marker, .ofd-q-outlet > summary::-webkit-details-marker { display: none; }
.ofd-q-answer > summary { padding: 13px 16px; }
.ofd-q-answer > summary::before, .ofd-q-outlet > summary::before { content: '▸'; color: var(--text-faint); transition: transform .15s; }
.ofd-q-answer[open] > summary::before, .ofd-q-outlet[open] > summary::before { transform: rotate(90deg); }
.ofd-q-answer-name { font-size: 14.5px; font-weight: 700; flex: 1; }
.ofd-q-answer-meta { font-size: 11.5px; }
.ofd-q-answer-count { min-width: 44px; text-align: center; font-size: 15px; font-weight: 800; padding: 3px 12px; border-radius: 20px; background: var(--bg-soft); }
.ofd-q-outlets { padding: 4px 14px 14px 30px; display: flex; flex-direction: column; gap: 8px; }
.ofd-q-outlet { background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.ofd-q-outlet > summary { padding: 10px 14px; }
.ofd-q-outlet-icon { font-size: 16px; }
.ofd-q-outlet-name { flex: 1; font-size: 13.5px; font-weight: 700; min-width: 0; }
.ofd-q-bar { flex: 0 0 140px; height: 7px; border-radius: 20px; background: var(--panel-2); overflow: hidden; }
.ofd-q-bar i { display: block; height: 100%; background: var(--accent-grad); }
.ofd-q-outlet-count { min-width: 34px; text-align: center; font-weight: 800; }
.ofd-q-body { padding: 4px 14px 14px; }
@media (max-width: 640px) { .ofd-q-bar { display: none; } .ofd-q-outlets { padding-left: 10px; } }
@media print { .ofd-q-answer, .ofd-q-outlet { break-inside: avoid; } }

/* Outlet Feedback Details — flat (not outlet-nested) answer lists (added 2026-10-05, 4th request). */
.ofd-entry-outlet { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-top: 3px; }
.ofd-q-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.ofd-q-chips .ofd-chip b { margin-left: 4px; }
.ofd-q-outlets { padding: 4px 16px 16px; display: block; }

/* Round 40 follow-up 4: answer rows list their outlets inline; outlet chips filter; Full details popup */
.ofd-q-answer > summary { flex-wrap: wrap; row-gap: 4px; }
.ofd-q-answer-outlets { flex: 1 0 100%; order: 3; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); padding-left: 22px; }
.ofd-q-answer-outlets b { color: var(--text); font-weight: 600; }
.ofd-q-answer-name { order: 1; } .ofd-q-answer-count { order: 2; }
.ofd-q-answer > summary::before { order: 0; }
button.ofd-chip { cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); }
button.ofd-chip:hover { border-color: var(--accent, #005dca); }
button.ofd-chip.active { background: var(--accent-grad, #005dca); color: #fff; border-color: transparent; }
.ofd-detail-btn { white-space: nowrap; }
.ofd-dt-head { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); border-left: 4px solid var(--border); margin-bottom: 14px; }
.ofd-dt-head.green { border-left-color: var(--success); } .ofd-dt-head.yellow { border-left-color: var(--warning); } .ofd-dt-head.red { border-left-color: var(--danger); }
.ofd-dt-exp { display: flex; flex-direction: column; align-items: center; font-size: 12px; } .ofd-dt-exp span { font-size: 30px; line-height: 1.1; }
.ofd-dt-phone { font-size: 18px; font-weight: 800; text-decoration: none; }
.ofd-dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin-bottom: 14px; font-size: 13px; }
.ofd-dt-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border-soft); }
.ofd-dt-row span:last-child { text-align: right; font-weight: 600; }
.ofd-dt-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 640px) { .ofd-dt-grid { grid-template-columns: 1fr; } .ofd-q-answer-outlets { padding-left: 0; } }
.fb-modal .ofd-block { margin-bottom: 14px; }