@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --app-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --app-radius: 1rem;
    --app-radius-sm: .75rem;
    --app-table-head: #1e3a5f;
    --app-table-head-color: #fff;
    --app-shadow-sm: 0 .25rem 1rem rgba(15, 23, 42, .07);
    --app-shadow: 0 .75rem 2rem rgba(15, 23, 42, .1);
    --bs-font-sans-serif: var(--app-font);
    --bs-body-font-family: var(--app-font);
    --bs-border-radius: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--app-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand strong {
    font-family: var(--app-font) !important;
    font-weight: 700;
    letter-spacing: -.025em;
}

.btn {
    --bs-btn-border-radius: .75rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .65rem;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 700;
    box-shadow: 0 .2rem .55rem rgba(15, 23, 42, .08);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:hover {
    box-shadow: 0 .4rem .85rem rgba(15, 23, 42, .13);
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-bg: var(--secondary, #2563eb);
    --bs-btn-border-color: var(--secondary, #2563eb);
    --bs-btn-hover-bg: color-mix(in srgb, var(--secondary, #2563eb) 86%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--secondary, #2563eb) 86%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--secondary, #2563eb) 78%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--secondary, #2563eb) 78%, black);
}

.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-outline-secondary {
    border-width: 1px !important;
}

.btn-danger.ghost-danger-button,
.card-actions .btn-danger,
.backup-actions .btn-danger {
    border-color: var(--bs-danger) !important;
    background: var(--bs-danger) !important;
    color: #fff !important;
}

.card-actions .btn-success {
    border-color: var(--bs-success) !important;
    background: var(--bs-success) !important;
    color: #fff !important;
}

.card-actions .btn-warning {
    border-color: var(--bs-warning) !important;
    background: var(--bs-warning) !important;
    color: #212529 !important;
}

.card-actions .btn-info {
    border-color: var(--bs-info) !important;
    background: var(--bs-info) !important;
    color: #052c65 !important;
}

.card-actions .btn-primary {
    border-color: var(--secondary, #2563eb) !important;
    background: var(--secondary, #2563eb) !important;
    color: #fff !important;
}

.panel,
.auth-card,
.stats-grid article,
.stats-grid .stat-card,
.haircut-card,
.session-card,
.audit-card,
.blocked-ip-row {
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.panel {
    margin-bottom: 1.25rem;
}

.page-header {
    padding: .35rem 0;
}

.page-header h1 {
    font-weight: 800;
    letter-spacing: -.045em;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-select {
    min-height: 2.75rem;
    border-color: rgba(15, 23, 42, .14);
    border-radius: .75rem !important;
    background-color: #fff;
}

textarea {
    min-height: 7rem;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--secondary, #2563eb) 62%, white);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--secondary, #2563eb) 14%, transparent);
}

.table-responsive {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-sm);
}

.table {
    margin-bottom: 0;
    vertical-align: middle;
}

.table thead,
table thead {
    background: var(--app-table-head);
    color: var(--app-table-head-color);
}

.table thead th,
table thead th {
    border: 0;
    padding: .9rem 1rem;
    background: transparent;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.table tbody td,
table tbody td {
    padding: .85rem 1rem;
    border-color: rgba(15, 23, 42, .07);
}

.alert {
    border-radius: .85rem !important;
    box-shadow: var(--app-shadow-sm);
}

.badge {
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .btn {
        min-height: 2.85rem;
    }

    .page-header h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .panel {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn:hover {
        transform: none;
    }
}