/* public/assets/css/patch-dashboard.css
 * KHMER HRMS — UI/UX PATCH: Employee Dashboard redesign
 * Mobile-first. Reuses existing tokens from themes.css/app.css
 * (--space-*, --radius*, --shadow-*, --primary/--surface/--border/
 * --text/--text-muted) — no new color system, Premium UI spec (Master
 * List §4) applied on top of the existing card/badge/shadow language.
 * Zero external assets. Day/Night handled automatically since every
 * color below is a CSS variable already re-themed by themes.css.
 */

.dash-wrap { display: flex; flex-direction: column; gap: var(--space-2); }

/* ── Greeting header ─────────────────────────────────────────── */
.dash-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.dash-greeting-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.dash-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    box-shadow: var(--shadow-ambient), var(--shadow-contact);
}
.dash-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff;
    font-weight: 700; font-size: 1.2rem; text-transform: uppercase;
}
.dash-greeting-name { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.dash-greeting-date { margin: 2px 0 0; font-size: .82rem; }
.dash-lunar { opacity: .85; }
.dash-greeting-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Quick Check-In/Out ──────────────────────────────────────── */
.dash-checkin-card { padding: var(--space-2); }
.dash-checkin-btn {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; min-height: 64px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000 10%));
    color: #fff; text-decoration: none;
    box-shadow: var(--shadow-ambient), var(--shadow-contact);
    transition: transform .15s ease, box-shadow .15s ease;
}
.dash-checkin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.dash-checkin-btn.is-checked-in { background: linear-gradient(135deg, var(--warning), color-mix(in srgb, var(--warning) 70%, #000 10%)); }
.dash-checkin-icon svg { width: 30px; height: 30px; }
.dash-checkin-btn-title { display: block; font-size: 1.05rem; font-weight: 700; }
.dash-checkin-btn-sub { display: block; font-size: .8rem; opacity: .9; }
.dash-checkin-status { display: flex; align-items: center; gap: var(--space-2); }
.dash-checkin-glow {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 20%, transparent);
}
.dash-checkin-title { font-weight: 700; }

/* ── Quick stats row — horizontally scrollable on phones ─────── */
.dash-stats-scroll {
    display: flex; gap: var(--space-1);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; scroll-snap-type: x proximity;
}
.dash-mini-stat {
    scroll-snap-align: start;
    flex: 0 0 auto; min-width: 128px;
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--space-1) var(--space-2);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-ambient);
    text-decoration: none; color: inherit;
    position: relative;
}
.dash-mini-stat-icon { color: var(--primary); position: relative; display: inline-flex; }
.dash-mini-stat-icon svg { width: 18px; height: 18px; }
.dash-mini-stat-badge {
    position: absolute; top: -6px; right: -10px;
    background: var(--danger); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1;
    padding: 2px 5px; border-radius: 999px;
}
.dash-mini-stat-value { font-size: 1.15rem; font-weight: 700; }
.dash-mini-stat-label { font-size: .72rem; color: var(--text-muted); }

/* ── Social Feed preview ─────────────────────────────────────── */
.dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.dash-feed-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-feed-item { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.dash-feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.dash-feed-item-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dash-feed-time { font-size: .72rem; }
.dash-feed-excerpt { display: block; color: var(--text); text-decoration: none; margin-bottom: 6px; font-size: .9rem; line-height: 1.4; }
.dash-feed-reactions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Quick actions grid ──────────────────────────────────────── */
.dash-actions-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1);
}
.dash-action-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--space-2) 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dash-action-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-ambient), var(--shadow-contact); }
.dash-action-icon { color: var(--primary); }
.dash-action-icon svg { width: 22px; height: 22px; }
.dash-action-label { font-size: .74rem; text-align: center; line-height: 1.25; }

@media (min-width: 576px) {
    .dash-actions-grid { grid-template-columns: repeat(4, 1fr); }
    .dash-mini-stat { min-width: 150px; }
}
@media (min-width: 768px) {
    .dash-actions-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Update-available banner (Part 3) ────────────────────────── */
.update-available-banner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 10px var(--space-2);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-ambient);
}
.update-available-banner span { font-size: .85rem; }

/* ── Profile: device list ────────────────────────────────────── */
.profile-devices-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }


/* ── PATCH (mobile UI): fixes ────────────────────────────────── */
/* .icon-btn sets display:flex, which overrides the [hidden] attribute */
[hidden] { display: none !important; }

/* Stat cards: grow to fill the row; still scroll when they overflow */
.dash-mini-stat { flex: 1 0 auto; }

/* Quick actions: last (short) row stretches to full width */
.dash-actions-grid { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.dash-action-tile { flex: 1 1 calc(33.333% - var(--space-1)); min-width: 0; }
@media (min-width: 576px) { .dash-action-tile { flex-basis: calc(25% - var(--space-1)); } }
@media (min-width: 768px) { .dash-action-tile { flex-basis: calc(20% - var(--space-1)); } }

/* Social Feed reactions: one line, buttons share the width equally */
.dash-feed-reactions { flex-wrap: nowrap; gap: 4px; }
.dash-feed-reactions .btn {
    flex: 1 1 0; min-width: 0;
    justify-content: center;
    padding-inline: 4px;
    white-space: nowrap;
}


/* ── PATCH (mobile UI v2) ────────────────────────────────────── */
/* Role card spans the full row */
.stat-cards .stat-card-wide { grid-column: 1 / -1; }



/* ── PATCH (desktop dashboard): 3 equal stat cards in ONE row ── */
/* Mobile keeps the full-width Role card; from 768px up, Sessions /
   Total Users / Role sit side by side in three equal columns. */
@media (min-width: 768px) {
    .stat-cards.dash-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-cards.dash-stat-cards .stat-card-wide { grid-column: auto; }
}

/* ── PATCH (desktop dashboard): Personnel widget = 4 cards in ONE row ── */
/* Personnel actions / Scheduled / Probation / Temporary share one row
   from 768px up. Mobile keeps the 2x2 grid. */
@media (min-width: 768px) {
    .stat-cards.dash-stat-cards#dash-personnel-widget { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── License widget (dashboard) ──────────────────────────────── */
.dash-license {
    --lic-accent: var(--primary);
    display: block; margin-bottom: var(--space-3);
    padding: var(--space-3);
    text-decoration: none; color: inherit;
    border-inline-start: 4px solid var(--lic-accent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lic-accent) 7%, transparent), transparent 55%),
        var(--surface);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dash-license:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--lic-accent) 16%, transparent); transform: translateY(-1px); }
.dash-license:focus-visible { outline: 2px solid var(--lic-accent); outline-offset: 2px; }
.dash-license.is-grace   { --lic-accent: var(--warning); }
.dash-license.is-blocked { --lic-accent: var(--danger); }

.dash-license-head { display: flex; align-items: center; gap: var(--space-2); }
.dash-license-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lic-accent) 14%, transparent);
    color: var(--lic-accent);
}
.dash-license-icon svg { width: 24px; height: 24px; display: block; }
.dash-license-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dash-license-eyebrow { font-size: .75rem; color: var(--text-muted); letter-spacing: .02em; }
.dash-license-plan { font-size: 1.2rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-license-badge { flex: 0 0 auto; }

.dash-license-grid {
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr;
    margin-top: var(--space-2); padding-top: var(--space-2);
    border-top: 1px dashed var(--border);
}
.dash-license-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-license-label { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); }
.dash-license-label-icon { display: inline-flex; color: var(--text-muted); opacity: .85; }
.dash-license-label-icon svg { width: 14px; height: 14px; }
.dash-license-value { font-size: 1.15rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.dash-license-sep { margin: 0 4px; color: var(--text-muted); font-weight: 400; }
.dash-license-limit { color: var(--text-muted); font-weight: 500; font-size: .95rem; }
.dash-license-note { font-size: .78rem; color: var(--text-muted); }
.dash-license-note.is-warn   { color: var(--warning); font-weight: 600; }
.dash-license-note.is-danger { color: var(--danger);  font-weight: 600; }

.dash-license-meter {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.dash-license-meter > span {
    display: block; height: 100%; border-radius: inherit;
    background: var(--primary); transition: width .4s ease;
}
.dash-license-meter.is-near > span { background: var(--danger); }

@media (min-width: 640px) {
    .dash-license-grid { grid-template-columns: 1.2fr 1.4fr 1fr; gap: var(--space-3); }
    .dash-license-cell + .dash-license-cell { padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--border); }
}