/**
* Template Name: NiceAdmin
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Updated: Apr 20 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/* Readex Pro is loaded via <link> in the base layouts — an @import here
   serialised the download behind this stylesheet. */


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    scroll-behavior: smooth;
}

body {
    font-family: var(--nnuh-font), sans-serif;
    background: #f7fafa;
    color: var(--nnuh-navy);
}

a {
    color: var(--nnuh-teal);
    text-decoration: none;
}

a:hover {
    color: var(--nnuh-magenta);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--nnuh-navy);
    font-weight: 600;
}


/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    margin-top: 60px;
    padding: 20px 30px;
    transition: all 0.3s;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
/* The page heading on every inner screen. Restyled here rather than per
   template, so all ten pages that use it move together. */
.pagetitle {
    padding-block: 0;
    margin-bottom: 20px;
}

.pagetitle h1 {
    font-size: 1.3rem;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--nnuh-navy);
}

.pagetitle p {
    margin: 0;
    /* Keeps the explanatory line at a readable measure instead of running
       the full width of a desktop screen. */
    max-width: 72ch;
    font-size: .86rem;
    line-height: 1.7;
    color: var(--nnuh-body);
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    left: 15px;
    bottom: 15px;
    z-index: 99999;
    background: var(--nnuh-teal-btn);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: var(--nnuh-teal-dark);
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: 15px;
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: var(--nnuh-navy);
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-left: 10px;
    font-size: 18px;
    line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f6f9ff;
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        left: 20px;
        transform: rotate(-45deg);
        border-top: 1px solid #eaedf1;
        border-right: 1px solid #eaedf1;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: #cfe2ff;
    border-color: #cfe2ff;
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Card */
.card {
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(var(--nnuh-navy-rgb), 0.1);
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: var(--nnuh-teal-btn);
    color: #fff;
    padding: 15px;
}

.card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--nnuh-navy);
    font-family: var(--nnuh-font), sans-serif;
}

.card-title span {
    color: var(--nnuh-ink-muted);
    font-size: 14px;
    font-weight: 400;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
    font-weight: 500;
    font-family: var(--nnuh-font), sans-serif;
    font-size: 20px;
}

/* Close Button */
.btn-close {
    background-size: 25%;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}

/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--nnuh-navy);
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: var(--nnuh-teal);
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: var(--nnuh-ink);
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px;
    font-family: var(--nnuh-font), sans-serif;
    color: var(--nnuh-ink-muted);
    font-weight: 600;
}

.breadcrumb a {
    color: var(--nnuh-ink-muted);
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: var(--nnuh-ink-muted);
}

.breadcrumb .breadcrumb-item::before {
    color: var(--nnuh-ink-muted);
}

.breadcrumb .active {
    color: var(--nnuh-ink-muted);
    font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: var(--nnuh-navy);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: var(--nnuh-teal);
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    color: var(--nnuh-teal);
    border-bottom: 2px solid var(--nnuh-teal);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 280px;
    }
}

.logo img {
    max-height: 26px;
    margin-left: 6px;
}

.logo span {
    font-size: 26px;
    font-weight: 700;
    color: var(--nnuh-navy);
    font-family: var(--nnuh-font), sans-serif;
    white-space: nowrap;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    box-shadow: 0px 2px 20px rgba(var(--nnuh-navy-rgb), 0.1);
    background-color: #fff;
    padding: 0.75rem 0;
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding: 10px;
    cursor: pointer;
    color: var(--nnuh-navy);
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        right: 0;
        left: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(var(--nnuh-navy-rgb), 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    border: 0;
    font-size: 14px;
    color: var(--nnuh-navy);
    border: 1px solid rgba(var(--nnuh-navy-rgb), 0.2);
    padding: 7px 8px 7px 38px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(var(--nnuh-navy-rgb), 0.15);
    border: 1px solid rgba(var(--nnuh-navy-rgb), 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-right: -30px;
    background: none;
}

.header .search-form button i {
    color: var(--nnuh-navy);
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: var(--nnuh-navy);
    margin-left: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: var(--nnuh-navy);
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.header-nav .nav-profile span {
    font-size: 14px;
    font-weight: 600;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
    background-color: var(--nnuh-teal-btn) !important;
}

.header-nav .notifications {
    inset: 8px auto auto 0 !important;
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: var(--nnuh-ink-muted);
}

.header-nav .notifications .notification-item:hover {
    background-color: #f6f9ff;
}

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 10px 0 20px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--nnuh-navy);
}

.header-nav .messages .message-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: var(--nnuh-ink-muted);
}

.header-nav .messages .message-item:hover {
    background-color: #f6f9ff;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--nnuh-navy);
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
    color: var(--nnuh-navy);
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
    color: var(--nnuh-ink-muted);
}

.header-nav .profile .dropdown-item i {
    margin-left: 10px;
    font-size: 18px;
    line-height: 0;
    color: var(--nnuh-ink-muted);
}

.header-nav .profile .dropdown-item i:hover {
    color: var(--nnuh-teal);
}

.header-nav .profile .dropdown-item:hover {
    color: var(--nnuh-navy);
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nnuh-hairline-strong) transparent;
    box-shadow: 0px 0px 20px rgba(var(--nnuh-navy-rgb), 0.1);
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1199px) {
    .sidebar {
        right: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--nnuh-hairline-strong);
}

@media (min-width: 1200px) {

    #main,
    #footer {
        margin-right: 300px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        right: 0;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-right: 0;
    }

    .toggle-sidebar .sidebar {
        right: -300px;
    }
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--nnuh-ink-muted);
    font-weight: 600;
    margin: 10px 15px 5px 0;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--nnuh-navy);
    transition: 0.3;
    background: #f6f9ff;
    padding: 10px 15px;
    border-radius: 4px;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    margin-left: 10px;
    color: var(--nnuh-teal);
}

.sidebar-nav .nav-link.collapsed {
    color: var(--nnuh-navy);
    background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
    color: var(--nnuh-ink-muted);
}

.sidebar-nav .nav-link:hover {
    color: var(--nnuh-navy);
    background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
    color: var(--nnuh-teal);
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-left: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--nnuh-navy);
    padding: 10px 40px 10px 0;
    transition: 0.3s;
}

.sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-left: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--nnuh-teal);
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--nnuh-teal);
}

/* Push the image container to the bottom */
.sidebar .d-inline-flex {
    margin-top: auto;
    width: 100%;
}

/* Ensure the image fits properly */
.sidebar .d-inline-flex img {
    width: 100%;
    object-fit: contain;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
    position: absolute;
    left: 0px;
    top: 15px;
}

.dashboard .filter .icon {
    color: var(--nnuh-ink-muted);
    padding-left: 20px;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
    color: var(--nnuh-teal);
}

.dashboard .filter .dropdown-header {
    padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--nnuh-ink-muted);
    margin-bottom: 0;
    padding: 0;
}

.dashboard .filter .dropdown-item {
    padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
    padding-bottom: 10px;
}

.dashboard .info-card h6 {
    font-size: 28px;
    color: var(--nnuh-navy);
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard .sales-card .card-icon {
    color: var(--nnuh-teal);
    background: #edfdf6;
}

.dashboard .revenue-card .card-icon {
    color: var(--nnuh-magenta);
    background: #f8e6f1;
}

.dashboard .customers-card .card-icon {
    color: var(--nnuh-navy);
    background: #dce7f7;
}

/* Activity */
.dashboard .activity {
    font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
    color: var(--nnuh-ink-muted);
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
    content: "";
    position: absolute;
    left: -11px;
    width: 4px;
    top: 0;
    bottom: 0;
    background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
    margin-top: 3px;
    z-index: 1;
    font-size: 11px;
    line-height: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #fff;
    flex-grow: 0;
    color: var(--nnuh-teal);
    background-color: var(--nnuh-teal);
}

.dashboard .activity .activity-item .activity-content {
    padding-right: 10px;
    padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
    top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
    padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item + .post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: right;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: 15px;
    margin-right: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

.dashboard .news h4 a {
    color: var(--nnuh-navy);
    transition: 0.3s;
}

.dashboard .news h4 a:hover {
    color: var(--nnuh-teal);
}

.dashboard .news p {
    font-size: 14px;
    color: #777777;
    margin-right: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: 14px;
}

.dashboard .recent-sales .table thead {
    background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
    border: 0;
}

.dashboard .recent-sales .dataTable-top {
    padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
    padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
    font-size: 14px;
}

.dashboard .top-selling .table thead {
    background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
    border: 0;
}

.dashboard .top-selling .table tbody td {
    vertical-align: middle;
}

.dashboard .top-selling img {
    border-radius: 5px;
    max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

.iconslist .icon {
    background-color: #fff;
    border-radius: 0.25rem;
    text-align: center;
    color: var(--nnuh-navy);
    padding: 15px 0;
}

.iconslist i {
    margin: 0.25rem;
    font-size: 2.5rem;
}

.iconslist .label {
    font-family: var(--bs-font-monospace);
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
    max-width: 120px;
}

.profile .profile-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--nnuh-navy);
    margin: 10px 0 0 0;
}

.profile .profile-card h3 {
    font-size: 18px;
}

.profile .profile-card .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(var(--nnuh-navy-rgb), 0.5);
    line-height: 0;
    margin-left: 10px;
    transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
    color: var(--nnuh-navy);
}

.profile .profile-overview .row {
    margin-bottom: 20px;
    font-size: 15px;
}

.profile .profile-overview .card-title {
    color: var(--nnuh-navy);
}

.profile .profile-overview .label {
    font-weight: 600;
    color: rgba(var(--nnuh-navy-rgb), 0.6);
}

.profile .profile-edit label {
    font-weight: 600;
    color: rgba(var(--nnuh-navy-rgb), 0.6);
}

.profile .profile-edit img {
    max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: var(--nnuh-teal);
}

.faq .basic p {
    color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: var(--nnuh-teal);
}

.contact .info-box h3 {
    font-size: 20px;
    color: var(--nnuh-navy);
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: right;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: var(--nnuh-success);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 0 -6px 10px;
    border: 3px solid var(--nnuh-success);
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--nnuh-teal);
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
    background: var(--nnuh-teal-btn);
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
    background: #5969f3;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 180px;
    font-weight: 700;
    color: var(--nnuh-teal);
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--nnuh-navy);
    margin-bottom: 30px;
}

.error-404 .btn {
    background: var(--nnuh-ink-muted);
    color: #fff;
    padding: 8px 30px;
}

.error-404 .btn:hover {
    background: var(--nnuh-ink);
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    /*padding: 20px 0;*/
    font-size: 14px;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
    margin-top: auto;
}

.footer .copyright {
    text-align: center;
    color: var(--nnuh-navy);
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: 13px;
    color: var(--nnuh-navy);
}

/*-----------------------------------------------------------------
# Customization
---------------------------------------------------------------- */

[class*=shadow] {
    transition: all .2s ease
}

.asteriskField {
    color: var(--nnuh-magenta);
}


figcaption, figure, main {
    display: block;
    margin: 0
}

.form-text {
    display: inline-block;
    font-size: .75rem;
    line-height: 1.125rem
}

.text-nnuh {
    --bs-text-opacity: 1;
    color: var(--nnuh-teal);
}

.text-custom {
    --bs-text-opacity: 1;
    color: var(--nnuh-magenta);
}

main {
    overflow: hidden
}

.btn-nnuh {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--nnuh-teal-btn);
    --bs-btn-border-color: var(--nnuh-teal-btn);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nnuh-teal-btn-dark);
    --bs-btn-hover-border-color: var(--nnuh-teal-btn-dark);
    --bs-btn-focus-shadow-rgb: var(--nnuh-teal-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nnuh-navy);
    --bs-btn-active-border-color: var(--nnuh-navy);
}

.btn-outline-nnuh {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--nnuh-teal-btn);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--nnuh-teal-btn);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nnuh-teal-btn);
    --bs-btn-hover-border-color: var(--nnuh-teal-btn);
    --bs-btn-focus-shadow-rgb: var(--nnuh-teal-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nnuh-teal-btn-dark);
    --bs-btn-active-border-color: var(--nnuh-teal-btn-dark);
}

/* Destructive action. Replaces the inline "border-color: var(--nnuh-magenta); color: var(--nnuh-magenta)" repeated across the record tables. */
.btn-outline-nnuh-danger {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--nnuh-magenta);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--nnuh-magenta);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nnuh-magenta);
    --bs-btn-hover-border-color: var(--nnuh-magenta);
    --bs-btn-focus-shadow-rgb: var(--nnuh-magenta-rgb);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nnuh-magenta);
    --bs-btn-active-border-color: var(--nnuh-magenta);
}

.btn-gray-800 {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

.btn-gray-800:hover {
    color: #343a40;
    background-color: #fff;
    border-color: #343a40;
}

.btn-gray-800:focus-visible {
    color: #fff;
    background-color: #1a232f;
    border-color: #19212c;
    box-shadow: 0 0 0 .18rem rgba(var(--nnuh-navy-rgb), .45);
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--nnuh-ink-muted) !important;
}

.table {
    --bs-table-color: var(--nnuh-navy);
    --bs-table-active-color: var(--nnuh-navy);
    --bs-table-hover-color: var(--nnuh-navy);
    --bs-table-striped-color: var(--nnuh-navy);
    color: var(--nnuh-navy);
}

.table-nnuh-dark {
    --bs-table-color: #fff;
    /* teal-btn, not teal: white on #44b4b4 is 2.49:1. */
    --bs-table-bg: var(--nnuh-teal-btn);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-striped-color: var(--nnuh-navy);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    --bs-table-hover-color: var(--nnuh-teal);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.bg-pending {
    color: white;
    background-color: #888;
}

.bg-approved {
    color: white;
    background-color: var(--nnuh-teal-btn);
}

.bg-rejected {
    color: white;
    background-color: var(--nnuh-magenta);
}

/* Telemedicine consultation statuses.
   Same palette and naming shape as the medical-record badges above, so one
   status vocabulary reads across the whole portal: teal for a live/booked
   thing, grey for something finished and inert, magenta for something that
   will not happen. */
.bg-consult-confirmed {
    color: white;
    background-color: var(--nnuh-teal-btn);
}

.bg-consult-in-progress {
    color: white;
    background-color: var(--nnuh-navy);
}

.bg-consult-completed {
    color: white;
    background-color: #888;
}

.bg-consult-cancelled {
    color: white;
    background-color: var(--nnuh-magenta);
}

.bg-consult-no-show {
    color: var(--nnuh-navy);
    background-color: #fff3cd;
}

/* "Needs summary" marker. Amber rather than a status colour -- it is a task
   for the doctor, not a state of the consultation. */
.badge-needs-summary {
    color: var(--nnuh-navy);
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
}

label {
    color: var(--nnuh-navy);
}

legend {
    float: none;
    width: auto;
    padding: inherit;
    font-size: 1rem;
    color: var(--nnuh-navy);

}

.form-text {
    font-size: 80%;
    font-weight: 400;
}


.list-group-item {
    color: var(--nnuh-navy);
}

.list-group-item:first-child i {
    color: var(--nnuh-teal);
}

.list-group-item + .list-group-item i {
    color: var(--nnuh-teal);
}

p {
    color: var(--nnuh-navy);
}


.custom-ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: center;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--nnuh-teal-btn);
    border-color: var(--nnuh-teal);
}

ul.timeline {
    position: relative;
    list-style-type: none;
    padding-right: 84px;
}

ul.timeline:before {
    position: absolute;
    display: block;
    right: 40px;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background-color: var(--nnuh-teal);
    content: ' ';
}

ul.timeline .event {
    position: relative;
    padding: 16px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
    padding: 16px;
    margin-bottom: 30px;
}

ul.timeline .event:before {
    display: block;
    position: absolute;
    top: 30px;
    right: -55px;
    width: 30px;
    height: 30px;
    border: 6px solid var(--nnuh-teal);
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.6);
    content: ' ';
}

ul.timeline h6 {
    font-size: large;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--nnuh-magenta);
}

ul.timeline .description p {
    font-size: small;
    text-align: justify;
}

ul.timeline .time {
    position: absolute;
    display: block;
    width: 120px;
    top: 35px;
    right: -179px;
    font-size: 0.9em;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
}

ul.timeline .time > .glyphicon-time {
    top: 2px;
}

ul.timeline .left-arrow:before {
    position: absolute;
    top: 30px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ddd;
    border-right: 0 solid #ddd;
    border-bottom: 15px solid transparent;
    content: ' ';
}

ul.timeline .left-arrow:after {
    position: absolute;
    top: 30px;
    right: -14px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 15px solid transparent;
    content: ' ';
}

.page-link {
    color: var(--nnuh-teal);
}

.page-link:hover {
    color: var(--nnuh-magenta);
}


/* override */
.btn-outline-dark {
    --bs-btn-color: var(--nnuh-navy);
    --bs-btn-border-color: var(--nnuh-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nnuh-navy);
    --bs-btn-hover-border-color: var(--nnuh-navy);
    --bs-btn-focus-shadow-rgb: var(--nnuh-navy-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--nnuh-navy);
    --bs-btn-active-border-color: var(--nnuh-navy);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--nnuh-navy-rgb), 0.125);
    --bs-btn-disabled-color: var(--nnuh-navy);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--nnuh-navy);
    --bs-gradient: none;
}

/*--------------------------------------------------------------
# Auth shell
# Was static/css/volt.css, a second admin template loaded only by the
# sign-in, sign-up, OTP, password and doctor-console pages. Roughly 80% of
# that file re-declared Bootstrap 5 utilities that were already loaded
# (.d-flex, .container, .p-4, .form-control …); only the rules below were
# doing real work, so they moved here and the file is gone.
--------------------------------------------------------------*/
.auth-shell {
    /* style.css sets `main { overflow: hidden }` for the dashboard shell,
       which the auth pages never opted into. */
    overflow: visible;
}

.custom-bg {
    background-image: url("/static/img/brand/bg_final.f07903d7afb7.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Prevent flickering */
    background-repeat: no-repeat;
}

/* Bootstrap ships .shadow-sm / .shadow / .shadow-lg but not this one, and
   every auth card uses it. */
.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* The 2px keeps a scrollbar off the auth pages; Bootstrap's own is 100vh. */
.auth-shell .min-vh-100 {
    min-height: calc(100vh - 2px) !important;
}

/* Password eye toggle, positioned over the input. Scoped to the auth shell:
   this rule used to reach every `i` inside every form, and only avoided
   breaking the signed-in pages because volt.css was never loaded there. */
.auth-shell form i {
    position: absolute;
    left: 20px;
    bottom: 6px;
    color: var(--nnuh-teal);
    cursor: pointer;
}

.auth-shell .password-with-help i {
    position: absolute;
    left: 20px;
    top: 41px; /* above the help text */
    color: var(--nnuh-teal);
    cursor: pointer;
}

/* App Store / Play badges under the sign-in card. */
.app-icon-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 576px) {
    .app-icon-img {
        height: 42px;
    }
}

/* Volt gave focused inputs a teal border but a leftover Bootstrap-blue glow.
   Both are the brand teal now. */
.form-control:focus,
.form-select:focus {
    border-color: var(--nnuh-teal);
    box-shadow: 0 0 0 .25rem rgba(var(--nnuh-teal-rgb), .22);
}

/*--------------------------------------------------------------
# Auth pages
# One shell for sign-in, activation, OTP, password reset and the doctor
# console: a brand scene beside the form panel, mirroring
# staff.nnuh.org's .au scaffold. Roles follow nnuh.org — navy carries
# text, headings and links; teal is the accent and the link hover.
#
# Mobile is the common case here, so the scene collapses to a slim band
# and the form starts near the top of the screen rather than below a
# full-height image.
--------------------------------------------------------------*/
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh; /* excludes the mobile address bar */
}

/* ── Brand scene ────────────────────────────────────────────── */
.auth-split__scene {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 4vw, 3.2rem);
    color: #eaf4f6;
    background: linear-gradient(160deg, #0d2b3a 10%, var(--nnuh-navy) 55%, #0d3a46 100%);
}

.auth-split__scene::before,
.auth-split__scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-split__scene::before {
    background: url("/static/img/brand/bg_final.f07903d7afb7.webp") center / cover no-repeat;
    /* The photograph is light and teal-tinted; let most of it through. */
    opacity: .9;
}

/* Wash: heaviest behind the copy, lifting toward the far edge. Measured
   against the real photograph — white text over the copy band lands at
   8.45:1, comfortably past AAA, with the panel roughly half as dark as
   it was (the previous values gave 16.5:1, far more than anything needed). */
.auth-split__scene::after {
    background:
        radial-gradient(900px 600px at 85% 110%, rgba(var(--nnuh-teal-rgb), .22), transparent 60%),
        linear-gradient(to top, rgba(8, 24, 39, .34) 0%, rgba(8, 24, 39, .14) 55%, rgba(8, 24, 39, .04) 100%);
}

.auth-split__scene-copy {
    position: relative;
    z-index: 1;
}

.auth-split__eyebrow {
    margin: 0 0 10px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--nnuh-teal);
}

.auth-split__title {
    margin: 0 0 10px;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}

.auth-split__lead {
    margin: 0;
    max-width: 42ch;
    font-size: .95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

/* ── Form panel ─────────────────────────────────────────────── */
.auth-split__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 4vw, 2.6rem);
    background: var(--nnuh-surface);
}

.auth-split__inner {
    width: 100%;
    max-width: 380px;
}

/* Native colours — this is the hospital's mark, not an icon. */
.auth-logo {
    display: block;
    width: 148px;
    max-width: 55%;
    height: auto;
    margin: 0 0 22px;
}

.auth-title {
    margin: 0 0 4px;
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--nnuh-navy);
}

.auth-sub {
    margin: 0 0 24px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--nnuh-body);
}

/* Crispy renders label + input + errors per field. */
.auth-split__inner .form-group,
.auth-split__inner .mb-3 {
    margin-bottom: 16px;
}

.auth-split__inner label:not(.form-check-label) {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--nnuh-navy);
}

/* Checkbox rows (the terms consent). Flex instead of Bootstrap's float, so
   the box and its label stay on one line in RTL and the whole row is a
   comfortable tap target. */
.auth-split__inner .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin-bottom: 16px;
    min-height: var(--nnuh-tap);
}

.auth-split__inner .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin: 0;
}

.auth-split__inner .form-check-input:checked {
    background-color: var(--nnuh-teal-btn);
    border-color: var(--nnuh-teal-btn);
}

.auth-split__inner .form-check-label {
    margin: 0;
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nnuh-body);
}

.auth-split__inner .form-control {
    height: 46px;
    border-radius: 8px;
    border-color: #dfe5ec;
    font-size: .95rem;
    background: #fcfdfe;
}

.auth-split__inner .form-control:focus {
    background: var(--nnuh-surface);
}

.auth-split__inner textarea.form-control {
    height: auto;
}

.auth-split__inner .invalid-feedback,
.auth-split__inner .form-text {
    font-size: .78rem;
    margin-top: 5px;
}

/* ── Actions ────────────────────────────────────────────────── */
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--nnuh-tap);
    margin-top: 4px;
    border: none;
    border-radius: var(--nnuh-radius-btn);
    background: var(--nnuh-teal-btn);
    color: #fff;
    font-family: var(--nnuh-font);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background .3s;
}

/* nnuh.org's own hover: teal goes navy. */
.auth-btn:hover,
.auth-btn:focus-visible {
    background: var(--nnuh-navy);
    color: #fff;
}

.auth-btn:focus-visible {
    outline: 3px solid rgba(var(--nnuh-teal-rgb), .55);
    outline-offset: 2px;
}

.auth-forgot {
    display: block;
    /* Pulls up against the field's bottom margin so it reads as belonging to
       that field. `end` resolves to the left in RTL. */
    margin: -9px 0 18px;
    font-size: .82rem;
    text-align: end;
    color: var(--nnuh-body);
}

.auth-forgot:hover {
    color: var(--nnuh-link-hover);
}

/* A submit button that has to look like a link — the resend-OTP form. */
.auth-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--nnuh-link);
    text-decoration: underline;
    cursor: pointer;
}

.auth-linkbtn:hover {
    color: var(--nnuh-link-hover);
}

/* While a form is being sent (static/js/submit-once.js). The button stays
   enabled, because a disabled one is left out of the POST, so it only reads
   as busy. */
.auth-btn.is-submitting,
.auth-linkbtn.is-submitting {
    cursor: progress;
    opacity: .75;
}

.submit-once-spinner {
    margin-inline-start: 8px;
}

.auth-rule {
    margin: 20px 0 16px;
    border: 0;
    border-top: 1px solid var(--nnuh-hairline);
}

.auth-alt {
    margin: 0;
    font-size: .88rem;
    color: var(--nnuh-body);
}

.auth-alt a {
    color: var(--nnuh-link);
    font-weight: 600;
}

.auth-alt a:hover {
    color: var(--nnuh-link-hover);
}

/* ── Secondary links and badges ─────────────────────────────── */
.auth-split__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--nnuh-hairline);
}

.auth-split__extras a {
    font-size: .82rem;
    font-weight: 600;
    color: var(--nnuh-link);
}

.auth-split__extras a:hover {
    color: var(--nnuh-link-hover);
}

/* The panel opens the guide from a text link; the modal markup is still
   needed, the floating button is not. */
.auth-split__extras .video-guide-fab {
    display: none;
}

.auth-split__inner .app-icons {
    justify-content: flex-start !important;
    margin-top: 14px !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.auth-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--nnuh-hairline);
    font-size: .74rem;
    color: var(--nnuh-navy);
}

.auth-foot a {
    color: var(--nnuh-navy);
    font-weight: 600;
}

.auth-foot a:hover {
    color: var(--nnuh-link-hover);
}

.auth-foot__secure {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* The year is Latin digits inside an RTL line; isolating it stops the
       bidi algorithm reordering it against the neighbouring Arabic. */
    unicode-bidi: isolate;
    color: var(--nnuh-ink-muted);
}

.auth-foot__secure i {
    color: var(--nnuh-teal);
    font-size: .88rem;
}

/* ── Tablet and phone ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    /* A band, not a hero. The form has to start near the top of the screen. */
    .auth-split__scene {
        padding: 22px 20px;
    }

    .auth-split__title {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .auth-split__lead {
        display: none;
    }

    .auth-split__panel {
        padding: 26px 20px 30px;
        align-items: flex-start;
    }

    .auth-split__inner {
        max-width: 460px;
    }
}

@media (max-width: 575.98px) {
    .auth-split__scene {
        padding: 18px 16px;
    }

    .auth-split__eyebrow {
        margin-bottom: 6px;
        font-size: .68rem;
    }

    .auth-split__title {
        font-size: 1.15rem;
    }

    .auth-split__panel {
        padding: 22px 16px 28px;
    }

    .auth-logo {
        width: 124px;
        margin-bottom: 18px;
    }

    .auth-title {
        font-size: 1.2rem;
    }

    .auth-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Short landscape phones: drop the band entirely so the form is reachable. */
@media (max-height: 460px) and (orientation: landscape) {
    .auth-split__scene {
        display: none;
    }

    .auth-split {
        grid-template-rows: minmax(0, 1fr);
    }
}

/*--------------------------------------------------------------
# Signed-in pages
# Shared chrome for the pages behind the login: a page header, a
# section wrapper and the quick-access tiles. Built here rather than
# per-template so the dashboard, results and records screens stop
# re-inventing the same card.
#
# Palette roles follow nnuh.org — navy carries text and headings, teal
# is the accent. Tiles rotate through navy / teal / magenta so no single
# colour dominates the screen.
--------------------------------------------------------------*/
.pg-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
}

.pg-hero__greeting {
    margin: 0 0 3px;
    font-size: .82rem;
    color: var(--nnuh-body);
}

.pg-hero__name {
    margin: 0;
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nnuh-navy);
}

.pg-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--nnuh-teal-rgb), .12);
    font-size: .76rem;
    font-weight: 600;
    color: var(--nnuh-teal-btn);
}

.pg-hero__meta span[dir="ltr"] {
    unicode-bidi: isolate;
}

/* Unread notifications, stated in words rather than only as a bell dot. */
.pg-hero__alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--nnuh-tap);
    padding: 0 16px;
    border-radius: var(--nnuh-radius-btn);
    background: rgba(var(--nnuh-magenta-rgb), .08);
    border: 1px solid rgba(var(--nnuh-magenta-rgb), .22);
    color: var(--nnuh-magenta);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
}

.pg-hero__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--nnuh-magenta);
    color: #fff;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.pg-hero__alert:hover {
    background: rgba(var(--nnuh-magenta-rgb), .14);
    color: var(--nnuh-magenta);
}

/* ── Sections ───────────────────────────────────────────────── */
.pg-section {
    margin-bottom: 22px;
}

.pg-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pg-section__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--nnuh-navy);
}

.pg-section__note {
    margin: 0;
    font-size: .8rem;
    color: var(--nnuh-body);
}

/* ── Quick access tiles ─────────────────────────────────────── */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.qa-tile {
    --tile: var(--nnuh-teal);
    --tile-soft: rgba(var(--nnuh-teal-rgb), .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 112px;
    padding: 16px 10px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
    color: var(--nnuh-navy);
    text-align: center;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.qa-tile:hover,
.qa-tile:focus-visible {
    color: var(--nnuh-navy);
    border-color: var(--tile);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -12px rgba(var(--nnuh-navy-rgb), .45);
}

.qa-tile:focus-visible {
    outline: 2px solid var(--tile);
    outline-offset: 2px;
}

.qa-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--tile-soft);
    color: var(--tile);
    font-size: 1.3rem;
}

.qa-tile__label {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
}

.qa-tile--navy {
    --tile: var(--nnuh-navy);
    --tile-soft: rgba(var(--nnuh-navy-rgb), .10);
}

.qa-tile--magenta {
    --tile: var(--nnuh-magenta);
    --tile-soft: rgba(var(--nnuh-magenta-rgb), .10);
}

.qa-tile--teal-deep {
    --tile: var(--nnuh-teal-btn);
    --tile-soft: rgba(var(--nnuh-teal-rgb), .16);
}

/* ── Phone ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .qa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-hero {
        padding: 16px 18px;
    }

    .pg-hero__alert {
        width: 100%;
        justify-content: center;
    }
}

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

    .qa-tile:hover {
        transform: none;
    }
}

/* ── Filter / form panel on inner pages ─────────────────────── */
.pg-panel {
    padding: 18px 20px;
    margin-bottom: 20px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
}

.pg-panel label:not(.form-check-label) {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--nnuh-navy);
}

.pg-panel .form-control,
.pg-panel .form-select {
    height: 46px;
    border-radius: 8px;
    border-color: #dfe5ec;
    font-size: .95rem;
    background: #fcfdfe;
}

.pg-panel .form-control:focus,
.pg-panel .form-select:focus {
    background: var(--nnuh-surface);
}

/* Line the submit button up with the fields beside it. */
.pg-panel .btn {
    min-height: 46px;
}

/*--------------------------------------------------------------
# Record card (mobile)
# The phone view of a list row — lab orders, radiology studies,
# medical-record requests. One component so the three stop drifting.
#
# The rule these were breaking: a patient reading their own results
# does not need their own name and ID repeated on every card. What
# they need first is what it is, when it was, and its status.
--------------------------------------------------------------*/
.rec-card {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
}

/* Identity line: what this record is, and when. */
.rec-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.rec-card__title {
    margin: 0;
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nnuh-navy);
}

.rec-card__date {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--nnuh-body);
    font-variant-numeric: tabular-nums;
    /* Dates are Latin digits in an RTL line. */
    unicode-bidi: isolate;
}

.rec-card__status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

/* ── Detail rows ────────────────────────────────────────────── */
.rec-card__meta {
    margin: 0 0 12px;
    display: grid;
    gap: 5px;
}

.rec-card__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .83rem;
    line-height: 1.5;
}

.rec-card__label {
    flex: 0 0 auto;
    color: var(--nnuh-body);
}

.rec-card__value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--nnuh-navy);
    font-weight: 500;
    /* Long clinic and reason strings wrap instead of forcing a wide card. */
    overflow-wrap: anywhere;
}

/* ── Actions ────────────────────────────────────────────────── */
/* Side by side, not a tower of full-width buttons. A card with four
   stacked buttons was taller than the record it described. */
.rec-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rec-card__actions > .btn,
.rec-card__actions > form {
    flex: 1 1 140px;
    margin: 0;
}

.rec-card__actions > form > .btn {
    width: 100%;
}

.rec-card__actions .btn {
    min-height: var(--nnuh-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .84rem;
}

/* Secondary and destructive actions read as links, so the primary one
   stays the only obvious button. */
.rec-card__minor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--nnuh-hairline);
}

.rec-card__minor button,
.rec-card__minor a {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--nnuh-link);
    text-decoration: none;
    cursor: pointer;
    /* Still reachable: the row itself provides the vertical target. */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rec-card__minor a:hover,
.rec-card__minor button:hover {
    color: var(--nnuh-link-hover);
}

.rec-card__minor .is-danger {
    color: var(--nnuh-magenta);
}

.rec-card__minor .is-danger:hover {
    color: var(--nnuh-magenta-dark);
}

.rec-card__tests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.rec-card__tests .badge {
    font-weight: 500;
    font-size: .74rem;
}

/* An empty result set should say so plainly, not with an alert box. */
.rec-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--nnuh-body);
    font-size: .9rem;
    background: var(--nnuh-surface);
    border: 1px dashed var(--nnuh-hairline-strong);
    border-radius: var(--nnuh-radius);
}

.rec-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    color: var(--nnuh-ink-faint);
}

/* ── Notifications list ─────────────────────────────────────── */
.notif-list {
    display: grid;
    gap: 10px;
}

.notif {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-inline-start: 3px solid transparent;
    border-radius: var(--nnuh-radius-sm);
}

/* Unread earns the accent edge; read entries stay quiet. The old list
   gave every entry the same teal dot, so nothing stood out. */
.notif--unread {
    border-inline-start-color: var(--nnuh-teal);
    background: rgba(var(--nnuh-teal-rgb), .05);
}

.notif__icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--nnuh-ink-faint);
    font-size: .95rem;
}

.notif--unread .notif__icon {
    color: var(--nnuh-teal-btn);
}

.notif__body {
    flex: 1 1 auto;
    min-width: 0;
}

.notif__msg {
    margin: 0 0 3px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--nnuh-navy);
    overflow-wrap: anywhere;
}

.notif--unread .notif__msg {
    font-weight: 600;
}

.notif__time {
    font-size: .76rem;
    color: var(--nnuh-body);
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.notif-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

/*--------------------------------------------------------------
# Record list (all widths)
# The same .rec-card the phone uses, laid out wider on desktop, so a
# page renders its records ONCE instead of keeping a <table> and a card
# stack in sync. That duplication is where the drift bugs came from —
# a guard present in one block and missing in the other.
#
# Used by laboratory. Radiology and the request lists still run the old
# table-plus-cards pair, for comparison.
--------------------------------------------------------------*/
.rec-list {
    display: grid;
    gap: 12px;
}

.rec-card__main {
    min-width: 0;
}

.rec-card__extra {
    min-width: 0;
}

/* ── Toolbar above the list ─────────────────────────────────── */
.rec-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.rec-toolbar__search {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
}

.rec-toolbar__search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nnuh-ink-faint);
    pointer-events: none;
}

.rec-toolbar__search .form-control {
    height: 44px;
    padding-inline-start: 36px;
    border-radius: 8px;
    border-color: #dfe5ec;
    background: var(--nnuh-surface);
    font-size: .9rem;
}

.rec-toolbar__count {
    margin: 0;
    font-size: .82rem;
    color: var(--nnuh-body);
    font-variant-numeric: tabular-nums;
}

/* ── Desktop: one row per record ────────────────────────────── */
@media (min-width: 768px) {
    .rec-list .rec-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 24px;
        padding: 16px 20px;
    }

    /* Details read as one line of chips rather than a stack of rows. */
    .rec-list .rec-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 20px;
        margin-bottom: 0;
    }

    .rec-list .rec-card__top {
        margin-bottom: 6px;
    }

    /* The date belongs beside the title on a phone; on a wide row it
       reads better inline with the rest of the detail. */
    .rec-list .rec-card__top {
        align-items: baseline;
        justify-content: flex-start;
        gap: 14px;
    }

    .rec-list .rec-card__actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .rec-list .rec-card__actions > .btn {
        flex: 0 0 auto;
    }

    .rec-list .rec-card__extra,
    .rec-list .rec-card__minor {
        grid-column: 1 / -1;
        margin-top: 12px;
    }

    /* Primary actions sit together on one line, as on radiology. */
    .rec-list .rec-card__actions {
        align-self: center;
    }
}

/* Nothing matched the text filter. */
.rec-nomatch {
    margin-top: 12px;
}

/* ── Sidebar identity block ─────────────────────────────────── */
/* Mirrors .pg-hero on the dashboard so the rail and the page read as one
   system: same navy name, same teal ID chip, same rounded surface. */
.side-id {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    margin-bottom: 16px;
    background: var(--nnuh-surface-sunken);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
}

.side-id__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--nnuh-teal-rgb), .14);
    color: var(--nnuh-teal-btn);
    font-size: 1.15rem;
}

.side-id__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.side-id__name {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nnuh-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-id__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--nnuh-teal-btn);
}

.side-id__meta span[dir="ltr"] {
    unicode-bidi: isolate;
}

/* ── Site footer ────────────────────────────────────────────── */
.site-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .78rem;
    color: var(--nnuh-body);
}

.site-foot__brand {
    font-weight: 600;
    color: var(--nnuh-navy);
}

.site-foot__brand:hover {
    color: var(--nnuh-link-hover);
}

.site-foot__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.site-foot__year {
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

/*--------------------------------------------------------------
# Medical-record request details
# Was two half-width cards stacked down the right of the page: status as
# the sixth row of the first, the files at the bottom of the second, and
# the other half of the screen empty. Now: status first, the files beside
# what was asked for, and on a phone status -> files -> request.
#
# Palette by role: navy text, the status box tinted teal / navy / magenta
# by state, magenta otherwise only for counts and delete.
--------------------------------------------------------------*/
.mr-status {
    --mr-accent: var(--nnuh-navy);
    --mr-accent-rgb: var(--nnuh-navy-rgb);
    padding: 20px 22px;
    margin-bottom: 18px;
    background: rgba(var(--mr-accent-rgb), .05);
    border: 1px solid rgba(var(--mr-accent-rgb), .16);
    border-inline-start: 4px solid var(--mr-accent);
    border-radius: var(--nnuh-radius);
}

.mr-status--approved {
    --mr-accent: var(--nnuh-teal-btn);
    --mr-accent-rgb: var(--nnuh-teal-btn-rgb);
}

.mr-status--rejected {
    --mr-accent: var(--nnuh-magenta);
    --mr-accent-rgb: var(--nnuh-magenta-rgb);
}

.mr-status__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mr-status__serial {
    margin: 0 0 4px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--nnuh-ink-muted);
    font-variant-numeric: tabular-nums;
}

.mr-status__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nnuh-navy);
}

.mr-status__patient {
    margin: 8px 0 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--nnuh-navy);
}

.mr-status__dot {
    margin: 0 4px;
    color: var(--nnuh-ink-faint);
}

.mr-status__lead {
    margin: 8px 0 0;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--nnuh-body);
}

.mr-status__reason {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--nnuh-surface);
    border-radius: var(--nnuh-radius-sm);
    border: 1px solid rgba(var(--nnuh-magenta-rgb), .2);
    font-size: .92rem;
    line-height: 1.7;
    color: var(--nnuh-navy);
}

.mr-status__reason p {
    margin: 0;
}

.mr-status__reason .mr-status__reason-label {
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--nnuh-magenta);
}

/* Request / visit / reply dates on one line, one format. */
.mr-status__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 14px 0 0;
}

.mr-status__meta div {
    display: flex;
    gap: 6px;
    font-size: .84rem;
}

.mr-status__meta dt {
    font-weight: 400;
    color: var(--nnuh-body);
}

.mr-status__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--nnuh-navy);
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

.mr-status__actions {
    margin-top: 16px;
}

.mr-status__actions .btn {
    min-height: var(--nnuh-tap);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 18px;
}

.mr-status__minor {
    margin-top: 14px;
    border-top-color: rgba(var(--mr-accent-rgb), .16);
}

/* Pending: where the request is, in three steps. */
.mr-steps {
    display: flex;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.mr-steps li {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    font-size: .78rem;
    text-align: center;
    color: var(--nnuh-ink-faint);
}

/* The line joining each step to the one before it. */
.mr-steps li + li::before {
    content: "";
    position: absolute;
    top: 11px;
    inset-inline-end: 50%;
    width: calc(100% + 6px);
    height: 2px;
    background: var(--nnuh-hairline-strong);
    z-index: 0;
}

.mr-steps li.is-current::before {
    background: var(--nnuh-navy);
}

.mr-steps__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--nnuh-surface);
    border: 2px solid var(--nnuh-hairline-strong);
    color: #fff;
    font-size: .9rem;
}

.mr-steps li.is-done,
.mr-steps li.is-current {
    color: var(--nnuh-navy);
    font-weight: 600;
}

.mr-steps li.is-done .mr-steps__dot {
    background: var(--nnuh-navy);
    border-color: var(--nnuh-navy);
}

.mr-steps li.is-current .mr-steps__dot {
    border-color: var(--nnuh-navy);
    box-shadow: inset 0 0 0 4px var(--nnuh-surface), inset 0 0 0 12px var(--nnuh-navy);
}

/* ── Files and request, side by side when there are files ───── */
.mr-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width: 992px) {
    .mr-grid--split {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }
}

.mr-card {
    padding: 18px 20px;
    background: var(--nnuh-surface);
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius);
}

/* A plain heading, not a solid teal bar. */
.mr-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mr-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nnuh-navy);
}

.mr-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(var(--nnuh-magenta-rgb), .1);
    color: var(--nnuh-magenta);
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mr-files {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole row is the link, so it is an easy target on a phone. */
.mr-file {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--nnuh-hairline);
    border-radius: var(--nnuh-radius-sm);
    color: var(--nnuh-navy);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.mr-file:hover,
.mr-file:focus-visible {
    border-color: rgba(var(--nnuh-teal-rgb), .7);
    background: rgba(var(--nnuh-teal-rgb), .06);
    color: var(--nnuh-navy);
}

.mr-file__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nnuh-radius-sm);
    font-size: 1.25rem;
}

.mr-file__icon.is-pdf {
    background: rgba(var(--nnuh-navy-rgb), .07);
    color: var(--nnuh-navy);
}

.mr-file__icon.is-image {
    background: rgba(var(--nnuh-teal-rgb), .14);
    color: var(--nnuh-teal-btn);
}

.mr-file__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mr-file__name {
    font-size: .92rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mr-file__size {
    font-size: .76rem;
    color: var(--nnuh-body);
}

.mr-file__open {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--nnuh-teal-btn);
}

.mr-note {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--nnuh-surface-sunken);
    border-radius: var(--nnuh-radius-sm);
    font-size: .9rem;
    line-height: 1.7;
    color: var(--nnuh-navy);
}

.mr-note__label {
    margin: 0 0 4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--nnuh-ink-muted);
}

.mr-hint {
    display: flex;
    gap: 6px;
    margin: 12px 0 0;
    font-size: .76rem;
    line-height: 1.6;
    color: var(--nnuh-ink-muted);
}

/* ── What was asked for ─────────────────────────────────────── */
.mr-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 32px;
    margin: 0;
}

/* Full width (no files yet): the text on one side and the ID image beside
   it, rather than one narrow column with half the card empty. Beside the
   files the card is narrow, so it stays one field per row. */
@media (min-width: 768px) {
    .mr-grid--single .mr-fields {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mr-grid--single .mr-field--media {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

.mr-field dt {
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 400;
    color: var(--nnuh-body);
}

.mr-field dd {
    margin: 0;
    font-size: .92rem;
    font-weight: 500;
    color: var(--nnuh-navy);
}

.mr-field__text {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.mr-chip {
    display: inline-block;
    margin-block-end: 4px;
    margin-inline-end: 4px;
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(var(--nnuh-navy-rgb), .06);
    font-size: .82rem;
    font-weight: 600;
    color: var(--nnuh-navy);
}

.mr-thumb {
    display: inline-block;
    border-radius: var(--nnuh-radius-sm);
    overflow: hidden;
    border: 1px solid var(--nnuh-hairline);
}

.mr-thumb img {
    display: block;
    width: 160px;
    max-width: 100%;
    height: 100px;
    object-fit: cover;
}

.mr-link {
    font-weight: 600;
}

.mr-back {
    margin: 18px 0 0;
    font-size: .88rem;
}

.mr-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mr-status {
        padding: 16px;
    }

    .mr-status__title {
        font-size: 1.12rem;
    }

    .mr-card {
        padding: 16px;
    }

    /* On a phone the row itself says it opens; the word only crowds the name. */
    .mr-file__open {
        font-size: 0;
        gap: 0;
    }

    .mr-file__open i {
        font-size: 1rem;
    }
}

/* ── MR staff reply page ────────────────────────────────────── */
/* The request on one side, the reply beside it, read in that order. */
@media (min-width: 992px) {
    .mr-grid--reply {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    }
}

.mr-wait--late dt,
.mr-wait--late dd {
    color: var(--nnuh-magenta);
}

/* Days waiting, in the staff list of new requests. */
.mr-wait {
    display: inline-block;
    min-width: 32px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(var(--nnuh-navy-rgb), .06);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--nnuh-navy);
}

.mr-wait.is-late {
    background: rgba(var(--nnuh-magenta-rgb), .1);
    color: var(--nnuh-magenta);
}

.mr-thumb--large img {
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    background: var(--nnuh-surface-sunken);
}

.mr-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--nnuh-navy);
}

.mr-help {
    margin: 6px 0 0;
    font-size: .76rem;
    color: var(--nnuh-ink-muted);
}

.mr-reply > * + * {
    margin-top: 18px;
}

.mr-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.mr-choice {
    --choice: var(--nnuh-navy);
    --choice-rgb: var(--nnuh-navy-rgb);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--nnuh-tap);
    padding: 10px 12px;
    border: 1px solid var(--nnuh-hairline-strong);
    border-radius: var(--nnuh-radius-sm);
    font-size: .86rem;
    color: var(--nnuh-navy);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.mr-choice--approved {
    --choice: var(--nnuh-teal-btn);
    --choice-rgb: var(--nnuh-teal-btn-rgb);
}

.mr-choice--rejected {
    --choice: var(--nnuh-magenta);
    --choice-rgb: var(--nnuh-magenta-rgb);
}

.mr-choice input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--choice);
}

.mr-choice i {
    font-size: 1.05rem;
    color: var(--choice);
}

.mr-choice strong {
    font-weight: 600;
}

.mr-choice:hover {
    border-color: rgba(var(--choice-rgb), .5);
}

.mr-choice:has(input:checked) {
    border-color: var(--choice);
    background: rgba(var(--choice-rgb), .07);
    box-shadow: inset 0 0 0 1px var(--choice);
}

.mr-choice:has(input:focus-visible) {
    outline: 2px solid var(--choice);
    outline-offset: 2px;
}

/* Files already sent, and files picked: same rows, not links. */
.mr-file--static {
    min-height: 56px;
}

.mr-file--static:hover {
    border-color: var(--nnuh-hairline);
    background: none;
}

.mr-file--static .mr-file__name {
    color: var(--nnuh-navy);
    text-decoration: none;
}

.mr-file--static a.mr-file__name:hover {
    color: var(--nnuh-link-hover);
}

.mr-files--existing {
    margin-bottom: 0;
}

.mr-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--nnuh-magenta);
    cursor: pointer;
}

.mr-remove input {
    margin: 0;
    accent-color: var(--nnuh-magenta);
}

/* A file ticked for removal reads as going away. */
.mr-file--static:has(.js-remove-file:checked) {
    background: rgba(var(--nnuh-magenta-rgb), .05);
    border-color: rgba(var(--nnuh-magenta-rgb), .3);
}

.mr-file--static:has(.js-remove-file:checked) .mr-file__text {
    opacity: .55;
    text-decoration: line-through;
}

.mr-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 22px 16px;
    border: 2px dashed var(--nnuh-hairline-strong);
    border-radius: var(--nnuh-radius-sm);
    background: var(--nnuh-surface-sunken);
    text-align: center;
    color: var(--nnuh-navy);
    transition: border-color .15s, background-color .15s;
}

.mr-drop i {
    font-size: 1.7rem;
    color: var(--nnuh-teal-btn);
}

.mr-drop strong {
    font-size: .9rem;
    font-weight: 600;
}

.mr-drop span {
    font-size: .76rem;
    color: var(--nnuh-ink-muted);
}

/* The real input covers the zone: a click opens the picker, a drop lands on it. */
.mr-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mr-drop:hover,
.mr-drop.is-over,
.mr-drop:focus-within {
    border-color: var(--nnuh-teal);
    background: rgba(var(--nnuh-teal-rgb), .07);
}

.mr-picked {
    margin-top: 12px;
}

.mr-file.is-invalid {
    border-color: rgba(var(--nnuh-magenta-rgb), .45);
    background: rgba(var(--nnuh-magenta-rgb), .04);
}

.mr-unpick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--nnuh-ink-muted);
}

.mr-unpick:hover {
    background: rgba(var(--nnuh-magenta-rgb), .08);
    color: var(--nnuh-magenta);
}

.mr-submit {
    min-height: var(--nnuh-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 22px;
}

@media (max-width: 767.98px) {
    .mr-choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-submit {
        width: 100%;
    }
}