/* =====================================================================
   Hairs Hub Studio CRM — Dashboard content redesign
   Reuses the existing theme.css copper/glass token system (--amber-1/2/3,
   --card-bg, --shadow, --glow-*) so it automatically matches whichever
   theme is active, rather than hardcoding a second palette.
   ===================================================================== */

:root {
    --line: rgba(181,99,40,.14);
    --shadow-lux: var(--shadow-lg);
    --radius-lg: 26px;
}

/* ---------- greeting block (topbar) ---------- */
.greet-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.greet-icon {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
    background: linear-gradient(145deg, var(--card-bg-solid), var(--card-bg));
    display: flex; align-items: center; justify-content: center; color: var(--amber-3);
}
.greet-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.greet-sub { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Let the search bar take the space the old fixed-width layout didn't use */
.topbar .search { flex: 1 1 auto; max-width: none; }

/* ---------- sidebar credit card (replaces Premium Plan) ---------- */
.credit-card {
    margin-top: auto; border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 11px;
    background: linear-gradient(160deg, rgba(255,255,255,.65), var(--glow-1));
    border: 1px solid var(--card-border); box-shadow: var(--shadow);
}
.credit-card .cc-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
    background: linear-gradient(145deg, var(--amber-1), var(--amber-2));
    color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.credit-card .made-by { font-size: 10px; color: var(--ink-faint); line-height: 1.35; }
.credit-card .brand { font-weight: 800; font-size: 13px; color: var(--amber-3); }
.credit-card .person { font-size: 11px; color: var(--ink-soft); }

/* ---------- content grid ---------- */
.content-grid { display: flex; flex-direction: column; gap: 20px; }
.top-row { display: grid; grid-template-columns: 2.3fr 1fr; gap: 20px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.mini-stats .kpi-card { padding: 14px 14px 12px; }
.mini-stats .kpi-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; font-size: 12px; }
.mini-stats .kpi-label { font-size: 10.5px; }
.mini-stats .kpi-value { font-size: 17px; margin-top: 7px; }
.mini-stats .kpi-foot { font-size: 10px; margin-top: 4px; }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cards-grid > .span-2 { grid-column: 1 / -1; }

.dash-card {
    background: var(--card-bg-solid); backdrop-filter: var(--glass-blur); border: 1px solid var(--card-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lux);
    transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring), filter .35s var(--ease-out), opacity .35s var(--ease-out);
    position: relative; overflow: hidden;
    transform-style: preserve-3d; perspective: 900px; will-change: transform;
}
.dash-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--edge-highlight); z-index: 2; }
/* Cursor-following sheen — position set via --mx/--my custom properties by
   the small mousemove script in dashboard/index.php; a soft highlight that
   tracks the pointer across the card, reinforcing the "glass under light"
   3D read instead of a flat hover state. */
.dash-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35), transparent 70%);
    transition: opacity .3s var(--ease-out);
}
.dash-card:hover::after { opacity: 1; }
.dash-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px) scale(1.015);
    box-shadow: var(--shadow-lg), 0 34px 64px -24px rgba(20, 14, 8, 0.28);
    z-index: 5;
}
/* Spotlight focus: hovering any one card blurs and dims every other card
   on the dashboard, so attention stays on the card under the cursor.
   Gated to real pointer devices so touchscreens never get stuck blurred
   after a tap (touch has no persistent :hover to naturally clear it). */
@media (hover: hover) and (pointer: fine) {
    .content-grid:has(.dash-card:hover) .dash-card:not(:hover) {
        filter: blur(3px) saturate(85%);
        opacity: 0.55;
        transform: scale(0.98);
    }
}

.panel-head { display: flex; align-items: center; gap: 8px; padding: 18px 20px 4px; }
.panel-head h4 { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex: 1; color: var(--ink); }
.panel-head h4 i { color: var(--amber-3); font-size: 13px; }
.viewall { font-size: 11.5px; font-weight: 700; color: var(--amber-3); white-space: nowrap; }
.dd { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: rgba(255,255,255,.7); border: 1px solid var(--line); padding: 5px 11px; border-radius: 10px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- AI panel ---------- */
.ai-panel { padding: 26px 20px 26px 26px; min-height: 460px; display: flex; flex-direction: column; }
.arc-wrap { position: relative; flex: 1; max-width: 56%; }
.arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arc-item { display: flex; align-items: center; margin: 0 0 10px 0; position: relative; height: 56px; text-decoration: none; color: inherit; }
.arc-pill {
    display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 6px 0 16px; border-radius: 100px;
    background: rgba(255,255,255,.55); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: .25s; width: 100%;
}
.arc-item:hover .arc-pill { background: rgba(255,255,255,.85); box-shadow: var(--shadow), 0 0 24px var(--glow-2); transform: translateX(2px); }
.arc-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; overflow: hidden; min-width: 0; }
.arc-text b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.arc-text span { font-size: 10px; color: var(--ink-faint); }
.arc-node {
    margin-left: auto; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(145deg, var(--amber-1), var(--amber-2));
    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(255,255,255,.5), 0 0 20px var(--glow-2);
    color: #fff9f0; font-size: 15px;
}

.bulb-wrap { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: min(380px,22vw); height: min(380px,22vw); display: flex; align-items: center; justify-content: center; animation: floatY 6s ease-in-out infinite; cursor: pointer; }
@keyframes floatY { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }
.glow-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, var(--glow-1), transparent 70%); filter: blur(10px); }
.gr1 { width: 280px; height: 280px; animation: pulse 3.2s ease-in-out infinite; box-shadow: 0 0 80px var(--glow-3), 0 0 140px var(--glow-4); }
.gr2 { width: 190px; height: 190px; animation: pulse 3.2s ease-in-out infinite .4s; }
.gr3 { width: 120px; height: 120px; background: radial-gradient(circle, var(--glow-1), transparent 70%); animation: pulse 2.4s ease-in-out infinite .2s; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bulb-core { position: relative; z-index: 2; width: 112px; height: 112px; }
.bulb-core svg { width: 100%; height: 100%; }
.bulb-caption { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; width: 210px; }
.bulb-caption .t { font-size: 15px; font-weight: 800; letter-spacing: .14em; color: var(--amber-3); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.bulb-caption .s { font-size: 11px; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; }
.particle { position: absolute; border-radius: 50%; background: var(--amber-1); box-shadow: 0 0 8px 2px var(--glow-3); animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1); } }

/* ---------- KPI cards ---------- */
.kpi-card { padding: 18px 18px 16px; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; font-size: 15px; }
.kpi-icon.c-green { background: rgba(16,185,129,.14); color: var(--green); }
.kpi-icon.c-copper { background: var(--glow-2); color: var(--amber-3); }
.kpi-icon.c-amber { background: var(--glow-1); color: var(--amber-3); }
.kpi-icon.c-blue { background: rgba(92,123,168,.16); color: #4d6c96; }
.kpi-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.kpi-value { font-size: 23px; font-weight: 800; margin-top: 10px; letter-spacing: -.02em; color: var(--ink); }
.kpi-foot { display: flex; align-items: center; gap: 5px; font-size: 11.5px; margin-top: 6px; color: var(--ink-faint); }
.kpi-foot .up { color: var(--green); font-weight: 800; }
.kpi-foot .down { color: var(--red); font-weight: 800; }
.kpi-foot .neutral { color: var(--amber-3); font-weight: 800; }

/* ---------- revenue / customer growth ---------- */
.revenue-amt, .growth-amt { font-size: 26px; font-weight: 800; padding: 2px 20px 0; display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.revenue-amt .grow, .growth-amt .grow { font-size: 12.5px; font-weight: 800; color: var(--green); }
.revenue-sub, .growth-sub { font-size: 11px; color: var(--ink-faint); padding: 0 20px 8px; }
.chart-wrap, .bars-wrap { padding: 4px 14px 14px; }

/* ---------- top hair systems ---------- */
.hair-list { padding: 6px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.hair-row { display: flex; align-items: center; gap: 12px; }
.hair-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--card-bg-solid), var(--glow-1)); color: var(--amber-3); font-size: 13px;
}
.hair-info { flex: 1; min-width: 0; }
.hair-name-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.hair-name-row span.pct { color: var(--amber-3); font-weight: 800; }
.hair-bar-bg { height: 6px; border-radius: 6px; background: var(--glow-2); overflow: hidden; }
.hair-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--amber-1), var(--amber-2)); }
.hair-count { font-size: 12.5px; font-weight: 800; color: var(--ink); flex: 0 0 auto; margin-left: 6px; }

/* ---------- list rows (appointments / payments / maintenance / inventory) ---------- */
.list-col { padding: 2px 18px 16px; display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: none; }
.li-time { font-size: 11px; font-weight: 800; color: var(--amber-3); flex: 0 0 58px; }
.li-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--card-bg-solid), var(--glow-1)); font-size: 11px; font-weight: 800; color: var(--amber-3);
}
.li-body { flex: 1; min-width: 0; }
.li-title { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.li-sub { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-pill { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 20px; flex: 0 0 auto; white-space: nowrap; }
.badge-pill.confirmed { background: rgba(16,185,129,.14); color: var(--green); }
.badge-pill.today { background: rgba(239,68,68,.14); color: var(--red); }
.badge-pill.soon { background: var(--glow-2); color: var(--amber-3); }
.li-check { width: 26px; height: 26px; border-radius: 50%; background: rgba(16,185,129,.14); display: flex; align-items: center; justify-content: center; flex: 0 0 26px; color: var(--green); font-size: 11px; }
.li-amt { text-align: right; flex: 0 0 auto; }
.li-amt .n { font-size: 12.5px; font-weight: 800; display: block; color: var(--ink); }
.li-amt .d { font-size: 10.5px; color: var(--ink-faint); }
.li-wa { width: 28px; height: 28px; border-radius: 50%; background: rgba(16,185,129,.14); display: flex; align-items: center; justify-content: center; flex: 0 0 28px; margin-left: 4px; color: var(--green); font-size: 12px; }

.inv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.inv-row:last-child { border-bottom: none; }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.inv-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.inv-bar-bg { width: 90px; height: 6px; border-radius: 6px; background: rgba(0,0,0,.06); overflow: hidden; flex: 0 0 90px; }
.inv-bar-fill { height: 100%; border-radius: 6px; }
.inv-count { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); flex: 0 0 52px; text-align: right; white-space: nowrap; }

/* ---------- AI chat modal ---------- */
.ai-modal { position: fixed; inset: 0; background: rgba(59,46,34,.35); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 9999; }
.ai-modal.open { display: flex; }
.ai-window {
    width: 460px; max-width: 92vw; height: 620px; max-height: 88vh; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column;
    background: linear-gradient(160deg, rgba(255,255,255,.94), var(--cream-bg)); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);
}
.ai-header { padding: 18px 20px; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 10px; background: var(--nav-active-bg); border-bottom: 1px solid var(--line); color: var(--ink); }
.ai-header .ai-header-icon { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(145deg, var(--amber-1), var(--amber-2)); display: flex; align-items: center; justify-content: center; color: #fff; }
.ai-header span.hdr-title { flex: 1; }
#closeAI { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); color: var(--ink-soft); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-body { flex: 1; padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ai-body .ai-hint { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 2px; }
.ai-suggestion { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.65); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; transition: .2s; }
.ai-suggestion:hover { background: rgba(255,255,255,.9); box-shadow: 0 0 24px var(--glow-2); transform: translateX(2px); }
.ai-footer { padding: 16px 18px; border-top: 1px solid var(--line); }
.ai-footer input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.7); font-family: inherit; font-size: 12.5px; outline: none; color: var(--ink); }
.ai-footer input::placeholder { color: var(--ink-faint); }

/* ---------- responsive: fluid, no horizontal scroll ---------- */
* { min-width: 0; }
html, body { overflow-x: hidden; }
@media (max-width: 1040px) {
    .top-row { grid-template-columns: 1fr; }
    .ai-panel { min-height: 420px; }
    .mini-stats { grid-template-columns: 1fr 1fr; }
    .cards-grid { grid-template-columns: 1fr; }
    .cards-grid > .span-2 { grid-column: auto; }
}
@media (max-width: 560px) {
    .mini-stats { grid-template-columns: 1fr; }
}