/* =========================================================
   Martini Hospital Visual Identity
   Palette sampled from the official supplied logo:
   Red  #F71335 | Navy #0A0D1F | Green #125645 | Mint #B3E0D2
   Loaded last so it safely rebrands legacy components without
   changing application logic.
   ========================================================= */

:root {
    --martini-red: #f71335;
    --martini-red-dark: #d80f30;
    --martini-red-soft: #fff0f3;
    --martini-navy: #0a0d1f;
    --martini-navy-soft: #1a2034;
    --martini-green: #125645;
    --martini-green-bright: #17745b;
    --martini-green-soft: #e8f5f0;
    --martini-mint: #b3e0d2;
    --martini-mint-soft: #edf8f4;
    --martini-bg: #f4faf7;
    --martini-card: #ffffff;
    --martini-line: #d8e9e2;
    --martini-muted: #65736d;
    --martini-shadow: 0 18px 48px rgba(10, 13, 31, .08);

    /* Reports theme variables */
    --reports-ink: var(--martini-navy);
    --reports-muted: var(--martini-muted);
    --reports-primary: var(--martini-navy);
    --reports-primary-dark: #050713;
    --reports-accent: var(--martini-red);
    --reports-accent-soft: var(--martini-red-soft);
    --reports-bg: var(--martini-bg);
    --reports-card: var(--martini-card);
    --reports-line: var(--martini-line);
    --reports-success: var(--martini-green-bright);
    --reports-warning: #b7791f;
    --reports-shadow: var(--martini-shadow);

    /* Legacy UI variables used by old partials */
    --bg: var(--martini-bg);
    --card: var(--martini-card);
    --text: var(--martini-navy);
    --muted: var(--martini-muted);
    --primary: var(--martini-navy);
    --primary-dark: #050713;
    --primary-soft: var(--martini-mint-soft);
    --border: var(--martini-line);
    --danger: var(--martini-red-dark);
    --success: var(--martini-green-bright);
    --warning: #b7791f;

    --navy: var(--martini-navy);
    --blue: var(--martini-red);
    --sky: var(--martini-mint-soft);
    --green: var(--martini-green-bright);
    --red: var(--martini-red);
    --line: var(--martini-line);
}

html {
    accent-color: var(--martini-red);
}

body.reports-app,
body.reports-auth-body {
    color: var(--martini-navy);
    background:
        radial-gradient(circle at 92% -10%, rgba(247, 19, 53, .08), transparent 27%),
        radial-gradient(circle at 5% 7%, rgba(18, 86, 69, .10), transparent 30%),
        linear-gradient(180deg, #fbfefd 0%, var(--martini-bg) 48%, #eef7f3 100%);
}

/* ------------------------- Top navigation ------------------------- */
.reports-topbar {
    border-bottom: 1px solid rgba(216, 233, 226, .95);
    background: rgba(255, 255, 255, .965);
    box-shadow: 0 8px 30px rgba(10, 13, 31, .045);
}

.reports-topbar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--martini-green) 0%,
        var(--martini-green) 32%,
        var(--martini-navy) 32%,
        var(--martini-navy) 68%,
        var(--martini-red) 68%,
        var(--martini-red) 100%);
    opacity: .9;
}

.reports-topbar-inner {
    min-height: 82px;
}

.reports-brand {
    gap: 13px;
}

.reports-brand-mark {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(18, 86, 69, .18);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, var(--martini-mint-soft));
    box-shadow: 0 12px 26px rgba(10, 13, 31, .10);
}

/* Crop the supplied square logo visually so the MH emblem remains readable in the small navbar mark. */
.reports-brand-mark img {
    width: 142%;
    height: 142%;
    object-fit: cover;
    object-position: 50% 35%;
    transform: translateY(-6%);
}

.reports-brand strong {
    color: var(--martini-navy);
    font-size: 17px;
}

.reports-brand small {
    color: var(--martini-green);
    font-weight: 700;
}

.reports-nav-link {
    position: relative;
    color: #333a4d;
    border: 1px solid transparent;
}

.reports-nav-link:hover {
    color: var(--martini-navy);
    border-color: rgba(18, 86, 69, .12);
    background: var(--martini-mint-soft);
}

.reports-nav-link.active {
    color: #fff;
    border-color: rgba(247, 19, 53, .25);
    background: linear-gradient(135deg, var(--martini-navy), #20263b);
    box-shadow: 0 11px 25px rgba(10, 13, 31, .18);
}

.reports-nav-link.active::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 5px;
    left: 15px;
    height: 2px;
    border-radius: 99px;
    background: var(--martini-red);
}

.reports-user-avatar {
    color: var(--martini-green);
    border: 1px solid rgba(18, 86, 69, .13);
    background: var(--martini-green-soft);
}

.reports-logout {
    border-color: var(--martini-line);
    color: var(--martini-navy);
    background: #fff;
}

.reports-logout:hover {
    border-color: rgba(247, 19, 53, .35);
    color: var(--martini-red-dark);
    background: var(--martini-red-soft);
}

.mobile-menu-btn {
    border-color: var(--martini-line);
    color: var(--martini-navy);
    background: #fff;
}

/* ------------------------- Page headings ------------------------- */
.reports-page-heading {
    position: relative;
    overflow: hidden;
    border-color: var(--martini-line);
    background:
        radial-gradient(circle at 5% 0%, rgba(179, 224, 210, .32), transparent 28%),
        rgba(255, 255, 255, .97);
    box-shadow: 0 15px 38px rgba(10, 13, 31, .055);
}

.reports-page-heading::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 92px;
    height: 4px;
    border-radius: 0 0 0 8px;
    background: var(--martini-red);
}

.reports-page-heading h1 {
    color: var(--martini-navy);
}

.reports-kicker,
.reports-panel-heading > div > span,
.reports-auth-kicker {
    color: var(--martini-red) !important;
}

/* ------------------------- Buttons ------------------------- */
.btn-primary,
.primary-button {
    border: 1px solid rgba(216, 15, 48, .78);
    color: #fff !important;
    background: linear-gradient(135deg, var(--martini-red), var(--martini-red-dark));
    box-shadow: 0 11px 25px rgba(247, 19, 53, .20);
}

.btn-primary:hover,
.primary-button:hover {
    box-shadow: 0 14px 30px rgba(247, 19, 53, .26);
}

.btn-light,
.ghost-button {
    border-color: var(--martini-line);
    color: var(--martini-navy) !important;
    background: #fff;
}

.btn-light:hover,
.ghost-button:hover {
    border-color: rgba(18, 86, 69, .22);
    background: var(--martini-mint-soft);
}

.tool-button {
    border: 1px solid var(--martini-navy) !important;
    color: #fff !important;
    background: var(--martini-navy) !important;
    box-shadow: 0 7px 17px rgba(10, 13, 31, .11);
}

.tool-button:hover {
    border-color: var(--martini-red) !important;
    background: var(--martini-red) !important;
}

/* ------------------------- Alerts ------------------------- */
.alert-success {
    border-color: #a7d9c7;
    color: #0f5d49;
    background: #ecf9f4;
}

.alert-danger {
    border-color: #f3b3bd;
    color: #9e1530;
    background: #fff1f4;
}

/* ------------------------- Dashboard hero ------------------------- */
.reports-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(179, 224, 210, .18);
    background:
        radial-gradient(circle at 8% 12%, rgba(247, 19, 53, .30), transparent 27%),
        radial-gradient(circle at 96% 95%, rgba(18, 86, 69, .72), transparent 30%),
        linear-gradient(135deg, #080b19 0%, var(--martini-navy) 48%, #171d31 100%);
    box-shadow: 0 22px 52px rgba(10, 13, 31, .18);
}

.reports-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 210px;
    height: 210px;
    border: 22px solid rgba(247, 19, 53, .16);
    border-radius: 50%;
    pointer-events: none;
}

.reports-hero > * {
    position: relative;
    z-index: 1;
}

.reports-hero-badge {
    border-color: rgba(179, 224, 210, .28);
    color: #d9fff1;
    background: rgba(18, 86, 69, .28);
}

.reports-hero .btn-primary {
    border-color: rgba(255,255,255,.06);
}

.reports-hero .btn-light {
    border-color: rgba(255,255,255,.18);
    color: #fff !important;
    background: rgba(255,255,255,.09);
}

/* ------------------------- Metrics and cards ------------------------- */
.reports-metric,
.reports-panel,
.reports-filter-card,
.record-form-section,
.patient-header,
.tab-panel,
.note-panel,
.important-links-section,
.chart-card,
.table-panel {
    border-color: var(--martini-line) !important;
    background: rgba(255, 255, 255, .975) !important;
    box-shadow: 0 14px 36px rgba(10, 13, 31, .055) !important;
}

.reports-metric {
    position: relative;
    overflow: hidden;
}

.reports-metric::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 4px;
    border-radius: 0 0 0 8px;
    background: var(--martini-navy);
}

.reports-metric-primary {
    border-color: #ead8dc !important;
    background: linear-gradient(150deg, #fff, #fff6f7) !important;
}

.reports-metric-primary::before {
    background: var(--martini-red);
}

.reports-metric-primary strong {
    color: var(--martini-red-dark);
}

.reports-metric-success::before {
    background: var(--martini-green);
}

.reports-metric-success strong {
    color: var(--martini-green);
}

.reports-metric-warning::before {
    background: #b7791f;
}

.reports-panel-heading a,
.table-actions a,
.record-file-field a {
    color: var(--martini-red-dark);
}

.record-row {
    border: 1px solid #edf3f0;
    background: #f9fcfb;
}

.record-row:hover {
    border-color: rgba(18, 86, 69, .20);
    background: var(--martini-mint-soft);
}

.record-number,
.table-serial {
    color: var(--martini-green);
    background: #e6f4ef;
}

.record-completion.completed {
    color: #0e5e48;
    background: #dff4eb;
}

.record-completion.pending {
    color: #9b2437;
    background: #fff0f3;
}

.monthly-bar-track {
    background: #edf5f1;
}

.monthly-bar-track span,
.stats-bar-row i {
    background: linear-gradient(180deg, var(--martini-red), var(--martini-red-dark));
}

/* ------------------------- Forms ------------------------- */
input,
select,
textarea {
    border-color: #d2e4dd;
    color: var(--martini-navy);
    background: #fff;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #bdd8cd;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--martini-green);
    box-shadow: 0 0 0 4px rgba(18, 86, 69, .11);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--martini-red);
}

.record-form-intro {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(179, 224, 210, .16);
    background:
        radial-gradient(circle at 10% 10%, rgba(247, 19, 53, .24), transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(18, 86, 69, .62), transparent 30%),
        linear-gradient(135deg, #080b19, #181d31);
    box-shadow: 0 18px 42px rgba(10, 13, 31, .15);
}

.record-form-intro span,
.record-form-intro-icon {
    color: #dff7ef;
}

.record-form-intro-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 19px;
    background: rgba(255,255,255,.08);
    font-size: 34px;
}

.record-form-section-title > span {
    background: linear-gradient(135deg, var(--martini-red), var(--martini-red-dark));
    box-shadow: 0 9px 20px rgba(247,19,53,.18);
}

.record-form-actions {
    border-color: rgba(216, 233, 226, .95);
    background: rgba(255,255,255,.965);
}

/* ------------------------- Tables ------------------------- */
.reports-table th {
    color: #37433f;
    border-bottom: 1px solid #cfe4dc;
    background: linear-gradient(180deg, #eff8f4, #e9f5f0);
}

.reports-table tbody tr:hover td {
    background: #fbfefd;
}

/* ------------------------- Patient tabs ------------------------- */
.tabs {
    border-color: var(--martini-line) !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(10, 13, 31, .035);
}

.tab {
    color: #3a4351 !important;
}

.tab:hover {
    color: var(--martini-green) !important;
    background: var(--martini-mint-soft) !important;
}

.tab.active {
    position: relative;
    color: #fff !important;
    background: linear-gradient(135deg, var(--martini-navy), #20263b) !important;
    box-shadow: 0 8px 18px rgba(10, 13, 31, .13);
}

.tab.active::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 4px;
    left: 18px;
    height: 2px;
    border-radius: 99px;
    background: var(--martini-red);
}

.report-access-open {
    color: #0e5c47 !important;
    border-color: #abd9c8 !important;
    background: #ecf9f4 !important;
}

.report-access-locked {
    color: #8a2738 !important;
    border-color: #efbdc5 !important;
    background: #fff3f5 !important;
}

.elapsed-time {
    color: var(--martini-green) !important;
    background: var(--martini-green-soft) !important;
}

.monitoring-remove-button {
    border-color: #efb7c0 !important;
    color: var(--martini-red-dark) !important;
    background: var(--martini-red-soft) !important;
}

/* Completed surgery toggle */
.surgery-completed-toggle:has(> input[type="checkbox"]:checked) {
    border-color: #a6d7c5 !important;
    background: #edf9f4 !important;
}

.surgery-completed-toggle > input[type="checkbox"]:checked + .surgery-toggle-track {
    background: var(--martini-green-bright) !important;
}

/* ------------------------- Important links ------------------------- */
.important-links-count {
    color: var(--martini-green) !important;
    background: var(--martini-green-soft) !important;
}

.important-link-card {
    border-color: var(--martini-line) !important;
    background:
        radial-gradient(circle at top left, rgba(179, 224, 210, .30), transparent 40%),
        #fff !important;
}

.important-link-card:hover {
    border-color: rgba(247, 19, 53, .35) !important;
    box-shadow: 0 18px 38px rgba(10, 13, 31, .10) !important;
}

.important-link-icon {
    background: linear-gradient(135deg, var(--martini-red), var(--martini-red-dark)) !important;
    box-shadow: 0 9px 20px rgba(247,19,53,.17);
}

.important-link-footer {
    border-color: #d9eae3 !important;
    color: var(--martini-green) !important;
}

.important-link-arrow {
    color: var(--martini-green) !important;
    background: var(--martini-green-soft) !important;
}

.important-link-card:hover .important-link-arrow {
    color: #fff !important;
    background: var(--martini-red) !important;
}

/* ------------------------- Pagination ------------------------- */
.pagination-button,
.pagination-number,
.pagination-dots {
    border-color: var(--martini-line);
    color: var(--martini-navy);
}

.pagination-button:hover,
.pagination-number:hover {
    border-color: rgba(18,86,69,.28);
    color: var(--martini-green);
    background: var(--martini-mint-soft);
}

.pagination-current {
    border-color: var(--martini-navy) !important;
    color: #fff !important;
    background: var(--martini-navy) !important;
    box-shadow: inset 0 -3px 0 var(--martini-red);
}

/* ------------------------- Loader ------------------------- */
.page-loader {
    background:
        radial-gradient(circle at 50% 35%, rgba(179,224,210,.42), transparent 26%),
        rgba(247, 251, 249, .97);
}

.loader-card {
    border-color: var(--martini-line);
    background: #fff;
}

.loader-ring {
    border-color: #d9eee6;
    border-top-color: var(--martini-red);
    border-right-color: var(--martini-green);
}

.loader-title {
    color: var(--martini-navy);
}

/* ------------------------- Login ------------------------- */
.reports-auth-shell {
    gap: clamp(24px, 5vw, 70px);
}

.reports-auth-intro {
    position: relative;
}

.reports-auth-intro::before {
    content: "";
    position: absolute;
    top: 8%;
    right: -8%;
    width: 250px;
    height: 250px;
    border: 34px solid rgba(247, 19, 53, .08);
    border-radius: 50%;
    pointer-events: none;
}

.reports-auth-intro > * {
    position: relative;
    z-index: 1;
}

.reports-auth-emblem {
    width: 142px;
    height: 142px;
    padding: 8px;
    border: 1px solid rgba(18, 86, 69, .16);
    border-radius: 34px;
    background: linear-gradient(145deg, #fff, var(--martini-mint-soft));
    box-shadow: 0 20px 45px rgba(10, 13, 31, .12);
}

.reports-auth-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 25px;
}

.reports-auth-intro h1 {
    color: var(--martini-navy);
}

.reports-auth-features span {
    border-color: #d8e9e2;
    color: var(--martini-green);
    background: #fff;
}

.reports-auth-card {
    position: relative;
    overflow: hidden;
    border-color: var(--martini-line);
    background: rgba(255,255,255,.975);
    box-shadow: 0 24px 64px rgba(10, 13, 31, .10);
}

.reports-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--martini-green), var(--martini-navy), var(--martini-red));
}

/* ------------------------- Mobile menu ------------------------- */
@media (max-width: 1120px) {
    .reports-mobile-nav {
        border-color: var(--martini-line);
        background: rgba(255,255,255,.985);
    }

    .reports-mobile-nav .mobile-nav-link {
        color: #343b4d;
        background: #f7fbf9;
    }

    .reports-mobile-nav .mobile-nav-link.active {
        color: #fff;
        background: linear-gradient(135deg, var(--martini-navy), #20263b);
        box-shadow: inset 0 -3px 0 var(--martini-red);
    }
}

@media (max-width: 600px) {
    .reports-brand-mark {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .reports-auth-emblem {
        width: 112px;
        height: 112px;
        border-radius: 28px;
    }
}

/* ------------------------- Footer ------------------------- */
.reports-footer {
    position: relative;
    border-top-color: var(--martini-line);
    color: var(--martini-muted);
    background: #fff;
}

.reports-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 120px;
    height: 3px;
    transform: translateX(50%);
    background: linear-gradient(90deg, var(--martini-green), var(--martini-navy), var(--martini-red));
}

/* ------------------------- Print identity ------------------------- */
.medical-print-header {
    border-bottom-color: var(--martini-red) !important;
}

.medical-print-header .print-logo {
    width: 74px !important;
    height: 74px !important;
    padding: 4px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid #d7e9e2 !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.medical-print-header .print-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.report-title {
    color: var(--martini-navy) !important;
    border-color: var(--martini-line) !important;
}

.print-section h3,
.print-table th,
.print-info-grid span {
    color: var(--martini-green) !important;
}

@media print {
    :root {
        --martini-red: #d80f30;
        --martini-green: #125645;
        --martini-navy: #0a0d1f;
    }

    body.reports-app {
        background: #fff !important;
    }

    .medical-print-page {
        box-shadow: none !important;
    }
}