/* ====================================================================
   theme.css - Sukhakarta design tokens and shared surfaces
   ====================================================================

   Loaded AFTER assets/css/style.css, which is compiled AdminLTE 3 on
   Bootstrap 4 and must never be edited - the project's own fixes are
   buried at the bottom of its 53,000 lines. Everything here overrides
   that sheet from the outside, so removing this file returns the app
   to exactly how it looked before.

   Order: theme.css -> layout.css -> dashboard.css -> tables.css.

   Nothing in here is loaded by the PDF generators in /pdf, which carry
   their own <style> for dompdf. A certificate must keep its own
   measurements.
   ==================================================================== */

:root {
    /* Dark surfaces - sidebar and its headers */
    --sk-navy-900: #0F172A;
    --sk-navy-800: #1E293B;
    --sk-navy-700: #334155;

    /* Brand accents */
    --sk-blue: #0284C7;
    --sk-blue-dark: #0369A1;
    --sk-blue-soft: #E0F2FE;
    --sk-teal: #0F766E;
    --sk-teal-soft: #CCFBF1;

    /* Page and card surfaces */
    --sk-bg: #F8FAFC;
    --sk-surface: #FFFFFF;
    --sk-border: #E2E8F0;
    --sk-border-strong: #CBD5E1;
    --sk-head: #F1F5F9;

    /* Text */
    --sk-text: #0F172A;
    --sk-text-muted: #64748B;
    --sk-text-invert: #F8FAFC;

    /* Status pills */
    --sk-ok-bg: #DCFCE7;
    --sk-ok-fg: #15803D;
    --sk-warn-bg: #FEF3C7;
    --sk-warn-fg: #B45309;
    --sk-alert-bg: #FEE2E2;
    --sk-alert-fg: #B91C1C;
    --sk-info-bg: #E0F2FE;
    --sk-info-fg: #0369A1;

    /* Elevation and shape */
    --sk-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    --sk-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sk-radius: 10px;
    --sk-radius-sm: 6px;

    /* Type */
    --sk-font: "Inter", "Plus Jakarta Sans", system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------
   Typography and page canvas
   -------------------------------------------------------------------- */

body,
.wrapper,
button,
input,
select,
textarea,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.swal-modal,
.modal-content {
    font-family: var(--sk-font);
}

body {
    background-color: var(--sk-bg);
    color: var(--sk-text);
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    background-color: var(--sk-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sk-text);
}

a {
    color: var(--sk-blue);
}

a:hover {
    color: var(--sk-blue-dark);
}

/* --------------------------------------------------------------------
   Cards

   AdminLTE's .card is a white block with a heavy drop shadow and a
   coloured top border on .card-outline. Both are replaced by a flat
   bordered surface with a micro-shadow.
   -------------------------------------------------------------------- */

.card {
    background-color: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
}

.card.card-primary.card-outline,
.card.card-success.card-outline,
.card.card-info.card-outline,
.card.card-warning.card-outline,
.card.card-danger.card-outline,
.card.card-secondary.card-outline {
    border-top: 1px solid var(--sk-border);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--sk-border);
    padding: 0.85rem 1.1rem;
}

.card-title {
    font-size: 0.98rem;
    font-weight: 600;
}

.card-footer {
    background-color: var(--sk-head);
    border-top: 1px solid var(--sk-border);
}

/* Tabbed cards - the shape used by every report screen. */
.card-outline-tabs .nav-tabs {
    border-bottom: 1px solid var(--sk-border);
    padding: 0 0.5rem;
}

.card-outline-tabs .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-top: none;
    color: var(--sk-text-muted);
    font-weight: 500;
    padding: 0.7rem 1rem;
}

.card-outline-tabs .nav-tabs .nav-link:hover {
    border-bottom-color: var(--sk-border-strong);
    color: var(--sk-text);
}

.card-outline-tabs .nav-tabs .nav-item .nav-link.active,
.card-primary.card-outline-tabs .nav-tabs .nav-item .nav-link.active {
    border: none;
    border-bottom: 2px solid var(--sk-blue);
    border-top: none;
    background-color: transparent;
    color: var(--sk-blue);
    font-weight: 600;
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */

.btn {
    border-radius: var(--sk-radius-sm);
    font-weight: 500;
    letter-spacing: 0.005em;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.20);
}

.btn-primary {
    background-color: var(--sk-blue);
    border-color: var(--sk-blue);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--sk-blue-dark);
    border-color: var(--sk-blue-dark);
}

.btn-success {
    background-color: var(--sk-teal);
    border-color: var(--sk-teal);
}

.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    background-color: #115E59;
    border-color: #115E59;
}

.btn-outline-secondary {
    border-color: var(--sk-border-strong);
    color: var(--sk-text-muted);
}

.btn-outline-secondary:hover {
    background-color: var(--sk-head);
    border-color: var(--sk-border-strong);
    color: var(--sk-text);
}

/* --------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------- */

.form-control,
.custom-select,
.select2-container--default .select2-selection--single {
    border-color: var(--sk-border-strong);
    border-radius: var(--sk-radius-sm);
    color: var(--sk-text);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--sk-blue);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-control::placeholder {
    color: #94A3B8;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--sk-head);
}

.col-form-label,
label {
    color: var(--sk-text);
    font-weight: 500;
}

.input-group-text {
    background-color: var(--sk-head);
    border-color: var(--sk-border-strong);
    color: var(--sk-text-muted);
}

/* --------------------------------------------------------------------
   Status pills

   Bootstrap's .badge classes are recoloured in place, so every grid
   that already prints a badge picks the new look up without its
   JavaScript being touched.
   -------------------------------------------------------------------- */

.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 74%;
    letter-spacing: 0.01em;
    padding: 0.35em 0.75em;
}

.badge-success,
.badge.bg-success,
.sk-pill-ok {
    background-color: var(--sk-ok-bg);
    color: var(--sk-ok-fg);
}

.badge-warning,
.badge.bg-warning,
.sk-pill-warn {
    background-color: var(--sk-warn-bg);
    color: var(--sk-warn-fg);
}

.badge-danger,
.badge.bg-danger,
.sk-pill-alert {
    background-color: var(--sk-alert-bg);
    color: var(--sk-alert-fg);
}

.badge-info,
.badge.bg-info,
.badge-primary,
.badge.bg-primary,
.sk-pill-info {
    background-color: var(--sk-info-bg);
    color: var(--sk-info-fg);
}

.badge-secondary,
.badge.bg-secondary {
    background-color: var(--sk-head);
    color: var(--sk-text-muted);
}

/* --------------------------------------------------------------------
   Modals, alerts, dropdowns
   -------------------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: var(--sk-radius);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

.modal-header.bg-primary {
    background-color: var(--sk-navy-800) !important;
    border-radius: var(--sk-radius) var(--sk-radius) 0 0;
}

.modal-header .close {
    color: var(--sk-text-invert);
    opacity: 0.75;
    text-shadow: none;
}

.dropdown-menu {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow-md);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: var(--sk-radius-sm);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--sk-head);
    color: var(--sk-text);
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--sk-radius);
}

.alert-success {
    background-color: var(--sk-ok-bg);
    border-color: #BBF7D0;
    color: var(--sk-ok-fg);
}

.alert-danger {
    background-color: var(--sk-alert-bg);
    border-color: #FECACA;
    color: var(--sk-alert-fg);
}

/* --------------------------------------------------------------------
   Utilities used by the templates in this theme
   -------------------------------------------------------------------- */

.sk-muted {
    color: var(--sk-text-muted);
}

.sk-surface {
    background-color: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
}