/* ============================================
   AuraTime Enterprise - Design System
   ============================================ */

:root {
    --bg-dark: #080d1a;
    --bg-surface: #0f1628;
    --bg-sidebar: #090e1f;
    --glass-bg: rgba(15, 22, 40, 0.7);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-highlight: rgba(255, 255, 255, 0.03);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #475569;
    --accent-indigo: #6366f1;
    --accent-indigo-glow: rgba(99,102,241,0.35);
    --accent-cyan: #06b6d4;
    --accent-cyan-glow: rgba(6,182,212,0.35);
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-orange: #f97316;
    --status-in: #10b981;
    --status-in-bg: rgba(16,185,129,0.15);
    --status-out: #ef4444;
    --status-out-bg: rgba(239,68,68,0.15);
    --status-late: #f59e0b;
    --status-late-bg: rgba(245,158,11,0.15);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --border-subtle: 1px solid rgba(255,255,255,0.05);
    --shadow-premium: 0 10px 30px -10px rgba(0,0,0,0.6);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --font-body: 'IBM Plex Sans Thai', 'Inter', sans-serif;
    --font-heading: 'Prompt', 'IBM Plex Sans Thai', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4,h5,h6,.clock-display,.stat-value,.brand-text h1 { font-family: var(--font-heading); }

body {
    background: var(--bg-dark);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

/* ============= LAYOUT ============= */
.app-container {
    display: flex;
    height: 100vh;
    background: radial-gradient(ellipse at 10% 20%, rgba(99,102,241,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 90% 80%, rgba(6,182,212,0.06) 0%, transparent 50%);
}

/* ============= SIDEBAR ============= */
.sidebar {
    width: 270px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: var(--border-subtle);
}

.brand-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-indigo), var(--accent-cyan));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px var(--accent-indigo-glow);
    flex-shrink: 0;
}
.brand-icon i { width:20px; height:20px; color:white; }
.brand-text h1 { font-size:1.05rem; font-weight:800; background:linear-gradient(to right,#fff,#e2e8f0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.brand-text span { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

/* Profile Pill */
.sidebar-profile-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    cursor: pointer;
    transition: var(--transition);
}
.sidebar-profile-pill:hover { background: rgba(99,102,241,0.14); }

.profile-pill-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: white;
    flex-shrink: 0;
}
.profile-pill-info { flex: 1; min-width: 0; }
.profile-pill-name { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-pill-role { font-size:0.7rem; color:var(--text-muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Overlay select hidden visually but functional */
.profile-pill-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent;
    border: none;
    font-size: 0.9rem;
}

/* Nav Sections */
.sidebar-nav { flex: 1; display:flex; flex-direction:column; gap:4px; }

.nav-section { margin-bottom: 8px; }

.nav-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 10px;
    margin-bottom: 6px;
    margin-top: 12px;
}
.nav-section-label i { width:12px; height:12px; }

.admin-label { color: var(--accent-orange); opacity: 0.8; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav-link i { width:18px; height:18px; flex-shrink:0; }
.nav-link:hover { color:var(--text-primary); background: var(--glass-highlight); }
.nav-link.active {
    color: white;
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(6,182,212,0.12));
    border: 1px solid rgba(99,102,241,0.25);
}
.nav-link.active i { color: var(--accent-cyan); }

/* Admin nav items have orange accent when active */
.admin-section .nav-link.active {
    background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(249,115,22,0.08));
    border-color: rgba(249,115,22,0.3);
}
.admin-section .nav-link.active i { color: var(--accent-orange); }

/* Sidebar Footer */
.sidebar-footer {
    border-top: var(--border-subtle);
    padding-top: 14px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(249,115,22,0.06);
    border: 1px solid rgba(249,115,22,0.15);
    border-radius: var(--radius-md);
}
.toggle-label { display:flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:600; color:var(--text-secondary); }
.toggle-label i { width:14px; height:14px; color:var(--accent-orange); }

/* Toggle Switch */
.switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:#334155; transition:.4s; }
.slider:before { position:absolute; content:""; height:14px; width:14px; left:3px; bottom:3px; background:white; transition:.4s; }
input:checked + .slider { background: var(--accent-orange); }
input:checked + .slider:before { transform: translateX(16px); }
.slider.round, .slider.round:before { border-radius:50px; }

.theme-info { display:flex; align-items:center; gap:8px; font-size:0.72rem; color:var(--text-muted); padding:0 4px; }
.theme-info i { width:13px; height:13px; }
.text-success { color: var(--status-in) !important; }

/* ============= MAIN CONTENT ============= */
.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Header */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-subtle);
    padding-bottom: 22px;
}
.header-title h2 {
    font-size: 1.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-title p { font-size:0.85rem; color:var(--text-secondary); margin-top:2px; }
.header-clock { display:flex; align-items:baseline; gap:6px; background:rgba(18,24,41,0.5); padding:10px 20px; border-radius:var(--radius-md); border:1px solid var(--glass-border); }
.clock-display { font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent-cyan); text-shadow: 0 0 20px var(--accent-cyan-glow); }
.clock-seconds { font-size:0.8rem; font-weight:700; color:var(--text-secondary); }

/* Content Sections */
.content-section { display:none; flex-direction:column; gap:24px; animation: fadeIn 0.35s ease-out; }
.content-section.active { display:flex; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes pulse { 0%,100% { opacity:0.4; transform:scale(1); } 50% { opacity:1; transform:scale(1.1); } }
.icon-pulse { animation: pulse 2.5s infinite ease-in-out; }

/* ============= DASHBOARD GRID ============= */
.dashboard-top-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 22px;
}
@media (max-width: 1200px) { .dashboard-top-grid { grid-template-columns: 1fr; } }

/* ============= PROFILE DETAIL CARD ============= */
.profile-detail-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-card-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border-bottom: var(--border-subtle);
}

.profile-avatar-lg {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: white;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.profile-status-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
    position: absolute;
    bottom: 2px; right: 2px;
    background: var(--status-in);
}
.profile-status-dot.status-leave { background: var(--status-late); }
.profile-status-dot.status-suspended { background: var(--status-out); }

.profile-card-info h3 { font-size:1.2rem; font-weight:700; margin-bottom:4px; }
.profile-role { font-size:0.82rem; color:var(--text-secondary); margin-bottom:8px; }
.profile-dept-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.3);
    color: #a5b4fc;
}

.profile-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 22px;
}
.profile-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: var(--border-subtle);
}
.profile-detail-item:last-child { border-bottom: none; }
.profile-detail-item > i { width:16px; height:16px; color:var(--accent-indigo); flex-shrink:0; }
.profile-detail-item div { display:flex; flex-direction:column; gap:1px; min-width:0; }
.detail-label { font-size:0.68rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.detail-value { font-size:0.88rem; color:var(--text-primary); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Monthly Stats Strip */
.profile-monthly-stats {
    display: flex;
    border-top: var(--border-subtle);
    background: rgba(255,255,255,0.02);
}
.monthly-stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-right: var(--border-subtle);
}
.monthly-stat-item:last-child { border-right: none; }
.stat-ico { width:20px; height:20px; flex-shrink:0; }
.stat-ico.cyan { color:var(--accent-cyan); }
.stat-ico.orange { color:var(--accent-orange); }
.stat-ico.indigo { color:var(--accent-indigo); }
.ms-value { display:block; font-size:1.2rem; font-weight:800; font-family:var(--font-heading); color:white; line-height:1; }
.ms-label { display:block; font-size:0.65rem; color:var(--text-muted); font-weight:500; margin-top:2px; }

/* Work Status Badge */
.profile-work-status { padding: 14px 22px; }
.work-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    background: var(--status-in-bg);
    color: var(--status-in);
    border: 1px solid rgba(16,185,129,0.3);
}
.work-status-badge.leave { background:var(--status-late-bg); color:var(--status-late); border-color:rgba(245,158,11,0.3); }
.work-status-badge.suspended { background:var(--status-out-bg); color:var(--status-out); border-color:rgba(239,68,68,0.3); }

/* Right column */
.dashboard-right-col { display:flex; flex-direction:column; gap:22px; }

/* ============= GLASS CARDS ============= */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
}

.card-header {
    padding: 18px 22px;
    border-bottom: var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header h3 { font-size:1rem; font-weight:600; }
.card-actions { display:flex; gap:8px; }
.pulse-indicator { font-size:0.72rem; font-weight:700; color:var(--status-in); letter-spacing:0.5px; animation: pulse 1.5s infinite; }
.card-body { padding: 22px; }

/* Check-In Card */
.today-status-row {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md);
    border: var(--border-subtle);
    overflow: hidden;
}
.today-log-item { flex:1; padding:14px 16px; }
.today-log-item .label { font-size:0.72rem; color:var(--text-muted); font-weight:600; display:block; margin-bottom:4px; }
.today-log-item .val { font-size:1.1rem; font-weight:700; font-family:var(--font-heading); color:white; }
.today-log-divider { width:1px; background:rgba(255,255,255,0.06); }

.action-buttons { display:flex; gap:12px; margin-bottom:14px; }

.today-checkin-status { display:flex; }

/* Stats Cards */
.stats-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat-card {
    display:flex; align-items:center; gap:16px;
    padding:18px;
    transition: var(--transition);
}
.stat-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,0.12); }
.stat-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon i { width:22px; height:22px; color:white; }
.bg-cyan { background:linear-gradient(135deg,var(--accent-cyan),#0891b2); box-shadow:0 4px 15px rgba(6,182,212,0.25); }
.bg-orange { background:linear-gradient(135deg,var(--accent-orange),#ea580c); box-shadow:0 4px 15px rgba(249,115,22,0.25); }
.bg-indigo { background:linear-gradient(135deg,var(--accent-indigo),#4f46e5); box-shadow:0 4px 15px rgba(99,102,241,0.25); }
.stat-info h4 { font-size:0.72rem; color:var(--text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.stat-value { font-size:1.55rem; font-weight:800; color:white; line-height:1; }
.stat-desc { font-size:0.68rem; color:var(--text-muted); }

/* Chart */
.chart-card { width:100%; }
.chart-container { position:relative; height:280px; width:100%; }

/* ============= TABLES ============= */
.table-responsive { overflow-x:auto; width:100%; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th { padding:14px 18px; font-size:0.75rem; font-weight:600; color:var(--text-secondary); border-bottom:1px solid rgba(255,255,255,0.07); text-transform:uppercase; letter-spacing:0.5px; }
.data-table td { padding:16px 18px; font-size:0.88rem; border-bottom:1px solid rgba(255,255,255,0.03); }
.data-table tbody tr:hover { background:rgba(255,255,255,0.02); }

/* Status Badges */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; font-size:0.73rem; font-weight:600; border-radius:50px; }
.status-in { background:var(--status-in-bg); color:var(--status-in); }
.status-out { background:var(--status-out-bg); color:var(--status-out); }
.status-late { background:var(--status-late-bg); color:var(--status-late); }

/* ============= BUTTONS ============= */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 22px; font-size:0.9rem; font-weight:600;
    border-radius:var(--radius-md); cursor:pointer; transition:var(--transition);
    border:none; outline:none; width:100%;
}
.btn-sm { padding:8px 14px; font-size:0.78rem; border-radius:var(--radius-sm); width:auto; }
.btn:disabled { opacity:0.3; cursor:not-allowed; }

.btn-primary {
    background:linear-gradient(135deg,var(--accent-indigo),rgba(99,102,241,0.8));
    color:white;
}
.btn-primary:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 25px var(--accent-indigo-glow); }

.btn-glow::after { content:''; position:absolute; inset:0; border-radius:var(--radius-md); box-shadow:0 0 20px var(--accent-indigo-glow); opacity:0; transition:var(--transition); pointer-events:none; }
.btn-glow { position:relative; }
.btn-glow:not(:disabled):hover::after { opacity:1; }

.btn-secondary { background:rgba(255,255,255,0.05); color:var(--text-primary); border:1px solid var(--glass-border); }
.btn-secondary:not(:disabled):hover { background:rgba(255,255,255,0.09); transform:translateY(-2px); }

.btn-success { background:linear-gradient(135deg,#10b981,#059669); color:white; }
.btn-success:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(16,185,129,0.3); }

.btn-danger { background:linear-gradient(135deg,#ef4444,#b91c1c); color:white; }
.btn-danger:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(239,68,68,0.3); }

/* ============= SECTION HEADERS ============= */
.section-title-row {
    display:flex; justify-content:space-between; align-items:center;
}
.section-title-row h3 { font-size:1.4rem; font-weight:700; font-family:var(--font-heading); }

/* ============= EMPLOYEE GRID CARDS ============= */
.employee-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:20px;
}

.employee-card {
    background:var(--glass-bg); border:1px solid var(--glass-border);
    backdrop-filter:blur(20px); border-radius:var(--radius-lg);
    padding:22px; text-align:center;
    display:flex; flex-direction:column; align-items:center;
    box-shadow:var(--shadow-premium); transition:var(--transition);
    position:relative;
}
.employee-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.12); }
.emp-avatar { width:66px; height:66px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:800; color:white; margin-bottom:14px; box-shadow:0 6px 20px rgba(0,0,0,0.25); }
.avatar-cyan { background:linear-gradient(135deg,#06b6d4,#0891b2); }
.avatar-indigo { background:linear-gradient(135deg,#6366f1,#4f46e5); }
.avatar-purple { background:linear-gradient(135deg,#a855f7,#7e22ce); }
.avatar-pink { background:linear-gradient(135deg,#ec4899,#db2777); }
.avatar-orange { background:linear-gradient(135deg,#f97316,#ea580c); }
.employee-card h4 { font-size:1.05rem; font-weight:700; font-family:var(--font-heading); margin-bottom:4px; }
.employee-card .role { font-size:0.78rem; color:var(--text-secondary); margin-bottom:4px; }
.employee-card .dept { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:600; margin-bottom:14px; }
.employee-card .status-badge { width:90%; margin-bottom:0; }

.emp-admin-actions { display:flex; gap:8px; margin-top:14px; width:100%; }
.emp-admin-actions .btn { padding:7px 12px; font-size:0.73rem; border-radius:var(--radius-sm); flex:1; }

/* ============= REPORT FILTERS ============= */
.filter-grid { display:grid; grid-template-columns:repeat(3,1fr) 1.4fr; gap:16px; align-items:flex-end; }
.filter-actions { display:flex; gap:8px; }
.filter-actions .btn { flex:1; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group label { font-size:0.76rem; font-weight:600; color:var(--text-secondary); }
.form-control {
    background:var(--bg-surface); border:1px solid var(--glass-border);
    color:var(--text-primary); padding:10px 14px;
    font-size:0.88rem; border-radius:var(--radius-sm); outline:none; transition:var(--transition);
}
.form-control:focus { border-color:var(--accent-indigo); box-shadow:0 0 10px rgba(99,102,241,0.15); }
.form-select {
    width:100%; background:var(--bg-surface); border:1px solid var(--glass-border);
    color:var(--text-primary); padding:10px 14px; font-size:0.88rem;
    border-radius:var(--radius-sm); outline:none; cursor:pointer; transition:var(--transition);
}
.form-select:focus { border-color:var(--accent-indigo); }

/* Report Summary Cards */
.report-summary-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.r-summary-card { background:rgba(255,255,255,0.02); border:1px solid var(--glass-border); padding:18px; border-radius:var(--radius-md); text-align:center; }
.r-summary-card h5 { font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:8px; }
.r-summary-card p { font-size:1.55rem; font-weight:800; color:var(--accent-cyan); font-family:var(--font-heading); }

/* ============= MODALS ============= */
.modal-overlay {
    position:fixed; inset:0;
    background:rgba(5,10,25,0.85);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    z-index:100; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.3s ease-out;
}
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-content {
    width:620px; max-width:94%; max-height:90vh; overflow-y:auto;
    border-radius:var(--radius-lg); box-shadow:0 25px 50px -12px rgba(0,0,0,0.8);
    transform:scale(0.95); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-overlay.open .modal-content { transform:scale(1); }
.modal-header { padding:20px 24px; border-bottom:var(--border-subtle); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { font-size:1.15rem; font-weight:700; font-family:var(--font-heading); }
.btn-close { background:transparent; border:none; cursor:pointer; color:var(--text-secondary); padding:4px; border-radius:50%; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.btn-close:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.modal-body { padding:24px; display:flex; flex-direction:column; gap:18px; }
.modal-footer { padding:18px 24px; border-top:var(--border-subtle); display:flex; justify-content:flex-end; gap:10px; }
.modal-footer .btn { width:auto; }
.form-row { display:flex; gap:16px; }
.col-6 { flex:0 0 calc(50% - 8px); }

/* ============= TOAST ============= */
.toast-container { position:fixed; bottom:28px; right:28px; z-index:1000; display:flex; flex-direction:column; gap:10px; }
.toast {
    background:rgba(15,22,40,0.95); border:1px solid var(--glass-border);
    backdrop-filter:blur(12px); border-radius:var(--radius-md);
    padding:14px 18px; display:flex; align-items:center; gap:12px;
    min-width:280px; max-width:420px;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    transform:translateX(120%); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.show { transform:translateX(0); }
.toast-body { font-size:0.85rem; font-weight:500; }
.toast-success i { color:var(--status-in); }
.toast-info i { color:var(--accent-indigo); }
.toast-error i { color:var(--status-out); }

/* ============= UTIL ============= */
.text-danger { color:#ef4444; }
.text-success { color:#10b981; }
.text-muted { color:var(--text-muted); }

/* ============= PRINT ============= */
@media print {
    body { background:white !important; color:black !important; height:auto; overflow:visible; }
    .app-container { display:block; background:none; }
    .sidebar,.content-header,.report-controls-card,.section-title-row,.modal-overlay,.toast-container,.emp-admin-actions { display:none !important; }
    .main-content { padding:0; width:100%; display:block; }
    #reportsSection { display:block !important; opacity:1 !important; transform:none !important; }
    #dashboardSection,#mylogsSection,#logsSection,#employeesSection { display:none !important; }
    .glass { background:none !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; }
    .card-header { border-bottom:2px solid #333 !important; }
    .card-header h3 { color:black !important; }
    .data-table { color:black !important; }
    .data-table th { color:black !important; border-bottom:2px solid #333 !important; }
    .data-table td { color:#333 !important; border-bottom:1px solid #ddd !important; }
    .r-summary-card { background:none !important; border:1px solid #ccc !important; }
    .r-summary-card h5 { color:#555 !important; }
    .r-summary-card p { color:black !important; }
}