:root {--brand-green: #166534;--brand-dark-green: #14532D;--brand-grey: #64748B;--brand-black: #0F172A;--primary-color: var(--brand-green);--primary-hover: var(--brand-dark-green);--primary-light: rgba(22, 101, 52, 0.12);--primary-soft: rgba(22, 101, 52, 0.08);--secondary-color: var(--brand-grey);--secondary-light: #F8FAFC;--success-color: #16A34A;--success-bg: rgba(22, 163, 74, 0.12);--danger-color: #DC2626;--danger-bg: rgba(220, 38, 38, 0.12);--warning-color: #2563EB;--warning-bg: rgba(37, 99, 235, 0.12);--info-color: #2563EB;--info-bg: rgba(37, 99, 235, 0.12);--dark-color: #0F172A;--light-color: #F8FAFC;--muted-color: #64748B;--border-color: #E2E8F0;--surface-color: #FFFFFF;--neutral-900: #0F172A;--neutral-800: #0F172A;--neutral-600: #64748B;--neutral-400: #64748B;--neutral-200: #E2E8F0;--neutral-100: #F8FAFC;--accent-color: #2563EB;--sidebar-width: 260px;--header-height: 70px;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--font-main: 'Inter', 'Segoe UI', sans-serif;--fs-display: 36px;--fs-h1: 28px;--fs-h2: 20px;--fs-body: 16px;--fs-sm: 14px;--fs-xs: 12px;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--line-body: 1.5;--line-tight: 1.2;--btn-height: 44px;--btn-padding-x: 16px;--btn-padding-y: 10px;--input-height: 44px;--input-padding-x: 14px;--input-padding-y: 10px;--focus-ring: 0 0 0 3px rgba(22, 101, 52, 0.2);--transition-speed: 0.3s;}html {scroll-behavior: smooth;}body {background-color: var(--light-color);font-family: var(--font-main);font-size: var(--fs-body);color: var(--dark-color);overflow-x: hidden;line-height: var(--line-body);}h1, h2, h3, h4, h5, h6 {font-weight: var(--fw-semibold);letter-spacing: -0.025em;color: var(--dark-color);line-height: var(--line-tight);}h1 { font-size: var(--fs-h1); }h2 { font-size: var(--fs-h2); }h3 { font-size: calc(var(--fs-h2) - 2px); }h4 { font-size: var(--fs-body); }h5 { font-size: var(--fs-sm); }h6 { font-size: var(--fs-xs); }small, .small { font-size: var(--fs-sm); }.text-muted.small { font-size: var(--fs-xs); }a {text-decoration: none;color: var(--primary-color);transition: color var(--transition-speed);}a:hover { color: var(--primary-hover); }.text-primary { color: var(--primary-color) !important; }.bg-primary { background-color: var(--primary-color) !important; }.btn-primary {background-color: var(--primary-color);border-color: var(--primary-color);}.btn-primary:hover, .btn-primary:focus, .btn-primary:active {background-color: var(--primary-hover);border-color: var(--primary-hover);}.btn-outline-primary {color: var(--primary-color);border-color: var(--primary-color);}.btn-outline-primary:hover {background-color: var(--primary-color);border-color: var(--primary-color);}.text-success { color: var(--success-color) !important; }.bg-success { background-color: var(--success-color) !important; }.text-danger { color: var(--danger-color) !important; }.bg-danger { background-color: var(--danger-color) !important; }.text-warning { color: var(--warning-color) !important; }.bg-warning { background-color: var(--warning-color) !important; }.btn {font-family: var(--font-main);font-size: var(--fs-body);font-weight: var(--fw-medium);padding: var(--btn-padding-y) var(--btn-padding-x);border-radius: var(--border-radius-sm);line-height: var(--line-tight);box-shadow: var(--shadow-sm);transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;min-height: var(--btn-height);display: inline-flex;align-items: center;justify-content: center;gap: 6px;}.btn-sm {font-size: var(--fs-sm);padding: 6px 12px;border-radius: var(--border-radius-sm);min-height: 36px;}.btn-lg {font-size: var(--fs-body);padding: calc(var(--btn-padding-y) + 2px) calc(var(--btn-padding-x) + 4px);border-radius: var(--border-radius-md);}.btn:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}.btn:focus, .btn:focus-visible {box-shadow: var(--focus-ring);}.btn:disabled, .btn.disabled {opacity: 0.6;transform: none;box-shadow: var(--shadow-sm);}.btn-outline {background-color: transparent;border: 1px solid var(--primary-color);color: var(--primary-color);}.btn-outline:hover {background-color: var(--primary-color);color: var(--surface-color);border-color: var(--primary-color);}.form-control, .form-select, .form-control-plaintext {font-family: var(--font-main);font-size: var(--fs-body);padding: var(--input-padding-y) var(--input-padding-x);min-height: var(--input-height);border-radius: var(--border-radius-sm);}.form-control:focus, .form-select:focus {border-color: var(--primary-color);box-shadow: var(--focus-ring);}.input-group-text {font-size: var(--fs-body);border-radius: var(--border-radius-sm);padding: var(--input-padding-y) var(--input-padding-x);}.form-control-sm, .form-select-sm, .input-group-sm .form-control, .input-group-sm .form-select, .input-group-sm .input-group-text {font-size: var(--fs-body);padding: var(--input-padding-y) var(--input-padding-x);min-height: var(--input-height);}.form-label {font-weight: var(--fw-medium);font-size: var(--fs-sm);}.form-text {font-size: var(--fs-xs);}.search-input {position: relative;width: 100%;}.search-input .search-icon {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: var(--neutral-400);pointer-events: none;}.search-input .form-control {padding-left: 36px;}.search-input .search-clear {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background: transparent;border: none;color: var(--neutral-400);padding: 0;}.search-input .form-control:focus + .search-clear,.search-input .form-control:not(:placeholder-shown) + .search-clear {color: var(--neutral-600);}.table {font-size: var(--fs-body);}.table thead th {font-size: var(--fs-xs);text-transform: uppercase;letter-spacing: 0.05em;font-weight: var(--fw-semibold);padding: 16px 24px;vertical-align: middle;}.table tbody td {padding: 16px 24px;vertical-align: middle;font-size: var(--fs-sm);}.table-hover > tbody > tr:hover > * {background-color: var(--light-color);}.table:not(.table-dark) tbody tr:nth-child(even) > * {background-color: var(--neutral-100);}.table-modern {border-collapse: separate;border-spacing: 0;}.table-modern thead th {font-size: var(--fs-xs);text-transform: uppercase;letter-spacing: 0.08em;font-weight: var(--fw-semibold);color: var(--neutral-400);padding: 16px 20px;background: var(--light-color);border-bottom: 1px solid var(--border-color);}.table-modern tbody td {padding: 18px 20px;border-bottom: 1px solid var(--neutral-100);font-size: var(--fs-sm);color: var(--neutral-800);}.table-modern tbody tr:hover td {background: var(--light-color);}.table-modern .sticky-header th {position: sticky;top: 0;z-index: 5;}.table-modern .form-check-input {width: 16px;height: 16px;margin-top: 0;}.table-modern .action-cell {min-width: 220px;}.table-list thead th {color: var(--neutral-400);}.table-list tbody td {font-size: var(--fs-sm);}.table-card {background: var(--surface-color);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);}.card-surface {background: var(--surface-color);border-radius: var(--border-radius-lg);box-shadow: var(--shadow-sm);border: 1px solid var(--border-color);}.list-card {border: 1px solid var(--border-color);background: var(--surface-color);}.list-card .card-header {border-bottom: 1px solid var(--border-color);background: var(--light-color);}.section-title {font-size: 1.25rem;font-weight: var(--fw-semibold);color: var(--dark-color);}.page-title {font-size: 1.6rem;font-weight: var(--fw-semibold);color: var(--dark-color);}.muted-meta {color: var(--neutral-400);font-size: var(--fs-xs);}.user-meta {color: var(--muted-color);font-size: var(--fs-xs);}.action-group {display: inline-flex;align-items: center;gap: 6px;padding: 6px;border-radius: 12px;background: var(--light-color);border: 1px solid var(--border-color);}.btn-ghost {background: var(--surface-color);border: 1px solid var(--border-color);color: var(--neutral-600);}.btn-ghost:hover {background: var(--neutral-100);color: var(--dark-color);border-color: var(--border-color);}.btn-ghost.active {background: var(--neutral-100);color: var(--dark-color);border-color: var(--border-color);}.btn-ghost-primary {color: var(--accent-color);border-color: var(--info-bg);}.btn-ghost-primary:hover {background: var(--info-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-primary.active {background: var(--info-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-danger {color: var(--danger-color);border-color: var(--danger-bg);}.btn-ghost-danger:hover {background: var(--danger-bg);border-color: var(--border-color);color: var(--danger-color);}.btn-ghost-danger.active {background: var(--danger-bg);border-color: var(--border-color);color: var(--danger-color);}.btn-ghost-warning {color: var(--warning-color);border-color: var(--warning-bg);}.btn-ghost-warning:hover {background: var(--warning-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-warning.active {background: var(--warning-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-info {color: var(--info-color);border-color: var(--info-bg);}.btn-ghost-info:hover {background: var(--info-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-info.active {background: var(--info-bg);border-color: var(--border-color);color: var(--accent-color);}.btn-ghost-success {color: var(--success-color);border-color: var(--success-bg);}.btn-ghost-success:hover {background: var(--success-bg);border-color: var(--border-color);color: var(--success-color);}.btn-ghost-success.active {background: var(--success-bg);border-color: var(--border-color);color: var(--success-color);}.btn-icon {width: 36px;min-height: 36px;padding: 0;}.btn-ghost-primary.btn-icon i { color: var(--primary-color); }.btn-ghost-primary.btn-icon:hover i { color: var(--primary-hover); }.btn-ghost-warning.btn-icon i { color: var(--warning-color); }.btn-ghost-warning.btn-icon:hover i { color: var(--dark-color); }.btn-ghost-danger.btn-icon i { color: var(--danger-color); }.btn-ghost-danger.btn-icon:hover i { color: var(--dark-color); }.btn-ghost-info.btn-icon i { color: var(--info-color); }.btn-ghost-info.btn-icon:hover i { color: var(--dark-color); }.btn-ghost-success.btn-icon i { color: var(--success-color); }.btn-ghost-success.btn-icon:hover i { color: var(--dark-color); }.btn .fas,.btn .far,.btn .fa {font-size: 0.95em;}.btn.is-loading {opacity: 0.7;pointer-events: none;position: relative;}.btn.is-loading::after {content: '';width: 14px;height: 14px;border: 2px solid currentColor;border-top-color: transparent;border-radius: 50%;margin-left: 8px;animation: spin 0.6s linear infinite;}@keyframes spin {to { transform: rotate(360deg); }}.filter-bar {gap: 12px;}.filter-bar .form-select,.filter-bar .form-control {background: var(--surface-color);}.filter-card .form-label {font-weight: var(--fw-semibold);color: var(--dark-color);}.filter-card .text-uppercase {letter-spacing: 0.08em;}.user-counts {display: flex;gap: 12px;flex-wrap: wrap;}.user-counts .count-item {display: inline-flex;align-items: center;gap: 8px;padding: 8px 12px;background: var(--light-color);border: 1px solid var(--border-color);border-radius: 999px;color: var(--neutral-600);font-size: var(--fs-sm);}.responsive-table .action-group {width: 100%;justify-content: center;}@media (max-width: 992px) {.table-modern tbody td.action-cell {justify-content: center;}}.badge {font-size: var(--fs-xs);font-weight: var(--fw-medium);padding: 6px 10px;border-radius: 6px;}.badge-soft-primary { background-color: var(--primary-light); color: var(--primary-color); }.badge-soft-danger { background-color: var(--danger-bg); color: var(--danger-color); }.badge-soft-success { background-color: var(--success-bg); color: var(--success-color); }.badge-soft-warning { background-color: var(--warning-bg); color: var(--warning-color); }.badge-soft-info { background-color: var(--info-bg); color: var(--info-color); }.badge-soft-muted { background-color: var(--light-color); color: var(--neutral-400); border: 1px solid var(--border-color); }.badge-soft-neutral { background-color: var(--neutral-100); color: var(--neutral-600); border: 1px solid var(--border-color); }.sidebar {width: var(--sidebar-width);height: 100vh;background: var(--surface-color);border-right: 1px solid var(--border-color);position: fixed;top: 0;left: 0;display: flex;flex-direction: column;z-index: 1050;box-shadow: 4px 0 24px 0 rgba(0,0,0,0.02);transition: transform var(--transition-speed);}.sidebar-header {height: var(--header-height);display: flex;align-items: center;justify-content: space-between;padding: 0 24px;border-bottom: 1px solid var(--neutral-100);color: var(--brand-dark-green);}.sidebar-search { padding: 24px 16px 8px; }.sidebar-search input {width: 100%;padding: 10px 16px 10px 40px;border: 1px solid var(--neutral-100);border-radius: var(--border-radius-sm);background-color: var(--light-color);color: var(--muted-color);transition: all 0.2s;}.sidebar-search input:focus {outline: none;border-color: var(--primary-color);background-color: var(--surface-color);box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.1);}.sidebar-search i {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: var(--neutral-400);z-index: 5;pointer-events: none;}.sidebar-menu {flex: 1;overflow-y: auto;padding: 12px 16px;list-style: none;margin: 0;}.sidebar-menu li { margin-bottom: 4px; }.sidebar-menu .nav-link {display: flex;align-items: center;padding: 12px 16px;color: var(--muted-color);border-radius: var(--border-radius-sm);font-weight: var(--fw-medium);transition: all 0.2s ease;}.sidebar-menu .nav-link i {width: 24px;margin-right: 12px;font-size: 1.1rem;text-align: center;color: var(--neutral-400);transition: color 0.2s;}.sidebar-menu .nav-link:hover {background-color: var(--neutral-100);color: var(--dark-color);}.sidebar-menu .nav-link:hover i { color: var(--primary-color); }.sidebar-menu .nav-link.active {background-color: var(--primary-light);color: var(--primary-color);font-weight: var(--fw-semibold);}.sidebar-menu .nav-link.active i { color: var(--primary-color); }.main-content {margin-left: var(--sidebar-width);min-height: 100vh;display: flex;flex-direction: column;transition: margin-left var(--transition-speed);}.topbar {height: var(--header-height);background: var(--surface-color);border-bottom: 1px solid var(--border-color);padding: 0 32px;display: flex;align-items: center;justify-content: space-between;position: sticky;top: 0;z-index: 1000;}.page-content { padding: 32px; flex: 1; }.card-custom {border: none;border-radius: var(--border-radius-lg);background: var(--surface-color);box-shadow: var(--shadow-sm);transition: box-shadow 0.2s;margin-bottom: 24px;}.card-custom:hover { box-shadow: var(--shadow-md); }.card-header {background: transparent;border-bottom: 1px solid var(--neutral-100);padding: 20px 24px;}.card-body { padding: 24px; }.card-gradient {color: var(--surface-color);border: none;position: relative;overflow: hidden;z-index: 1;border-radius: var(--border-radius-lg);box-shadow: var(--shadow-md);}.card-gradient::before {content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);z-index: -1;}.card-gradient-green { background: linear-gradient(135deg, var(--success-color) 0%, var(--primary-color) 100%); }.card-gradient-blue { background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-hover) 100%); }.card-gradient-purple { background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%); }.card-gradient-orange { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%); }.stat-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); opacity: 0.9; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }.stat-value { font-size: var(--fs-display); font-weight: var(--fw-semibold); margin-bottom: 4px; line-height: var(--line-tight); }.stat-subtext { font-size: var(--fs-sm); opacity: 0.8; }.stat-icon-large {position: absolute; right: 20px; bottom: 20px;font-size: 4rem; opacity: 0.15;transform: rotate(-15deg); pointer-events: none; color: var(--surface-color);}.table-custom { margin-bottom: 0; border-collapse: separate; border-spacing: 0; width: 100%; }.table-custom thead th {background-color: var(--light-color);color: var(--muted-color);font-weight: 600;font-size: 0.75rem;text-transform: uppercase;letter-spacing: 0.05em;border-bottom: 1px solid var(--border-color);padding: 16px 24px;white-space: nowrap;}.table-custom tbody td {padding: 16px 24px;vertical-align: middle;border-bottom: 1px solid var(--neutral-100);color: var(--neutral-800);font-size: 0.875rem;}.table-custom tbody tr:last-child td { border-bottom: none; }.table-custom tbody tr:hover td { background-color: var(--light-color); }.sticky-header th { position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 var(--border-color); }.text-overline { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1.2px; font-weight: 700; color: var(--neutral-400); }.badge { padding: 6px 10px; font-weight: var(--fw-medium); border-radius: 6px; font-size: var(--fs-xs); }.text-xs { font-size: var(--fs-xs); }.brand-title { font-size: 1.05rem; font-weight: var(--fw-semibold); }.brand-logo { height: 24px; width: auto; }.brand-logo-lg { height: 28px; width: auto; }.dropdown-menu-scroll { max-height: 300px; overflow-y: auto; }.ui-w-40 { width: 40px; }.ui-w-150 { width: 150px; }.ui-w-160 { width: 160px; }.ui-w-200 { width: 200px; }.ui-w-220 { width: 220px; }.ui-w-250 { width: 250px; }.ui-w-260 { width: 260px; }.ui-w-300 { width: 300px; }.truncate-120 { max-width: 120px; }.truncate-200 { max-width: 200px; }.truncate-220 { max-width: 220px; }.truncate-260 { max-width: 260px; }.chart-canvas-wrap { height: 300px; width: 100%; }.activity-user { font-weight: var(--fw-semibold); color: var(--dark-color); font-size: var(--fs-sm); }.activity-time { font-size: var(--fs-xs); color: var(--neutral-400); }.activity-device { font-size: var(--fs-sm); color: var(--muted-color); display: flex; align-items: center; }.activity-location-icon { font-size: 0.7rem; }.command-output-popover { z-index: 1000; width: 300px; max-height: 300px; overflow: auto; }.log-collapse-toggle { cursor: pointer; }.log-output {max-height: 300px;overflow-y: auto;font-size: var(--fs-sm);color: var(--neutral-800);font-family: 'Consolas', 'Monaco', monospace;}.command-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 20px;margin-bottom: 24px;}.command-library-card .card-body {background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--surface-color));}.command-tile {border: 1px solid var(--border-color);border-radius: var(--border-radius-md);background: var(--surface-color);padding: 20px;box-shadow: var(--shadow-sm);display: flex;flex-direction: column;gap: 12px;min-height: 180px;transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}.command-tile:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);border-color: var(--neutral-300);}.command-tile-header {display: flex;gap: 12px;align-items: flex-start;}.command-icon {width: 36px;height: 36px;border-radius: 12px;display: inline-flex;align-items: center;justify-content: center;background: var(--primary-soft);color: var(--primary-color);font-size: 0.95rem;flex-shrink: 0;}.command-tile-danger {border-color: var(--danger-bg);}.command-tile-danger .command-icon {background: rgba(239, 68, 68, 0.12);color: var(--danger-color);}.command-actions {margin-top: auto;display: flex;justify-content: flex-end;}#command-history-content .list-card {border-radius: var(--border-radius-lg);border: 1px solid var(--neutral-200);box-shadow: var(--shadow-md);overflow: hidden;}#command-history-content .card-header-custom {background: linear-gradient(90deg, var(--primary-soft), var(--surface-color));border-bottom: 1px solid var(--neutral-200);}#command-history-content .card-header-custom .section-title {font-size: 1.1rem;}#command-history-content .card-surface {border-radius: var(--border-radius-lg);box-shadow: var(--shadow-md);}#command-history-content .table-modern thead th {background: var(--neutral-100);color: var(--neutral-600);}#command-history-content .table-modern tbody tr:hover td {background: var(--primary-soft);}#command-history-content .action-group {background: var(--surface-color);border-radius: 999px;padding: 4px;box-shadow: var(--shadow-sm);}#command-history-content .btn-primary {background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));border-color: transparent;box-shadow: 0 8px 16px rgba(22, 101, 52, 0.2);}#command-history-content .btn-primary:hover {transform: translateY(-2px);box-shadow: 0 10px 18px rgba(22, 101, 52, 0.25);}#command-history-content .btn-ghost,#command-history-content .btn-ghost-warning,#command-history-content .btn-ghost-success,#command-history-content .btn-ghost-danger {border-radius: 999px;font-weight: var(--fw-semibold);}#command-history-content .btn-ghost.active,#command-history-content .btn-ghost-warning.active,#command-history-content .btn-ghost-success.active,#command-history-content .btn-ghost-danger.active {box-shadow: var(--shadow-sm);}#command-history-content .btn-icon {border-radius: 12px;}#command-history-content .input-group-text {background: var(--surface-color);border-color: var(--neutral-200);color: var(--neutral-600);}.avatar-circle { width: 40px; height: 40px; }.error-page { background-color: var(--light-color); display: flex; align-items: center; justify-content: center; height: 100vh; }.error-card { max-width: 600px; width: 100%; box-shadow: var(--shadow-md); }.responsive-table thead {display: table-header-group;}@media screen and (max-width: 992px) {.responsive-table thead { display: none; }.responsive-table tbody tr {display: block;margin-bottom: 1rem;background-color: var(--surface-color);border: 1px solid var(--border-color);border-radius: 0.35rem;box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);}.responsive-table tbody td {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid var(--border-color);padding: 0.75rem;text-align: right;}.responsive-table tbody td:last-child {border-bottom: none;justify-content: center;}.responsive-table tbody td::before {content: attr(data-label);font-weight: var(--fw-semibold);color: var(--info-color);text-align: left;margin-right: 1rem;}.responsive-table tbody td .badge { font-size: var(--fs-sm); }.responsive-table tbody td .btn-group { width: 100%; }.responsive-table tbody td .btn-group .btn { flex: 1; }}#calendar {max-width: 100%;margin: 0 auto;font-family: var(--font-main);}.fc-event {cursor: pointer;border: none !important;background: transparent !important;}.fc-event-main { padding: 2px; }.timesheet-event {background: var(--surface-color);border-radius: 4px;box-shadow: 0 1px 3px rgba(0,0,0,0.12);padding: 4px;border-left: 4px solid var(--border-color);font-size: var(--fs-xs);line-height: 1.3;}.timesheet-event.status-present {border-left-color: var(--success-color);background-color: var(--light-color);}.timesheet-event.status-incomplete {border-left-color: var(--accent-color);background-color: var(--light-color);}.timesheet-event.status-absent {border-left-color: var(--danger-color);background-color: var(--light-color);}.event-time {display: flex;justify-content: space-between;margin-bottom: 2px;}.event-row {display: flex;align-items: center;gap: 4px;color: var(--muted-color);}.event-row.date-bs {font-size: 0.72rem;color: var(--muted-color);}.fc-day-sat, .fc-day-sun { background-color: var(--neutral-100); }.fc-day-today { background-color: var(--info-bg) !important; }.fc-col-header-cell {background-color: var(--info-color);color: var(--surface-color);padding: 8px 0 !important;}.fc-col-header-cell a { color: var(--surface-color) !important; text-decoration: none; }.fc-daygrid-day-frame { min-height: 120px; }@media (max-width: 768px) {.fc-header-toolbar { flex-direction: column; gap: 10px; }}.docs-layout { display: flex; min-height: calc(100vh - var(--header-height)); }.docs-sidebar {width: 250px;position: sticky;top: var(--header-height);height: calc(100vh - var(--header-height));overflow-y: auto;border-right: 1px solid var(--border-color);background: var(--surface-color);padding: 24px;}.docs-content { flex: 1; padding: 40px 60px; max-width: 1000px; }.docs-nav-link {display: block; padding: 8px 12px; color: var(--muted-color);border-radius: 6px; margin-bottom: 4px; font-size: 0.9rem;}.docs-nav-link:hover { background: var(--neutral-100); color: var(--primary-color); }.docs-nav-link.active { background: var(--primary-light); color: var(--primary-color); font-weight: 600; }.docs-section { margin-bottom: 60px; scroll-margin-top: 100px; }.docs-section-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 24px; color: var(--dark-color); position: relative; }.docs-section-title::after {content: ''; display: block; width: 60px; height: 4px;background: var(--primary-color); margin-top: 12px; border-radius: 2px;}.token-section {background: linear-gradient(135deg, var(--neutral-800) 0%, var(--neutral-900) 100%);border-radius: var(--border-radius-lg);padding: 32px;color: var(--surface-color);margin-bottom: 48px;box-shadow: var(--shadow-lg);}.token-box {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: var(--border-radius-md);padding: 16px;display: flex;justify-content: space-between;align-items: center;}.token-value {font-family: 'Fira Code', monospace;color: var(--neutral-200);font-size: 0.95rem;overflow: hidden;text-overflow: ellipsis;margin-right: 16px;}.endpoint-card {background: var(--surface-color);border: none;border-radius: var(--border-radius-lg);padding: 24px;margin-bottom: 24px;box-shadow: var(--shadow-sm);transition: box-shadow 0.2s;}.endpoint-card:hover { box-shadow: var(--shadow-md); }.endpoint-header {display: flex; align-items: center; margin-bottom: 16px;font-family: 'Fira Code', monospace; background: var(--light-color);padding: 12px; border-radius: var(--border-radius-sm);}.method-badge {font-size: 0.75rem; font-weight: 700; padding: 4px 8px;border-radius: 4px; margin-right: 12px; text-transform: uppercase;}.method-get { background: rgba(37, 99, 235, 0.1); color: var(--info-color); }.method-post { background: rgba(22, 163, 74, 0.1); color: var(--success-color); }.method-patch { background: rgba(245, 158, 11, 0.12); color: #B45309; }.method-delete { background: rgba(220, 38, 38, 0.12); color: var(--danger-color); }.code-block {background-color: var(--neutral-800);color: var(--neutral-200);padding: 20px;border-radius: var(--border-radius-md);font-family: 'Fira Code', 'Consolas', monospace;font-size: 0.875rem;line-height: 1.6;margin-bottom: 24px;overflow-x: auto;position: relative;}.code-block-header {position: absolute; top: 0; right: 0;background: rgba(255,255,255,0.1);padding: 4px 12px; font-size: 0.7rem;border-bottom-left-radius: 8px; color: var(--neutral-400);}@media (max-width: 768px) {.sidebar { transform: translateX(-100%); }.sidebar.active { transform: translateX(0); }.main-content { margin-left: 0; }.docs-layout { flex-direction: column; }.docs-sidebar { display: none; }.docs-content { padding: 24px; }.sidebar-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.5); z-index: 1040;opacity: 0; visibility: hidden; transition: all 0.3s;}.sidebar-overlay.active { opacity: 1; visibility: visible; }}.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }.toast-custom { background: var(--surface-color); border-left: 4px solid var(--info-color); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 4px; width: 350px; overflow: hidden; animation: slideIn 0.3s ease-out forwards; }.toast-custom.success { border-left-color: var(--success-color); }.toast-custom.error { border-left-color: var(--danger-color); }.toast-custom.warning { border-left-color: var(--warning-color); }.toast-body { padding: 16px; display: flex; align-items: start; }.toast-icon { font-size: 1.25rem; margin-right: 12px; margin-top: 2px; }.toast-custom.success .toast-icon { color: var(--success-color); }.toast-custom.error .toast-icon { color: var(--danger-color); }.toast-content { flex: 1; }.toast-title { font-weight: 600; margin-bottom: 4px; color: var(--dark-color); }.toast-message { font-size: 0.875rem; color: var(--muted-color); }.toast-close { background: none; border: none; font-size: 1.25rem; color: var(--neutral-400); cursor: pointer; padding: 0; margin-left: 8px; line-height: 1; }@keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }.activity-list {display: flex;flex-direction: column;}.recent-activity-item {display: flex;align-items: center;padding: 16px 24px;border-bottom: 1px solid var(--neutral-100);transition: background-color 0.2s;}.recent-activity-item:last-child { border-bottom: none; }.recent-activity-item:hover { background-color: var(--light-color); }.user-avatar {width: 40px;height: 40px;border-radius: 50%;background-color: var(--primary-light);color: var(--primary-color);display: flex;align-items: center;justify-content: center;font-weight: 700;margin-right: 16px;font-size: 1rem;}.activity-user { font-weight: 600; color: var(--dark-color); font-size: 0.95rem; }.activity-time { font-size: 0.8rem; color: var(--neutral-400); }.activity-device { font-size: 0.85rem; color: var(--muted-color); display: flex; align-items: center; }.status-badge { font-size: 0.75rem; padding: 4px 8px; font-weight: 600; }.btn-soft-primary {color: var(--primary-color);background-color: var(--primary-light);border-color: transparent;}.btn-soft-primary:hover {color: var(--surface-color);background-color: var(--primary-color);}.btn-soft-danger {color: var(--danger-color);background-color: var(--danger-bg);border-color: transparent;}.btn-soft-danger:hover {color: var(--surface-color);background-color: var(--danger-color);}.btn-action {width: 32px;height: 32px;padding: 0;display: inline-flex;align-items: center;justify-content: center;border-radius: 6px;border: 1px solid transparent;transition: all 0.2s;background: var(--surface-color);color: var(--secondary-color);border-color: var(--border-color);}.btn-action:hover {background: var(--neutral-100);color: var(--primary-color);border-color: var(--border-color);}.btn-action-primary { color: var(--primary-color); background: var(--primary-light); border-color: transparent; }.btn-action-primary:hover { background: var(--primary-color); color: var(--surface-color); border-color: var(--primary-color); }.btn-action-danger { color: var(--danger-color); background: var(--danger-bg); border-color: transparent; }.btn-action-danger:hover { background: var(--danger-color); color: var(--surface-color); border-color: var(--danger-color); }.card-header-custom {background: var(--surface-color);border-bottom: 1px solid var(--neutral-100);padding: 16px 24px;display: flex;align-items: center;justify-content: space-between;font-weight: 600;color: var(--dark-color);}.col-primary { color: var(--primary-color); font-weight: 600; }.text-wrap-cell { white-space: normal !important; min-width: 200px; }.table-responsive-custom { border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); overflow: auto; }.token-input .form-control {background: var(--light-color);font-size: var(--fs-xs);border-color: var(--border-color);}.token-input .btn {box-shadow: none;}.list-code {font-size: var(--fs-xs);}.list-output {font-size: var(--fs-xs);}.pagination .page-link {border-radius: 8px;color: var(--neutral-600);border-color: var(--border-color);background: var(--surface-color);}.pagination .page-link:hover {color: var(--primary-color);background: var(--primary-light);border-color: var(--primary-light);}.pagination .page-item.active .page-link {background: var(--primary-color);border-color: var(--primary-color);color: var(--surface-color);}.pagination .page-item.disabled .page-link {color: var(--neutral-400);background: var(--neutral-100);border-color: var(--neutral-100);}.pagination.pagination-sm .page-link {padding: 6px 10px;font-size: var(--fs-sm);}.empty-state {padding: 48px 24px;text-align: center;color: var(--neutral-400);}.empty-state-icon {font-size: 3rem;margin-bottom: 16px;color: var(--neutral-200);}.hover-scale {transition: transform 0.2s;}.hover-scale:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}.sticky-header th { top: var(--header-height); } .log-output {background-color: var(--neutral-800);color: var(--success-color);font-family: 'Fira Code', 'Consolas', monospace;padding: 16px;white-space: pre-wrap;font-size: 0.85rem;line-height: 1.5;border-radius: var(--border-radius-sm);}.log-console {background-color: var(--neutral-800);color: var(--success-color);font-family: 'Fira Code', 'Consolas', monospace;padding: 16px;height: 75vh;overflow-y: auto;white-space: pre-wrap;font-size: 0.85rem;line-height: 1.5;border-radius: var(--border-radius-sm);}.bg-danger-soft { background: var(--danger-bg); color: var(--danger-color); border: 1px solid var(--border-color); }.bg-warning-soft { background: var(--warning-bg); color: var(--warning-color); border: 1px solid var(--border-color); }.bg-success-soft { background: var(--success-bg); color: var(--success-color); border: 1px solid var(--border-color); }.login-body {background-color: var(--neutral-100);min-height: 100vh;display: flex;align-items: center;justify-content: center;background-image: radial-gradient(var(--neutral-200) 1px, transparent 1px);background-size: 24px 24px;padding: 20px;}.login-card {background: var(--surface-color);width: 100%;max-width: 420px;padding: 40px;border-radius: var(--border-radius-lg);box-shadow: var(--shadow-lg);position: relative;overflow: hidden;border: 1px solid var(--border-color);animation: fadeInUp 0.5s ease-out;}@keyframes fadeInUp {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}.login-card::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 6px;background: linear-gradient(90deg, var(--brand-green), var(--brand-dark-green));}.login-header {text-align: center;margin-bottom: 32px;}.login-header h3 {font-weight: 700;color: var(--brand-dark-green);margin-bottom: 8px;display: flex;align-items: center;justify-content: center;gap: 12px;}.login-header .brand-logo {height: 32px;width: auto;}.btn-brand {background-color: var(--brand-green);border-color: var(--brand-green);color: var(--surface-color);}.btn-brand:hover {background-color: var(--brand-dark-green);border-color: var(--brand-dark-green);color: var(--surface-color);}.login-footer {text-align: center;margin-top: 24px;color: var(--secondary-color);font-size: 0.85rem;}.login-footer a {color: var(--brand-green);font-weight: 500;}