body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #f5f7fa; color: #1f2933; }
a { color: inherit; text-decoration: none; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #2f3542; color: #fff; display: flex; flex-direction: column; padding: 1rem; transition: width 0.2s ease; }
.sidebar__brand { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.5rem; }
.sidebar__nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.35rem; color: #ced6e0; }
.sidebar__nav a:hover { background: #57606f; color: #fff; }
.sidebar__nav a.is-active { background: #1e3a8a; color: #fff; }
.sidebar__group { margin: 0.35rem 0; color: #ced6e0; }
.sidebar__group > summary { list-style: none; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.35rem; display: flex; align-items: center; justify-content: space-between; color: inherit; }
.sidebar__group > summary::-webkit-details-marker { display: none; }
.sidebar__group > summary::after { content: '▸'; font-size: 0.75rem; transition: transform 0.2s ease; color: inherit; }
.sidebar__group[open] > summary::after { transform: rotate(90deg); }
.sidebar__group > summary:hover, .sidebar__group[open] > summary { background: #57606f; color: #fff; }
.sidebar__group-links { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.25rem 0 0.25rem 0.75rem; }
.sidebar__group-links a { padding-left: 0.75rem; font-size: 0.95rem; color: #d9e2ec; }
.sidebar__group-links a.is-active { background: #1e3a8a; color: #fff; }
.sidebar__group-links a:hover { background: #57606f; color: #fff; }
.sidebar__group.sidebar__group--nested > summary { padding-left: 1.25rem; font-size: 0.9rem; }
.sidebar__group-links.sidebar__group-links--nested { padding-left: 1.5rem; }
.sidebar__group-links.sidebar__group-links--nested a { padding-left: 1.1rem; font-size: 0.9rem; }

.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.5rem; align-items: flex-start; }
.report-layout__main { min-width: 0; }
.report-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.report-sidebar__section { background: #f8fafc; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,0.06); }
.report-sidebar__section h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: #1f2937; }
.report-sidebar__section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.9rem; color: #475569; }
.report-sidebar__section li { display: flex; align-items: center; }
.report-sidebar__section a { color: #1e88e5; }
.report-sidebar__section a:hover { text-decoration: underline; color: #1669c1; }
.link-button { background: none; border: none; padding: 0; color: #1e88e5; cursor: pointer; font: inherit; text-align: left; }
.link-button:hover { color: #1669c1; text-decoration: underline; }
.link-button:focus { outline: none; text-decoration: underline; }
@media (max-width: 1200px) {
  .report-layout { grid-template-columns: 1fr; }
  .report-sidebar { order: -1; }
}
.layout__content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topnav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.topnav__title { font-size: 1.1rem; font-weight: 600; }
.topnav__actions a { margin-left: 1rem; }
.topnav__actions form { display: inline-block; margin-left: 1rem; }
.topnav__form button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: #1e88e5; }
.topnav__form button:hover { color: #c53030; }
.topnav__tag { margin-left: 1rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 0.85rem; font-weight: 600; }
.topnav__link--danger { color: #c53030; }
.topnav__link--danger:hover { color: #9b2c2c; }
.topnav__home, .topnav__link { color: #1f2937; font-weight: 600; }
.topnav__home:hover, .topnav__link:hover { color: #0a5cff; }
.layout__main { flex: 1; padding: 1.5rem; min-width: 0; }
.device-log-container { margin-top: 1rem; background: #fff; border-radius: 0.5rem; border: 1px solid #e1e8f2; padding: 0.75rem; box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
@media (max-width: 1024px) {
  .sidebar { width: 170px; padding: 0.75rem; }
  .sidebar__brand { font-size: 1.1rem; }
  .layout__main { padding: 1.25rem; }
}
@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .sidebar__brand { margin-bottom: 0; }
  .sidebar__nav { display: flex; flex-wrap: wrap; gap: 0.35rem; width: 100%; }
  .sidebar__nav a { flex: 1 1 45%; text-align: center; }
  .layout__main { padding: 1rem; }
}
.device-log-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.device-log-item { padding: 0.35rem 0.45rem; border-radius: 0.35rem; border: 1px solid transparent; }
.device-log-item--inbound { background: #f1f5f9; color: #0f172a; border-color: rgba(15,23,42,0.08); }
.device-log-item--outbound { background: #ecfeff; color: #0f766e; border-color: rgba(13,148,136,0.15); }
.device-log-item pre { margin: 0.35rem 0 0; white-space: pre-wrap; word-break: break-word; background: rgba(15,23,42,0.04); padding: 0.45rem; border-radius: 0.35rem; }
.device-log-stats { margin-top: 0.3rem; font-weight: 600; color: #0f172a; }
.device-log-status, .device-command-status { margin-top: 0.5rem; min-height: 1.2rem; font-size: 0.9rem; color: #475569; }
.device-command-form { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.device-command-form textarea { min-height: 110px; resize: vertical; font-family: 'SFMono-Regular', Consolas, monospace; }
.device-command-form-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.status-pill { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #e2e8f0; color: #475569; line-height: 1.2; }
.status-pill--online { background: #dcfce7; color: #166534; }
.status-pill--offline { background: #fee2e2; color: #b91c1c; }
.status-pill--unknown { background: #f1f5f9; color: #64748b; }
.form-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.inline-form { display: inline-block; margin-left: 0.5rem; }
.form-stacked { display: flex; flex-direction: column; gap: 0.9rem; }
.form-stacked fieldset { border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.25rem; }
.form-stacked legend { font-weight: 600; color: #1f2937; padding: 0 0.35rem; }
.form-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.form-option { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; color: #1f2937; }
.form-option input[type="radio"] { width: 1rem; height: 1rem; }
.form-inline--tight { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.form-inline--tight .form-control { flex: 1 1 220px; min-width: 180px; }\n.form-control--sm { padding: 0.35rem 0.45rem; font-size: 0.85rem; }\n.table textarea.form-control--sm { resize: vertical; min-height: 32px; }\n
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.form-group { margin-bottom: 0.75rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.form-control { width: 100%; padding: 0.5rem; border: 1px solid #d1d9e6; border-radius: 0.35rem; }
.btn { background: #2ed573; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 0.35rem; cursor: pointer; }
.btn:hover { background: #1dd1a1; }
.btn-primary { background: #1e88e5; }
.btn-primary:hover { background: #1669c1; }
.btn-secondary { background: #64748b; color: #fff; }
.btn-secondary:hover { background: #475569; }
.btn-small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.btn-danger { background: #e74c3c; }
.btn-danger:hover { background: #c0392b; }
.table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #fff; }
.table th, .table td { padding: 0.75rem; border-bottom: 1px solid #e1e8f2; text-align: left; }
.table thead { background: #f0f4ff; }
.flash-container { margin-bottom: 1rem; }
.flash { padding: 0.75rem 1rem; border-radius: 0.35rem; margin-bottom: 0.5rem; }
.banner { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.75rem; }
.banner form { margin: 0; }
.banner--info { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.banner--danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash--success { background: #e6fffa; color: #047857; }
.flash--info { background: #e0f2fe; color: #0369a1; }
.flash--error, .flash--danger { background: #fee2e2; color: #b91c1c; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 1rem; }
.stat-card { background: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.1); }
.stat-card .label { display: block; font-size: 0.85rem; color: #6b7280; }
.stat-card .value { font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.panel { background: #fff; border-radius: 0.55rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); margin-bottom: 1.5rem; }
.panel h1 { margin-top: 0; }
.panel__note { margin-top: 0.25rem; margin-bottom: 1.25rem; color: #4b5563; }
.panel__empty { margin-top: 1.5rem; color: #6b7280; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.card { background: #fff; border-radius: 0.55rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(15,23,42,0.1); display: flex; flex-direction: column; gap: 0.75rem; }
.card__header h2 { margin: 0; font-size: 1.15rem; }
.card__summary { color: #4b5563; flex: 1; }
.auth-card { max-width: 360px; margin: 4rem auto; padding: 2rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.panel__section { margin-top: 2rem; }
.tab-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.tab-nav a { padding: 0.45rem 0.9rem; border-radius: 0.35rem; background: #e3f2fd; color: #1e3a8a; font-weight: 600; }
.tab-nav a:hover { background: #d0e4ff; }
.table--compact th, .table--compact td { padding: 0.5rem; font-size: 0.88rem; }
.table--narrow { width: auto; max-width: 360px; display: inline-table; }
.error { text-align: center; padding: 4rem 0; }
.list { list-style: none; padding: 0; }
.list li { padding: 0.5rem 0; border-bottom: 1px solid #e1e8f2; }
.simple-assignment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.simple-assignment-list li { padding: 0.5rem 0.6rem; border: 1px solid #e1e8f2; border-radius: 0.4rem; background: #f8fafc; }
.simple-assignment-list .form-actions { margin-top: 0.4rem; }

.shift-page { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.shift-page__list { background: #fff; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.shift-page__list-header { display: flex; justify-content: space-between; align-items: center; }
.shift-page__detail { background: #fff; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.shift-table tbody tr { cursor: pointer; }
.shift-table tbody tr:hover, .shift-table tbody tr.is-selected { background: #f5f9ff; }
.section-title { margin-top: 1.5rem; font-size: 1.1rem; }
.segments-toolbar { display: flex; justify-content: flex-end; }
.segments-toolbar .btn { background: #1e88e5; }
.segments-toolbar .btn:hover { background: #1669c1; }
.color-input { padding: 0; height: 38px; }
.checkbox-group { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-group input { margin-right: 0.5rem; }
.form-group--full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.form-actions .btn { min-width: 120px; }
.form-grid .form-actions { grid-column: 1 / -1; }
.segments-table-input { width: 100%; padding: 0.35rem; border: 1px solid #d1d9e6; border-radius: 0.3rem; }
.segments-table-select { width: 100%; padding: 0.35rem; border: 1px solid #d1d9e6; border-radius: 0.3rem; background: #fff; }
.segments-table-checkbox { display: block; margin: 0 auto; }

.pattern-page { margin-top: 2rem; display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; }
.pattern-sidebar { background: #fff; border-radius: 0.5rem; padding: 1rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.pattern-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pattern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.pattern-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0.75rem; border-radius: 0.35rem; border: 1px solid transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pattern-list li:hover, .pattern-list li.is-selected { border-color: #1e88e5; background: #e3f2fd; }
.pattern-color { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,23,42,0.2); }
.pattern-detail { background: #fff; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.pattern-grid-header { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.75rem; flex-wrap: wrap; }
.pattern-template-selector { padding: 0.4rem 0.6rem; border-radius: 0.35rem; border: 1px solid #d1d9e6; min-width: 220px; }
.pattern-grid { display: grid; grid-template-columns: 110px repeat(24, minmax(48px, 1fr)); border: 1px solid #d1d9e6; border-radius: 0.5rem; overflow: hidden; }
.pattern-grid__header { display: contents; }
.pattern-grid__corner { background: #f8fafc; font-weight: 600; padding: 0.5rem; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; }
.pattern-grid__header div { background: #f0f4ff; padding: 0.5rem; text-align: center; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; font-weight: 600; }
.pattern-grid__day { background: #f8fafc; padding: 0.5rem; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.pattern-grid__cell { padding: 0.45rem 0.35rem; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; min-height: 48px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-align: center; transition: background 0.1s ease-in-out; }
.pattern-grid__cell:last-child { border-right: none; }
.pattern-grid__cell.is-selected { outline: 2px solid #1e88e5; outline-offset: -2px; background: rgba(30, 136, 229, 0.12); }
.pattern-grid__cell.pattern-grid__empty { color: #94a3b8; font-size: 0.8rem; }
.template-label { font-weight: 600; color: #1f2937; }
.template-note { font-size: 0.75rem; color: #64748b; }

.roster-page { display: flex; flex-direction: column; gap: 1rem; }
.roster-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; padding: 1rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
.roster-controls .control-group { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: #475569; }
.roster-controls .control-group input,
.roster-controls .control-group select { min-width: 160px; padding: 0.45rem 0.6rem; border-radius: 0.35rem; border: 1px solid #d1d9e6; }
.roster-controls .control-group.buttons { flex-direction: row; gap: 0.5rem; margin-left: auto; align-items: center; }
.roster-help { font-size: 0.85rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.35rem; padding: 0.6rem 0.75rem; }
.roster-feedback { min-height: 20px; font-size: 0.85rem; color: #1e88e5; }
.roster-feedback--error { color: #dc2626; }
.roster-feedback--success { color: #047857; }
.roster-feedback--info { color: #1e88e5; }
.roster-body { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(480px, 2fr); gap: 1.5rem; }
.roster-employee-table-wrapper { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); padding: 1rem; overflow-x: auto; }
.roster-employee-table thead th { white-space: nowrap; font-size: 0.85rem; }
.roster-employee-table td { font-size: 0.85rem; }
.roster-employee-table tr { cursor: pointer; }
.roster-employee-table tr.is-selected { background: #e3f2fd; }
.roster-employee-day { text-align: center; font-size: 0.75rem; }
.roster-employee-day span { display: inline-block; padding: 0.1rem 0.35rem; border-radius: 999px; color: #fff; font-weight: 600; min-width: 30px; margin: 0 0.1rem; }
.roster-employee-empty { text-align: center; color: #94a3b8; padding: 1rem 0; }
.roster-gantt { display: flex; flex-direction: column; gap: 0.75rem; }
.roster-grid-wrapper { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); padding: 1rem; overflow-x: auto; }
.roster-grid-header, .roster-grid-body { display: grid; gap: 0; }
.roster-header-row, .roster-row { display: contents; }
.roster-header-cell { background: #f0f4ff; padding: 0.5rem; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; text-align: center; font-weight: 600; color: #1f2937; }
.roster-header-cell:last-child { border-right: none; }
.roster-day-cell { background: #e2e8f0; color: #1e293b; font-weight: 700; }
.roster-employee-cell { background: #f8fafc; padding: 0.75rem; border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; font-weight: 600; color: #1f2937; display: flex; flex-direction: column; gap: 0.25rem; }
.roster-employee-meta { font-size: 0.75rem; color: #64748b; }
.roster-cell { border-right: 1px solid #e1e8f2; border-bottom: 1px solid #e1e8f2; min-height: 46px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; cursor: pointer; transition: background 0.1s ease-in-out, color 0.1s ease-in-out; padding: 0.25rem; text-align: center; }
.roster-cell:last-child { border-right: none; }
.roster-cell:hover { background: #eef2ff; }
.roster-cell.selected { outline: 2px solid #1e88e5; outline-offset: -2px; }
.roster-cell.filled { color: #fff; font-weight: 600; }
.roster-cell.filled .roster-cell-note { font-weight: 400; font-size: 0.65rem; display: block; margin-top: 0.2rem; color: rgba(255,255,255,0.85); }
.roster-gantt-empty { text-align: center; color: #94a3b8; padding: 2rem 0; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }

.leave-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.leave-card { background: #fff; border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); display: flex; flex-direction: column; gap: 1rem; }
.leave-card__header { display: flex; flex-direction: column; gap: 0.25rem; }
.leave-card__header h1 { margin: 0; font-size: 1.2rem; }
.leave-card__hint { font-size: 0.85rem; color: #64748b; }
.leave-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.leave-form input[type="text"],
.leave-form input[type="number"],
.leave-form input[type="date"],
.leave-form input[type="color"],
.leave-form select,
.leave-form textarea { padding: 0.45rem 0.55rem; border: 1px solid #d1d9e6; border-radius: 0.35rem; font-size: 0.85rem; }
.leave-form textarea { min-width: 200px; }
.leave-form--inline input[type="text"] { min-width: 140px; }
.leave-form--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #475569; }
.table-range { display: flex; align-items: center; gap: 0.35rem; }
.table-center { text-align: center; }
.table-actions { display: flex; gap: 0.4rem; align-items: center; justify-content: center; }

@media (max-width: 1200px) {
  .leave-settings { grid-template-columns: 1fr; }
}

.leave-request-page { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; }
.leave-request-form, .leave-request-info > div { background: #fff; border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); display: flex; flex-direction: column; gap: 1rem; }
.leave-request-form header h1 { margin: 0; }
.leave-request-form header span { font-size: 0.85rem; color: #64748b; }
.leave-holidays ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; color: #475569; }
.leave-holiday__name { font-weight: 600; margin-right: 0.5rem; }
.leave-holiday__tag { font-size: 0.75rem; padding: 0.1rem 0.35rem; border-radius: 999px; background: #e3f2fd; color: #1e88e5; margin-left: 0.35rem; }
.leave-type-list table { font-size: 0.85rem; }
.leave-type-dot { display: inline-block; width: 12px; height: 12px; border-radius: 999px; margin-right: 0.35rem; }
.leave-type-rules span { display: inline-block; background: #e2e8f0; color: #475569; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 999px; margin: 0 0.2rem 0.2rem 0; }
.leave-type-desc { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }

@media (max-width: 1200px) {
  .leave-request-page { grid-template-columns: 1fr; }
}

.policy-page { display: flex; flex-direction: column; gap: 1.5rem; }
.policy-header h1 { margin: 0; }
.policy-header p { margin: 0; font-size: 0.9rem; color: #64748b; }
.policy-tabs nav { display: inline-flex; gap: 0.75rem; }
.policy-tabs a { padding: 0.4rem 0.8rem; border-radius: 999px; background: #f1f5f9; color: #1f2937; font-size: 0.9rem; }
.policy-tabs a:hover { background: #e0ecff; }
.policy-card { background: #fff; border-radius: 0.5rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); display: flex; flex-direction: column; gap: 1rem; }
.policy-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.policy-form input[type="text"],
.policy-form input[type="number"],
.policy-form select,
.policy-form textarea { padding: 0.45rem 0.55rem; border: 1px solid #d1d9e6; border-radius: 0.35rem; }
.policy-form textarea { min-height: 3.2rem; }
.policy-card .checkbox-inline { font-size: 0.8rem; color: #475569; }

@media (max-width: 1200px) {
  .policy-tabs nav { flex-wrap: wrap; }
}

.manual-page { display: flex; flex-direction: column; gap: 1rem; }
.manual-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; }
.manual-sidebar { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.manual-filter select { width: 100%; padding: 0.45rem 0.55rem; border: 1px solid #d1d9e6; border-radius: 0.35rem; }
.manual-employee-list { max-height: 400px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 0.35rem; }
.manual-employee-list table { width: 100%; border-collapse: collapse; }
.manual-employee-list th, .manual-employee-list td { padding: 0.5rem; border-bottom: 1px solid #e2e8f0; font-size: 0.85rem; }
.manual-employee-list tr { cursor: pointer; }
.manual-employee-list tr.is-selected { background: #e3f2fd; }
.manual-form { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.manual-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.manual-form input[type="text"], .manual-form input[type="date"], .manual-form input[type="time"], .manual-form select, .manual-form textarea { padding: 0.45rem 0.55rem; border: 1px solid #d1d9e6; border-radius: 0.35rem; font-size: 0.9rem; }
.manual-hint { font-size: 0.8rem; color: #64748b; }
.manual-hint ul { margin: 0; padding-left: 1.2rem; }

@media (max-width: 1100px) {
  .manual-layout { grid-template-columns: 1fr; }
}


\n.text-sm { font-size: 0.85rem; }\n.text-xs { font-size: 0.75rem; }\n.text-muted { color: #64748b; }\n
\n.topnav__signup { margin-left: 0.75rem; color: #ffaf0f; font-weight: 600; }\n.topnav__signup:hover { color: #ff8800; }\n
.sidebar__nav-child {
  display: block;
  margin-left: 1.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.35rem;
  font-size: 0.9rem;
  color: #d9e2ec;
}
.sidebar__nav-child:hover {
  background: #57606f;
  color: #fff;
}
.sidebar__nav-child.is-active {
  background: #1e3a8a;
  color: #fff;
}

/* Calendar */
.calendar-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calendar-header__left, .calendar-header__right { display: flex; gap: 0.35rem; align-items: center; }
.calendar-header__center { text-align: center; flex: 1; }
.calendar-header h1 { margin: 0; font-size: 1.35rem; }
.calendar-header .btn-small { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.calendar-header .btn-small.is-active { background: #1e88e5; color: #fff; }
.calendar-month { width: 100%; border-collapse: collapse; }
.calendar-month th, .calendar-month td { border: 1px solid #e1e8f2; vertical-align: top; min-height: 120px; padding: 0.35rem; }
.calendar-month td.is-outside { background: #f5f7fa; color: #9aa5b1; }
.calendar-day__header { font-weight: 600; margin-bottom: 0.25rem; }
.calendar-day__events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.calendar-day__events li { padding-left: 0.5rem; border-left: 3px solid #1e88e5; font-size: 0.85rem; }
.calendar-day__events a { color: inherit; }
.calendar-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.calendar-week__day { background: #fff; border: 1px solid #e1e8f2; border-radius: 0.35rem; padding: 0.75rem; }
.calendar-week__day h3 { margin-top: 0; font-size: 1rem; }
.calendar-day { background: #fff; border: 1px solid #e1e8f2; border-radius: 0.35rem; padding: 1rem; }
.calendar-day ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.calendar-form .form-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.calendar-form .form-grid > * { flex: 1 1 200px; min-width: 160px; }