/* =====================================================================
   THEME MODERNIZATION LAYER
   ---------------------------------------------------------------------
   Non-destructive refinements on top of style.css. Reuses the theme's
   own palette (--primary-rgb, #00918E) and radii/shadows — this file
   tightens spacing, consistency, empty/loading states, focus
   accessibility, and a handful of components (grids, modals, offcanvas,
   toasts, badges) rather than re-theming the app. Loaded LAST so its
   rules win without needing !important sprinkled everywhere.
   ===================================================================== */

:root {
    --cs-radius: 8px;
    --cs-radius-sm: 6px;
    --cs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --cs-shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --cs-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
    --cs-border: #E8E8ED;
    --cs-muted: #6F6F7A;
    --cs-heading: #1B1D21;
    --cs-focus-ring: 0 0 0 3px rgba(var(--primary-rgb, 0, 145, 142), 0.18);
}

/* ---------------------------------------------------------------------
   Typography & visual hierarchy
   --------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cs-heading);
    margin-bottom: 2px;
}

.card .card-title {
    letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------------
   Cards & page structure
   --------------------------------------------------------------------- */
.card {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-sm);
}

.card:hover {
    box-shadow: var(--cs-shadow-md);
}

.card .card-header {
    border-bottom: 1px solid var(--cs-border);
    padding: 1rem 1.25rem;
}

.card .card-body {
    padding: 1.25rem;
}

.page-header {
    margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--cs-radius-sm);
    font-weight: 500;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(var(--primary-rgb, 0, 145, 142), 0.24);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 145, 142), 0.28);
}

.btn-icon,
.action-icon {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.table-action .action-icon:hover {
    background-color: rgba(var(--primary-rgb, 0, 145, 142), 0.1);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--cs-radius-sm);
    border-color: var(--cs-border);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: rgba(var(--primary-rgb, 0, 145, 142), 0.55) !important;
    box-shadow: var(--cs-focus-ring) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--cs-radius-sm) !important;
    border-color: var(--cs-border) !important;
    min-height: 42px;
}

textarea.form-control {
    min-height: 90px;
}

.col-form-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-text,
small.text-muted {
    font-size: 12.5px;
}

.input-validation-error,
.field-validation-error {
    color: #E4453A;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #E4453A !important;
}

.server-validation-error,
.field-validation-error {
    font-size: 12.5px;
    display: block;
    margin-top: 4px;
}

/* required marker consistency */
.text-danger {
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Tables / DataGrids
   --------------------------------------------------------------------- */
.custom-table .table thead th {
    background-color: #F8F9FB;
    color: var(--cs-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cs-border);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.custom-table .table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-size: 13.5px;
    color: #33353B;
}

.custom-table .table tbody tr {
    transition: background-color 0.12s ease;
}

.custom-table .table tbody tr:hover {
    background-color: rgba(var(--primary-rgb, 0, 145, 142), 0.035);
}

/* ---- empty state (rendered inside a full-width <td>) ---- */
.cs-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--cs-muted);
}

.cs-empty-state .cs-empty-icon {
    font-size: 2.25rem;
    color: rgba(var(--primary-rgb, 0, 145, 142), 0.35);
    margin-bottom: 0.75rem;
    display: block;
}

.cs-empty-state .cs-empty-title {
    font-weight: 600;
    color: var(--cs-heading);
    margin-bottom: 2px;
}

.cs-empty-state .cs-empty-subtitle {
    font-size: 13px;
}

/* ---- skeleton loading rows ---- */
.cs-skeleton {
    display: inline-block;
    height: 12px;
    border-radius: 4px;
    width: 100%;
    max-width: 140px;
    background: linear-gradient(90deg, #EEEFF2 25%, #F6F7F9 37%, #EEEFF2 63%);
    background-size: 400% 100%;
    animation: cs-skeleton-shimmer 1.4s ease infinite;
}

@keyframes cs-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-skeleton { animation: none; }
}

/* ---------------------------------------------------------------------
   Badges / status pills
   --------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 0.3em 0.7em;
}

.bg-success-transparent { background-color: rgba(19, 178, 88, 0.12); color: #0F9D57; }
.bg-danger-transparent  { background-color: rgba(228, 69, 58, 0.12); color: #C63A31; }
.bg-warning-transparent { background-color: rgba(245, 158, 11, 0.15); color: #B4790A; }
.bg-info-transparent    { background-color: rgba(var(--primary-rgb, 0, 145, 142), 0.12); color: #00918E; }

/* ---------------------------------------------------------------------
   Modals & Offcanvas
   --------------------------------------------------------------------- */
.modal-content,
.offcanvas {
    border-radius: var(--cs-radius);
    border: none;
    box-shadow: var(--cs-shadow-lg);
}

.offcanvas.offcanvas-end {
    border-top-left-radius: var(--cs-radius);
    border-bottom-left-radius: var(--cs-radius);
}

.modal-header,
.offcanvas-header {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--cs-border);
}

.modal-footer,
.offcanvas-body .d-flex.justify-content-end {
    border-top: 1px solid var(--cs-border);
    padding-top: 1rem;
}

.modal-title,
.offcanvas-title,
#offcanvas_title {
    font-weight: 700;
    color: var(--cs-heading);
}

.custom-btn-close {
    transition: background-color 0.15s ease;
}

.custom-btn-close:hover {
    background-color: rgba(228, 69, 58, 0.08);
}

/* ---------------------------------------------------------------------
   Toasts / notifications
   --------------------------------------------------------------------- */
.toast {
    border: none;
    border-radius: var(--cs-radius-sm);
    box-shadow: var(--cs-shadow-lg);
    min-width: 320px;
}

.toast .toast-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-top-left-radius: var(--cs-radius-sm);
    border-top-right-radius: var(--cs-radius-sm);
}

.notification-dropdown {
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-lg);
    border: 1px solid var(--cs-border);
}

/* ---------------------------------------------------------------------
   Navigation (sidebar / header) — subtle polish, no structural changes
   --------------------------------------------------------------------- */
.sidebar .sidebar-menu > ul > li > a {
    border-radius: var(--cs-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .sidebar-menu ul li a:hover,
.sidebar .sidebar-menu ul li a.active {
    background-color: rgba(var(--primary-rgb, 0, 145, 142), 0.08);
}

.header {
    box-shadow: var(--cs-shadow-sm);
}

/* ---------------------------------------------------------------------
   Search / filter panel
   --------------------------------------------------------------------- */
.icon-form .form-control {
    padding-left: 2.25rem;
}

.icon-form .form-icon {
    color: var(--cs-muted);
}

/* ---------------------------------------------------------------------
   Accessibility: visible focus ring on keyboard navigation
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--cs-focus-ring);
}

/* ---------------------------------------------------------------------
   Loading overlay (for full-panel async operations)
   --------------------------------------------------------------------- */
.cs-loading-overlay {
    position: relative;
    min-height: 120px;
}

.cs-loading-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
}

/* ---------------------------------------------------------------------
   Responsive tweaks
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .offcanvas.offcanvas-large,
    .offcanvas.offcanvas-end {
        width: 100% !important;
    }

    .card .card-body,
    .card .card-header {
        padding: 0.85rem;
    }

    .custom-table .table tbody td,
    .custom-table .table thead th {
        padding: 0.6rem 0.6rem;
        font-size: 12.5px;
    }
}

/* ---------------------------------------------------------------------
   Scrollbar (webkit) — light touch, matches palette
   --------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #D6D8DE;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #BEC1C9;
}