@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink: #17233c; --muted: #79849a; --line: #e8ebf2; --canvas: #f7f8fb; --navy: #152a52; --blue: #4169e1; --green: #25a67a; --amber: #e2a33b; --red: #d86d71; }
* { box-sizing: border-box; }
html { font-size: 14px; min-height: 100%; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-family: 'DM Sans', sans-serif; }
h1, h2, strong, .sidebar-brand { font-family: 'Manrope', sans-serif; }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex: 0 0 238px; min-height: 100vh; padding: 27px 15px 18px; }
.sidebar-brand { align-items: center; color: var(--navy); display: flex; font-size: 20px; font-weight: 800; gap: 10px; letter-spacing: -.5px; padding: 0 13px; }
.brand-mark { align-items: center; background: var(--navy); border-radius: 9px; color: #fff; display: inline-flex; font-size: 17px; height: 32px; justify-content: center; width: 32px; }
.sidebar-context { align-items: center; background: #f8f9fc; border: 1px solid var(--line); border-radius: 8px; color: #57637a; display: flex; font-size: 12px; gap: 8px; margin: 34px 1px 28px; padding: 11px 10px; }
.context-dot { background: #5b7be9; border-radius: 50%; height: 8px; width: 8px; }.context-chevron { color: #a3aabd; margin-left: auto; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }.nav-label { color: #a1a9b9; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 0 13px 8px; text-transform: uppercase; }.nav-label-spaced { margin-top: 22px; }
.sidebar-link { align-items: center; border-radius: 7px; color: #707b91; display: flex; font-size: 13px; gap: 12px; padding: 11px 13px; text-decoration: none; transition: background .2s, color .2s; }.sidebar-link:hover, .sidebar-link.active { background: #edf1ff; color: #3d5ed4; font-weight: 600; }.nav-icon { font-size: 14px; text-align: center; width: 16px; }.nav-badge { background: #fff0e1; border-radius: 10px; color: #c57626; font-size: 10px; margin-left: auto; padding: 2px 7px; }
.sidebar-footer { margin-top: auto; }.support-card { background: #f0f4ff; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; margin: 0 1px 20px; padding: 14px; }.support-card strong { color: #304b9f; font-size: 12px; }.support-card span { color: #8190b2; font-size: 11px; }.sidebar-user, .topbar-user { align-items: center; display: flex; gap: 9px; }.sidebar-user { border-top: 1px solid var(--line); color: var(--ink); font-size: 11px; padding: 17px 5px 0; }.sidebar-user small { color: #a0a7b6; display: block; font-size: 10px; margin-top: 2px; }.user-more { color: #9ba4b5; margin-left: auto; }
.avatar { align-items: center; background: #dfe6ff; border-radius: 50%; color: #4562c2; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-weight: 700; height: 31px; justify-content: center; width: 31px; }.avatar-small { font-size: 9px; height: 28px; width: 28px; }.avatar-purple { background: #eee5ff; color: #855bc4; }.avatar-orange { background: #fff0df; color: #c47c2e; }.avatar-teal { background: #def6f0; color: #27947c; }.avatar-pink { background: #fee6ef; color: #c35e82; }
.app-main { flex: 1; min-width: 0; }.topbar { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; height: 73px; justify-content: space-between; padding: 0 4.1%; }.breadcrumbs { color: #a0a8b7; display: flex; font-size: 12px; gap: 10px; }.breadcrumbs strong { color: #48546b; font-weight: 600; }.topbar-actions { align-items: center; display: flex; gap: 22px; }.search-box { align-items: center; border: 1px solid var(--line); border-radius: 7px; color: #aeb5c2; display: flex; gap: 8px; padding: 7px 9px; width: 218px; }.search-box input { border: 0; color: var(--ink); font: inherit; outline: 0; width: 100%; }.search-box input::placeholder { color: #b1b7c4; }.search-box kbd { background: #f5f6f9; border: 1px solid #e5e8ee; border-radius: 4px; color: #9aa3b4; font-size: 9px; padding: 2px 4px; white-space: nowrap; }.icon-button, .sidebar-toggle { background: transparent; border: 0; color: #7c879a; cursor: pointer; font-size: 18px; position: relative; }.notification-dot { background: #ec756e; border: 2px solid #fff; border-radius: 50%; height: 7px; position: absolute; right: -2px; top: -1px; width: 7px; }.user-name { color: #4d5970; font-size: 12px; font-weight: 600; }.user-chevron { color: #adb4c1; font-size: 10px; }.sidebar-toggle { display: none; }
.app-content { max-width: 1440px; padding: 38px 4.1% 55px; }.page-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 29px; }.eyebrow { color: #99a2b2; font-size: 11px; margin: 0 0 7px; }.page-heading h1 { color: #1a2742; font-size: 27px; letter-spacing: -.7px; margin: 0; }.heading-wave { color: #e3a33e; font-family: sans-serif; font-size: 21px; }.page-subtitle { color: #8993a6; font-size: 12px; margin: 8px 0 0; }.btn-add { background: var(--navy); border: 0; border-radius: 6px; font-size: 12px; font-weight: 600; padding: 11px 16px; }.btn-add span { font-size: 18px; font-weight: 400; line-height: 0; margin-right: 4px; vertical-align: -1px; }
.metric-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }.metric-card { align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 14px; min-height: 132px; padding: 21px 20px; }.metric-icon { align-items: center; border-radius: 7px; display: flex; font-size: 16px; height: 35px; justify-content: center; width: 35px; }.metric-icon-blue { background: #edf1ff; color: #5874de; }.metric-icon-green { background: #e5f7f0; color: #35a57f; }.metric-icon-amber { background: #fff4e2; color: #d69a35; }.metric-icon-red { background: #feeceb; color: #d27576; }.metric-card > div:last-child { display: flex; flex-direction: column; }.metric-label { color: #929bad; font-size: 11px; margin-bottom: 5px; }.metric-card strong { color: #1c2b48; font-size: 24px; line-height: 1.05; }.metric-change { font-size: 10px; font-weight: 700; margin-top: 10px; }.metric-change em { color: #a4acb9; font-style: normal; font-weight: 400; margin-left: 2px; }.positive { color: #2b9a76; }.neutral { color: #d59b3b; }.negative { color: #d46f73; }
.dashboard-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); margin-bottom: 20px; }.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-width: 0; padding: 22px 22px 20px; }.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; }.panel-heading h2 { color: #25334e; font-size: 14px; letter-spacing: -.2px; margin: 0 0 5px; }.panel-heading p { color: #9aa3b2; font-size: 11px; margin: 0; }.select-button { background: #fff; border: 1px solid var(--line); border-radius: 5px; color: #727d91; font: inherit; font-size: 10px; padding: 7px 9px; }.select-button span { color: #a5adba; margin-left: 7px; }.panel-link { color: #4e6cda; font-size: 10px; font-weight: 600; text-decoration: none; }.chart-area { display: flex; height: 195px; margin-top: 25px; }.chart-y-axis { color: #abb2c0; display: flex; flex-direction: column; font-size: 9px; justify-content: space-between; padding: 1px 12px 22px 0; text-align: right; width: 29px; }.chart { flex: 1; position: relative; }.chart-gridlines { background: repeating-linear-gradient(to bottom, #eff1f5 0, #eff1f5 1px, transparent 1px, transparent 20%); height: 160px; position: absolute; width: 100%; }.chart-bars { align-items: flex-end; display: flex; height: 176px; justify-content: space-around; padding: 0 3%; position: relative; }.bar-group { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; position: relative; width: 34px; }.bar { display: block; width: 12px; }.bar-present { background: #6881e3; border-radius: 3px 3px 0 0; }.bar-late { background: #cbd5fa; border-radius: 3px 3px 0 0; margin-top: 2px; position: absolute; }.bar-group small { color: #a6adbc; font-size: 9px; margin-top: 12px; }.bar-group small.today { color: #4665d4; font-weight: 700; }.muted-bar { opacity: .45; }.chart-legend { border-top: 1px solid #f0f1f4; color: #929bad; display: flex; font-size: 10px; gap: 16px; margin-left: 29px; padding-top: 15px; }.chart-legend span { align-items: center; display: flex; gap: 6px; }.chart-legend i { border-radius: 2px; height: 7px; width: 7px; }.legend-present { background: #6881e3; }.legend-late { background: #cbd5fa; }
.activity-list { margin-top: 14px; }.activity-item { align-items: center; border-bottom: 1px solid #f0f1f4; display: flex; gap: 10px; padding: 12px 0; }.activity-item:last-child { border: 0; }.activity-item > div { min-width: 0; }.activity-item strong { color: #344159; display: block; font-size: 11px; }.activity-item p { color: #9ba3b2; font-size: 10px; margin: 3px 0 0; }.activity-item p b { color: #707b90; font-weight: 600; }.activity-item time { color: #b0b7c2; font-size: 9px; margin-left: auto; white-space: nowrap; }.lower-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); }.company-table { margin-top: 18px; }.table-row { align-items: center; border-bottom: 1px solid #f0f1f4; color: #7c879a; display: grid; font-size: 10px; gap: 10px; grid-template-columns: 2.1fr .75fr .65fr 1.2fr; min-height: 48px; }.table-row:last-child { border-bottom: 0; }.table-head { color: #a5adba; font-size: 9px; min-height: 28px; text-transform: uppercase; }.table-row > span:first-child { align-items: center; display: flex; gap: 8px; }.table-row strong { color: #4a566c; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; }.company-logo { align-items: center; border-radius: 5px; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 700; height: 25px; justify-content: center; width: 25px; }.logo-navy { background: #e5eaff; color: #536bd0; }.logo-green { background: #e4f7ee; color: #34a075; }.logo-gold { background: #fff1d9; color: #c98e37; }.table-row > span:last-child { align-items: flex-start; display: flex; flex-direction: column; gap: 4px; }.table-row b { color: #56647b; font-size: 10px; font-weight: 600; }.progress { background: #edf0f4; border-radius: 2px; display: block; height: 3px; overflow: hidden; width: 70px; }.progress i { background: #5c78df; display: block; height: 100%; }.request-count { background: #fff5df; border-radius: 10px; color: #c58c39; font-size: 9px; padding: 5px 8px; }.request-item { align-items: center; border-bottom: 1px solid #f0f1f4; display: flex; gap: 10px; padding: 14px 0; }.request-item > div { flex: 1; }.request-item strong { color: #4b576d; display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; }.request-item p { color: #9ba3b2; font-size: 10px; margin: 3px 0 0; }.request-type { align-items: center; border-radius: 6px; display: inline-flex; font-size: 10px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }.leave-type { background: #eeeaff; color: #745fd0; }.expense-type { background: #e3f7ef; color: #349574; }.more-button { background: transparent; border: 0; color: #9da5b3; cursor: pointer; }.all-requests { color: #4d6bd4; display: block; font-size: 10px; font-weight: 600; margin-top: 17px; text-decoration: none; }.all-requests span { font-size: 14px; margin-left: 5px; }
+@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.search-box { width: 180px; } }
+@media (max-width: 800px) { .app-sidebar { box-shadow: 5px 0 20px #17233c1a; left: -250px; position: fixed; transition: left .2s; z-index: 10; }.app-sidebar.is-open { left: 0; }.sidebar-toggle { display: block; margin-right: 14px; }.topbar { justify-content: flex-start; padding: 0 20px; }.breadcrumbs { flex: 1; }.topbar-actions { gap: 10px; }.user-name, .user-chevron { display: none; }.search-box { width: 38px; }.search-box input, .search-box kbd { display: none; }.search-box span { margin: auto; }.app-content { padding: 28px 20px 40px; }.dashboard-grid, .lower-grid { grid-template-columns: 1fr; } }
+@media (max-width: 520px) { .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }.metric-grid { gap: 10px; }.metric-card { min-height: 120px; padding: 15px 12px; }.metric-icon { display: none; }.metric-card strong { font-size: 21px; }.panel { padding: 17px 14px; }.table-row { gap: 5px; grid-template-columns: 1.8fr .55fr .55fr 1fr; }.table-row > span:nth-child(2), .table-head > span:nth-child(2) { display: none; }.progress { width: 48px; } }