/* ======================================================
   DXIORA AI - CLEAN FINAL STYLE.CSS
   Replace the full old style.css with this file.
   Goal: compact mobile UI, 2-column KPI dashboards, fewer conflicts.
====================================================== */

:root{
    --bg:#eef3fb;
    --card:#ffffff;
    --ink:#122033;
    --muted:#6d7a8a;
    --brand:#2454ff;
    --brand-dark:#1737b8;
    --brand-soft:#eaf0ff;
    --brand2:#00b894;
    --danger:#ff4d4f;
    --warn:#f7b731;
    --line:#dbe3ef;
    --sidebar:#08142a;
    --shadow:0 10px 26px rgba(15,23,42,.07);
    --shadow-soft:0 4px 14px rgba(15,23,42,.05);
    --radius:18px;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.35;
}

a{
    color:inherit;
}

img{
    max-width:100%;
    height:auto;
}

pre{
    white-space:pre-wrap;
    word-break:break-word;
}

/* ======================================================
   LAYOUT
====================================================== */

.shell{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:270px;
    background:linear-gradient(180deg,#08142a,#0f1f3d);
    color:white;
    padding:24px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:1000;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:10px;
}

.main{
    margin-left:270px;
    width:calc(100% - 270px);
    min-height:100vh;
    padding:28px;
    overflow-x:hidden;
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:28px;
}

.logo{
    width:48px;
    height:48px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--brand),#7c3aed);
    display:grid;
    place-items:center;
    font-weight:900;
    box-shadow:0 10px 24px rgba(36,84,255,.35);
    flex:0 0 auto;
}

.brand b{
    font-size:16px;
    letter-spacing:.3px;
}

.brand span,
.profile span{
    display:block;
    color:#94a3b8;
    font-size:12px;
}

nav a{
    display:block;
    color:#dbeafe;
    text-decoration:none;
    padding:12px 14px;
    border-radius:12px;
    margin:6px 0;
    font-size:14px;
    transition:.2s ease;
}

nav a:hover{
    background:rgba(255,255,255,.11);
    transform:translateX(2px);
}

.disclaimer{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#93a4bd;
    font-size:12px;
    line-height:1.5;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:22px;
    gap:18px;
}

.topbar h1{
    margin:0;
    font-size:30px;
    line-height:1.15;
    letter-spacing:-.3px;
}

.topbar p{
    margin:7px 0 0;
    color:var(--muted);
    max-width:900px;
}

.profile,
.user-card,
.profile-card{
    background:#fff;
    border:1px solid var(--line);
    padding:12px 18px;
    border-radius:16px;
    white-space:nowrap;
    box-shadow:var(--shadow-soft);
}

/* ======================================================
   GRID / CARDS
====================================================== */

.grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
}

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    padding:20px;
    box-shadow:var(--shadow);
    word-wrap:break-word;
    overflow-wrap:break-word;
    overflow:hidden;
}

.card h2,
.card h3{
    margin-top:0;
}

.span2{grid-column:span 2;}
.span3{grid-column:span 3;}
.span4{grid-column:span 4;}
.span6{grid-column:span 6;}
.span8{grid-column:span 8;}
.span12{grid-column:span 12;}

.metric{
    font-size:34px;
    font-weight:900;
    margin-top:6px;
    letter-spacing:-.5px;
    line-height:1;
}

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

/* ======================================================
   BUTTONS / BADGES
====================================================== */

.btn{
    display:inline-block;
    border:0;
    background:var(--brand);
    color:white;
    text-decoration:none;
    padding:11px 16px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    line-height:1.2;
    transition:.2s ease;
    text-align:center;
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(36,84,255,.2);
}

.btn.secondary{
    background:#111827;
}

.btn.green{
    background:var(--brand2);
}

.btn.light{
    background:var(--brand-soft);
    color:#17317a;
}

.badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}

.high,
.badge-high,
.risk-high{
    background:#fee2e2 !important;
    color:#991b1b !important;
    border-color:#fca5a5 !important;
}

.medium,
.badge-medium,
.risk-medium{
    background:#fef3c7 !important;
    color:#92400e !important;
    border-color:#fde047 !important;
}

.low,
.badge-low,
.risk-low{
    background:#dcfce7 !important;
    color:#166534 !important;
    border-color:#86efac !important;
}

/* ======================================================
   FORMS
====================================================== */

.form{
    display:grid;
    gap:14px;
}

.form label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#334155;
    margin:8px 0 5px;
}

.form input,
.form select,
.form textarea,
input,
select,
textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    font:inherit;
    background:#fff;
}

input[type="date"]{
    min-height:48px;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(36,84,255,.12);
}

.form textarea,
textarea{
    min-height:90px;
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.alert{
    padding:12px;
    border-radius:12px;
    background:#fff1f2;
    color:#be123c;
    margin-bottom:12px;
}

.alert.success{
    background:#ecfdf5;
    color:#166534;
}

/* ======================================================
   TABLES
====================================================== */

.table,
table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.table th,
.table td,
table th,
table td{
    padding:12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
}

.table th,
table th{
    color:#475569;
    background:#f8fafc;
    font-weight:800;
}

.table tr:hover td{
    background:#fbfdff;
}

/* ======================================================
   COMPONENTS
====================================================== */

.ai-box{
    background:linear-gradient(135deg,#eef2ff,#ecfeff);
    border:1px solid #c7d2fe;
    border-radius:18px;
    padding:16px;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

.timeline{
    border-left:3px solid #c7d2fe;
    padding-left:16px;
}

.timeline div{
    margin-bottom:16px;
}

.login{
    display:grid;
    place-items:center;
    min-height:100vh;
    background:linear-gradient(135deg,#08142a,#2454ff);
}

.login-card{
    width:min(430px,92vw);
    background:white;
    border-radius:24px;
    padding:28px;
    box-shadow:0 20px 60px rgba(0,0,0,.2);
}

.gov-card{
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.gov-card p{
    min-height:72px;
}

.patient-mini,
.search-card,
.latest-bmi,
.tool-result{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px;
    margin-bottom:14px;
}

.patient-mini{
    background:#f8fafc;
}

.tool-result{
    background:linear-gradient(135deg,#eef2ff,#ecfeff);
    border-color:#c7d2fe;
}

.tool-metric{
    font-size:48px;
    font-weight:900;
    line-height:1;
    margin:8px 0;
}

.tool-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.tools-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:15px;
}

.tool-card,
.tool-tile{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px;
    text-align:center;
}

.tool-card h4,
.tool-tile h4{
    margin:0 0 8px;
}

.tool-card p,
.tool-tile p{
    font-size:13px;
    color:#64748b;
    margin-bottom:10px;
}

.patient-counter{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    background:linear-gradient(135deg,#eef2ff,#ecfeff);
    border:1px solid #c7d2fe;
    border-radius:16px;
    padding:10px;
    margin-bottom:14px;
    font-weight:900;
}

.patient-counter span{
    background:#fff;
    border:1px solid #dbeafe;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
}

.patient-section-title{
    margin:12px 0 8px;
    font-size:21px;
}

.compact-note{
    font-size:13px;
    color:#64748b;
    margin:0 0 10px;
}

.compact-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:12px;
    margin-bottom:10px;
}

.check-grid{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.checkbox-line{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 10px;
    cursor:pointer;
    min-height:34px;
    font-size:12px;
    transition:.2s ease;
    max-width:100%;
}

.checkbox-line:hover{
    background:#eef2ff;
    border-color:#c7d2fe;
}

.checkbox-line input{
    width:14px;
    height:14px;
    flex:0 0 auto;
}

.checkbox-line.no-known{
    background:#ecfdf5;
    border-color:#bbf7d0;
    color:#166534;
    font-weight:800;
}

.checkbox-line.disabled-chip{
    opacity:.40;
    filter:grayscale(1);
    pointer-events:none;
}

.other-field{
    margin-top:10px;
}

.save-sticky{
    margin-top:10px;
}

.user-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.user-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.user-grid label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    margin-bottom:4px;
}

.user-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
    flex-wrap:wrap;
}

footer{
    width:100%;
    margin-top:24px;
    padding:14px 20px;
    text-align:right;
    font-size:12px;
    color:#94a3b8;
    border-top:1px solid #e2e8f0;
    background:#fff;
    border-radius:14px;
}

footer a{
    color:#3155ff;
    text-decoration:none;
    font-weight:700;
}

/* ======================================================
   TABLET
====================================================== */

@media(max-width:1024px){

    .shell{
        display:block;
    }

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
        min-height:auto;
        max-height:none;
        padding:14px 16px;
        overflow:hidden;
        border-radius:0 0 22px 22px;
    }

    .brand{
        flex-direction:row;
        justify-content:center;
        align-items:center;
        margin-bottom:12px;
        text-align:left;
    }

    .logo{
        width:42px;
        height:42px;
        border-radius:13px;
        margin-bottom:0;
    }

    .brand b{
        font-size:18px;
    }

    .brand span{
        font-size:12px;
    }

    .sidebar nav{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .sidebar nav a{
        margin:0;
        padding:9px 8px;
        font-size:13px;
        text-align:center;
        background:rgba(255,255,255,.08);
    }

    .disclaimer{
        display:none;
    }

    .main{
        margin-left:0;
        width:100%;
        padding:18px;
    }

    .span3,
    .span4{
        grid-column:span 6;
    }

    .span6,
    .span8{
        grid-column:span 12;
    }

    .tools-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .user-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ======================================================
   MOBILE - COMPACT, 2-COLUMN KPI DASHBOARDS
====================================================== */

@media(max-width:768px){

    body{
        font-size:13px;
        line-height:1.22;
    }

    .main{
        padding:10px;
    }

    .topbar{
        display:block;
        margin-bottom:10px;
    }

    .topbar h1{
        font-size:24px;
        line-height:1.05;
        margin:0 0 4px;
    }

    .topbar p{
        font-size:13px;
        line-height:1.25;
        margin:4px 0 8px;
    }

    .profile,
    .user-card,
    .profile-card{
        margin-top:8px;
        padding:8px 12px;
        border-radius:14px;
        white-space:normal;
    }

    .profile b,
    .user-card b,
    .profile-card b{
        font-size:15px;
    }

    .profile span,
    .user-card span,
    .profile-card span{
        font-size:11px;
    }

    /* Keep all grids as real CSS grids on mobile */
    .grid,
    .dashboard-grid,
    .stats-grid,
    .overview-grid,
    .kpi-grid,
    .population-dashboard,
    .registry-dashboard{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    /* KPI cards: 2 columns */
    .grid > .card.span2,
    .grid > .card.span3,
    .grid > .card.metric-card,
    .grid > .card.exec-metric,
    .grid > .card.command-metric,
    .grid > .card.clinical-command-metric,
    .grid > .card.cc-metric,
    .grid > .card.population-metric,
    .grid > .card.registry-metric,
    .dashboard-grid > .card,
    .stats-grid > .card,
    .overview-grid > .card,
    .kpi-grid > .card{
        grid-column:span 1 !important;
        min-height:68px !important;
        padding:8px !important;
        margin:0 !important;
        border-radius:13px !important;
    }

    /* Full-width content cards */
    .grid > .card.span4,
    .grid > .card.span6,
    .grid > .card.span8,
    .grid > .card.span12,
    .grid > .card.gov-card,
    .grid > .card:not(.span2):not(.span3):not(.metric-card):not(.exec-metric):not(.command-metric):not(.clinical-command-metric):not(.cc-metric):not(.population-metric):not(.registry-metric){
        grid-column:1 / -1 !important;
    }

    .card{
        padding:9px !important;
        margin-bottom:8px;
        border-radius:13px;
        box-shadow:0 2px 8px rgba(15,23,42,.04);
    }

    .card h2{
        font-size:17px;
        margin:0 0 6px;
        line-height:1.12;
    }

    .card h3{
        font-size:15px;
        margin:0 0 5px;
        line-height:1.12;
    }

    .muted,
    .card .muted{
        font-size:11px !important;
        line-height:1.15;
        margin-bottom:2px;
    }

    .metric{
        font-size:24px !important;
        line-height:1;
        margin:3px 0 0;
    }

    .ai-box{
        padding:9px;
        border-radius:12px;
        font-size:12px;
        line-height:1.3;
    }

    .ai-box p{
        margin:4px 0;
    }

    .split,
    .tool-grid,
    .tools-grid,
    .user-grid{
        grid-template-columns:1fr !important;
        gap:6px !important;
    }

    .form{
        gap:8px;
    }

    .form label,
    label{
        font-size:12px;
        margin:3px 0;
    }

    .form input,
    .form select,
    .form textarea,
    input,
    select,
    textarea{
        min-height:38px !important;
        padding:7px 10px !important;
        font-size:13px !important;
        margin-bottom:5px !important;
        border-radius:10px !important;
    }

    .form textarea,
    textarea{
        min-height:58px !important;
    }

    .btn{
        width:100%;
        min-height:38px !important;
        padding:7px 10px !important;
        font-size:13px !important;
        border-radius:10px !important;
        margin-bottom:4px;
    }

    .patient-mini,
    .search-card,
    .latest-bmi,
    .tool-result{
        padding:8px !important;
        border-radius:12px !important;
        margin-bottom:8px !important;
    }

    .patient-mini p,
    .search-card p{
        font-size:12px;
        margin:2px 0;
    }

    .tool-metric{
        font-size:30px !important;
        margin:5px 0 !important;
    }

    .patient-counter{
        padding:6px !important;
        gap:4px !important;
        margin-bottom:8px !important;
    }

    .patient-counter span{
        font-size:10px !important;
        padding:4px 7px !important;
    }

    .compact-card{
        padding:8px !important;
        margin-bottom:8px !important;
        border-radius:12px !important;
    }

    .patient-section-title{
        font-size:16px !important;
        margin:6px 0 5px !important;
    }

    .compact-note{
        display:none !important;
    }

    .check-grid{
        gap:4px !important;
    }

    .checkbox-line{
        min-height:28px !important;
        padding:5px 7px !important;
        font-size:10.5px !important;
    }

    .checkbox-line input{
        width:12px !important;
        height:12px !important;
    }

    .gov-card{
        min-height:auto !important;
    }

    .gov-card p{
        min-height:auto !important;
        font-size:12px !important;
        line-height:1.25;
        margin-bottom:8px;
    }

    /* Tables: compact horizontal scroll by default, not giant card blocks */
    .table,
    table{
        display:block;
        width:100%;
        overflow-x:auto;
        white-space:nowrap;
        font-size:12px;
        border-radius:10px;
    }

    .table th,
    .table td,
    table th,
    table td{
        padding:7px !important;
    }

    /* Use mobile card tables only when PHP has these classes */
    .command-table,
    .command-table thead,
    .command-table tbody,
    .command-table tr,
    .command-table td,
    .mobile-card-table,
    .mobile-card-table thead,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td{
        display:block !important;
        width:100% !important;
        white-space:normal !important;
    }

    .command-table thead,
    .mobile-card-table thead{
        display:none !important;
    }

    .command-table tr,
    .mobile-card-table tr{
        border:1px solid var(--line) !important;
        border-radius:12px !important;
        padding:8px !important;
        margin-bottom:8px !important;
        background:#fff !important;
    }

    .command-table td,
    .mobile-card-table td{
        border:0 !important;
        padding:3px 0 !important;
        font-size:12px !important;
        line-height:1.25 !important;
    }

    .command-table td::before,
    .mobile-card-table td::before{
        content:attr(data-label);
        display:block;
        font-size:10px;
        font-weight:900;
        color:#64748b;
        margin-bottom:2px;
    }

    .sidebar{
        padding:10px !important;
    }

    .brand{
        justify-content:center;
        margin-bottom:8px;
    }

    .logo{
        width:38px;
        height:38px;
        border-radius:12px;
    }

    .brand b{
        font-size:17px;
    }

    .brand span{
        font-size:10px;
    }

    .sidebar nav{
        grid-template-columns:repeat(3,1fr);
        gap:6px;
    }

    .sidebar nav a{
        padding:7px 5px;
        font-size:11px;
        border-radius:9px;
    }

    footer{
        text-align:center;
        margin-top:10px;
        padding:8px;
        font-size:10px;
    }

    .save-sticky{
        position:sticky;
        bottom:6px;
        z-index:999;
    }
}

/* ======================================================
   SMALL MOBILE
====================================================== */

@media(max-width:480px){

    .main{
        padding:8px;
    }

    .topbar h1{
        font-size:22px;
    }

    .topbar p{
        font-size:12px;
    }

    .grid,
    .dashboard-grid,
    .stats-grid,
    .overview-grid,
    .kpi-grid,
    .population-dashboard,
    .registry-dashboard{
        gap:7px !important;
    }

    .grid > .card.span2,
    .grid > .card.span3,
    .grid > .card.metric-card,
    .grid > .card.exec-metric,
    .grid > .card.command-metric,
    .grid > .card.clinical-command-metric,
    .grid > .card.cc-metric,
    .grid > .card.population-metric,
    .grid > .card.registry-metric,
    .dashboard-grid > .card,
    .stats-grid > .card,
    .overview-grid > .card,
    .kpi-grid > .card{
        min-height:62px !important;
        padding:7px !important;
    }

    .metric{
        font-size:22px !important;
    }

    .card .muted,
    .muted{
        font-size:10.5px !important;
    }

    .sidebar nav{
        grid-template-columns:repeat(2,1fr);
    }

    .profile{
        padding:7px 10px;
    }
}
/* ==========================================
   RECENT CLINICAL ACTIVITY MOBILE FIX
   ========================================== */

@media(max-width:768px){

    .table,
    table{
        display:block !important;
        width:100% !important;
    }

    .table thead,
    table thead{
        display:none !important;
    }

    .table tbody,
    .table tr,
    .table td,
    table tbody,
    table tr,
    table td{
        display:block !important;
        width:100% !important;
    }

    .table tr,
    table tr{
        background:#fff;
        border:1px solid #dbe3ef;
        border-radius:14px;
        padding:10px;
        margin-bottom:10px;
        box-shadow:0 3px 10px rgba(15,23,42,.05);
    }

    .table td,
    table td{
        border:none !important;
        padding:4px 0 !important;
        white-space:normal !important;
        word-break:break-word !important;
        overflow:visible !important;
        text-align:left !important;
        font-size:13px !important;
        line-height:1.35 !important;
    }

    /* Make date smaller */

    .table td:first-child,
    table td:first-child{
        font-size:11px !important;
        color:#64748b;
        font-weight:600;
    }

    /* Patient name */

    .table td:nth-child(2),
    table td:nth-child(2){
        font-size:15px !important;
        font-weight:700;
        color:#122033;
        margin-top:3px;
    }

    /* Symptoms */

    .table td:nth-child(3),
    table td:nth-child(3){
        margin-top:5px;
        color:#334155;
    }
}
/* ==================================================
   ADD PATIENT PAGE CLEAN COMPACT UI
   Target: /cdss/doctor/add_patient.php
================================================== */

.add-patient-shell{
    max-width:980px !important;
    padding:16px !important;
    border-radius:18px !important;
}

/* reduce giant section cards */
.add-patient-shell .compact-card{
    padding:14px !important;
    margin-bottom:12px !important;
    border-radius:14px !important;
    box-shadow:none !important;
    border:1px solid #e2e8f0 !important;
}

/* smaller section headings */
.add-patient-shell .patient-section-title{
    font-size:20px !important;
    line-height:1.15 !important;
    margin:0 0 12px !important;
}

/* compact form labels */
.add-patient-shell label{
    font-size:13px !important;
    margin:4px 0 5px !important;
    font-weight:700 !important;
}

/* compact fields */
.add-patient-shell input,
.add-patient-shell select,
.add-patient-shell textarea{
    min-height:42px !important;
    padding:8px 12px !important;
    font-size:14px !important;
    border-radius:10px !important;
}

/* split fields stay compact */
.add-patient-shell .split{
    gap:12px !important;
}

/* counters as compact pills */
.add-patient-shell .patient-counter{
    padding:8px !important;
    margin-bottom:12px !important;
    border-radius:14px !important;
    gap:8px !important;
}

.add-patient-shell .patient-counter span{
    padding:5px 10px !important;
    font-size:12px !important;
    border-radius:999px !important;
}

/* reduce note height */
.add-patient-shell .compact-note{
    font-size:12px !important;
    margin:0 0 8px !important;
    line-height:1.25 !important;
}

/* chips more professional and less bulky */
.add-patient-shell .check-grid{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    align-items:flex-start !important;
}

.add-patient-shell .checkbox-line{
    min-height:30px !important;
    padding:5px 9px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    border-radius:999px !important;
    gap:6px !important;
    box-shadow:none !important;
}

/* smaller checkbox squares */
.add-patient-shell .checkbox-line input[type="checkbox"]{
    width:13px !important;
    height:13px !important;
    min-height:13px !important;
    margin:0 !important;
}

/* no known chips slightly highlighted */
.add-patient-shell .checkbox-line.no-known{
    background:#ecfdf5 !important;
    border-color:#86efac !important;
    color:#166534 !important;
    font-weight:800 !important;
}

/* other field */
.add-patient-shell .other-field{
    margin-top:8px !important;
}

/* make save button compact */
.add-patient-shell .save-sticky{
    min-height:42px !important;
    margin-top:8px !important;
    border-radius:12px !important;
}

/* desktop: reduce page width and whitespace */
@media(min-width:769px){

    .add-patient-shell{
        margin-top:0 !important;
    }

    .add-patient-shell .compact-card{
        padding:14px 16px !important;
    }

    .add-patient-shell .checkbox-line{
        max-width:none !important;
    }
}

/* mobile compact mode */
@media(max-width:768px){

    .add-patient-shell{
        padding:10px !important;
        border-radius:14px !important;
    }

    .add-patient-shell .compact-card{
        padding:10px !important;
        margin-bottom:8px !important;
        border-radius:12px !important;
    }

    .add-patient-shell .patient-section-title{
        font-size:17px !important;
        margin-bottom:8px !important;
    }

    .add-patient-shell .split{
        grid-template-columns:1fr !important;
        gap:6px !important;
    }

    .add-patient-shell label{
        font-size:12px !important;
        margin:3px 0 4px !important;
    }

    .add-patient-shell input,
    .add-patient-shell select,
    .add-patient-shell textarea{
        min-height:38px !important;
        padding:7px 10px !important;
        font-size:13px !important;
    }

    .add-patient-shell .patient-counter{
        gap:5px !important;
        padding:6px !important;
        margin-bottom:8px !important;
    }

    .add-patient-shell .patient-counter span{
        font-size:11px !important;
        padding:4px 7px !important;
    }

    .add-patient-shell .compact-note{
        display:none !important;
    }

    .add-patient-shell .check-grid{
        gap:5px !important;
    }

    .add-patient-shell .checkbox-line{
        min-height:28px !important;
        padding:4px 7px !important;
        font-size:11px !important;
        gap:5px !important;
    }

    .add-patient-shell .checkbox-line input[type="checkbox"]{
        width:12px !important;
        height:12px !important;
        min-height:12px !important;
    }

    .add-patient-shell .save-sticky{
        position:sticky !important;
        bottom:8px !important;
        z-index:50 !important;
        width:100% !important;
    }
}
/* ==================================================
   CLINICAL TOOLS PAGE COMPACT GRID FIX
   Target: /cdss/doctor/clinical_tools.php
================================================== */

/* Desktop/tablet: reduce white space */
.tools-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:14px !important;
}

.tool-card{
    min-height:190px !important;
    padding:16px !important;
    border-radius:16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    text-align:left !important;
}

.tool-card h2,
.tool-card h3,
.tool-card h4{
    font-size:22px !important;
    line-height:1.15 !important;
    margin:0 0 10px !important;
}

.tool-card p{
    font-size:14px !important;
    line-height:1.35 !important;
    margin:0 0 14px !important;
    color:#64748b !important;
}

.tool-card .btn,
.tool-card a.btn{
    width:max-content !important;
    min-height:38px !important;
    padding:9px 14px !important;
    font-size:14px !important;
    margin-top:auto !important;
}

/* Intro card compact */
.clinical-tools-hub,
.tools-intro,
.ai-box{
    padding:12px 14px !important;
    border-radius:14px !important;
}

/* Mobile: force 2 columns */
@media(max-width:768px){

    .tools-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
    }

    .tool-card{
        min-height:150px !important;
        padding:10px !important;
        border-radius:14px !important;
        margin:0 !important;
    }

    .tool-card h2,
    .tool-card h3,
    .tool-card h4{
        font-size:15px !important;
        line-height:1.15 !important;
        margin-bottom:6px !important;
    }

    .tool-card p{
        font-size:11px !important;
        line-height:1.25 !important;
        margin-bottom:8px !important;
        display:-webkit-box !important;
        -webkit-line-clamp:3 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .tool-card .btn,
    .tool-card a.btn{
        width:100% !important;
        min-height:32px !important;
        padding:7px 6px !important;
        font-size:11px !important;
        border-radius:9px !important;
        white-space:normal !important;
        text-align:center !important;
    }

    .card:has(.tools-grid){
        padding:10px !important;
    }

    .clinical-tools-hub,
    .tools-intro,
    .ai-box{
        padding:9px !important;
        font-size:12px !important;
        line-height:1.25 !important;
    }
}

/* Small phone: still 2 columns but tighter */
@media(max-width:480px){

    .tools-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:7px !important;
    }

    .tool-card{
        min-height:138px !important;
        padding:9px !important;
    }

    .tool-card h2,
    .tool-card h3,
    .tool-card h4{
        font-size:14px !important;
    }

    .tool-card p{
        font-size:10.5px !important;
        -webkit-line-clamp:3 !important;
    }

    .tool-card .btn,
    .tool-card a.btn{
        font-size:10.5px !important;
        min-height:30px !important;
    }
}

/* ======================================================
   DXIORA AI NODE - PREMIUM COMPACT UI V1
   Better-than-PHP polish layer. Functionality untouched.
====================================================== */
:root{
  --bg:#edf4ff;
  --bg2:#f8fbff;
  --card:#ffffff;
  --ink:#0f1b2d;
  --muted:#66758d;
  --brand:#2454ff;
  --brand2:#00b894;
  --violet:#7c3aed;
  --cyan:#06b6d4;
  --line:#dbe6f5;
  --sidebar:#061225;
  --sidebar2:#0f2143;
  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#10b981;
  --shadow:0 14px 38px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
  --radius:18px;
  --radius-sm:13px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  color:var(--ink)!important;
  background:
    radial-gradient(circle at top left,rgba(36,84,255,.12),transparent 34rem),
    radial-gradient(circle at top right,rgba(0,184,148,.10),transparent 28rem),
    linear-gradient(180deg,#f6faff 0%,#edf4ff 42%,#f7fbff 100%)!important;
  line-height:1.34;
  letter-spacing:-.01em;
}
a{text-decoration:none!important}
.shell{display:flex;min-height:100vh}
.sidebar{
  width:258px!important;
  padding:18px 16px!important;
  background:
    linear-gradient(180deg,rgba(6,18,37,.98),rgba(11,28,59,.98)),
    radial-gradient(circle at top left,rgba(36,84,255,.35),transparent 18rem)!important;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:16px 0 44px rgba(15,23,42,.18);
  overflow-y:auto;
}
.main{
  margin-left:258px!important;
  width:calc(100% - 258px)!important;
  padding:18px 22px!important;
}
.brand{
  margin-bottom:18px!important;
  padding:10px 10px 14px!important;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.logo{
  width:44px!important;height:44px!important;border-radius:15px!important;
  background:linear-gradient(135deg,var(--brand),var(--violet))!important;
  box-shadow:0 12px 28px rgba(36,84,255,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand b{font-size:16px;letter-spacing:.2px}.brand span{font-size:11px;color:#9fb0cc!important}
.nav{gap:5px!important}.nav a,.sidebar nav a{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:9px 11px!important;
  border-radius:12px!important;
  color:#dbeafe!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:780!important;
  transition:background .18s ease,transform .18s ease,color .18s ease,box-shadow .18s ease;
}
.nav a:before,.sidebar nav a:before{
  content:"";width:7px;height:7px;border-radius:99px;background:#5d6c84;box-shadow:0 0 0 3px rgba(255,255,255,.03);
}
.nav a:hover,.sidebar nav a:hover,.nav a.active,.sidebar nav a.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(36,84,255,.28),rgba(124,58,237,.18))!important;
  transform:translateX(2px);
  box-shadow:inset 3px 0 0 #5eead4;
}
.nav a:hover:before,.sidebar nav a:hover:before,.nav a.active:before{background:#5eead4}
.disclaimer{
  position:relative!important;
  bottom:auto!important;
  margin-top:18px!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.05);
  color:#b6c4da!important;
  font-size:11.5px!important;
}
.topbar,.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:14px!important;
}
.topbar h1,.page-head h1{font-size:27px!important;line-height:1.06!important;margin:0!important;letter-spacing:-.035em;color:#0c1830}
.topbar p,.page-head p{font-size:13px!important;margin:5px 0 0!important;color:var(--muted)!important;max-width:980px}
.profile,.user-card,.profile-card{
  min-width:158px;
  padding:10px 13px!important;
  border:1px solid rgba(219,230,245,.9)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft)!important;
}
.profile b,.user-card b,.profile-card b{font-size:13.5px}.profile span,.user-card span,.profile-card span{font-size:11px!important;color:#64748b!important}
.card,.public-card,.login-card,.audit-card,.account-card,.inner-card,.mini,.patient-mini,.search-card,.compact-card,.tool-card,.tool-tile,.doctor-card{
  border:1px solid rgba(219,230,245,.92)!important;
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(10px);
  border-radius:18px!important;
  box-shadow:var(--shadow-soft)!important;
}
.card{
  padding:15px!important;
  margin-bottom:13px!important;
  overflow:hidden;
}
.card:hover,.public-card:hover,.mini:hover,.tool-card:hover,.tool-tile:hover,.doctor-card:hover{
  box-shadow:0 18px 44px rgba(15,23,42,.10)!important;
}
.card h2{font-size:20px!important;line-height:1.12;margin:0 0 7px!important;letter-spacing:-.025em}
.card h3{font-size:16px!important;line-height:1.16;margin:0 0 7px!important}
.note,.muted,small{color:var(--muted)!important}.note{font-size:12.5px!important;margin:3px 0 8px!important}.card p{margin:7px 0}.cards,.four{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}.five{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}.six{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}.two,.two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.grid{gap:12px!important}
.stat{position:relative;min-height:102px!important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,251,255,.92))!important}
.stat:after{content:"";position:absolute;right:-16px;bottom:-18px;width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,rgba(36,84,255,.12),rgba(0,184,148,.08))}
.stat small{display:block;font-size:10px!important;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#64748b!important}.stat b,.metric{font-size:30px!important;line-height:1!important;letter-spacing:-.055em;color:#0b1c36;display:block}.stat span{font-size:12px!important;color:#738196!important}.info-banner,.ai-box,.safety-note,.rule.green,.rule.orange,.rule,.tool-result{
  border-radius:16px!important;
  border:1px solid rgba(188,210,255,.92)!important;
  background:linear-gradient(100deg,rgba(234,244,255,.95),rgba(236,255,253,.90))!important;
  box-shadow:var(--shadow-soft);
  padding:13px 15px!important;
}
.info-banner{margin-bottom:13px!important}.info-banner h2{font-size:20px!important}
.rule.orange{background:linear-gradient(100deg,#fff8ed,#fffdf5)!important;border-color:#fed7aa!important}.rule.green{background:linear-gradient(100deg,#ecfdf5,#f0fdfa)!important;border-color:#bbf7d0!important}
.btn,button,.login-card button{
  border:0!important;
  border-radius:12px!important;
  padding:9px 13px!important;
  min-height:38px;
  font-size:13px!important;
  font-weight:850!important;
  letter-spacing:-.01em;
  color:#fff!important;
  background:linear-gradient(135deg,var(--brand),var(--violet))!important;
  box-shadow:0 9px 18px rgba(36,84,255,.18)!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover,button:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 14px 28px rgba(36,84,255,.25)!important}
.btn.ghost,.btn.light,.btn.text,.btn.white{background:#eef4ff!important;color:#17317a!important;box-shadow:none!important}.green-btn,.btn.green,.btn.green-btn{background:linear-gradient(135deg,#10b981,#06b6d4)!important}.danger,.btn.danger{background:#fee2e2!important;color:#991b1b!important;box-shadow:none!important}.voice-btn{
  min-height:30px!important;padding:6px 10px!important;margin:5px 0 6px 7px!important;
  background:#eef2ff!important;color:#3526a8!important;box-shadow:none!important;border-radius:999px!important;font-size:12px!important;
}
.form label,label{font-size:12.8px!important;font-weight:800!important;color:#334155;margin:6px 0 4px!important}
.form input,.form select,.form textarea,.login-card input,.login-card select,input,select,textarea{
  min-height:40px!important;padding:9px 11px!important;border:1px solid #dbe6f5!important;border-radius:11px!important;background:#fff!important;font-size:13.5px!important;color:#102033!important;box-shadow:inset 0 1px 0 rgba(15,23,42,.02);
}
textarea,.form textarea{min-height:76px!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:var(--brand)!important;box-shadow:0 0 0 4px rgba(36,84,255,.10)!important}
.form-grid{gap:10px!important}.form-grid.four{grid-template-columns:repeat(4,1fr)!important}.form-grid.six{grid-template-columns:repeat(6,1fr)!important}.split{gap:10px!important}
table{font-size:13px!important;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)!important}th,td{padding:9px 10px!important;border-bottom:1px solid #e7edf7!important}th{font-size:11px!important;letter-spacing:.045em;text-transform:uppercase;background:#f7faff!important;color:#53637a!important}td{color:#24334a}tr:hover td{background:#fbfdff!important}.badge,.pill{
  border-radius:999px!important;padding:5px 9px!important;font-size:11px!important;font-weight:900!important;border:1px solid transparent;
}.badge{background:#eaf5ff!important;color:#075985!important}.badge.high,.high,.badge-high,.risk-high{background:#fee2e2!important;color:#991b1b!important;border-color:#fecaca!important}.badge.medium,.medium,.badge-medium,.risk-medium{background:#fef3c7!important;color:#92400e!important;border-color:#fde68a!important}.badge.low,.low,.badge-low,.risk-low{background:#dcfce7!important;color:#166534!important;border-color:#bbf7d0!important}.mini{padding:13px!important;border-radius:14px!important;background:#f8fbff!important}.audit-card,.account-card{padding:12px!important;border-radius:14px!important;background:#f8fbff!important}.bar{height:8px!important;background:#e6edf7!important}.bar i{background:linear-gradient(90deg,var(--brand),var(--cyan))!important}.bar i.high{background:linear-gradient(90deg,#fb7185,#ef4444)!important}.bar i.medium{background:linear-gradient(90deg,#fbbf24,#f59e0b)!important}.bar i.low{background:linear-gradient(90deg,#34d399,#10b981)!important}
.check-grid{display:flex!important;flex-wrap:wrap!important;gap:6px!important}.check-pill,.checkbox-line{min-height:31px!important;padding:6px 10px!important;border-radius:999px!important;background:#f8fbff!important;border:1px solid #dbe6f5!important;font-size:12px!important}.check-pill input,.checkbox-line input{width:13px!important;height:13px!important;min-height:13px!important}.no-known,.checkbox-line.no-known{background:#ecfdf5!important;border-color:#bbf7d0!important;color:#166534!important}
.json,pre{border-radius:14px!important;background:#07142b!important;color:#dbeafe!important;font-size:12.5px!important;line-height:1.45!important;padding:13px!important}.sticky-actions,.save-sticky{border-radius:16px!important;background:rgba(239,246,255,.82)!important;backdrop-filter:blur(12px);border:1px solid #dbeafe;box-shadow:var(--shadow-soft)}
/* Public / Login wow layer */
.public-page,.login-page{background:radial-gradient(circle at 18% 5%,rgba(36,84,255,.17),transparent 30rem),radial-gradient(circle at 88% 8%,rgba(0,184,148,.13),transparent 26rem),#eef4fb!important}.public-header,.login-top{background:linear-gradient(135deg,#061225,#0f2143 62%,#1737b8)!important;padding:18px 26px!important;border-bottom-left-radius:24px!important;border-bottom-right-radius:24px!important;box-shadow:0 20px 42px rgba(15,23,42,.16)}.public-wrap{max-width:1160px!important;margin:34px auto 24px!important}.hero-card h1,.about-hero h1{font-size:44px!important;line-height:1.02!important;letter-spacing:-.06em;margin:17px 0!important}.hero-card p,.about-hero p,.public-card p{font-size:16px!important;line-height:1.52!important;color:#5d6b83!important}.module-card{background:linear-gradient(160deg,#ecfeff,#eef4ff)!important}.module-card li{margin:8px 0}.audience-grid{gap:16px!important}.login-card{max-width:450px!important;margin:28px auto!important;padding:22px!important;box-shadow:0 24px 60px rgba(15,23,42,.14)!important}.login-card h2{font-size:28px!important;margin:0 0 12px!important}.demo-box{font-size:12.5px!important;border-radius:14px!important;background:#f8fbff!important;padding:12px!important}
/* OCR/result polish */
.ocr-preview,.processing-card{border-radius:18px!important;box-shadow:var(--shadow-soft)!important}.timeline{border-left:3px solid #c7d2fe!important}.timeline div{margin-bottom:10px!important}
@media(max-width:1180px){.five,.six{grid-template-columns:repeat(3,minmax(0,1fr))!important}.cards,.four{grid-template-columns:repeat(3,minmax(0,1fr))!important}.three-cols{grid-template-columns:1fr 1fr!important}}
@media(max-width:920px){.shell{display:block!important}.sidebar{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;border-radius:0 0 22px 22px;padding:12px!important}.main{margin-left:0!important;width:100%!important;padding:12px!important}.brand{margin-bottom:10px!important;padding-bottom:9px!important}.menu{display:block!important;margin-left:auto!important;background:rgba(255,255,255,.12)!important;color:#fff!important}.nav{display:none!important;grid-template-columns:repeat(3,1fr)!important}.nav.open{display:grid!important}.nav a{justify-content:center;text-align:center;font-size:12px!important;padding:8px 6px!important}.nav a:before{display:none}.disclaimer{display:none!important}.topbar,.page-head{display:block!important}.profile{margin-top:8px;display:inline-block}.hero-grid,.about-grid,.audience-grid{grid-template-columns:1fr!important}.hero-card h1,.about-hero h1{font-size:34px!important}.form-grid.four,.form-grid.six,.two,.two-col,.three-cols{grid-template-columns:1fr!important}}
@media(max-width:768px){body{font-size:13px!important}.main{padding:9px!important}.topbar h1,.page-head h1{font-size:23px!important}.topbar p,.page-head p{font-size:12px!important}.grid,.cards,.four,.five,.six,.kpi-grid,.stats-grid,.overview-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.grid>.card,.cards>.card,.four>.card,.five>.card,.six>.card{grid-column:span 1!important;min-height:70px!important;padding:9px!important;margin-bottom:0!important}.grid>.card:not(.stat):not(.span2):not(.span3),.two>.card,.three-cols>.card{grid-column:1/-1!important}.stat b,.metric{font-size:23px!important}.stat small{font-size:9px!important}.card h2{font-size:17px!important}.card h3{font-size:14px!important}.card p,.note{font-size:12px!important}.btn,button{width:100%;min-height:36px!important;padding:7px 9px!important;font-size:12.5px!important}.voice-btn{width:auto!important}.form input,.form select,.form textarea,input,select,textarea{min-height:36px!important;padding:7px 9px!important;font-size:13px!important}.public-header,.login-top{padding:13px!important}.public-header nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.public-header .btn{width:auto}.public-wrap{margin:18px auto!important;padding:0 10px!important}.public-card{padding:17px!important}.hero-card h1,.about-hero h1{font-size:28px!important}.hero-card p,.about-hero p,.public-card p{font-size:14px!important}.login-card{margin:18px 10px!important;max-width:none!important}.table,table{display:block!important;width:100%!important;overflow-x:auto!important;white-space:nowrap!important;font-size:12px!important}th,td{padding:7px!important}.card-head{display:block!important}.check-grid{gap:5px!important}.checkbox-line,.check-pill{font-size:11px!important;padding:5px 8px!important}}
@media(max-width:480px){.grid,.cards,.four,.five,.six{gap:7px!important}.sidebar .nav{grid-template-columns:repeat(2,1fr)!important}.main{padding:8px!important}.topbar h1{font-size:21px!important}.card{border-radius:13px!important}.stat b,.metric{font-size:21px!important}}

/* ======================================================
   DXIORA AI NODE - UI WOW V2 COMPACT DENSITY PATCH
   Goal: less blank space, tighter professional command-center UI,
   better information density without changing functionality.
====================================================== */
:root{
  --dx-density-gap:9px;
  --dx-card-pad:11px;
  --dx-card-radius:14px;
  --dx-main-pad-y:12px;
  --dx-main-pad-x:16px;
}
body{line-height:1.25!important;}
.main{padding:var(--dx-main-pad-y) var(--dx-main-pad-x)!important;}
.sidebar{width:238px!important;padding:14px 12px!important;}
.main{margin-left:238px!important;width:calc(100% - 238px)!important;}
.brand{margin-bottom:10px!important;padding:6px 8px 10px!important;gap:9px!important;}
.logo{width:38px!important;height:38px!important;border-radius:13px!important;}
.brand b{font-size:14.5px!important}.brand span{font-size:10.5px!important}
.sidebar nav a,.nav a{min-height:34px!important;padding:7px 10px!important;margin:3px 0!important;font-size:12.2px!important;border-radius:10px!important;}
.disclaimer{margin-top:12px!important;padding:10px!important;font-size:10.5px!important;line-height:1.35!important;border-radius:12px!important;}
.topbar,.page-head{margin-bottom:9px!important;gap:10px!important;align-items:center!important;}
.topbar h1,.page-head h1{font-size:23px!important;line-height:1.03!important;}
.topbar p,.page-head p{font-size:12px!important;line-height:1.25!important;margin-top:3px!important;}
.profile,.user-card,.profile-card{padding:7px 10px!important;min-width:132px!important;border-radius:12px!important;}
.profile b,.user-card b,.profile-card b{font-size:12.5px!important}.profile span,.user-card span,.profile-card span{font-size:10px!important}
.grid,.cards,.four,.five,.six,.two,.two-col,.three-cols,.form-grid,.doctor-grid,.public-grid,.audience-grid{gap:var(--dx-density-gap)!important;}
.card,.public-card,.login-card,.audit-card,.account-card,.inner-card,.mini,.patient-mini,.search-card,.compact-card,.tool-card,.tool-tile,.doctor-card{
  border-radius:var(--dx-card-radius)!important;
  box-shadow:0 6px 16px rgba(15,23,42,.055)!important;
}
.card{padding:var(--dx-card-pad)!important;margin-bottom:9px!important;}
.card h2{font-size:17.5px!important;line-height:1.08!important;margin:0 0 5px!important;}
.card h3{font-size:14.5px!important;line-height:1.08!important;margin:0 0 5px!important;}
.card p{margin:4px 0!important;font-size:12.5px!important;line-height:1.32!important;}
.note,.muted,.card .muted{font-size:11.2px!important;line-height:1.22!important;margin:2px 0 5px!important;}
.info-banner,.ai-box,.safety-note,.rule,.rule.green,.rule.orange,.tool-result{padding:10px 12px!important;border-radius:13px!important;margin-bottom:8px!important;}
.info-banner h2,.ai-box h2{font-size:17px!important;margin:0 0 4px!important;}
.stat,.grid>.card.span2,.grid>.card.span3{min-height:78px!important;padding:10px!important;}
.stat small{font-size:9.5px!important;letter-spacing:.055em!important;line-height:1.1!important;}
.stat b,.metric{font-size:25px!important;line-height:.95!important;margin-top:2px!important;}
.stat span{font-size:10.8px!important;line-height:1.15!important;}
.stat:after{width:48px!important;height:48px!important;right:-12px!important;bottom:-14px!important;}
.btn,button,.login-card button{min-height:33px!important;padding:7px 11px!important;font-size:12px!important;border-radius:10px!important;}
.voice-btn{min-height:27px!important;padding:5px 8px!important;font-size:11px!important;margin:4px 0 4px 5px!important;}
.form label,label{font-size:11.8px!important;margin:4px 0 3px!important;}
.form input,.form select,.form textarea,.login-card input,.login-card select,input,select,textarea{min-height:34px!important;padding:7px 9px!important;font-size:12.6px!important;border-radius:9px!important;}
textarea,.form textarea{min-height:62px!important;}
.form{gap:7px!important;}.split{gap:8px!important;}
.table,table{font-size:12px!important;border-radius:11px!important;}
th,td{padding:6px 8px!important;} th{font-size:10px!important;} td{line-height:1.25!important;}
.badge,.pill{padding:3px 7px!important;font-size:10px!important;}
.mini,.audit-card,.account-card,.patient-mini,.search-card,.compact-card{padding:9px!important;margin-bottom:7px!important;}
.card-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:6px!important;}
.card-head h2,.card-head h3{margin:0!important;}
.check-grid{gap:4px!important;}
.check-pill,.checkbox-line{min-height:27px!important;padding:4px 7px!important;font-size:10.8px!important;gap:5px!important;}
.check-pill input,.checkbox-line input{width:12px!important;height:12px!important;min-height:12px!important;}
.tools-grid{gap:9px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.tool-card,.tool-tile{min-height:132px!important;padding:11px!important;text-align:left!important;}
.tool-card h2,.tool-card h3,.tool-card h4,.tool-tile h4{font-size:15.5px!important;margin:0 0 5px!important;line-height:1.1!important;}
.tool-card p,.tool-tile p{font-size:11.3px!important;line-height:1.25!important;margin:0 0 8px!important;}
.tool-card .btn,.tool-card a.btn,.tool-tile .btn,.tool-tile a.btn{width:max-content!important;min-height:30px!important;padding:6px 9px!important;font-size:11px!important;margin-top:auto!important;}
.public-wrap{max-width:1180px!important;margin:20px auto 16px!important;padding:0 14px!important;}
.public-header,.login-top{padding:12px 18px!important;border-bottom-left-radius:18px!important;border-bottom-right-radius:18px!important;}
.hero-card h1,.about-hero h1{font-size:38px!important;margin:10px 0!important;}
.hero-card p,.about-hero p,.public-card p{font-size:14px!important;line-height:1.38!important;}
.public-card{padding:15px!important;}
.login-card{max-width:420px!important;padding:18px!important;margin:20px auto!important;}
.login-card h2{font-size:23px!important;margin-bottom:8px!important;}
.demo-box{font-size:11.3px!important;padding:9px!important;border-radius:11px!important;}
/* Better density for page lists and dashboard blocks */
.audit-card p,.account-card p,.mini p,.patient-mini p{margin:2px 0!important;line-height:1.24!important;}
.bar-row{margin:6px 0!important}.bar{height:6px!important;}
.patient-counter{padding:6px!important;margin-bottom:8px!important;gap:5px!important;border-radius:12px!important;}
.patient-counter span{padding:4px 7px!important;font-size:10.5px!important;}
.patient-section-title{font-size:17px!important;margin:7px 0 6px!important;}
.compact-note{font-size:11px!important;margin-bottom:5px!important;}
/* Prevent huge vertical gaps in generic grids */
.grid>.card.span4,.grid>.card.span6,.grid>.card.span8,.grid>.card.span12{min-height:auto!important;}
.full,.wide-card{grid-column:1/-1!important;}
/* More compact OCR / processing result pages */
.processing-card{max-width:860px!important;margin:12px auto!important;padding:16px!important;border-radius:16px!important;}
.ocr-log{max-height:180px!important;font-size:12px!important;line-height:1.35!important;}
.progress-line{height:8px!important}.processing-spinner{width:42px!important;height:42px!important;}
.json,pre{padding:10px!important;font-size:11.7px!important;border-radius:11px!important;max-height:280px;overflow:auto;}
/* Desktop fit improvements */
@media(min-width:1200px){
  .grid>.card.span2{grid-column:span 2!important;}
  .grid>.card.span3{grid-column:span 3!important;}
  .grid>.card.span4{grid-column:span 4!important;}
  .grid>.card.span6{grid-column:span 6!important;}
  .grid>.card.span8{grid-column:span 8!important;}
  .grid>.card.span12{grid-column:span 12!important;}
}
@media(max-width:1180px){
  .sidebar{width:224px!important}.main{margin-left:224px!important;width:calc(100% - 224px)!important;padding:10px 12px!important;}
}
@media(max-width:920px){
  .sidebar{width:100%!important;padding:9px!important}.main{margin-left:0!important;width:100%!important;padding:9px!important;}
  .brand{padding:4px 6px 8px!important;margin-bottom:6px!important}.logo{width:34px!important;height:34px!important}.menu{min-height:29px!important;width:auto!important;}
  .nav.open{gap:5px!important}.nav a{min-height:30px!important;font-size:11px!important;padding:6px!important;}
  .topbar,.page-head{margin-bottom:7px!important}.topbar h1,.page-head h1{font-size:21px!important;}
}
@media(max-width:768px){
  .main{padding:7px!important;}
  .grid,.cards,.four,.five,.six,.kpi-grid,.stats-grid,.overview-grid{gap:6px!important;}
  .grid>.card,.cards>.card,.four>.card,.five>.card,.six>.card{min-height:58px!important;padding:7px!important;}
  .card{padding:8px!important;margin-bottom:6px!important;border-radius:12px!important;}
  .card h2{font-size:15.5px!important}.card h3{font-size:13.5px!important}.card p{font-size:11.3px!important;line-height:1.25!important;}
  .note,.muted,.card .muted{font-size:10.2px!important;}
  .stat b,.metric{font-size:19px!important}.stat small{font-size:8.5px!important}.stat span{font-size:9.5px!important;}
  .btn,button{min-height:31px!important;padding:6px 8px!important;font-size:11px!important;}
  .form input,.form select,.form textarea,input,select,textarea{min-height:32px!important;padding:6px 8px!important;font-size:12px!important;}
  textarea,.form textarea{min-height:52px!important;}
  .info-banner,.ai-box,.safety-note,.rule{padding:8px!important;margin-bottom:6px!important;}
  .profile,.user-card,.profile-card{padding:6px 8px!important;}
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .tool-card,.tool-tile{min-height:112px!important;padding:8px!important;}
  .tool-card h2,.tool-card h3,.tool-card h4,.tool-tile h4{font-size:13px!important;}
  .tool-card p,.tool-tile p{font-size:10px!important;-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
  .tool-card .btn,.tool-tile .btn{width:100%!important;min-height:28px!important;font-size:10px!important;padding:5px!important;}
  th,td{padding:5px 6px!important;}
}
@media(max-width:480px){
  .main{padding:6px!important}.topbar h1,.page-head h1{font-size:19px!important;}
  .grid>.card,.cards>.card,.four>.card,.five>.card,.six>.card{min-height:54px!important;}
  .stat b,.metric{font-size:18px!important;}
}

/* v3 headline cleanup: one global page title only, no duplicate page-level headers */
.topbar{margin-bottom:14px;padding:0 0 8px 0;border-bottom:1px solid rgba(100,116,139,.12);}
.topbar h1{font-size:30px;line-height:1.05;margin:0 0 4px;font-weight:900;letter-spacing:-.04em;}
.topbar p{margin:0;color:#64748b;font-size:15px;line-height:1.25;max-width:980px;}
.page-head{display:none!important;}
.compact-hero{gap:14px;margin-bottom:12px;}
.doctor-context{background:linear-gradient(135deg,#ecfeff,#eff6ff);min-height:auto;}
.doctor-context small{display:block;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:800;margin-bottom:6px;}
.doctor-context h3{margin:0 0 6px;font-size:20px;}
.doctor-context p{margin:0 0 12px;color:#475569;}
.info-banner h2,.card h2{letter-spacing:-.025em;}
.card .card-head h2{margin-bottom:0;}
@media(max-width:760px){.topbar{padding-top:6px}.topbar h1{font-size:24px}.topbar p{font-size:13px}.profile{padding:10px 12px}.compact-hero{grid-template-columns:1fr!important}}

/* ======================================================
   HOTFIX V5.2 - Login header text visibility
   Keeps the dark DXIORA login hero but makes logo text readable.
====================================================== */
.login-page .login-top{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#ffffff!important;
}
.login-page .login-top h1{
  color:#ffffff!important;
  opacity:1!important;
  margin:0!important;
  font-size:26px!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.22)!important;
}
.login-page .login-top p{
  color:#dbeafe!important;
  opacity:1!important;
  margin:3px 0 0!important;
  font-size:13px!important;
  font-weight:600!important;
}
.login-page .login-top .logo{
  color:#ffffff!important;
  background:linear-gradient(135deg,#6d5cff,#2454ff)!important;
  box-shadow:0 10px 24px rgba(36,84,255,.35)!important;
}

/* ======================================================
   DXIORA AI WOW UI PATCH V5.6
   Purpose: fix narrow admin cards + add premium executive polish
   Safe: CSS-only global enhancements + admin population layout support
====================================================== */

body.app-body{
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 32%),
        radial-gradient(circle at 85% 8%, rgba(20,184,166,.12), transparent 28%),
        linear-gradient(135deg,#edf4ff 0%,#f8fbff 52%,#eef7ff 100%);
}

.main{
    background:
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0));
}

.sidebar{
    background:
        radial-gradient(circle at 18% 8%, rgba(99,102,241,.45), transparent 23%),
        linear-gradient(180deg,#061128 0%,#081a36 54%,#071225 100%);
    box-shadow:18px 0 46px rgba(2,6,23,.12);
}

nav a{
    position:relative;
    font-weight:800;
    letter-spacing:.01em;
}

nav a::before{
    content:'';
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#64748b;
    margin-right:10px;
    box-shadow:0 0 0 3px rgba(148,163,184,.08);
    vertical-align:middle;
}

nav a.active,
nav a:hover{
    background:linear-gradient(135deg,rgba(45,212,191,.22),rgba(99,102,241,.28));
    color:#fff;
    box-shadow:inset 3px 0 0 #2dd4bf, 0 8px 22px rgba(2,6,23,.12);
}

nav a.active::before,
nav a:hover::before{
    background:#2dd4bf;
    box-shadow:0 0 0 4px rgba(45,212,191,.14),0 0 18px rgba(45,212,191,.55);
}

.topbar{
    padding:12px 0 8px;
    border-bottom:1px solid rgba(148,163,184,.22);
}

.topbar h1{
    font-weight:950;
    letter-spacing:-.065em;
    color:#0f172a;
    text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.profile,.user-card,.profile-card{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(16px);
    border:1px solid rgba(191,219,254,.75);
}

.info-banner{
    background:
        radial-gradient(circle at 2% 2%, rgba(45,212,191,.20), transparent 22%),
        linear-gradient(135deg,rgba(239,246,255,.96),rgba(236,253,245,.88));
    border:1px solid rgba(147,197,253,.82);
    border-radius:22px;
    padding:22px 24px;
    margin-bottom:18px;
    box-shadow:0 16px 42px rgba(37,99,235,.08);
    overflow:hidden;
}

.info-banner h2{
    margin:0 0 8px;
    font-size:22px;
    letter-spacing:-.03em;
}

.info-banner p,
.info-banner .note{
    margin:0;
    color:#334155;
    font-size:16px;
    max-width:1100px;
}

.card{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    border:1px solid rgba(203,213,225,.82);
    box-shadow:0 18px 48px rgba(15,23,42,.075);
}

.card:hover{
    border-color:rgba(147,197,253,.95);
    box-shadow:0 22px 60px rgba(15,23,42,.10);
}

.card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:12px;
}

.note{
    color:#64748b;
    font-size:13px;
    line-height:1.45;
}

/* Missing grid helpers from PHP UI */
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid.three,.grid.three-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid.two > *, .grid.three > *, .grid.three-cols > *, .grid.four > *{grid-column:auto !important;}

.mini{
    display:block;
    text-decoration:none;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    border:1px solid #dbeafe;
    border-radius:18px;
    padding:14px;
    margin:8px 0;
    color:#0f172a;
    box-shadow:0 8px 22px rgba(15,23,42,.045);
    overflow-wrap:anywhere;
    transition:.2s ease;
}

a.mini:hover,
.mini:hover{
    transform:translateY(-2px);
    border-color:#93c5fd;
    box-shadow:0 16px 38px rgba(37,99,235,.10);
}

.mini b{
    font-size:15px;
    line-height:1.2;
}

.mini p,.mini span{
    color:#64748b;
    font-size:12.5px;
    line-height:1.35;
}

.badge{
    background:#eaf0ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
}

.btn{
    background:linear-gradient(135deg,#2454ff,#7c3aed);
    box-shadow:0 10px 22px rgba(36,84,255,.20);
}

.btn.ghost,
.btn.light{
    background:#eef4ff;
    color:#1e40af;
    border:1px solid #bfdbfe;
    box-shadow:none;
}

/* Premium population health layout */
.population-health-grid{
    display:grid;
    grid-template-columns:1.05fr 1.15fr 1.6fr;
    gap:18px;
}

.insight-card{
    min-height:100%;
}

.insight-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.insight-title h2{
    margin:0;
    font-size:20px;
    letter-spacing:-.04em;
}

.insight-title span{
    font-size:12px;
    font-weight:900;
    color:#2563eb;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:999px;
    padding:5px 10px;
}

.insight-list{
    display:grid;
    gap:10px;
}

.insight-pill{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:linear-gradient(135deg,#fff,#f8fbff);
    border:1px solid #dbeafe;
    border-radius:16px;
    padding:13px 14px;
    min-width:0;
}

.insight-pill b{
    font-size:14px;
    line-height:1.15;
    overflow-wrap:anywhere;
}

.insight-value{
    flex:0 0 auto;
    min-width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    font-size:22px;
    font-weight:950;
    color:#0f172a;
    background:linear-gradient(135deg,#dbeafe,#ccfbf1);
    border:1px solid #bfdbfe;
}

.condition-cloud{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.condition-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 14px;
    border-radius:16px;
    background:linear-gradient(135deg,#ffffff,#f8fafc);
    border:1px solid #dbeafe;
    font-weight:900;
    overflow:hidden;
}

.condition-chip span:first-child{
    min-width:0;
    overflow-wrap:anywhere;
    line-height:1.15;
}

.condition-chip .badge{
    flex:0 0 auto;
}

@media(max-width:1200px){
    .population-health-grid{grid-template-columns:1fr 1fr;}
    .population-health-grid .wide{grid-column:1 / -1;}
    .grid.four{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:768px){
    .info-banner{padding:14px;border-radius:16px;margin-bottom:10px;}
    .info-banner h2{font-size:18px;}
    .info-banner p{font-size:13px;}
    .grid.two,.grid.three,.grid.three-cols,.grid.four{grid-template-columns:1fr !important;}
    .population-health-grid{grid-template-columns:1fr !important;gap:10px;}
    .condition-cloud{grid-template-columns:1fr;}
    .insight-pill{padding:10px 11px;border-radius:13px;}
    .insight-value{min-width:42px;height:42px;font-size:19px;border-radius:13px;}
    nav a::before{display:none;}
}

/* ======================================================
   DXIORA AI NODE - ADMIN COMPACT FORMS + ROLE VOICE V5.7
   Goal: executive-grade compact Super Admin / Hospital Admin forms,
   and voice-to-text only for Doctor + Assistant workflows.
====================================================== */
/* Ensure grids actually behave like grids everywhere */
.grid,.cards,.four,.five,.six,.two,.two-col,.three-cols,.form-grid,.doctor-grid,.public-grid,.audience-grid{display:grid!important;}
.form-grid.two,.form-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.form-grid.three,.form-grid.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.form-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
.form-grid.six{grid-template-columns:repeat(6,minmax(0,1fr))!important;}
.form-grid label{display:flex!important;flex-direction:column!important;min-width:0!important;}
.form-submit{display:flex!important;align-items:end!important;gap:8px!important;}
.form-submit .btn,.form-submit button{width:100%!important;}

/* Admin/Hospital admin forms should look like compact control panels, not long OPD note forms */
.role-super_admin .card > .form,
.role-hospital_admin .card > .form{max-width:none!important;}
.role-super_admin .form-grid.four,
.role-hospital_admin .form-grid.four{grid-template-columns:repeat(4,minmax(160px,1fr))!important;align-items:end!important;}
.role-super_admin .form-grid.five,
.role-hospital_admin .form-grid.five{grid-template-columns:repeat(5,minmax(130px,1fr))!important;align-items:end!important;}
.role-super_admin .form-grid.six,
.role-hospital_admin .form-grid.six{grid-template-columns:repeat(6,minmax(120px,1fr))!important;align-items:end!important;}
.role-super_admin .form-grid.two,
.role-hospital_admin .form-grid.two{grid-template-columns:repeat(2,minmax(260px,1fr))!important;}

/* Guidelines text areas should be two-column clinical rule cards, not full-screen strips */
.role-super_admin textarea,
.role-hospital_admin textarea{min-height:58px!important;}
.role-super_admin .form-grid.two textarea,
.role-hospital_admin .form-grid.two textarea{min-height:72px!important;}

/* Medication Master: compact prescription catalog entry */
.role-super_admin form[action="/admin/medication-master"] .form-grid.four{
  grid-template-columns:1.3fr 1.3fr 1.2fr .75fr 1.1fr .75fr .75fr .8fr!important;
}
.role-super_admin form[action="/admin/medication-master"] input,
.role-super_admin form[action="/admin/medication-master"] select{min-height:32px!important;}
.role-super_admin form[action="/admin/medication-master"] .form-submit{align-self:end!important;}

/* Hospital admin creation form: sane width distribution */
.role-super_admin form[action="/admin/users/create"] .form-grid.four{
  grid-template-columns:1.4fr .7fr 1.2fr 1.3fr .9fr .75fr .75fr .85fr!important;
}

/* Hide voice controls in admin areas; voice belongs to doctor/assistant clinical workflows only */
.role-super_admin .voice-btn,
.role-hospital_admin .voice-btn{display:none!important;}
.role-super_admin [data-voice-status],
.role-hospital_admin [data-voice-status]{display:none!important;}

/* In doctor/assistant, keep voice as a clean mic-only chip */
.role-doctor .voice-btn,
.role-assistant .voice-btn{
  width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
  padding:0!important;margin:5px 0 5px 6px!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:0!important;line-height:1!important;background:#eef2ff!important;color:#312e81!important;box-shadow:none!important;
}
.role-doctor .voice-btn::before,
.role-assistant .voice-btn::before{content:'🎙️';font-size:14px!important;}
.role-doctor .voice-btn[disabled]::before,
.role-assistant .voice-btn[disabled]::before{content:'…';font-size:15px!important;}

/* Keep mobile graceful */
@media(max-width:1200px){
  .role-super_admin form[action="/admin/medication-master"] .form-grid.four,
  .role-super_admin form[action="/admin/users/create"] .form-grid.four,
  .role-super_admin .form-grid.four,.role-hospital_admin .form-grid.four,
  .role-super_admin .form-grid.five,.role-hospital_admin .form-grid.five,
  .role-super_admin .form-grid.six,.role-hospital_admin .form-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:920px){
  .form-grid.two,.form-grid.three,.form-grid.three-cols,.form-grid.four,.form-grid.five,.form-grid.six,
  .role-super_admin form[action="/admin/medication-master"] .form-grid.four,
  .role-super_admin form[action="/admin/users/create"] .form-grid.four,
  .role-super_admin .form-grid.four,.role-hospital_admin .form-grid.four,
  .role-super_admin .form-grid.five,.role-hospital_admin .form-grid.five,
  .role-super_admin .form-grid.six,.role-hospital_admin .form-grid.six,
  .role-super_admin .form-grid.two,.role-hospital_admin .form-grid.two{grid-template-columns:1fr!important;}
  .form-submit{align-items:stretch!important;}
}


/* ======================================================
   DXIORA v5.8 Footer Restoration
   Mirrors PHP footer identity while respecting fixed sidebar.
====================================================== */
.main{
    display:flex;
    flex-direction:column;
}

.page-content{
    width:100%;
}

.app-footer{
    margin-top:34px;
    padding:18px 20px;
    border:1px solid rgba(148,163,184,.28);
    border-radius:18px;
    background:rgba(255,255,255,.72);
    box-shadow:var(--shadow-soft);
    color:#64748b;
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    backdrop-filter:blur(12px);
}

.app-footer strong{
    color:#122033;
}

.app-footer a{
    color:var(--brand);
    font-weight:800;
    text-decoration:none;
}

.app-footer a:hover{
    text-decoration:underline;
}

@media(max-width:760px){
    .app-footer{
        text-align:center;
        justify-content:center;
        padding:16px;
        font-size:12px;
    }
}


/* DXIORA v5.9 Login Footer Restoration */
.login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.login-page main{
  flex:1 0 auto;
}
.login-footer{
  flex-shrink:0;
  margin:24px auto 18px;
  padding:14px 20px;
  width:min(920px, calc(100% - 32px));
  border:1px solid rgba(20,184,166,.22);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 45px rgba(15,23,42,.08);
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:12px;
  line-height:1.45;
  text-align:center;
}
.login-footer strong{
  color:#0f172a;
}
.login-footer a{
  color:#4f46e5;
  text-decoration:none;
  font-weight:800;
}
.login-footer a:hover{
  text-decoration:underline;
}
@media (max-width: 720px){
  .login-footer{
    flex-direction:column;
    gap:4px;
    margin-bottom:12px;
  }
}

/* ======================================================
   HOTFIX V6.0 - Login brand links back to home
   Safe: login page header anchor styling only
====================================================== */
.login-page .login-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#ffffff!important;
  text-decoration:none!important;
}
.login-page .login-brand:hover{
  opacity:.94!important;
}
.login-page .login-brand h1,
.login-page .login-brand p{
  text-decoration:none!important;
}


/* ======================================================
   HOTFIX V6.1 - Unified public header for Home / About / Login
   Safe: public/login layout styling only
====================================================== */
.public-header.site-public-header,
.login-page .public-header.site-public-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:86px!important;
  background:linear-gradient(135deg,#061225 0%,#0f2143 58%,#1737b8 100%)!important;
  padding:16px 22px!important;
  border-bottom-left-radius:20px!important;
  border-bottom-right-radius:20px!important;
  box-shadow:0 20px 42px rgba(15,23,42,.16)!important;
}
.public-header.site-public-header .public-brand,
.login-page .public-header.site-public-header .public-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  color:#fff!important;
  text-decoration:none!important;
  min-width:230px!important;
}
.public-header.site-public-header .public-brand b,
.login-page .public-header.site-public-header .public-brand b{
  display:block!important;
  color:#ffffff!important;
  opacity:1!important;
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  font-weight:900!important;
  text-shadow:0 2px 12px rgba(0,0,0,.22)!important;
}
.public-header.site-public-header .public-brand small,
.login-page .public-header.site-public-header .public-brand small{
  display:block!important;
  margin-top:4px!important;
  color:#dbeafe!important;
  opacity:1!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.1!important;
}
.public-header.site-public-header .logo,
.login-page .public-header.site-public-header .logo{
  flex:0 0 auto!important;
  color:#ffffff!important;
  background:linear-gradient(135deg,#6d5cff,#2454ff)!important;
  box-shadow:0 10px 24px rgba(36,84,255,.35)!important;
}
.public-header.site-public-header nav,
.login-page .public-header.site-public-header nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.public-header.site-public-header nav .btn,
.login-page .public-header.site-public-header nav .btn{
  width:auto!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.public-footer.unified-public-footer,
.login-footer.unified-public-footer{
  margin:24px auto 18px!important;
  padding:14px 20px!important;
  width:min(920px, calc(100% - 32px))!important;
  border:1px solid rgba(20,184,166,.22)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 16px 45px rgba(15,23,42,.08)!important;
  color:#334155!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  flex-wrap:wrap!important;
  font-size:12px!important;
  line-height:1.45!important;
  text-align:center!important;
}
.public-footer.unified-public-footer a,
.login-footer.unified-public-footer a{color:#4f46e5!important;text-decoration:none!important;font-weight:800!important;}
.public-footer.unified-public-footer a:hover,
.login-footer.unified-public-footer a:hover{text-decoration:underline!important;}
@media(max-width:768px){
  .public-header.site-public-header,
  .login-page .public-header.site-public-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    min-height:auto!important;
    padding:14px!important;
  }
  .public-header.site-public-header .public-brand,
  .login-page .public-header.site-public-header .public-brand{min-width:0!important;}
  .public-header.site-public-header .public-brand b,
  .login-page .public-header.site-public-header .public-brand b{font-size:21px!important;}
  .public-header.site-public-header nav,
  .login-page .public-header.site-public-header nav{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:8px!important;}
  .public-header.site-public-header nav .btn,
  .login-page .public-header.site-public-header nav .btn{font-size:12px!important;padding:7px 8px!important;}
  .public-footer.unified-public-footer,
  .login-footer.unified-public-footer{flex-direction:column!important;gap:4px!important;margin-bottom:12px!important;}
}

/* ======================================================
   HOTFIX V6.2 - Public header navigation moved to left
   Safe: Home/About/Login header positioning only
====================================================== */
.public-header.site-public-header,
.login-page .public-header.site-public-header{
  justify-content:flex-start!important;
}
.public-header.site-public-header nav,
.login-page .public-header.site-public-header nav{
  justify-content:flex-start!important;
  margin-left:10px!important;
  margin-right:auto!important;
}
@media(max-width:768px){
  .public-header.site-public-header nav,
  .login-page .public-header.site-public-header nav{
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* ======================================================
   HOTFIX V6.3 - Public header navigation moved back right
   Safe: Home/About/Login header positioning only
====================================================== */
.public-header.site-public-header,
.login-page .public-header.site-public-header{
  justify-content:space-between!important;
}
.public-header.site-public-header nav,
.login-page .public-header.site-public-header nav{
  justify-content:flex-end!important;
  margin-left:auto!important;
  margin-right:0!important;
}
@media(max-width:768px){
  .public-header.site-public-header,
  .login-page .public-header.site-public-header{
    justify-content:flex-start!important;
  }
  .public-header.site-public-header nav,
  .login-page .public-header.site-public-header nav{
    margin-left:0!important;
    margin-right:0!important;
    justify-content:stretch!important;
  }
}

/* ======================================================
   HOTFIX V6.4 - Hard public header right navigation
   Safe: public Home/About/Login header positioning only
====================================================== */
.public-header.site-public-header,
.login-page .public-header.site-public-header{
  display:grid!important;
  grid-template-columns:max-content 1fr!important;
  align-items:center!important;
  column-gap:24px!important;
  width:100%!important;
}
.public-header.site-public-header .public-brand,
.login-page .public-header.site-public-header .public-brand{
  grid-column:1!important;
  justify-self:start!important;
  margin-right:0!important;
}
.public-header.site-public-header nav,
.login-page .public-header.site-public-header nav{
  grid-column:2!important;
  justify-self:end!important;
  margin-left:0!important;
  margin-right:0!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
}
@media(max-width:720px){
  .public-header.site-public-header,
  .login-page .public-header.site-public-header{
    grid-template-columns:1fr!important;
    row-gap:12px!important;
  }
  .public-header.site-public-header .public-brand,
  .login-page .public-header.site-public-header .public-brand,
  .public-header.site-public-header nav,
  .login-page .public-header.site-public-header nav{
    grid-column:1!important;
    justify-self:stretch!important;
  }
  .public-header.site-public-header nav,
  .login-page .public-header.site-public-header nav{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:8px!important;
  }
}


/* ======================================================
   HOTFIX V6.5 - Final public header correction
   Requirement:
   - Logo / DXIORA AI stays top-left and links to Home
   - No separate Home button
   - About + Login stay top-right on desktop
   - Mobile remains stacked and usable
   Safe: public Home/About/Login header only
====================================================== */
body.public-page > header.public-header.site-public-header,
body.login-page > header.public-header.site-public-header{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:92px!important;
  padding:18px 24px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
body.public-page > header.public-header.site-public-header > a.public-brand,
body.login-page > header.public-header.site-public-header > a.public-brand{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  text-decoration:none!important;
  color:#ffffff!important;
  z-index:2!important;
}
body.public-page > header.public-header.site-public-header > a.public-brand b,
body.login-page > header.public-header.site-public-header > a.public-brand b{
  color:#ffffff!important;
  opacity:1!important;
  visibility:visible!important;
  font-weight:900!important;
  font-size:25px!important;
  line-height:1!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
body.public-page > header.public-header.site-public-header > a.public-brand small,
body.login-page > header.public-header.site-public-header > a.public-brand small{
  color:#e0f2fe!important;
  opacity:1!important;
  visibility:visible!important;
  font-weight:700!important;
  font-size:13px!important;
}
body.public-page > header.public-header.site-public-header > nav.public-nav,
body.login-page > header.public-header.site-public-header > nav.public-nav{
  position:absolute!important;
  top:50%!important;
  right:24px!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  z-index:3!important;
}
body.public-page > header.public-header.site-public-header > nav.public-nav .btn,
body.login-page > header.public-header.site-public-header > nav.public-nav .btn{
  width:auto!important;
  min-width:auto!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:760px){
  body.public-page > header.public-header.site-public-header,
  body.login-page > header.public-header.site-public-header{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    min-height:auto!important;
    padding:14px!important;
  }
  body.public-page > header.public-header.site-public-header > nav.public-nav,
  body.login-page > header.public-header.site-public-header > nav.public-nav{
    position:static!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
}


/* ======================================================
   HOTFIX V6.6 - Public header exact final layout
   Requirement:
   - Logo / DXIORA AI on top-left and links Home
   - About + Login on top-right
   - No separate Home button
   Safe: public Home/About/Login only
====================================================== */
body.public-page > header.public-header-final,
body.login-page > header.public-header-final{
  width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:92px!important;
  padding:18px 24px!important;
  background:linear-gradient(135deg,#061225,#0f2143 62%,#1737b8)!important;
  border-bottom-left-radius:24px!important;
  border-bottom-right-radius:24px!important;
  box-shadow:0 20px 42px rgba(15,23,42,.16)!important;
}
body.public-page > header.public-header-final > a.public-brand-final,
body.login-page > header.public-header-final > a.public-brand-final{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  text-decoration:none!important;
  color:#fff!important;
  flex:0 0 auto!important;
  min-width:260px!important;
}
body.public-page > header.public-header-final > a.public-brand-final .logo,
body.login-page > header.public-header-final > a.public-brand-final .logo{
  width:40px!important;
  height:40px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#2454ff,#7c3aed)!important;
  color:#fff!important;
  font-weight:900!important;
}
body.public-page > header.public-header-final > a.public-brand-final b,
body.login-page > header.public-header-final > a.public-brand-final b{
  display:block!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  font-size:25px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
body.public-page > header.public-header-final > a.public-brand-final small,
body.login-page > header.public-header-final > a.public-brand-final small{
  display:block!important;
  margin-top:5px!important;
  color:#e0f2fe!important;
  opacity:1!important;
  visibility:visible!important;
  font-size:13px!important;
  line-height:1.1!important;
  font-weight:700!important;
}
body.public-page > header.public-header-final > nav.public-nav-final,
body.login-page > header.public-header-final > nav.public-nav-final{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex:0 0 auto!important;
  width:auto!important;
}
body.public-page > header.public-header-final > nav.public-nav-final a.btn,
body.login-page > header.public-header-final > nav.public-nav-final a.btn{
  width:auto!important;
  min-width:auto!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:760px){
  body.public-page > header.public-header-final,
  body.login-page > header.public-header-final{
    flex-direction:column!important;
    align-items:flex-start!important;
    min-height:auto!important;
    padding:14px!important;
    gap:12px!important;
  }
  body.public-page > header.public-header-final > a.public-brand-final,
  body.login-page > header.public-header-final > a.public-brand-final{
    min-width:0!important;
  }
  body.public-page > header.public-header-final > nav.public-nav-final,
  body.login-page > header.public-header-final > nav.public-nav-final{
    margin-left:0!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
}


/* ======================================================
   HOTFIX V6.8 - Compact public header precise fix
   Reason: old .login class made public Login nav full viewport height.
====================================================== */
#dixoraPublicHeaderV68{height:92px!important;min-height:92px!important;max-height:92px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;overflow:hidden!important;}
#dixoraPublicNavV68 a.public-nav-btn-v68{all:unset!important;box-sizing:border-box!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;height:auto!important;min-height:0!important;max-height:42px!important;padding:11px 16px!important;border-radius:12px!important;font-weight:900!important;font-size:14px!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;}
#dixoraPublicNavV68 a.public-about-v68{background:#fff!important;color:#0f2143!important;}
#dixoraPublicNavV68 a.public-login-v68{background:linear-gradient(135deg,#2454ff,#7c3aed)!important;color:#fff!important;}
@media(max-width:760px){#dixoraPublicHeaderV68{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex-direction:column!important;align-items:flex-start!important;}#dixoraPublicNavV68{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;}}