/**
* 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);
}

.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;
}