/* ── RESET & BASE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background: #e2e4e9; color: #212529; font-size: 14px; min-height: 100vh; }

/* ── TOPBAR ─────────────────────────────────────── */
.topbar { background:#fff; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid #e2e4e8; position:sticky; top:0; z-index:200; }
.logo { display:flex; align-items:center; gap:11px; text-decoration:none; }
.logo-img { width:38px; height:38px; border-radius:4px; overflow:hidden; flex-shrink:0; }
.logo-img img { width:100%; height:100%; object-fit:cover; display:block; }
.logo-text { font-size:1.05rem; font-weight:500; color:#212529; }
.user-btn { background:#3d47c9; color:#fff; border:none; border-radius:5px; padding:8px 16px; font-size:.84rem; font-weight:500; font-family:'Roboto',sans-serif; cursor:pointer; display:flex; align-items:center; gap:8px; position:relative; }
.user-btn svg { width:14px; height:14px; fill:currentColor; }
.dropdown { display:none; position:absolute; top:calc(100% + 4px); right:0; background:#fff; border:1px solid #e2e4e8; border-radius:5px; min-width:160px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index:300; }
.user-btn:hover .dropdown, .user-btn:focus-within .dropdown { display:block; }
.dropdown a { display:block; padding:9px 14px; font-size:.84rem; color:#212529; text-decoration:none; transition:background .12s; }
.dropdown a:hover { background:#f4f5ff; }

/* ── NAVBAR ─────────────────────────────────────── */
.navbar { background:#1e2257; height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:56px; z-index:190; }
.nav-links { display:flex; list-style:none; height:100%; }
.nav-links li { height:100%; display:flex; align-items:center; position:relative; }
.nav-links a, .nav-links > li > button { display:flex; align-items:center; gap:5px; height:100%; padding:0 16px; font-size:.76rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:#c8cde6; text-decoration:none; background:none; border:none; font-family:'Roboto',sans-serif; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap; }
.nav-links a:hover, .nav-links > li > button:hover, .nav-links a.active { background:rgba(255,255,255,.08); color:#fff; }
.nav-links svg { width:12px; height:12px; fill:currentColor; }
.sub-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #e2e4e8; border-radius:5px; min-width:180px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index:300; }
.nav-links li:hover .sub-menu { display:block; }
.sub-menu a { display:block; padding:9px 16px; font-size:.83rem; color:#212529; text-decoration:none; text-transform:none; letter-spacing:0; font-weight:400; height:auto; background:none; transition:background .12s; }
.sub-menu a:hover { background:#f4f5ff; color:#3d47c9; }
.nav-badges { display:flex; gap:6px; align-items:center; }
.badge { font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:4px 12px; border-radius:4px; text-transform:uppercase; cursor:pointer; border:none; font-family:'Roboto',sans-serif; transition:opacity .15s; }
.badge:hover { opacity:.85; }
.badge-staff { background:#4a4a6a; color:#fff; }
.badge-iris { background:#e53935; color:#fff; }

/* ── PAGE WRAPPER ───────────────────────────────── */
.page-wrap { max-width:1200px; margin:28px auto; padding:0 20px; }

/* ── WHITE CARD ─────────────────────────────────── */
.card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card-pad { padding:24px 28px; }

/* ── PAGE HEADER CARD ───────────────────────────── */
.page-header-card { background:#fff; border-radius:8px; padding:28px 32px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.page-header-card h1 { font-size:1.6rem; font-weight:700; color:#111; margin-bottom:4px; }
.page-header-card p { font-size:.9rem; color:#666; }

/* ── BUTTONS ────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px; border:none; border-radius:5px; padding:9px 20px; font-size:.86rem; font-weight:500; font-family:'Roboto',sans-serif; cursor:pointer; transition:background .15s; text-decoration:none; }
.btn-primary { background:#3d47c9; color:#fff; }
.btn-primary:hover { background:#2b31b5; }
.btn-sm { padding:6px 14px; font-size:.8rem; }
.btn-danger { background:#e53935; color:#fff; }
.btn-danger:hover { background:#c62828; }
.btn-ghost { background:transparent; color:#3d47c9; border:1px solid #3d47c9; }
.btn-ghost:hover { background:#f0f1ff; }

/* ── FORM ELEMENTS ──────────────────────────────── */
.form-input { height:38px; border:1px solid #ced4da; border-radius:5px; padding:0 12px; font-size:.88rem; font-family:'Roboto',sans-serif; color:#212529; background:#fff; outline:none; transition:border-color .15s,box-shadow .15s; }
.form-input:focus { border-color:#4e59d4; box-shadow:0 0 0 3px rgba(78,89,212,.15); }
.form-select { height:38px; border:1px solid #ced4da; border-radius:5px; padding:0 30px 0 10px; font-size:.84rem; font-family:'Roboto',sans-serif; color:#212529; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right 4px center/20px no-repeat; appearance:none; outline:none; cursor:pointer; transition:border-color .15s; }
.form-select:focus { border-color:#4e59d4; box-shadow:0 0 0 3px rgba(78,89,212,.15); }

/* ── TAGS ───────────────────────────────────────── */
.tag { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 10px; border-radius:3px; }
.tag-training { background:#e8f5e9; color:#2e7d32; }
.tag-important { background:#fdecea; color:#c62828; }
.tag-information { background:#e3f2fd; color:#1565c0; }
.tag-hosted { background:#e8f5e9; color:#2e7d32; }
.tag-completed { background:#f1f1f1; color:#555; }
.tag-past { background:#f5f5f5; color:#777; }
.tag-upcoming { background:#fff8e1; color:#f57f17; }

/* ── STAT CARD ──────────────────────────────────── */
.stat-card { background:#fff; border-radius:8px; padding:20px 24px; display:flex; align-items:center; gap:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.stat-icon { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:22px; height:22px; }
.stat-icon.yellow { background:#fff8e1; }
.stat-icon.yellow svg { fill:#f9a825; }
.stat-icon.blue { background:#e8eaff; }
.stat-icon.blue svg { fill:#3d47c9; }
.stat-icon.green { background:#e8f5e9; }
.stat-icon.green svg { fill:#2e7d32; }
.stat-icon.purple { background:#f3e5f5; }
.stat-icon.purple svg { fill:#7b1fa2; }
.stat-icon.teal { background:#e0f2f1; }
.stat-icon.teal svg { fill:#00695c; }
.stat-label { font-size:.82rem; color:#777; margin-bottom:2px; }
.stat-value { font-size:1.6rem; font-weight:700; color:#111; line-height:1; }

/* ── ACTION CARD (IRIS grid) ────────────────────── */
.action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.action-card { background:#fff; border-radius:8px; padding:28px 20px 22px; text-align:center; cursor:pointer; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.06); display:block; }
.action-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); transform:translateY(-2px); }
.action-card.disabled { opacity:.55; cursor:default; pointer-events:none; }
.action-card-icon { width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.action-card-icon svg { width:26px; height:26px; }
.action-card h3 { font-size:.95rem; font-weight:700; color:#111; margin-bottom:4px; }
.action-card p { font-size:.8rem; color:#888; }