:root {
    --primary: #1264d8;
    --success: #159447;
    --danger: #dc3545;
    --border: #dfe4ea;
    --muted: #687386;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f4f6f9; color: #202735; font-family: "Segoe UI", Arial, sans-serif; }
.page-shell { min-height: 100vh; display: flex; }
.sidebar { width: 250px; padding: 28px 18px; background: #063a78; color: white; }
.brand { margin-bottom: 38px; font-size: 25px; font-weight: 700; }
.brand small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; opacity: .8; }
.nav-item { display: block; margin: 4px -18px; padding: 13px 22px; color: white; text-decoration: none; }
.nav-item.active { background: #1264d8; }
.content { flex: 1; padding: 34px; overflow: auto; }
.title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
h1 { margin: 0; font-size: 30px; }
.card { margin-bottom: 22px; padding: 22px; border: 1px solid var(--border); border-radius: 8px; background: white; box-shadow: 0 2px 8px rgba(27, 39, 51, .04); }
.filters { display: grid; grid-template-columns: 2fr 1.4fr auto auto; gap: 14px; align-items: end; }
label { display: block; margin-bottom: 7px; font-weight: 600; }
.form-control { width: 100%; height: 40px; padding: 8px 11px; border: 1px solid #cdd5df; border-radius: 5px; background: white; }
.btn { min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-light { border-color: #cdd5df; background: white; color: #263143; }
.btn-danger-outline { border-color: var(--danger); background: white; color: var(--danger); }
.btn-icon { min-width: 38px; padding: 7px 10px; }
.status { display: inline-block; padding: 4px 10px; border-radius: 14px; font-size: 13px; }
.status.active { background: #e8f7ed; color: #147b38; }
.status.inactive { background: #edf0f3; color: #606b78; }
.actions { display: flex; gap: 8px; }
.empty { padding: 35px; text-align: center; color: var(--muted); }
.alert { display: none; margin-bottom: 16px; padding: 11px 14px; border-radius: 5px; }
.alert.error { display: block; background: #fdebec; color: #a61d2d; }
.alert.success { display: block; background: #e8f7ed; color: #176b36; }
.modal-panel { width: min(520px, calc(100vw - 30px)); padding: 24px; border-radius: 8px; background: white; }
.field { margin-bottom: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row label { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@media (max-width: 1050px) {
    .sidebar { display: none; }
    .filters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
    .content { padding: 18px; }
    .filters { grid-template-columns: 1fr; }
}

.content { min-width: 0; }
#dataCard { position: relative; }
.filters > div { min-width: 0; }
.filters .k-dropdown, .field .k-dropdown { width: 100%; }
.k-dropdown.form-control { padding: 0; border: 0; height: auto; }
#grdCaAn .k-grid-content { min-height: 180px; }
#grdCaAn .k-grid-content > table > tbody > tr:last-child > td { border-bottom-width: 1px; border-bottom-style: solid; }
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/fonts/glyphicons-halflings-regular.woff') format('woff');
}
#grdCaAn .column-center { text-align: center; vertical-align: middle; }
#grdCaAn .actions { white-space: nowrap; justify-content: center; align-items: center; gap: 6px; }
#grdCaAn .action-icon { min-width: 34px; width: 34px; height: 34px; padding: 6px; border-radius: 5px; }
#grdCaAn .action-icon .glyphicon { pointer-events: none; }
#grdCaAn .btn-edit { color: var(--primary); }
#grdCaAn .btn-status { color: #987000; }
#grdCaAn .action-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#grdCaAn .btn-delete { color: var(--danger); }
.ca-an-window.k-window { max-width: calc(100vw - 32px); }
#modalCaAn .modal-panel { box-sizing: border-box; width: 100%; min-width: 0; padding: 20px; }
#modalCaAn.k-window-content { box-sizing: border-box; width: 100%; padding: 0; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; }
#modalCaAn .k-invalid-msg { margin-top: 6px; }
#emptyMessage[hidden] { display: none; }
@media (max-width: 650px) {
    #dataCard { padding: 10px; }
    #grdCaAn .k-pager-wrap { white-space: normal; }
}

/* Use the local Bootstrap font: the legacy Kendo sprite images are not bundled. */
#grdCaAn .k-pager-wrap .k-icon,
.filters .k-dropdown .k-icon,
.ca-an-window .k-icon {
    background-image: none;
    text-indent: 0;
    font-size: 0;
    overflow: hidden;
}
#grdCaAn .k-pager-wrap .k-icon::before,
.filters .k-dropdown .k-icon::before,
.ca-an-window .k-icon::before {
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    line-height: 16px;
    display: block;
    text-align: center;
}
#grdCaAn .k-i-seek-w::before { content: "\e069"; }
#grdCaAn .k-i-arrow-w::before { content: "\e079"; }
#grdCaAn .k-i-arrow-e::before { content: "\e080"; }
#grdCaAn .k-i-seek-e::before { content: "\e077"; }
#grdCaAn .k-i-arrow-s::before,
.filters .k-i-arrow-s::before,
.ca-an-window .k-i-arrow-s::before { content: "\e114"; }
.ca-an-window .k-i-close::before { content: "\e014"; }
#modalCaAn .form-control,
#modalCaAn .k-dropdown { box-sizing: border-box; width: 100%; max-width: 100%; }
#modalCaAn .k-dropdown-wrap { box-sizing: border-box; min-height: 40px; }
#modalCaAn .k-dropdown-wrap .k-input { box-sizing: border-box; height: 38px; line-height: 30px; }
#modalCaAn .k-dropdown-wrap .k-select { line-height: 38px; }
#modalCaAn .modal-actions { padding-top: 16px; border-top: 1px solid var(--border); }
#modalCaAn .modal-actions .k-button { min-width: 80px; }
@media (max-width: 650px) {
    #modalCaAn .modal-panel { padding: 16px; }
}
#modalCaAn .time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#modalCaAn .k-timepicker { width: 100%; box-sizing: border-box; }
#modalCaAn .k-picker-wrap { box-sizing: border-box; }
#modalCaAn .k-picker-wrap .k-input { box-sizing: border-box; width: 100%; height: 38px; line-height: 30px; }
#modalCaAn .k-picker-wrap .k-select { line-height: 38px; }
.ca-an-window .k-i-clock::before { content: "\e023"; }
@media (max-width: 450px) {
    #modalCaAn .time-fields { grid-template-columns: 1fr; gap: 0; }
}