@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
.holiday-actions { display:flex; flex-wrap:wrap; gap:8px; }.holiday-dialog { width:min(100% - 28px, 560px); padding:0; border:0; border-radius:10px; background:transparent; }.holiday-dialog::backdrop { background:#14223580; }.modal-card { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 60px #14223530; overflow:hidden; }.modal-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:20px 21px 15px; border-bottom:1px solid var(--line); }.modal-heading h3 { margin:0 0 5px; font:700 17px Manrope,sans-serif; }.modal-heading p { margin:0; color:#98a3b1; font-size:12px; }.modal-close { border:0; background:transparent; color:#7b8999; cursor:pointer; font-size:24px; line-height:1; }.weekday-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:20px 21px 6px; }.weekday-grid label,.mode-options label { display:flex; align-items:center; gap:8px; color:#637288; font-size:13px; }.weekday-grid input,.mode-options input { accent-color:var(--blue); }.mode-options { display:flex; gap:18px; padding:20px 21px 12px; }.holiday-date-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0 21px 12px; }.holiday-date-grid label,.modal-field { display:flex; flex-direction:column; gap:6px; color:#637288; font-size:12px; }.holiday-date-grid input,.modal-field textarea { width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfe; color:var(--ink); padding:10px 11px; font:12px 'DM Sans',sans-serif; outline:none; }.modal-field { padding:0 21px; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:18px 21px 21px; margin-top:6px; }.report-notice { margin-bottom:18px; }
.holiday-weekly { color:#b42318; background:#ffebe9; }.holiday-other { color:#087443; background:#e7f7ef; }
.danger-button { background:#c9362b; }.danger-button:hover { background:#a92b22; }
.holiday-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 21px 18px; color:#7b8999; font-size:12px; }.holiday-pagination>div { display:flex; gap:7px; }.holiday-pagination a,.pagination-disabled { border:1px solid var(--line); border-radius:5px; padding:7px 10px; text-decoration:none; color:var(--blue); }.pagination-disabled { color:#aab3bd; background:#f7f9fb; }
.holiday-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:18px; }.holiday-filters label { flex:1 1 180px; display:flex; flex-direction:column; gap:6px; color:#637288; font-size:12px; }.holiday-filters input { width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfe; color:var(--ink); padding:10px 11px; font:12px 'DM Sans',sans-serif; outline:none; }.holiday-filters .primary-button { flex:0 0 auto; }
@media (max-width:560px) { .holiday-filters { display:grid; grid-template-columns:1fr; }.holiday-filters .primary-button { width:100%; } }
.role-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }.role-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; box-shadow:0 2px 6px #14223505; }.role-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }.role-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:var(--soft-blue); color:var(--blue); font:800 18px Manrope,sans-serif; }.role-card>strong { display:block; color:var(--ink); font:700 18px Manrope,sans-serif; }.role-card>p { color:var(--muted); font-size:12px; margin:5px 0 16px; }.permission-sections { display:grid; gap:14px; max-height:48vh; overflow:auto; padding-right:4px; }.permission-section { border:1px solid var(--line); border-radius:7px; padding:13px; }.permission-section h4 { display:flex; justify-content:space-between; margin:0 0 10px; color:var(--ink); font:700 13px Manrope,sans-serif; }.permission-section h4 small { color:var(--muted); font:500 11px 'DM Sans',sans-serif; }.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.permission-option { display:flex; align-items:center; gap:7px; color:#637288; font-size:12px; }.permission-option input { accent-color:var(--blue); }.role-modal { width:min(100%,760px); margin:auto; }.permission-view-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.permission-view-card ul { list-style:none; margin:0; padding:0 21px 15px; }.permission-view-card li { display:flex; gap:8px; align-items:center; padding:7px 0; border-top:1px solid #f0f3f6; color:#8491a0; font-size:12px; }.permission-view-card li:first-child { border-top:0; }.permission-enabled { color:var(--green)!important; }.permission-disabled { color:#b3bbc4!important; }.permission-enabled span { font-weight:700; }
@media (max-width:900px) { .role-card-grid,.permission-view-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .role-card-grid,.permission-view-grid { grid-template-columns:1fr; }.permission-grid { grid-template-columns:1fr; }.role-modal { width:min(100% - 28px,760px); } }
@media (max-width:560px) { .holiday-intro .holiday-actions { margin-top:16px; }.holiday-actions .primary-button,.holiday-actions .small-button { flex:1; text-align:center; }.weekday-grid,.holiday-date-grid { grid-template-columns:1fr; }.modal-actions { flex-direction:column-reverse; }.modal-actions button { width:100%; }.mode-options { flex-direction:column; gap:10px; } }
.report-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-bottom:18px; }.report-filters label { flex:1 1 160px; }.report-filters select { width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfe; color:var(--ink); padding:10px 11px; font:12px 'DM Sans',sans-serif; outline:none; }.report-filters .primary-button { flex:0 0 auto; }.report-filters + .panel .table-wrap { overflow-x:auto; }
@media (max-width:560px) { .report-filters { display:grid; grid-template-columns:1fr; }.report-filters .primary-button { width:100%; } }
.cell-note { display:block; color:#99a5b3; font-size:12px; margin-top:4px; }.device-actions { display:flex; flex-wrap:wrap; gap:6px; }.sync-button { background:var(--green); }.sync-button:hover { background:#0f6c55; }.help-panel { margin-top:18px; }.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 21px 22px; }.steps-grid>div { border:1px solid var(--line); border-radius:7px; padding:15px; }.steps-grid b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--soft-blue); color:var(--blue); margin-bottom:10px; }.steps-grid strong,.steps-grid span { display:block; }.steps-grid strong { font-size:14px; color:#334256; }.steps-grid span { color:#8b98a7; font-size:12px; line-height:1.5; margin-top:5px; }
body { font-size:16px; }.nav-item { font-size:15px; padding:12px 13px; }.nav-label { font-size:12px; }.brand strong { font-size:17px; }.brand span { font-size:12px; }.eyebrow { font-size:14px; }.topbar h1 { font-size:32px; }.welcome-row h2 { font-size:21px; }.welcome-row p,.panel-heading p,.page-intro p { font-size:14px; }.stat-top { font-size:14px; }.stat-card>strong { font-size:31px; }.stat-card small { font-size:13px; }.panel h3 { font-size:17px; }.view-link,.more-link,.bottom-link { font-size:14px; } th { font-size:11px; } td { font-size:14px; }.employee strong { font-size:14px; }.employee small { font-size:12px; }.status { font-size:12px; }.filter-button { font-size:13px; }.request-copy strong { font-size:14px; }.request-copy span { font-size:12px; }.form-grid label,.inline-filter label { font-size:14px; }.form-grid input,.form-grid select,.inline-filter input { font-size:15px; padding:11px 12px; }.primary-button,.small-button { font-size:14px; }.simple-row strong { font-size:15px; }.simple-row small { font-size:13px; }.flash-success,.flash-error { font-size:14px; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#edf4ff 0%,#f7f9fc 48%,#eaf8f2 100%); }.auth-card { width:min(100%,430px); background:#fff; border:1px solid var(--line); border-radius:14px; padding:36px; box-shadow:0 18px 55px #17233218; }.auth-brand { display:flex; align-items:center; gap:11px; margin-bottom:38px; }.auth-brand strong,.auth-brand span { display:block; }.auth-brand strong { font:700 15px Manrope,sans-serif; }.auth-brand span { color:var(--muted); font-size:10px; margin-top:2px; }.auth-copy h1 { font:800 25px Manrope,sans-serif; letter-spacing:-.5px; margin:5px 0 8px; }.auth-copy>p:last-child { color:var(--muted); font-size:12px; margin:0; }.auth-form { display:grid; gap:15px; margin-top:28px; }.auth-form label:not(.check-label) { display:flex; flex-direction:column; gap:7px; color:#637288; font-size:11px; }.auth-form input[type=email],.auth-form input[type=password] { border:1px solid var(--line); border-radius:7px; padding:12px; background:#fbfcfe; outline:none; font:13px 'DM Sans',sans-serif; }.auth-form input:focus { border-color:#8db1f4; box-shadow:0 0 0 3px var(--soft-blue); }.check-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }.check-label input { accent-color:var(--blue); }.auth-submit { width:100%; display:flex; justify-content:center; gap:10px; padding:12px; }.auth-submit span { font-size:17px; line-height:10px; }.auth-error { color:#ae3c35; background:#fff0ef; border-radius:6px; padding:10px; font-size:11px; }.auth-footer { color:#a2adba; font-size:10px; text-align:center; margin:28px 0 0; }.logout-form { margin-left:auto; }.logout-form button { border:0; color:#8396ab; background:transparent; cursor:pointer; font-size:19px; padding:4px; }.logout-form button:hover { color:#fff; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0 20px; }.page-intro h2 { font:700 19px Manrope,sans-serif; margin:0 0 5px; }.page-intro p { color:var(--muted); font-size:12px; margin:0; }.split-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:18px; }.form-panel,.table-panel { margin-bottom:18px; }.form-grid { display:grid; gap:12px; padding:0 21px 22px; }.form-grid-wide { grid-template-columns:repeat(4,1fr); }.form-grid label,.inline-filter label { display:flex; flex-direction:column; gap:6px; color:#637288; font-size:11px; }.form-grid input,.form-grid select,.inline-filter input { width:100%; border:1px solid var(--line); border-radius:6px; background:#fbfcfe; color:var(--ink); padding:10px 11px; font:12px 'DM Sans',sans-serif; outline:none; }.form-grid input:focus,.form-grid select:focus,.inline-filter input:focus { border-color:#8db1f4; box-shadow:0 0 0 3px var(--soft-blue); }.primary-button,.small-button { border:0; border-radius:6px; background:var(--blue); color:#fff; padding:10px 15px; font:600 11px 'DM Sans',sans-serif; cursor:pointer; width:max-content; }.primary-button:hover,.small-button:hover { background:#174ec9; }.small-button { padding:7px 10px; }.simple-list { padding:0 21px 10px; }.simple-row { display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid #f0f3f6; }.simple-row:first-child { border-top:0; }.simple-row>div:nth-child(2) { flex:1; }.simple-row strong,.simple-row small { display:block; }.simple-row strong { color:#334256; font-size:12px; }.simple-row small { color:#99a4b1; font-size:10px; margin-top:3px; }.row-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:var(--blue); background:var(--soft-blue); }.flash-success,.flash-error { padding:11px 14px; border-radius:6px; margin-top:18px; font-size:12px; }.flash-success { color:var(--green); background:var(--soft-green); }.flash-error { color:#ae3c35; background:#fff0ef; }.inline-filter { display:flex; align-items:end; gap:8px; }.inline-filter label { min-width:145px; }.inline-filter .primary-button { height:35px; }.table-panel .panel-heading { border-bottom:1px solid var(--line); }.table-panel table { min-width:720px; }.table-panel .empty-state { height:150px; }.table-panel td { vertical-align:middle; }
@media (min-width:0px) { .auth-brand strong { font-size:17px; }.auth-brand span { font-size:12px; }.auth-copy h1 { font-size:28px; }.auth-copy>p:last-child { font-size:14px; }.auth-form label:not(.check-label) { font-size:14px; }.auth-form input[type=email],.auth-form input[type=password] { font-size:15px; padding:13px; }.check-label { font-size:13px; }.auth-footer { font-size:12px; } }
@media (max-width:900px) { .form-grid-wide { grid-template-columns:repeat(2,1fr); }.split-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .page-intro { display:block; }.inline-filter { margin-top:16px; }.form-grid-wide { grid-template-columns:1fr; }.form-grid .primary-button { width:100%; }.page-intro .date-chip { margin-top:12px; } }

/* Keep the interface readable after the component rules above. */
body { font-size:16px; }
.nav-item { font-size:15px; }
.nav-label { font-size:12px; }
.sidebar-footer strong { font-size:14px; }
.sidebar-footer span { font-size:12px; }
.eyebrow { font-size:14px; }
.welcome-row p,.panel-heading p,.page-intro p { font-size:14px; }
.stat-top { font-size:14px; }
.stat-card small { font-size:13px; }
.panel h3 { font-size:17px; }
.view-link,.more-link,.bottom-link { font-size:14px; }
th { font-size:11px; }
td { font-size:14px; }
.employee strong { font-size:14px; }
.employee small { font-size:12px; }
.status { font-size:12px; }
.filter-button { font-size:13px; }
.request-copy strong { font-size:14px; }
.request-copy span { font-size:12px; }
.form-grid label,.inline-filter label { font-size:14px; }
.form-grid input,.form-grid select,.inline-filter input { font-size:15px; }
.primary-button,.small-button { font-size:14px; }
.simple-row strong { font-size:15px; }
.simple-row small { font-size:13px; }
.flash-success,.flash-error { font-size:14px; }
.holiday-pagination,.holiday-filters label,.modal-heading p,.holiday-date-grid label,.modal-field { font-size:13px; }
.holiday-filters input,.modal-field textarea,.report-filters select { font-size:14px; }
.permission-option,.permission-view-card li,.role-card>p { font-size:13px; }
.steps-grid strong { font-size:15px; }
.steps-grid span { font-size:13px; }
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
:root { --ink:#172332; --muted:#7b8796; --line:#e8edf3; --blue:#2463eb; --soft-blue:#edf4ff; --green:#16866b; --soft-green:#e9f8f2; --orange:#c67a16; --soft-orange:#fff4df; --purple:#7458c7; --soft-purple:#f1edff; --sidebar:#142235; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#f7f9fc; font-family:'DM Sans',sans-serif; font-size:14px; }
.app-shell { display:flex; min-height:100vh; }.sidebar { width:248px; background:var(--sidebar); color:#b9c5d4; padding:28px 16px 18px; display:flex; flex-direction:column; flex-shrink:0; }.brand { display:flex; align-items:center; gap:11px; color:#fff; padding:0 13px 34px; }.brand-mark { display:grid; place-items:center; width:35px; height:35px; background:#fff; color:var(--sidebar); border-radius:9px; font-family:Manrope,sans-serif; font-weight:800; font-size:21px; }.brand strong,.brand span,.sidebar-footer strong,.sidebar-footer span { display:block; }.brand strong { font:700 15px Manrope,sans-serif; }.brand span { font-size:10px; color:#7f91a7; margin-top:2px; }.nav-label { color:#64778f; font-size:10px; text-transform:uppercase; letter-spacing:1.1px; margin:22px 13px 8px; }.nav-item { color:#9eacbe; display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:7px; text-decoration:none; margin:3px 0; font-size:13px; }.nav-item:hover,.nav-item.active { color:#fff; background:#213b5d; }.nav-item.active { box-shadow:inset 3px 0 #5d9cff; }.nav-icon { width:17px; text-align:center; font-size:16px; color:#9db0c6; }.nav-item em { margin-left:auto; font-style:normal; font-size:11px; background:#315073; color:#d8e9ff; padding:2px 7px; border-radius:10px; }.sidebar-footer { border-top:1px solid #293b50; margin-top:auto; padding:17px 9px 0; display:flex; align-items:center; gap:10px; }.avatar,.top-avatar,.table-avatar,.request-avatar { display:grid; place-items:center; flex-shrink:0; border-radius:50%; font-size:11px; font-weight:700; }.avatar { width:30px;height:30px;background:#b9d8ff;color:#2353a0; }.sidebar-footer strong { color:#e6edf5; font-size:12px; }.sidebar-footer span { color:#718299;font-size:10px;margin-top:3px; }.dots { margin-left:auto; color:#788ba1!important; letter-spacing:2px; }
.main-content { flex:1; min-width:0; padding:32px 42px 20px; }.topbar,.welcome-row,.panel-heading,.stat-top { display:flex; justify-content:space-between; align-items:center; }.topbar { border-bottom:1px solid var(--line); padding-bottom:24px; }.eyebrow { color:var(--muted); font-size:12px; margin:0 0 5px; }.topbar h1 { font:800 27px Manrope,sans-serif; margin:0; letter-spacing:-.7px; }.top-actions { display:flex; align-items:center; gap:13px; }.icon-button { width:35px;height:35px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#748196;font-size:20px;position:relative; }.notification i { position:absolute;width:6px;height:6px;background:#e75d58;border:1px solid white;border-radius:50%;right:7px;top:7px; }.top-avatar { width:35px;height:35px;background:#e1eaff;color:#4167b2; }.welcome-row { padding:25px 0 21px; }.welcome-row h2 { font:700 17px Manrope,sans-serif;margin:0 0 6px; }.welcome-row p { color:var(--muted);margin:0;font-size:12px; }.date-chip { color:#607087;background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:7px;font-size:12px; }.date-chip span { margin-left:8px; }
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }.stat-card { background:#fff;border:1px solid var(--line);padding:18px 19px 16px;border-radius:8px;box-shadow:0 2px 6px #14223505; }.stat-top { color:#66758a;font-size:12px; }.stat-icon { width:28px;height:28px;display:grid;place-items:center;border-radius:7px;font-size:16px;font-weight:700; }.blue{background:var(--soft-blue);color:var(--blue)}.green{background:var(--soft-green);color:var(--green)}.orange{background:var(--soft-orange);color:var(--orange)}.purple{background:var(--soft-purple);color:var(--purple)}.stat-card>strong { display:block;font:800 25px Manrope,sans-serif;margin:11px 0 4px; }.stat-card small { color:#9aa5b3;font-size:11px; }.stat-card .positive { color:var(--green); }.content-grid { display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.8fr);gap:18px;margin-top:20px; }.panel { background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px #14223505;overflow:hidden; }.panel-heading { padding:20px 21px 15px;align-items:flex-start; }.panel h3 { font:700 14px Manrope,sans-serif;margin:0 0 5px; }.panel-heading p { color:#98a3b1;font-size:11px;margin:0; }.view-link,.more-link,.bottom-link { color:var(--blue);font-size:11px;text-decoration:none; }.view-link span,.bottom-link span { margin-left:7px;font-size:16px; }.more-link { color:#8795a5;letter-spacing:2px; }.filters { display:flex;gap:8px;padding:0 21px 15px;border-bottom:1px solid var(--line); }.filter-button { background:#fff;border:1px solid var(--line);border-radius:5px;padding:7px 9px;color:#6e7d90;font:11px 'DM Sans',sans-serif; }.filter-date { margin-left:auto; }.table-wrap { overflow-x:auto; } table { width:100%;border-collapse:collapse;text-align:left;white-space:nowrap; } th { background:#fafbfd;color:#99a4b1;text-transform:uppercase;font-size:9px;letter-spacing:.5px;font-weight:600;padding:11px 10px; } th:first-child,td:first-child{padding-left:21px} th:last-child,td:last-child{padding-right:21px} td { border-top:1px solid #f0f3f6;padding:12px 10px;color:#5c6c80;font-size:11px; }.employee { display:flex;align-items:center;gap:9px; }.table-avatar { width:27px;height:27px;background:#e9f0fc;color:#5174b5;font-size:9px; }.employee strong,.employee small { display:block; }.employee strong { color:#314154;font-size:11px; }.employee small { color:#9aa5b3;font-size:9px;margin-top:3px; }.status { padding:4px 8px;border-radius:12px;font-size:9px; }.status-green { color:var(--green);background:var(--soft-green); }.status-orange { color:var(--orange);background:var(--soft-orange); }.empty-state { height:175px;text-align:center!important;padding:30px!important; }.empty-state span,.empty-request span { display:block;font-size:25px;color:#b2c0d1;margin-bottom:9px; }.empty-state strong,.empty-state small { display:block; }.empty-state strong { color:#6e7d90;font-size:12px; }.empty-state small { color:#a8b2bf;font-size:10px;margin-top:5px; }.request-list { padding:0 21px; }.request-item { display:flex;align-items:center;border-top:1px solid #f0f3f6;padding:14px 0; }.request-item:first-child { border-top:0; }.request-avatar { width:28px;height:28px;background:#f2eaff;color:#8762ca;margin-right:10px; }.request-copy { flex:1; }.request-copy strong,.request-copy span { display:block; }.request-copy strong { color:#334256;font-size:11px; }.request-copy span { color:#99a4b1;font-size:10px;margin-top:3px; }.request-arrow { color:#9aabba; }.empty-request { text-align:center;padding:30px 0 25px; }.empty-request p { color:#65758a;font-size:12px;margin:0 0 4px;font-weight:600; }.empty-request small { color:#aab4c0;font-size:10px; }.bottom-link { display:block;border-top:1px solid var(--line);padding:15px 21px; }.page-footer { display:flex;justify-content:space-between;color:#a2adba;font-size:10px;padding-top:21px; }
@media (max-width:900px) { .sidebar{width:64px;padding:22px 8px}.brand{padding:0 6px 30px}.brand>div:last-child,.nav-label,.nav-item em,.sidebar-footer>div:not(.avatar),.dots{display:none}.nav-item{justify-content:center;padding:11px}.nav-icon{font-size:18px}.sidebar-footer{justify-content:center;padding:15px 0 0}.main-content{padding:25px 20px}.stats-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr} }
@media (max-width:560px) { .main-content{padding:20px 14px}.welcome-row{display:block}.date-chip{display:inline-block;margin-top:15px}.stats-grid{gap:9px}.stat-card{padding:14px}.stat-card>strong{font-size:21px}.filters{overflow:auto}.page-footer{display:block;line-height:2}.page-footer span{display:block} }