/* ================================================================
   JP Home Depot Accounting Manager — Stylesheet
   Fixes: ₹ symbol overlap (flex not absolute), WP theme override,
          field spacing, tab/button size, professional layout
================================================================ */

/* ── Reset & WP theme isolation ─────────────────────────────── */
#emp-root, #emp-root * { box-sizing: border-box; margin: 0; padding: 0; }
#emp-root button { cursor: pointer; font-family: inherit; }

/* Override WP themes using high specificity — no !important needed.
   Currency number inputs use inline styles directly (see EMP_Helpers::currency_input). */
#emp-root input[type="text"],
#emp-root input[type="date"],
#emp-root input[type="password"],
#emp-root input[type="email"],
#emp-root select,
#emp-root textarea {
    background-color: var(--c-surface2);
    color: var(--c-text);
    -webkit-text-fill-color: var(--c-text);
    border-color: var(--c-border2);
    box-shadow: none;
}
#emp-root input[type="text"]:focus,
#emp-root input[type="date"]:focus,
#emp-root input[type="password"]:focus,
#emp-root input[type="email"]:focus,
#emp-root select:focus,
#emp-root textarea:focus {
    background-color: rgba(79,125,247,0.05);
    border-color: var(--c-blue);
    box-shadow: 0 0 0 3px rgba(79,125,247,0.12);
    outline: none;
}

:root {
    --c-bg:           #080c14;
    --c-surface:      #0e1420;
    --c-surface2:     #131a2b;
    --c-surface3:     #1a2236;
    --c-border:       #1f2d45;
    --c-border2:      #253350;
    --c-blue:         #4f7df7;
    --c-blue-dim:     rgba(79,125,247,0.14);
    --c-blue-glow:    rgba(79,125,247,0.3);
    --c-violet:       #8b5cf6;
    --c-violet-dim:   rgba(139,92,246,0.14);
    --c-green:        #10d98a;
    --c-green-dim:    rgba(16,217,138,0.12);
    --c-red:          #f05252;
    --c-red-dim:      rgba(240,82,82,0.12);
    --c-amber:        #f59e0b;
    --c-amber-dim:    rgba(245,158,11,0.12);
    --c-orange:       #f97316;
    --c-text:         #e2e8f4;
    --c-text-2:       #8fa3c0;
    --c-text-3:       #4a5d78;
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  20px;
    --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
    --f-display: 'Syne', sans-serif;
    --f-body:    'Epilogue', sans-serif;
    --ease: cubic-bezier(0.4,0,0.2,1);
    --t: 0.2s;
    --sidebar-w: 240px;
    --topbar-h:  62px;
    --field-gap: 8px;   /* space between label and input */
    --form-gap:  20px;  /* space between fields in a grid */
    --card-pad:  24px;  /* card internal padding */
}

/* ── WP chrome removal ───────────────────────────────────────── */
body.emp-fullscreen #wpadminbar,
body.emp-fullscreen .site-header,
body.emp-fullscreen .site-footer,
body.emp-fullscreen header:not(#emp-root header),
body.emp-fullscreen footer:not(#emp-root footer) { display: none !important; }
body.emp-fullscreen #page, body.emp-fullscreen .site,
body.emp-fullscreen .entry-content, body.emp-fullscreen .wp-block-post-content,
body.emp-fullscreen main:not(#emp-main) { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.emp-fullscreen { overflow: hidden; }

/* ── Root ─────────────────────────────────────────────────────── */
#emp-root {
    font-family: var(--f-body);
    color: var(--c-text);
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--c-bg);
    overflow: hidden;
}

/* ================================================================
   LOGIN
================================================================ */
.emp-login-screen {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.emp-login-bg { position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(79,125,247,0.10) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,92,246,0.08) 0%, transparent 60%), var(--c-bg); }
.emp-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: emp-float 8s ease-in-out infinite alternate; }
.emp-orb-1 { width:500px;height:500px;background:rgba(79,125,247,0.07);top:-100px;left:-100px; }
.emp-orb-2 { width:400px;height:400px;background:rgba(139,92,246,0.06);bottom:-80px;right:-80px;animation-delay:-3s; }
.emp-orb-3 { width:280px;height:280px;background:rgba(16,217,138,0.04);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-5s; }
.emp-grid-overlay { position:absolute;inset:0;
    background-image:linear-gradient(rgba(79,125,247,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,125,247,0.04) 1px,transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%); }
.emp-login-card {
    position:relative; width:min(420px,calc(100vw - 32px));
    background:rgba(14,20,32,0.90);
    border:1px solid var(--c-border2); border-radius:var(--r-xl);
    padding:36px 40px 28px; backdrop-filter:blur(20px);
    box-shadow:var(--shadow-lg), 0 0 0 1px rgba(79,125,247,0.08) inset;
    animation:emp-login-enter 0.45s var(--ease);
}
@keyframes emp-login-enter { from{opacity:0;transform:translateY(18px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.emp-login-brand { display:flex;align-items:center;gap:14px;margin-bottom:30px; }
.emp-login-logo svg { width:44px;height:44px;filter:drop-shadow(0 0 14px rgba(79,125,247,0.45)); }
.emp-login-title { font-family:var(--f-display);font-size:1.25rem;font-weight:800;letter-spacing:-0.02em; }
.emp-login-subtitle { font-size:0.7rem;color:var(--c-text-2);text-transform:uppercase;letter-spacing:0.07em;margin-top:2px; }
.emp-login-heading { font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:4px; }
.emp-login-desc { font-size:0.85rem;color:var(--c-text-2);margin-bottom:26px; }
.emp-login-error { background:var(--c-red-dim);border:1px solid rgba(240,82,82,0.3);color:var(--c-red);
    padding:11px 14px;border-radius:var(--r-sm);font-size:0.84rem;margin-bottom:16px;animation:emp-shake 0.4s ease; }
@keyframes emp-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)} }

/* Login fields use flex-row prefix — same pattern as app fields */
.emp-login-field { margin-bottom:18px; }
.emp-login-field label { display:block;font-size:0.72rem;font-weight:700;color:var(--c-text-2);
    text-transform:uppercase;letter-spacing:0.08em;margin-bottom:7px; }
.emp-login-input-wrap { display:flex;align-items:stretch; }
.emp-login-icon { display:flex;align-items:center;justify-content:center;
    width:38px;flex-shrink:0;
    background:var(--c-surface3);border:1.5px solid var(--c-border2);
    border-right:none;border-radius:var(--r-sm) 0 0 var(--r-sm);
    color:var(--c-text-3); }
.emp-login-input {
    font-size:0.9rem;color:var(--c-text) !important;
    background:var(--c-surface2) !important;
    border:1.5px solid var(--c-border2);border-left:none;
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    padding:11px 38px 11px 12px;
    width:100%;outline:none;
    transition:border-color var(--t),box-shadow var(--t);
}
.emp-login-input:focus { border-color:var(--c-blue) !important;background:rgba(79,125,247,0.05) !important; }
.emp-login-input::placeholder { color:var(--c-text-3); }
.emp-pw-toggle { position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--c-text-3);display:flex;padding:4px;transition:color var(--t); }
.emp-login-input-wrap { position:relative; }
.emp-pw-toggle:hover { color:var(--c-text-2); }
.emp-login-options { margin-bottom:22px; }
.emp-remember { display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--c-text-2);cursor:pointer; }
.emp-remember input { display:none; }
.emp-remember-box { width:17px;height:17px;border:1.5px solid var(--c-border2);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--t); }
.emp-remember input:checked + .emp-remember-box { background:var(--c-blue);border-color:var(--c-blue); }
.emp-remember input:checked + .emp-remember-box::after { content:'';width:9px;height:6px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translateY(-1px); }
.emp-login-btn { width:100%;padding:13px;background:linear-gradient(135deg,var(--c-blue),var(--c-violet));color:white;
    font-size:0.92rem;font-weight:600;border:none;border-radius:var(--r-sm);letter-spacing:0.02em;
    transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 20px rgba(79,125,247,0.3); }
.emp-login-btn:hover { box-shadow:0 4px 26px rgba(79,125,247,0.5);transform:translateY(-1px); }
.emp-login-footer { display:flex;justify-content:space-between;font-size:0.71rem;color:var(--c-text-3);
    margin-top:24px;padding-top:18px;border-top:1px solid var(--c-border); }

/* ================================================================
   APP LAYOUT
================================================================ */
.emp-app {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.emp-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--t) var(--ease), min-width var(--t) var(--ease), max-width var(--t) var(--ease);
    position: relative;
    z-index: 10;
}
.emp-sidebar.collapsed { width:66px;min-width:66px;max-width:66px; }
.emp-sidebar-brand { display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--c-border);flex-shrink:0; }
.emp-sidebar-logo svg { width:32px;height:32px;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(79,125,247,0.35)); }
.emp-sidebar-brand-text { display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1; }
.emp-sidebar.collapsed .emp-sidebar-brand-text,
.emp-sidebar.collapsed .emp-sidebar-section-label,
.emp-sidebar.collapsed .emp-nav-label,
.emp-sidebar.collapsed .emp-branch-pills,
.emp-sidebar.collapsed .emp-user-info { opacity:0;width:0;overflow:hidden;pointer-events:none; }
.emp-sidebar-brand-name { font-family:var(--f-display);font-size:0.95rem;font-weight:800;white-space:nowrap; }
.emp-sidebar-brand-sub { font-size:0.64rem;color:var(--c-text-3);text-transform:uppercase;letter-spacing:0.07em;white-space:nowrap; }
.emp-sidebar-collapse { margin-left:auto;background:none;border:none;color:var(--c-text-3);padding:4px;display:flex;flex-shrink:0;transition:color var(--t),transform var(--t); }
.emp-sidebar-collapse:hover { color:var(--c-text); }
.emp-sidebar.collapsed .emp-sidebar-collapse { transform:rotate(180deg); }
.emp-sidebar-branch { padding:16px 14px 8px;flex-shrink:0; }
.emp-sidebar-section-label { display:block;font-size:0.63rem;font-weight:700;color:var(--c-text-3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;white-space:nowrap;overflow:hidden;transition:opacity var(--t); }
.emp-branch-pills { display:flex;flex-direction:column;gap:5px;transition:opacity var(--t); }
.emp-branch-pill { font-size:0.8rem;font-weight:600;padding:7px 12px;border-radius:var(--r-sm);border:1.5px solid var(--c-border2);background:transparent;color:var(--c-text-2);text-align:left;transition:all var(--t);white-space:nowrap;width:100%; }
.emp-branch-pill:hover { border-color:var(--c-blue);color:var(--c-text); }
.emp-branch-pill.active[data-branch="tatipaka"]   { background:var(--c-blue-dim);border-color:var(--c-blue);color:var(--c-blue); }
.emp-branch-pill.active[data-branch="bhimavaram"] { background:var(--c-violet-dim);border-color:var(--c-violet);color:var(--c-violet); }
.emp-sidebar-nav { flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 10px;scrollbar-width:none; }
.emp-sidebar-nav::-webkit-scrollbar { display:none; }
.emp-nav-item {
    display:flex;align-items:center;gap:10px;width:100%;
    padding:11px 12px;border-radius:var(--r-sm);border:none;
    background:transparent;color:var(--c-text-2);
    font-size:0.88rem;font-weight:500;text-align:left;
    transition:all var(--t);white-space:nowrap;margin-bottom:2px;
}
.emp-nav-item:hover { background:var(--c-surface2);color:var(--c-text); }
.emp-nav-item.active { background:var(--c-blue-dim);color:var(--c-blue);font-weight:600; }
.emp-nav-icon { display:flex;flex-shrink:0;width:18px; }
.emp-sidebar-footer { padding:12px;border-top:1px solid var(--c-border);flex-shrink:0; }
.emp-user-pill { display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);background:var(--c-surface2);border:1px solid var(--c-border); }
.emp-user-avatar { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--c-blue),var(--c-violet));display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:0.82rem;font-weight:700;color:white;flex-shrink:0; }
.emp-user-info { flex:1;overflow:hidden;min-width:0;transition:opacity var(--t),width var(--t); }
.emp-user-name { display:block;font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.emp-user-role { font-size:0.68rem;color:var(--c-text-3);white-space:nowrap;text-transform:capitalize; }
.emp-logout-btn { background:none;border:none;color:var(--c-text-3);display:flex;padding:4px;flex-shrink:0;transition:color var(--t); }
.emp-logout-btn:hover { color:var(--c-red); }

/* ── Main ────────────────────────────────────────────────────── */
.emp-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-bg);
}
.emp-topbar { height:var(--topbar-h);display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0; }
.emp-mobile-menu-btn { background:none;border:none;color:var(--c-text-2);display:none;padding:6px; }
.emp-topbar-breadcrumb { font-family:var(--f-display);font-size:0.95rem;font-weight:700;color:var(--c-text);letter-spacing:-0.01em; }
.emp-topbar-right { margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0; }
.emp-topbar-date { font-size:0.78rem;color:var(--c-text-2);background:var(--c-surface2);border:1px solid var(--c-border);padding:5px 13px;border-radius:20px;white-space:nowrap; }
.emp-topbar-branch-badge { font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;padding:5px 13px;border-radius:20px;white-space:nowrap; }
.emp-topbar-branch-badge.tatipaka   { background:var(--c-blue-dim);color:var(--c-blue);border:1px solid rgba(79,125,247,0.25); }
.emp-topbar-branch-badge.bhimavaram { background:var(--c-violet-dim);color:var(--c-violet);border:1px solid rgba(139,92,246,0.25); }

/* Toasts */
.emp-notifications { position:fixed;top:16px;right:16px;z-index:999999;display:flex;flex-direction:column;gap:8px;pointer-events:none; }
.emp-toast { background:var(--c-surface2);border:1px solid var(--c-border2);border-radius:var(--r-md);padding:13px 16px;font-size:0.84rem;display:flex;align-items:center;gap:10px;min-width:280px;pointer-events:all;animation:emp-toast-in 0.3s var(--ease);box-shadow:var(--shadow-md); }
.emp-toast.success { border-color:rgba(16,217,138,0.3); }
.emp-toast.error   { border-color:rgba(240,82,82,0.3); }
.emp-toast.info    { border-color:rgba(79,125,247,0.3); }
.emp-toast-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.emp-toast.success .emp-toast-dot { background:var(--c-green); }
.emp-toast.error   .emp-toast-dot { background:var(--c-red); }
.emp-toast.info    .emp-toast-dot { background:var(--c-blue); }
@keyframes emp-toast-in { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }

/* Content area */
.emp-content { flex:1;overflow-y:auto;overflow-x:hidden;padding:24px;scrollbar-width:thin;scrollbar-color:var(--c-border) transparent; }
.emp-content::-webkit-scrollbar { width:5px; }
.emp-content::-webkit-scrollbar-thumb { background:var(--c-border2);border-radius:10px; }

/* ================================================================
   COMPONENTS
================================================================ */

/* Cards */
.emp-card { background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--card-pad);margin-bottom:20px; }
.emp-card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:14px;flex-wrap:wrap; }
.emp-card-title { font-family:var(--f-display);font-size:0.95rem;font-weight:700;color:var(--c-text);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em; }

/* Stats */
.emp-stats-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px; }
.emp-stat { background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t); }
.emp-stat:hover { transform:translateY(-2px);box-shadow:var(--shadow-md); }
.emp-stat::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0; }
.emp-stat.blue::before   { background:var(--c-blue); }
.emp-stat.green::before  { background:var(--c-green); }
.emp-stat.violet::before { background:var(--c-violet); }
.emp-stat.amber::before  { background:var(--c-amber); }
.emp-stat.red::before    { background:var(--c-red); }
.emp-stat.orange::before { background:var(--c-orange); }
.emp-stat-lbl { font-size:0.7rem;font-weight:700;color:var(--c-text-2);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:9px; }
.emp-stat-val { font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--c-text);letter-spacing:-0.03em;line-height:1; }
.emp-stat-sub { font-size:0.72rem;color:var(--c-text-3);margin-top:6px; }

/* ── TABS — bigger, more prominent ──────────────────────────── */
.emp-tabs {
    display:flex;
    border-bottom:2px solid var(--c-border);
    margin-bottom:24px;
    overflow-x:auto;
    scrollbar-width:none;
    gap:2px;
}
.emp-tabs::-webkit-scrollbar { display:none; }
.emp-tab-btn {
    font-size:0.88rem;
    font-weight:600;
    color:var(--c-text-2);
    background:none;
    border:none;
    border-bottom:3px solid transparent;
    padding:13px 22px;
    white-space:nowrap;
    margin-bottom:-2px;
    transition:all var(--t);
    letter-spacing:0.01em;
}
.emp-tab-btn:hover { color:var(--c-text);background:rgba(255,255,255,0.03); }
.emp-tab-btn.active { color:var(--c-blue);border-bottom-color:var(--c-blue);background:rgba(79,125,247,0.04); }
.emp-tab-panel { display:none; }
.emp-tab-panel.active { display:block;animation:emp-fade 0.18s ease; }
@keyframes emp-fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── Grids ───────────────────────────────────────────────────── */
.emp-grid { display:grid;gap:var(--form-gap); }
.emp-grid-2 { grid-template-columns:repeat(2,1fr); }
.emp-grid-3 { grid-template-columns:repeat(3,1fr); }
.emp-grid-4 { grid-template-columns:repeat(4,1fr); }
.emp-grid-auto { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.emp-col-full { grid-column:1/-1; }

/* ── Fields ──────────────────────────────────────────────────── */
.emp-field { display:flex;flex-direction:column;gap:var(--field-gap); }
.emp-field label {
    font-size:0.73rem;
    font-weight:700;
    color:var(--c-text-2);
    text-transform:uppercase;
    letter-spacing:0.08em;
    line-height:1;
}
.emp-field label .req { color:var(--c-red);margin-left:3px; }

/* ── Base inputs ─────────────────────────────────────────────── */
/* High specificity selector to beat WP themes without !important */
#emp-root .emp-input,
#emp-root .emp-select,
#emp-root .emp-textarea {
    font-size: 0.9rem;
    color: var(--c-text);
    background-color: var(--c-surface2);
    border: 1.5px solid var(--c-border2);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    width: 100%;
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
    -webkit-appearance: none;
    -webkit-text-fill-color: var(--c-text);
    box-shadow: none;
}
#emp-root .emp-input:focus,
#emp-root .emp-select:focus,
#emp-root .emp-textarea:focus {
    border-color: var(--c-blue);
    background-color: rgba(79,125,247,0.05);
    box-shadow: 0 0 0 3px rgba(79,125,247,0.12);
    outline: none;
}
#emp-root .emp-input::placeholder { color: var(--c-text-3); }
.emp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%234a5d78' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
    cursor: pointer;
}
.emp-textarea { resize:vertical;min-height:70px; }

/* ── ₹ Prefix inputs ─────────────────────────────────────────
   All currency inputs use inline styles (see EMP_Helpers::currency_input)
   to defeat WP theme overrides. CSS here just handles focus ring.
──────────────────────────────────────────────────────────────── */
.emp-input-prefix {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.emp-input-prefix:focus-within > span:first-child {
    border-color: var(--c-blue) !important;
    background-color: rgba(79,125,247,0.1) !important;
}
.emp-input-prefix:focus-within .emp-input {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(79,125,247,0.12) !important;
}

/* ── Buttons — larger, more breathing room ───────────────────── */
.emp-btn {
    font-size:0.88rem;
    font-weight:600;
    padding:10px 22px;
    border-radius:var(--r-sm);
    border:none;
    cursor:pointer;
    transition:all var(--t);
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    letter-spacing:0.01em;
    text-decoration:none;
    line-height:1;
}
.emp-btn-primary  { background:var(--c-blue);color:#fff;box-shadow:0 2px 12px rgba(79,125,247,0.3); }
.emp-btn-primary:hover  { background:#3d6dee;transform:translateY(-1px);box-shadow:0 4px 18px rgba(79,125,247,0.45); }
.emp-btn-success  { background:var(--c-green);color:#071a0d; }
.emp-btn-success:hover  { background:#0dc478;transform:translateY(-1px); }
.emp-btn-danger   { background:var(--c-red);color:#fff; }
.emp-btn-danger:hover   { background:#d93535; }
.emp-btn-ghost    { background:var(--c-surface2);color:var(--c-text-2);border:1.5px solid var(--c-border2); }
.emp-btn-ghost:hover    { background:var(--c-surface3);color:var(--c-text);border-color:var(--c-border); }
.emp-btn-amber    { background:var(--c-amber-dim);color:var(--c-amber);border:1.5px solid rgba(245,158,11,0.3); }
.emp-btn-amber:hover    { background:rgba(245,158,11,0.22); }
.emp-btn-sm  { padding:7px 14px;font-size:0.8rem; }
.emp-btn-lg  { padding:13px 32px;font-size:0.94rem; }
.emp-btn-group { display:flex;gap:10px;flex-wrap:wrap;align-items:center; }

/* ── Tables ──────────────────────────────────────────────────── */
.emp-table-wrap { overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--c-border); }
.emp-table { width:100%;border-collapse:collapse;font-size:0.85rem; }
.emp-table thead tr { background:var(--c-surface2); }
.emp-table th {
    font-family:var(--f-display);font-size:0.68rem;font-weight:700;
    color:var(--c-text-2);text-transform:uppercase;letter-spacing:0.09em;
    padding:12px 15px;text-align:left;white-space:nowrap;
    border-bottom:1px solid var(--c-border2);
}
.emp-table td { padding:12px 15px;border-bottom:1px solid var(--c-border);color:var(--c-text);vertical-align:middle; }
.emp-table tbody tr:hover { background:rgba(255,255,255,0.02); }
.emp-table tbody tr:last-child td { border-bottom:none; }
.emp-table tfoot td { background:rgba(255,255,255,0.025);font-weight:700;border-top:2px solid var(--c-border2); }
.tr { text-align:right; } .tc { text-align:center; }

/* Amount colors */
.amt { font-family:var(--f-display);font-weight:600;letter-spacing:-0.01em; }
.amt-pos { color:var(--c-green); }
.amt-neg { color:var(--c-red); }

/* Badges */
.badge { display:inline-block;font-size:0.67rem;font-weight:700;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap; }
.badge-blue   { background:var(--c-blue-dim);color:var(--c-blue);border:1px solid rgba(79,125,247,0.2); }
.badge-green  { background:var(--c-green-dim);color:var(--c-green);border:1px solid rgba(16,217,138,0.2); }
.badge-red    { background:var(--c-red-dim);color:var(--c-red);border:1px solid rgba(240,82,82,0.2); }
.badge-amber  { background:var(--c-amber-dim);color:var(--c-amber);border:1px solid rgba(245,158,11,0.2); }
.badge-violet { background:var(--c-violet-dim);color:var(--c-violet);border:1px solid rgba(139,92,246,0.2); }
.badge-gray   { background:rgba(74,93,120,0.12);color:var(--c-text-2);border:1px solid rgba(74,93,120,0.2); }
.badge-lock   { background:rgba(245,158,11,0.12);color:var(--c-amber);border:1px solid rgba(245,158,11,0.2); }

/* Section dividers */
.emp-section-label {
    font-size:0.68rem;font-weight:700;color:var(--c-text-3);
    text-transform:uppercase;letter-spacing:0.1em;
    display:flex;align-items:center;gap:10px;
    margin:22px 0 14px;
}
.emp-section-label::after { content:'';flex:1;height:1px;background:var(--c-border); }

/* Filter bar */
.emp-filter-bar {
    background:var(--c-surface);border:1px solid var(--c-border);
    border-radius:var(--r-md);padding:18px 20px;
    display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
    margin-bottom:18px;
}
.emp-filter-bar .emp-field { min-width:150px; }

/* Calculated display box */
.emp-calc-box {
    background:var(--c-surface2);border:1.5px solid var(--c-border2);
    border-radius:var(--r-sm);padding:11px 14px;
    font-family:var(--f-display);font-size:1.15rem;font-weight:700;
    color:var(--c-green);min-height:44px;display:flex;align-items:center;
}
.emp-calc-box.neutral { color:var(--c-text); }
.emp-calc-box.warning { color:var(--c-amber); }
.emp-calc-box.negative { color:var(--c-red); }

/* Info / warning boxes */
.emp-info-box { background:var(--c-blue-dim);border:1px solid rgba(79,125,247,0.2);border-radius:var(--r-sm);padding:12px 16px;font-size:0.82rem;color:#93b4ff;margin:12px 0; }
.emp-warn-box  { background:var(--c-amber-dim);border:1px solid rgba(245,158,11,0.28);border-radius:var(--r-sm);padding:12px 16px;font-size:0.82rem;color:var(--c-amber);margin:0 0 16px; }
.emp-success-box { background:var(--c-green-dim);border:1px solid rgba(16,217,138,0.25);border-radius:var(--r-sm);padding:12px 16px;font-size:0.82rem;color:var(--c-green);margin:0 0 16px; }

/* Empty state */
.emp-empty { text-align:center;padding:60px 20px;color:var(--c-text-2); }
.emp-empty-icon { font-size:2.4rem;opacity:0.22;margin-bottom:12px; }
.emp-empty h3 { font-family:var(--f-display);font-size:1rem;color:var(--c-text-3);margin-bottom:6px; }
.emp-empty p  { font-size:0.82rem;color:var(--c-text-3); }

/* Loading */
.emp-loading-state { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;color:var(--c-text-3); }
.emp-loading-spinner { width:28px;height:28px;border:2px solid var(--c-border2);border-top-color:var(--c-blue);border-radius:50%;animation:emp-spin 0.7s linear infinite; }
.emp-spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:white;border-radius:50%;animation:emp-spin 0.6s linear infinite; }

/* Finance rows */
.emp-finance-row {
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:14px;
    align-items:end;
    margin-bottom:12px;
    padding:14px;
    background:var(--c-surface2);
    border:1px solid var(--c-border);
    border-radius:var(--r-sm);
}

/* Sale deposit rows — no Type column */
.emp-sale-dep-row {
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:14px;
    align-items:end;
    margin-bottom:10px;
    padding:14px;
    background:var(--c-surface2);
    border:1px solid var(--c-border);
    border-radius:var(--r-sm);
}

/* Chart */
.emp-chart-wrap { position:relative;height:230px; }

/* HR */
.emp-hr { border:none;border-top:1px solid var(--c-border);margin:20px 0; }

/* Read-only overlay for locked/past entries */
.emp-readonly-badge {
    display:inline-flex;align-items:center;gap:6px;
    font-size:0.8rem;font-weight:600;color:var(--c-text-2);
    background:var(--c-surface2);border:1px solid var(--c-border2);
    padding:5px 12px;border-radius:20px;
}

/* Animations */
@keyframes emp-spin  { to{transform:rotate(360deg)} }
@keyframes emp-float { from{transform:translate(0,0)} to{transform:translate(18px,18px)} }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:960px) {
    .emp-sidebar { position:absolute;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:200; }
    .emp-sidebar.mobile-open { transform:translateX(0); }
    .emp-mobile-menu-btn { display:flex; }
    .emp-grid-3,.emp-grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
    :root { --card-pad: 16px; --form-gap: 14px; }
    .emp-content { padding:14px; }
    .emp-grid-2,.emp-grid-3,.emp-grid-4 { grid-template-columns:1fr; }
    .emp-stats-grid { grid-template-columns:repeat(2,1fr); }
    .emp-topbar { padding:0 14px; }
    .emp-topbar-date { display:none; }
    .emp-finance-row,
    .emp-sale-dep-row { grid-template-columns:1fr auto;padding:10px; }
    .emp-finance-row .emp-field:first-child,
    .emp-sale-dep-row .emp-field:first-child { grid-column:1/-1; }
}