:root {
    --primary: #1d4ed8;
    --danger: #b91c1c;
    --warning: #92400e;
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f3f4f6;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-text-soft: #94a3b8;
    --color-border: #d1d5db;
    --color-border-soft: #e5e7eb;
    --color-emphasis: #0f172a;
    --color-inverse: #ffffff;
    --font-family-base: Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --lh-tight: 1.2;
    --lh-base: 1.5;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --size-icon: 1rem;
    --size-touch: 2.5rem;
    --control-padding-y: calc(var(--space-2) + var(--space-1) / 2);
    --control-padding-x: var(--space-3);
    --select-arrow-size: 0.6rem;
    --select-arrow-offset: var(--space-3);
    --link-text: var(--primary);
    --link-hover-text: #1e40af;
    --table-row-alt-bg: #fcfcfd;
    --table-row-hover-bg: #f8fafc;
    --badge-bg: #eff6ff;
    --badge-text: #1e3a8a;
    --badge-border: #93c5fd;
    --warning-bg: #fef3c7;
    --warning-text: var(--warning);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: var(--link-text);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--link-hover-text);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container {
        max-width: 1140px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--space-4) * -0.5);
}

.row > * {
    width: 100%;
    padding-inline: calc(var(--space-4) * 0.5);
}

.col-12 { width: 100%; }

@media (min-width: 768px) {
    .col-md-6 { width: 50%; }
}

.d-flex { display: flex; }
.d-block { display: block; }
.gap-2 { gap: var(--space-2); }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.m-0 { margin: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }

.text-muted { color: var(--color-text-muted); }
.small { font-size: 75%; }

@media (max-width: 768px) {
    .mobile-hide {
        display: none;
    }
}
.text-danger { color: var(--danger); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    border: 1px solid var(--badge-border);
    background: var(--badge-bg);
    color: var(--badge-text);
    line-height: var(--lh-tight);
}

.text-bg-primary,
.text-bg-warning,
.text-bg-dark {
    color: var(--color-inverse);
    border-color: transparent;
}

.text-bg-primary { background: var(--primary); }
.text-bg-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}
.text-bg-dark {
    background: var(--color-emphasis);
    color: var(--color-inverse);
}

.card {
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
}

.auth-logo {
    display: flex;
    align-items: center;
}

.auth-logo img {
    width: 44px;
    height: 44px;
    display: block;
}

.btn {
    padding: var(--space-2) calc(var(--space-3) + var(--space-1) / 2);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--btn-bg, var(--color-surface-muted));
    color: var(--btn-text, var(--color-text));
    border-color: var(--btn-border, var(--color-border));
}

.btn-primary {
    --btn-bg: var(--primary);
    --btn-text: var(--color-inverse);
    --btn-border: var(--primary);
}

.btn-light {
    --btn-bg: var(--color-surface-muted);
    --btn-text: var(--color-text);
    --btn-border: var(--color-border);
}

.btn-danger {
    --btn-bg: var(--danger);
    --btn-text: var(--color-inverse);
    --btn-border: var(--danger);
}

.btn-xs {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-xs);
    min-height: 1.75rem;
}

.w-100 { width: 100%; }

.icon {
    width: var(--size-icon);
    height: var(--size-icon);
    fill: currentColor;
    flex: 0 0 auto;
}

.btn-icon {
    padding: var(--space-2);
    min-width: 34px;
    justify-content: center;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    text-align: left;
}

.table thead th {
    font-weight: 600;
}

.table tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg);
}

.table tbody tr:hover {
    background: var(--table-row-hover-bg);
}

.table-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.table-col-actions .inline-form + .inline-form {
    margin-left: var(--space-1-5);
}

label {
    display: block;
    margin-bottom: var(--space-1-5);
}

input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']),
textarea,
select,
.custom-select-button,
.custom-datetime-trigger {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-border);
    color: var(--color-text);
    background: var(--color-surface);
    font: inherit;
    line-height: var(--lh-tight);
    min-height: var(--size-touch);
}

input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='color']) {
    width: 100%;
    padding: var(--control-padding-y) var(--control-padding-x);
}

textarea {
    width: 100%;
    padding: var(--control-padding-y) var(--control-padding-x);
    resize: vertical;
    min-height: 92px;
    line-height: var(--lh-base);
}

select {
    width: 100%;
    padding: var(--control-padding-y) calc(var(--control-padding-x) * 2.6) var(--control-padding-y) var(--control-padding-x);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--select-arrow-offset) center;
    background-size: var(--select-arrow-size);
    appearance: none;
    -webkit-appearance: none;
}

input[type='checkbox'],
input[type='radio'] {
    width: auto;
    min-height: 0;
    accent-color: var(--primary);
}

input[type='checkbox'] {
    width: 1.05rem;
    height: 1.05rem;
}

select option {
    color: var(--color-text);
    background: var(--color-surface);
}

.has-custom-select .custom-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.custom-select {
    position: relative;
}

.custom-select-button-label {
    min-width: 0;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    z-index: 30;
    display: none;
    max-height: 14rem;
    overflow-y: auto;
}

.custom-select.open .custom-select-dropdown {
    display: block;
}

.custom-select.is-scrollable .custom-select-dropdown {
    max-height: calc(var(--size-touch) * 5);
}

.custom-select-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-select-option {
    padding: var(--control-padding-y) var(--control-padding-x);
    cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.active,
.custom-select-option.selected {
    background: var(--table-row-hover-bg);
}

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: calc(var(--control-padding-x) * 2.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--select-arrow-offset) center;
    background-size: var(--select-arrow-size);
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator,
input[type='week']::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: var(--datetime-picker-filter, none);
    opacity: 0;
    width: calc(var(--control-padding-x) * 2.2);
}


.search-input {
    width: 100%;
    padding-right: calc(var(--control-padding-x) * 2.6);
}

.field-with-icon,
.search-field {
    position: relative;
}

.field-control-with-start-icon {
    padding-left: calc(var(--control-padding-x) * 2.4) !important;
}

.field-control-with-end-icon {
    padding-right: calc(var(--control-padding-x) * 2.4) !important;
}

.field-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.field-overlay-start {
    left: var(--select-arrow-offset);
}

.field-overlay-end {
    right: var(--select-arrow-offset);
}

.field-icon {
    pointer-events: none;
}

.field-icon,
.field-icon-button {
    width: var(--size-icon);
    height: var(--size-icon);
    color: var(--color-text-muted);
}

.field-icon-soft {
    opacity: 0.75;
}

.field-icon-button {
    width: var(--size-icon);
    height: var(--size-icon);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-form {
    min-width: 260px;
}

.has-custom-datetime .custom-datetime-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.custom-datetime {
    position: relative;
}

.custom-select-button,
.custom-datetime-trigger {
    width: 100%;
    padding: var(--control-padding-y) calc(var(--control-padding-x) * 2.6) var(--control-padding-y) var(--control-padding-x);
    text-align: left;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.custom-datetime-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    width: min(26rem, calc(100vw - 2rem));
    z-index: 30;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: var(--space-2);
    display: none;
}

.custom-datetime.open .custom-datetime-panel {
    display: block;
}

.custom-datetime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.custom-datetime-weekdays,
.custom-datetime-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}

.custom-datetime-weekdays {
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

.custom-datetime-day {
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    min-height: 2rem;
    cursor: pointer;
}

.custom-datetime-day.muted {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.custom-datetime-day.today {
    border-color: var(--color-border);
}

.custom-datetime-day.selected {
    background: var(--primary);
    color: var(--color-inverse);
}

.custom-datetime-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.custom-datetime-hour,
.custom-datetime-minute {
    width: 5rem;
}

.custom-datetime-colon {
    color: var(--color-text-muted);
}

.custom-datetime-actions {
    margin-top: var(--space-2);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.flash {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--space-2) + var(--space-1) / 2);
    padding: calc(var(--space-2) + var(--space-1) / 2) var(--space-3);
    margin-bottom: calc(var(--space-2) + var(--space-1) / 2);
    border: 1px solid var(--flash-border, #93c5fd);
    background: var(--flash-bg, #eff6ff);
    color: var(--flash-text, #1e3a8a);
}

.flash button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.flash-success {
    --flash-border: #86efac;
    --flash-text: #166534;
    --flash-bg: #f0fdf4;
}

.flash-error {
    --flash-border: #fca5a5;
    --flash-text: #991b1b;
    --flash-bg: #fef2f2;
}

.flash-warning,
.flash-info {
    --flash-border: #fcd34d;
    --flash-text: #92400e;
    --flash-bg: #fffbeb;
}

.pagination,
.filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-1) + var(--space-2) / 2);
}

.pagination-centered {
    justify-content: center;
}

.pagination-link,
.filter-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
}

.pagination-link.active,
.filter-link.active {
    font-weight: bold;
}

.pagination-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--admin-z-modal, 170);
}

.modal-overlay.open {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.inline-form {
    display: inline-block;
}

.disabled,
button:disabled,
select:disabled,
.custom-select.disabled .custom-select-button {
    opacity: 0.5;
    cursor: not-allowed;
}