/* RenalRoute admin theme overrides (loaded after sb-admin-2.min.css).
   ALL custom styling lives in this file. Do not edit sb-admin-2 or vendor files. */

:root {
    --rr-plum: #7C3E66;        /* Royal Plum: toggles, avatars, accents */
    --rr-parchment: #F2EBE9;   /* Parchment: info boxes, avatar backgrounds */
    --rr-powder: #A5BECC;      /* Powder Blue */
    --rr-navy: #243A73;        /* Regal Navy: primary buttons */
    --rr-navy-dark: #1B2D5A;
    --rr-surface: #F5F5F5;     /* top bar and sidebar */
    --rr-text: #1A1A1A;
    --rr-muted: #6B7280;
    --rr-border: #E5E5E5;
    --rr-danger: #D92D20;
    --rr-font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --rr-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
    font-family: var(--rr-font-body);
    color: var(--rr-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title {
    font-family: var(--rr-font-heading);
    color: var(--rr-text);
}

#content-wrapper {
    background: #fff;
}

a {
    color: var(--rr-navy);
}

    a:hover {
        color: var(--rr-plum);
    }

.text-rr-muted {
    color: var(--rr-muted) !important;
}

.text-primary {
    color: var(--rr-navy) !important;
}

/* ---------- Sidebar (light gray, active item = white pill) ---------- */
.sidebar {
    background: var(--rr-surface);
    border-right: 1px solid var(--rr-border);
}

    .sidebar .sidebar-brand {
        height: auto;
        padding: 1.25rem 1rem 0.75rem;
        justify-content: flex-start;
        text-transform: none;
        letter-spacing: 0;
        text-decoration: none;
    }

.sidebar-brand-logo {
    height: 34px;
    width: auto;
}

.sidebar-brand-name {
    font-family: var(--rr-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--rr-plum);
    margin-left: 0.5rem;
}

.sidebar hr.sidebar-divider {
    border-top: 1px solid var(--rr-border);
    margin: 0.5rem 1rem;
}

.sidebar .nav-item .nav-link {
    font-family: var(--rr-font-heading);
    color: var(--rr-text);
    border-radius: 0.6rem;
}

    .sidebar .nav-item .nav-link i {
        color: var(--rr-plum);
    }

    .sidebar .nav-item .nav-link:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--rr-text);
    }

.sidebar .nav-item.active .nav-link {
    background: #fff;
    color: var(--rr-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link {
        width: auto;
        margin: 0.15rem 0.75rem;
        padding: 0.6rem 0.9rem;
        text-align: left;
    }

        .sidebar .nav-item .nav-link i {
            margin-right: 0.5rem;
        }
}

/* ---------- Top bar ---------- */
.topbar {
    height: 4.375rem;
    background: var(--rr-surface);
    border-bottom: 1px solid var(--rr-border);
    box-shadow: none;
}

.admin-label {
    font-family: var(--rr-font-heading);
    font-size: 0.95rem;
    color: var(--rr-text);
}

    .admin-label strong {
        font-weight: 600;
    }

.sticky-footer {
    background: #fff;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--rr-navy);
    border-color: var(--rr-navy);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--rr-navy-dark);
        border-color: var(--rr-navy-dark);
    }

    .btn-primary:focus,
    .btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(36, 58, 115, 0.35);
    }

.btn-secondary {
    color: var(--rr-text);
    background-color: #E5E5E5;
    border-color: #BDBDBD;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: var(--rr-text);
        background-color: #D6D6D6;
        border-color: #A8A8A8;
    }

.btn-outline-danger {
    color: var(--rr-danger);
    border-color: var(--rr-danger);
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: var(--rr-danger);
        border-color: var(--rr-danger);
    }

/* ---------- Forms ---------- */
.form-control {
    font-family: var(--rr-font-body);
    border-color: var(--rr-border);
    border-radius: 0.5rem;
}

    .form-control:focus {
        border-color: var(--rr-plum);
        box-shadow: 0 0 0 0.15rem rgba(124, 62, 102, 0.2);
    }

.form-group label,
.col-form-label {
    font-size: 0.8rem;
    color: var(--rr-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--rr-plum);
    border-color: var(--rr-plum);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.15rem rgba(124, 62, 102, 0.2);
}

/* ---------- Cards and info boxes ---------- */
.card {
    border: 1px solid var(--rr-border);
    border-radius: 0.75rem;
    box-shadow: none;
}

.card-header {
    background: #fff;
    font-family: var(--rr-font-heading);
    font-weight: 600;
    border-bottom: 1px solid var(--rr-border);
}

.info-box {
    background: var(--rr-parchment);
    color: var(--rr-navy);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
}

.rr-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--rr-parchment);
    color: var(--rr-plum);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Status badges ---------- */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.status-active, .status-confirmed, .status-completed {
    background: #E6F4EA;
    color: #1E7B3A;
}

.status-pending {
    background: #FFF4D6;
    color: #8A6D00;
}

.status-onhold {
    background: #FDEBD3;
    color: #A15C00;
}

.status-scheduled, .status-ongoing {
    background: #E8EEF9;
    color: var(--rr-navy);
}

.status-missed, .status-inactive, .status-cancelled {
    background: #FDE8E8;
    color: #B42318;
}

.status-discharged {
    background: #ECEFF3;
    color: #4B5563;
}

/* ---------- Dashboard (merged from the Dashboard step; uses the tokens above) ---------- */
.row > [class*="col-"] > .rr-count-card {
    height: 100%;
}

.rr-count-card {
    background: #fff;
    border: 1px solid var(--rr-border);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

    .rr-count-card .label {
        color: var(--rr-text);
        font-size: 0.95rem;
    }

    .rr-count-card .value {
        font-family: var(--rr-font-heading);
        font-size: 2.25rem;
        font-weight: 600;
        color: var(--rr-text);
        margin-top: 0.25rem;
    }

.rr-section-title {
    font-family: var(--rr-font-heading);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 1.5rem 0 0.5rem;
}

/* Gray header row, then each data row as a bordered, rounded box (borders go on the cells) */
.rr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

    .rr-table thead th {
        background: var(--rr-surface);
        font-family: var(--rr-font-heading);
        font-weight: 600;
        padding: 0.5rem 0.9rem;
        border: 0;
        text-align: left;
    }

        .rr-table thead th:first-child {
            border-radius: 0.4rem 0 0 0.4rem;
        }

        .rr-table thead th:last-child {
            border-radius: 0 0.4rem 0.4rem 0;
        }

    .rr-table tbody td {
        background: #fff;
        padding: 0.6rem 0.9rem;
        vertical-align: middle;
        border-top: 1px solid #C9C9C9;
        border-bottom: 1px solid #C9C9C9;
    }

        .rr-table tbody td:first-child {
            border-left: 1px solid #C9C9C9;
            border-radius: 0.4rem 0 0 0.4rem;
        }

        .rr-table tbody td:last-child {
            border-right: 1px solid #C9C9C9;
            border-radius: 0 0.4rem 0.4rem 0;
        }

.rr-empty {
    color: var(--rr-muted);
    padding: 1rem;
    background: #fff;
    border: 1px dashed var(--rr-border);
    border-radius: 0.4rem;
}

.text-mono {
    font-family: var(--rr-font-heading);
}

/* ---- Additional shared UI rules ---- */
/* Form error styling: red border + message under field */
.form-control.is-invalid {
    border-color: var(--rr-danger);
    box-shadow: none;
}
.invalid-feedback {
    display: block;
    color: var(--rr-danger);
}

/* Inline form card with a close (X) button */
.inline-card {
    position: relative;
}

.inline-card .card-body { padding-top: 1rem; }

.inline-card .close-inline {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    font-size: 1.2rem;
    color: var(--rr-muted);
    background: transparent;
    border: 0;
}

/* Plain text "Actions" link style */
.actions-link {
    color: inherit;
    text-decoration: none;
}

/* Success banner tweaks */
.alert-success .fas { color: #18803A; }

/* Confirm modal warning header */
.modal-header.bg-warning { background: #FFF4D6; }

/* Staff list small adjustments */
.table thead th { font-weight: 600; }
.table tbody td { vertical-align: middle; }
.rr-empty .btn { background: var(--rr-navy); border-color: var(--rr-navy); }

/* Dialysis screen tweaks */
.inline-card { border-radius: 0.6rem; }
.rr-table th, .rr-table td { padding: .75rem 1rem; }
.avatar { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }

/* Appointments small tweaks */
.appointment-left .avatar { width:56px; height:56px; border-radius:8px; }
.page-title { margin-bottom: .25rem; }
.status-badge { font-size: .75rem; padding: .2rem .6rem; }


/* Settings screen tweaks */
.btn-outline-danger.btn-block {
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    color: var(--rr-danger);
}

#accountActions .btn { min-width: 90px; }

.custom-control-input { margin-left: 0; }
.custom-control-label { margin-left: 1.75rem; }

/* end of file */


/* =====================================================================
   BATCH 1: palette update + new screens
   Header = Royal Plum, page background = Parchment, buttons = Powder Blue / Regal Navy
   ===================================================================== */
:root {
    --rr-parchment-dark: #E6DAD6;   /* slightly darker Parchment for table headers and hovers */
    --rr-powder-dark: #8EAABB;      /* Powder Blue, hover state */
}

/* Page background = Parchment */
body, #content-wrapper, #content {
    background: var(--rr-parchment);
}

.sticky-footer {
    background: transparent;
}

/* Header = Royal Plum */
.topbar {
    background: var(--rr-plum);
    border-bottom: 0;
}

    .topbar,
    .topbar label,
    .topbar .admin-label,
    .topbar .btn-link {
        color: #fff;
    }

.rr-viewas .custom-select {
    min-width: 17rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--rr-text);
}

/* Sidebar: white, active item = Parchment pill with plum text */
.sidebar {
    background: #fff;
    border-right: 1px solid var(--rr-border);
}

    .sidebar .nav-item.active .nav-link {
        background: var(--rr-parchment);
        color: var(--rr-plum);
        font-weight: 600;
        box-shadow: none;
    }

    .sidebar .nav-item .nav-link:hover {
        background: rgba(124, 62, 102, 0.08);
    }

/* Buttons: primary = Regal Navy, secondary = Powder Blue */
.btn-secondary,
.btn-secondary:disabled {
    color: var(--rr-navy-dark);
    background-color: var(--rr-powder);
    border-color: var(--rr-powder);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:not(:disabled):not(.disabled):active {
        color: var(--rr-navy-dark);
        background-color: var(--rr-powder-dark);
        border-color: var(--rr-powder-dark);
    }

/* Tables: header row in darker Parchment so it stands out on the Parchment page */
.rr-table thead th {
    background: var(--rr-parchment-dark);
}

.info-box {
    background: #fff;
    border: 1px solid var(--rr-border);
    color: var(--rr-navy);
}

/* Forms */
.input-validation-error {
    border-color: var(--rr-danger) !important;
}

.field-validation-error,
.text-danger {
    color: #B42318 !important;
}

.card .form-control {
    background: #fff;
}

/* Tabs */
.rr-tabs {
    border-bottom: 1px solid var(--rr-border);
}

    .rr-tabs .nav-link {
        color: var(--rr-text);
        border: 1px solid transparent;
        font-family: var(--rr-font-heading);
    }

        .rr-tabs .nav-link:hover {
            color: var(--rr-plum);
        }

        .rr-tabs .nav-link.active {
            color: var(--rr-plum);
            font-weight: 600;
            background: #fff;
            border-color: var(--rr-border) var(--rr-border) #fff;
        }

.rr-count-badge {
    background: var(--rr-parchment-dark);
    color: var(--rr-plum);
}

.rr-search .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
}

/* Patient statuses and log stages */
.status-forapproval {
    background: #FFF4D6;
    color: #8A6D00;
}

.status-declined {
    background: #FDE8E8;
    color: #B42318;
}

.status-stage {
    background: #E8EEF9;
    color: var(--rr-navy);
}

/* Patient details */
.review-card {
    border-left: 4px solid var(--rr-plum);
}

.rr-dl-row {
    display: flex;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--rr-border);
}

    .rr-dl-row:last-child {
        border-bottom: 0;
    }

.rr-dl-label {
    flex: 0 0 11rem;
    color: var(--rr-muted);
    font-size: 0.85rem;
}

.rr-dl-value {
    flex: 1;
    font-weight: 500;
}

.rr-session-list {
    margin: 0;
    padding-left: 1.1rem;
}

/* Shared confirmation popup (matches the design: warning icon, Keep / red confirm) */
.rr-confirm {
    border-radius: 0.9rem;
    border: 0;
}

.rr-confirm-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #FDE8E8;
    color: #B42318;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.rr-confirm-title {
    font-family: var(--rr-font-heading);
    font-weight: 600;
}

.rr-confirm-message {
    color: var(--rr-muted);
    font-size: 0.9rem;
}


/* =====================================================================
   BATCH 2: dashboard cards, sortable headers, dialysis booking
   ===================================================================== */
.rr-card-link,
.rr-card-link:hover {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.rr-card-link .rr-count-card {
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.rr-card-link:hover .rr-count-card {
    border-color: var(--rr-plum);
    box-shadow: 0 2px 8px rgba(124, 62, 102, 0.18);
}

.rr-freq {
    font-size: 0.8rem;
    text-align: left;
    background: var(--rr-parchment);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
}

.rr-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.rr-sort:hover {
    color: var(--rr-plum);
    text-decoration: none;
}

.rr-plan-panel {
    background: #fff;
    border: 1px solid var(--rr-border);
    border-left: 4px solid var(--rr-plum);
    border-radius: 0.4rem;
    padding: 0.6rem 0.8rem;
}

.rr-table th a {
    font-weight: inherit;
}


/* =====================================================================
   Staff presence, patient statuses
   ===================================================================== */
.status-online {
    background: #E6F4EA;
    color: #1E7B3A;
}

.status-offline {
    background: #ECEFF3;
    color: #4B5563;
}

.status-transferred {
    background: #E8EEF9;
    color: var(--rr-navy);
}

/* Dashboard: the Patients card holds the active count and, in its own box, the patients awaiting approval */
.rr-count-card-split {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rr-card-link-inner {
    display: block;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.rr-approval-box {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--rr-border);
    border-radius: 0.4rem;
    background: var(--rr-parchment);
    color: inherit;
    text-decoration: none;
    font-size: 0.85rem;
}

.rr-approval-box:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--rr-plum);
}

.rr-approval-box.has-pending {
    background: #FFF4D6;
    border-color: #E8D38A;
}

.rr-approval-count {
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: 0.4rem;
}

/* Authorize window: shown in the top bar while another staff member is acting */
.rr-acting-note { color: var(--rr-primary, #1f6f8b); background: rgba(31, 111, 139, 0.1); padding: 4px 10px; border-radius: 12px; }

/* Tag-style search boxes */
.rr-tags-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.2rem 0.5rem;
    gap: 0.3rem;
    cursor: text;
}

.rr-tag {
    display: inline-flex;
    align-items: center;
    background: var(--rr-parchment-dark);
    color: var(--rr-plum);
    border-radius: 999px;
    padding: 0.1rem 0.25rem 0.1rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.rr-tag-x {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.4rem;
    cursor: pointer;
}

.rr-tag-x:hover { color: #B42318; }

.rr-tags-input {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0.2rem 0;
}

/* Sortable column headers */
table.rr-table th.rr-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

table.rr-table th.rr-sortable:hover { color: var(--rr-plum); }

/* ---------- Side navigation stays in place while the page scrolls ---------- */
#wrapper > .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
}

/* ---------- Notification arrows (dashboard) ---------- */
.rr-arrow-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--rr-plum);
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    text-decoration: none;
}

    .rr-arrow-link:hover { background: var(--rr-plum); color: #fff; text-decoration: none; }

/* Small symbol buttons (check / cross) in tables */
.rr-symbol-btn {
    min-width: 2rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    line-height: 1.4;
    font-weight: 700;
}