/* ============================================================
   MHS HRMS — theme
   Primary  #582a83   Secondary #f28300
   Buttons use radial-gradient per brand spec.
   ============================================================ */
:root {
    --primary: #582a83;
    --primary-dark: #431f66;
    --primary-light: #6d3a9e;
    --secondary: #f28300;
    --secondary-dark: #c96a00;
    --secondary-light: #ff9c33;
    --ink: #222733;
    --muted: #6b7280;
    --line: #e7e8ee;
    --bg: #f5f6fa;
    --sidebar-w: 248px;
    --header-h: 60px;
    --radius: 10px;
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Aptos", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout shell ---------- */
.hrms-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 30;
}
.sidebar .brand {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .2px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .brand .dot {
    width: 26px; height: 26px; border-radius: 7px;
    background: radial-gradient(circle at 30% 30%, var(--secondary-light) 0%, var(--secondary) 60%, var(--secondary-dark) 100%);
    display: inline-block;
}
.sidebar nav { padding: 12px 10px; overflow-y: auto; }
.sidebar nav .grp { text-transform: uppercase; font-size: 10.5px; letter-spacing: .8px; color: rgba(255,255,255,.5); margin: 16px 12px 6px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 11px;
    color: rgba(255,255,255,.85);
    padding: 10px 12px; border-radius: 8px;
    font-weight: 500; margin-bottom: 2px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.sidebar nav a .ic { width: 18px; text-align: center; opacity: .95; }

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

.topbar {
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 16px; font-weight: 600; }
.topbar .user { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.topbar .user .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--primary-light) 0%, var(--primary) 60%, var(--primary-dark) 100%);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.content { padding: 24px; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    margin-bottom: 20px;
}
.card .card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 600; display:flex; align-items:center; justify-content:space-between; }
.card .card-body { padding: 20px; }

/* ---------- Stat tiles ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; position: relative; overflow: hidden;
}
.stat .label { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.stat .value { font-size: 28px; font-weight: 700; margin-top: 6px; color: var(--primary); }
.stat .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: radial-gradient(circle at 30% 30%, var(--secondary-light) 0%, var(--secondary) 60%, var(--secondary-dark) 100%); }

/* ---------- Buttons (radial-gradient per spec) ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; cursor: pointer;
    padding: 9px 18px; border-radius: 8px;
    font-family: var(--font); font-size: 14px; font-weight: 600;
    color: #fff;
    background: radial-gradient(circle at 30% 30%, var(--primary-light) 0%, var(--primary) 60%, var(--primary-dark) 100%);
    box-shadow: 0 2px 6px rgba(88,42,131,.28);
    transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
    text-decoration: none;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; color: #fff; box-shadow: 0 4px 12px rgba(88,42,131,.34); }
.btn:active { transform: translateY(1px); }
.btn.secondary {
    background: radial-gradient(circle at 30% 30%, var(--secondary-light) 0%, var(--secondary) 60%, var(--secondary-dark) 100%);
    box-shadow: 0 2px 6px rgba(242,131,0,.30);
}
.btn.ghost {
    background: #fff; color: var(--primary); border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { color: var(--primary-dark); background: #faf7fd; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.danger { background: radial-gradient(circle at 30% 30%, #ff6b6b 0%, #e03131 60%, #b02020 100%); box-shadow: 0 2px 6px rgba(224,49,49,.28); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.form-control, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=url], input:not([type]), select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    font-family: var(--font); font-size: 14px; background: #fff; color: var(--ink);
    -webkit-appearance: none; appearance: none;
}
select { -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(88,42,131,.12);
}
.help-block { color: #e03131; font-size: 12.5px; margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Tables ---------- */
table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.grid th { background: #faf9fc; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
table.grid tr:hover td { background: #faf7fd; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.draft { background: #eef0f4; color: #555; }
.badge.offer_sent { background: #fff1dd; color: var(--secondary-dark); }
.badge.accepted { background: #e6f7ee; color: #147a45; }
.badge.rejected { background: #fdecec; color: #c22; }
.badge.joined { background: #ede4f7; color: var(--primary); }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; }
.alert.success { background: #e6f7ee; color: #147a45; border: 1px solid #b6e6ca; }
.alert.error { background: #fdecec; color: #c22; border: 1px solid #f5c2c2; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 20%, #6d3a9e 0%, var(--primary) 45%, var(--primary-dark) 100%); }
.login-card { background: #fff; width: 380px; max-width: 92vw; border-radius: 14px; padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-card .lg-brand { display:flex; align-items:center; gap:10px; font-size: 22px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.login-card .lg-sub { color: var(--muted); margin-bottom: 24px; }

.toolbar { display:flex; gap:10px; align-items:center; margin-bottom: 16px; flex-wrap: wrap; }
.spacer { flex: 1; }
.token-list { display:flex; flex-wrap: wrap; gap:6px; }
.token-list code { background: #f3eefa; color: var(--primary); padding: 2px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }

/* ---------- Filter bar (authoritative styles live here, not inline) ---------- */
.filter-bar { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px; }
.filter-bar .fb-field { display:flex; flex-direction:column; gap:5px; }
.filter-bar .fb-field > label { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600; }
.filter-bar .fb-field input, .filter-bar .fb-field select { min-width:185px; height:44px; box-sizing:border-box; }
.filter-bar .fb-search input { min-width:250px; }
/* Filter + Reset — roomy, spaced out */
.filter-bar .fb-field.fb-actions { flex-direction:row; align-items:center; gap:14px; margin-left:8px; }
.filter-bar .fb-field.fb-actions .btn { height:44px; padding:0 28px; }
@media (max-width:720px){ .filter-bar .fb-field.fb-actions { margin-left:0; width:100%; } .filter-bar .fb-field.fb-actions .btn { flex:1; justify-content:center; } }

/* ---- Pending-approval notifications -------------------------------------
   A <details> rather than JavaScript: clicking the bell opens the panel and
   clicking anywhere that moves the page closes it, with no script to load,
   no state to get stuck open, and keyboard support for free. */
.notif { position: relative; }
.notif > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 8px; line-height: 1;
}
.notif > summary::-webkit-details-marker { display: none; }
.notif > summary:hover { background: #f3eefa; }
.notif-badge {
    background: #b23c3c; color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.notif-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    width: 310px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 12, 35, .16); overflow: hidden;
}
.notif-head {
    padding: 10px 14px; font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); border-bottom: 1px solid var(--line); background: #faf8fd;
}
.notif-item {
    display: block; padding: 10px 14px; border-bottom: 1px solid var(--line);
    color: inherit;
}
.notif-item:hover { background: #faf8fd; text-decoration: none; }
.notif-item strong { display: block; font-size: 13.5px; }
.notif-item span { color: var(--muted); font-size: 12px; }
.notif-more { padding: 8px 14px; color: var(--muted); font-size: 12px; }
.notif-all { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; }

/* The same count beside the menu item it belongs to. */
.nav-badge {
    background: #b23c3c; color: #fff; font-size: 10.5px; font-weight: 700;
    border-radius: 999px; padding: 1px 6px; margin-left: 6px;
}