:root{
  --blue:#1e55b8;
  --blue-2:#1e55b8;
  --blue-3:#e9f1ff;
  --red:#d71920;
  --ink:#172033;
  --muted:#6b7280;
  --line:#d8e2f1;
  --bg:#f3f7fc;
  --card:#ffffff;
  --shadow:0 12px 34px rgba(23,63,138,.12);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--blue-2);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
body.login-page{min-height:100vh;background:linear-gradient(135deg,#eef5ff 0%,#f8fbff 42%,#ffffff 100%);display:flex;align-items:center;justify-content:center;padding:36px;position:relative;overflow:hidden}
body.login-page:before{content:"";position:absolute;inset:-120px -80px auto auto;width:540px;height:540px;background:radial-gradient(circle,rgba(37,99,201,.18),rgba(37,99,201,0) 68%);border-radius:50%}
.login-card{width:min(1040px,96vw);min-height:520px;background:#fff;border:1px solid rgba(23,63,138,.12);box-shadow:var(--shadow);border-radius:22px;display:grid;grid-template-columns:440px 1fr;overflow:hidden;position:relative}
.login-left{padding:56px 48px;background:#fff;display:flex;flex-direction:column;justify-content:center}
.login-logo img{width:220px;max-width:100%;height:auto;display:block;margin-bottom:10px}.subtitle{font-size:13px;letter-spacing:.09em;color:#546274;text-transform:uppercase;margin-bottom:32px;font-weight:700}
.login-left h1{font-size:34px;line-height:1.15;color:var(--blue);margin:0 0 24px;font-weight:800}
.login-left label{display:block;color:#253248;font-size:14px;font-weight:700;margin:14px 0 7px}.input{width:100%;height:42px;border:1px solid #cbd7e8;border-radius:8px;background:#fff;padding:0 12px;color:#1f2937;outline:none;transition:.15s}.input:focus{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(30,85,184,.14)}textarea.input{height:auto;min-height:92px;padding:11px 12px;resize:vertical}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:8px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn-primary{background:#1e55b8;color:#fff;box-shadow:0 8px 18px rgba(30,85,184,.22)}.btn-secondary{background:#fff;color:var(--blue);border-color:#c8d6ec}.btn-full{width:100%;margin-top:22px}.muted{color:var(--muted)}.center{text-align:center}.small{font-size:13px}.red{color:var(--red)}
.login-visual{position:relative;min-height:520px;background:linear-gradient(120deg,rgba(23,63,138,.94),rgba(58,122,207,.68)),url('../img/prolab-blank-bg.png') center/cover no-repeat}.login-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.24) 0,rgba(255,255,255,0) 30%),radial-gradient(circle at 70% 16%,rgba(255,255,255,.40),rgba(255,255,255,0) 24%)}.login-visual-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:42px;color:#fff}.login-slogan{font-size:28px;font-weight:800;line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.16)}.login-contact{width:260px;align-self:flex-end;margin-top:34px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.20));background:#fff;border-radius:14px;padding:14px}
.alert{border-radius:10px;padding:12px 14px;margin:0 0 16px;border:1px solid #d7e4f5;background:#eff6ff;color:#1d4f9f}.alert-danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}.alert-success{background:#ecfdf5;border-color:#bbf7d0;color:#047857}
.app-shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 16px;box-shadow:6px 0 22px rgba(23,63,138,.06);position:sticky;top:0;height:100vh}.brand{display:block;padding:8px 10px 24px}.brand img{width:176px;height:auto;display:block}.nav{display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:11px;padding:12px 14px;color:#2d3b52;border-radius:10px;font-weight:700}.nav-item:hover{background:#f0f5ff;text-decoration:none}.nav-item.active{background:linear-gradient(90deg,#e7f0ff,#f7fbff);color:var(--blue);box-shadow:inset 3px 0 0 var(--blue-2)}.nav-icon{width:22px;text-align:center;color:var(--blue-2)}
.main{min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;box-shadow:0 8px 18px rgba(23,63,138,.04)}.crumbs{font-size:14px;color:#637083}.userbox{display:flex;align-items:center;gap:12px;font-weight:700}.avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:0}.avatar:before{content:"👤";font-size:16px}.logout{font-size:20px;color:#6b7280}.content{padding:28px;max-width:1380px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h1{font-size:26px;color:var(--blue);margin:0;font-weight:800}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.toolbar label{font-weight:700;color:#39475c}.small-input{max-width:180px}.search-input{max-width:320px}.data-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.data-table th{background:#f2f6fc;color:#2f3b4e;font-size:13px;text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);font-weight:800}.data-table td{padding:12px 14px;border-bottom:1px solid #edf2f8;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#f8fbff}.click-row{cursor:pointer}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid}.badge-ok{background:#eaf8ef;color:#15803d;border-color:#b7ecc5}.badge-warn{background:#fff7e6;color:#b45309;border-color:#fde3a7}.badge-danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}.badge-info{background:#eff6ff;color:#1e55b8;border-color:#bfdbfe}.badge-muted{background:#f3f4f6;color:#6b7280;border-color:#e5e7eb}.table-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:#6b7280;font-size:14px}.pager{display:flex;gap:6px}.page{min-width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#344056;background:#fff}.page.active{background:var(--blue-2);color:#fff;border-color:var(--blue-2)}.back-link{display:inline-flex;margin-bottom:14px;font-weight:700}.patient-card{padding:0}.patient-head{padding:24px 26px 18px;border-bottom:1px solid var(--line)}.patient-head h1{margin:0 0 16px;font-size:25px;color:#111827}.patient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 42px;color:#344056}.patient-grid span{font-weight:800;color:#56657a}.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);padding:0;margin-top:12px;margin-bottom:4px}.tab{padding:0 18px;height:40px;color:#082466;font-weight:800;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;background:#f5f9ff;display:inline-flex;align-items:center}.tab.active{color:#d71920;background:#fff;border-bottom-color:#fff}.patient-card .data-table{border:0;border-radius:0}.mt{margin-top:16px}.icon-link{font-weight:900;color:var(--blue-2)}.actions{display:flex;gap:10px}.note{font-size:13px;padding:12px 14px;background:#f8fbff;border:1px solid var(--line);border-radius:10px}.details-table{width:100%;border-collapse:collapse}.details-table th,.details-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left}.narrow{max-width:720px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-block label{display:block;font-weight:800;color:#344056;margin:0 0 7px}.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.two{grid-template-columns:1fr 1fr}.checks{display:flex;flex-direction:column;gap:10px;background:#f8fbff;border:1px solid var(--line);border-radius:12px;padding:16px}.checks label{display:flex;gap:10px;align-items:center;font-weight:700}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.upload-box{border:2px dashed #b9c9df;border-radius:14px;background:#f8fbff;padding:22px}.inside{margin-top:14px}.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.right {
    text-align: right;
}
@media(max-width:900px){.login-card{grid-template-columns:1fr}.login-visual{display:none}.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.nav{flex-direction:row;flex-wrap:wrap}.topbar{height:auto;padding:16px;gap:14px;align-items:flex-start;flex-direction:column}.content{padding:16px}.form-grid,.split,.patient-grid{grid-template-columns:1fr}.table-footer{align-items:flex-start;gap:12px;flex-direction:column}.data-table{font-size:13px}}
.price-table th {
    background: #4f8cd4;
    color: #000;
    font-weight: 800;
    text-align: center;
    border: 1px solid #2d4f77;
}

.price-table td {
    border: 1px solid #2d2d2d;
}

.price-section-row td {
    background: #4f8cd4;
    color: #000;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
}

.price-subsection-row td {
    background: #c9ddf2;
    color: #000;
    font-weight: 800;
    text-align: center;
    font-size: 15px;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

/* =========================================================
   ORDER PAGE — CLEAN FINAL LAYOUT
   ========================================================= */

.app-shell {
    grid-template-columns: 155px minmax(0, 1fr) !important;
}

.sidebar {
    width: auto !important;
    min-width: 0 !important;
    padding: 14px 7px !important;
}

.brand {
    padding: 4px 4px 16px !important;
}

.brand img {
    width: 118px !important;
    max-width: 100% !important;
    height: auto !important;
}

.nav {
    gap: 4px !important;
}

.nav-item {
    padding: 8px 7px !important;
    gap: 7px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

.nav-icon {
    width: 15px !important;
    font-size: 12px !important;
}

body:has(.order-page) .topbar {
    height: 48px !important;
    padding: 0 18px !important;
}

body:has(.order-page) .topbar .crumbs {
    font-size: 12px !important;
}

body:has(.order-page) .topbar .userbox,
.order-top-actions {
    display: none !important;
}

.content:has(.order-page) {
    max-width: none !important;
    width: 100% !important;
    padding: 12px 12px 20px !important;
    overflow-x: hidden !important;
}

.order-page {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f2459 !important;
}

.order-card {
    background: #ffffff !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 36, 89, .06) !important;
}

.order-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

.order-title-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.order-title-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    background: #1e55b8 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 24px rgba(0, 74, 173, .16) !important;
}

.order-title-icon svg {
    width: 23px !important;
    height: 23px !important;
}

.order-title-row h1 {
    margin: 0 !important;
    color: #0e1f58 !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}

.order-subtitle {
    margin-top: 2px !important;
    color: #415581 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.order-number-header-card {
    width: clamp(220px, 18vw, 280px) !important;
    min-height: 58px !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border: 1px solid #dbe4f1 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15,36,89,.06) !important;
}

.order-number-header-card .info-icon {
    width: 22px !important;
    min-width: 22px !important;
    color: #1e55b8 !important;
}

.order-number-header-card .info-label {
    color: #506180 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.order-number-header-card .info-main {
    color: #1e55b8 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.order-top-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
}

.patient-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
}

.patient-grid.patient-grid-compact {
    display: grid !important;
    grid-template-columns:
        minmax(128px, 148px)
        minmax(220px, 1.12fr)
        minmax(170px, .9fr)
        minmax(190px, 1fr)
        minmax(110px, 118px)
        minmax(136px, 148px) !important;
    gap: 9px 12px !important;
    align-items: end !important;
    width: 100% !important;
}

.patient-grid-compact .field-birth { grid-column: 1 !important; grid-row: 1 !important; }
.patient-grid-compact .field-lastname { grid-column: 2 !important; grid-row: 1 !important; }
.patient-grid-compact .field-firstname { grid-column: 3 !important; grid-row: 1 !important; }
.patient-grid-compact .field-middlename { grid-column: 4 !important; grid-row: 1 !important; }
.patient-grid-compact .field-search { grid-column: 5 / span 2 !important; grid-row: 1 !important; align-self: end !important; }
.patient-grid-compact .field-sex { grid-column: 1 !important; grid-row: 2 !important; }
.patient-grid-compact .field-weight-height { grid-column: 2 !important; grid-row: 2 !important; }
.patient-grid-compact .field-phone { grid-column: 3 !important; grid-row: 2 !important; }
.patient-grid-compact .field-email { grid-column: 4 !important; grid-row: 2 !important; }
.patient-grid-compact .field-messengers { grid-column: 5 / span 2 !important; grid-row: 2 !important; }
.patient-grid-compact .field-comment { grid-column: 1 / -1 !important; grid-row: 3 !important; }
.patient-grid-compact .patient-lookup-box { grid-column: 1 / -1 !important; grid-row: 4 !important; }

.patient-grid-compact .field-weight-height {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 12px !important;
    align-items: end !important;
    min-width: 0 !important;
}

.patient-grid-compact .field-weight-height .field-weight,
.patient-grid-compact .field-weight-height .field-height {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
}

.form-field {
    min-width: 0 !important;
}

.patient-grid-compact label,
.form-field label {
    display: block !important;
    color: #17315e !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

.order-page .input,
.patient-grid-compact .input {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid #cfd9e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    color: #10275c !important;
    box-sizing: border-box !important;
}

.search-field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.patient-grid-compact .order-search-btn,
.order-search-btn {
    width: 118px !important;
    height: 34px !important;
    min-height: 34px !important;
    justify-self: start !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
}

.btn-outline-primary {
    background: #ffffff !important;
    border: 1px solid #0c63ff !important;
    color: #0c57de !important;
}

.btn-outline-primary:hover:not(:disabled) {
    background: #eef5ff !important;
}

.patient-lookup-box {
    margin-top: 0 !important;
    min-height: 18px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
    border: 1px solid #dbe4f0 !important;
    background: #f5f8fd !important;
    color: #52627f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.patient-lookup-box.warning {
    background: #fff7e8 !important;
    border-color: #f2c369 !important;
    color: #8b5d00 !important;
}

.patient-lookup-box.success {
    background: #edf9f0 !important;
    border-color: #9dd5af !important;
    color: #17653b !important;
}

@media (max-width: 1380px) {
    .patient-grid.patient-grid-compact {
        grid-template-columns:
            minmax(124px, 148px)
            minmax(190px, 1fr)
            minmax(150px, .85fr)
            minmax(160px, .9fr)
            minmax(108px, 116px)
            minmax(128px, 144px) !important;
    }

    .patient-grid-compact .field-birth { grid-column: 1 !important; grid-row: 1 !important; }
    .patient-grid-compact .field-lastname { grid-column: 2 !important; grid-row: 1 !important; }
    .patient-grid-compact .field-firstname { grid-column: 3 !important; grid-row: 1 !important; }
    .patient-grid-compact .field-middlename { grid-column: 4 !important; grid-row: 1 !important; }
    .patient-grid-compact .field-search { grid-column: 5 / span 2 !important; grid-row: 1 !important; justify-self: stretch !important; }
    .patient-grid-compact .field-sex { grid-column: 1 !important; grid-row: 2 !important; }
    .patient-grid-compact .field-weight-height { grid-column: 2 !important; grid-row: 2 !important; }
    .patient-grid-compact .field-phone { grid-column: 3 !important; grid-row: 2 !important; }
    .patient-grid-compact .field-email { grid-column: 4 !important; grid-row: 2 !important; }
    .patient-grid-compact .field-messengers { grid-column: 5 / span 2 !important; grid-row: 2 !important; }
    .patient-grid-compact .field-comment { grid-column: 1 / -1 !important; grid-row: 3 !important; }
    .patient-grid-compact .patient-lookup-box { grid-column: 1 / -1 !important; grid-row: 4 !important; }
}

@media (max-width: 900px) {
    .patient-grid.patient-grid-compact {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .patient-grid-compact .field-birth,
    .patient-grid-compact .field-lastname,
    .patient-grid-compact .field-firstname,
    .patient-grid-compact .field-middlename,
    .patient-grid-compact .field-search,
    .patient-grid-compact .field-sex,
    .patient-grid-compact .field-weight-height,
    .patient-grid-compact .field-phone,
    .patient-grid-compact .field-email,
    .patient-grid-compact .field-messengers,
    .patient-grid-compact .field-comment,
    .patient-grid-compact .patient-lookup-box {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .patient-search-actions {
        justify-content: flex-start !important;
    }
}

#patientResultsPanel.patient-results-card {
    display: block !important;
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #dbe4f1 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15,36,89,.06) !important;
}

#patientResultsPanel.hidden,
.hidden {
    display: none !important;
}

#patientResultsPanel .patient-results-head {
    margin-bottom: 8px !important;
}

#patientResultsPanel .patient-results-head h2 {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    color: #0f2459 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

#patientResultsPanel .patient-results-message {
    margin: 0 !important;
    color: #2c4a78 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

#patientResultsPanel .patient-results-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

#patientResultsPanel .patient-results-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    table-layout: fixed !important;
    margin: 0 !important;
}

#patientResultsPanel .patient-results-table th {
    background: transparent !important;
    color: #0c3f9f !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    text-align: left !important;
    padding: 4px 8px !important;
    border: none !important;
    white-space: nowrap !important;
}

#patientResultsPanel .patient-results-table td {
    background: #ffffff !important;
    color: #10275c !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 7px 8px !important;
    border-top: 1px solid #dce5f1 !important;
    border-bottom: 1px solid #dce5f1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#patientResultsPanel .patient-results-table td:first-child {
    border-left: 1px solid #dce5f1 !important;
    border-radius: 8px 0 0 8px !important;
    font-weight: 800 !important;
}

#patientResultsPanel .patient-results-table td:last-child {
    border-right: 1px solid #dce5f1 !important;
    border-radius: 0 8px 8px 0 !important;
}

#patientResultsPanel th:nth-child(1), #patientResultsPanel td:nth-child(1) { width: 25% !important; }
#patientResultsPanel th:nth-child(2), #patientResultsPanel td:nth-child(2) { width: 13% !important; }
#patientResultsPanel th:nth-child(3), #patientResultsPanel td:nth-child(3) { width: 9% !important; }
#patientResultsPanel th:nth-child(4), #patientResultsPanel td:nth-child(4) { width: 16% !important; }
#patientResultsPanel th:nth-child(5), #patientResultsPanel td:nth-child(5) { width: 20% !important; }
#patientResultsPanel th:nth-child(6), #patientResultsPanel td:nth-child(6) { width: 8% !important; }
#patientResultsPanel th:nth-child(7), #patientResultsPanel td:nth-child(7) { width: 9% !important; }

#patientResultsPanel .btn-select-patient {
    width: 74px !important;
    min-width: 74px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
}

#patientResultsPanel .source-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

#patientResultsPanel .source-mysql {
    background: #e8f8ef !important;
    color: #137a42 !important;
    border: 1px solid #a8dfbd !important;
}

#patientResultsPanel .source-lis {
    background: #edf5ff !important;
    color: #0959c9 !important;
    border: 1px solid #9fc6ff !important;
}

.selected-patient-box {
    margin: 0 0 12px 0 !important;
    padding: 9px 11px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    background: #eaf8ef !important;
    border: 1px solid #a9dfbd !important;
    border-radius: 10px !important;
    color: #145a34 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.selected-change-btn,
.btn-new-patient {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
}

.order-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    grid-template-areas:
        "search popular"
        "current tubes" !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
}

#testSearchPanel { grid-area: search !important; }
#currentOrderPanel { grid-area: current !important; }
#popularTestsPanel { grid-area: popular !important; }
#tubesPanel { grid-area: tubes !important; }

.left-stack,
.right-stack {
    display: contents !important;
}

.order-panel {
    padding: 10px !important;
}

.panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.panel-head h2 {
    margin: 0 !important;
    color: #0a5dff !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.small-muted {
    color: #71809e !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

.search-input-wrap {
    position: relative !important;
}

.search-input-wrap .input {
    padding-left: 27px !important;
}

.search-symbol {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #5d7093 !important;
    font-size: 10px !important;
}

.test-search-action-row,
.test-search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
}

.btn-add-test {
    width: 118px !important;
    min-width: 118px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
}

.test-results-list {
    margin-top: 7px !important;
    border: 1px solid #dde5f1 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.test-result-placeholder {
    padding: 10px !important;
    color: #677896 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.hint-line {
    margin-top: 7px !important;
    color: #667694 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.current-order-table th {
    background: #f4f8fd !important;
    color: #0d4fc6 !important;
    font-weight: 900 !important;
}

.current-order-table th,
.current-order-table td {
    padding: 7px 9px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.order-total-box {
    margin-top: 7px !important;
    display: grid !important;
    grid-template-columns: 22px 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    background: #ecfaf1 !important;
    border: 1px solid #bee4ca !important;
    border-radius: 9px !important;
}

.total-icon {
    width: 20px !important;
    height: 20px !important;
    background: #11a057 !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.total-label {
    color: #16325a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.total-value {
    color: #11925c !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.sync-note {
    margin-top: 7px !important;
    padding: 6px 8px !important;
    background: #f4f8fd !important;
    border: 1px solid #dce5f1 !important;
    border-radius: 9px !important;
    color: #3964bd !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

.order-actions-row {
    margin-top: 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 7px !important;
    overflow-x: auto !important;
}

.order-actions-row .btn-big,
.order-actions-row .btn-print-small {
    width: auto !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
}

#createOrderBtn { min-width: 145px !important; }
#newOrderSamePatientBtn { min-width: 128px !important; }
#clearOrderBtn { min-width: 100px !important; }
#printOrderBtn { min-width: 145px !important; }
#printBarcodeBtn { min-width: 130px !important; }

.popular-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.test-chip {
    min-width: 70px !important;
    min-height: 25px !important;
    padding: 4px 6px !important;
    border: 1px solid #a5c5ff !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #1e55b8 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.test-chip span {
    margin-left: 4px !important;
    color: #21375f !important;
    font-size: 9px !important;
    font-weight: 700 !important;
}

.tube-list {
    display: grid !important;
    gap: 2px !important;
}

.tube-row {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 5px 4px !important;
    border-bottom: 1px solid #e4ebf4 !important;
}

.tube-picture {
    width: 80px !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.tube-picture img {
    display: block !important;
    max-height: 62px !important;
    max-width: 62px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.tube-picture-pair {
    flex-direction: column !important;
}

.tube-picture-pair img {
    max-height: 31px !important;
    max-width: 58px !important;
}

.tube-missing {
    border: 1px dashed #9aa8ba !important;
    border-radius: 8px !important;
    background: #f5f8fd !important;
    color: #66758b !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.tube-name,
.tube-count {
    color: #193564 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.tube-total {
    margin-top: 6px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    background: #f3f8ff !important;
    border: 1px solid #d5e2f4 !important;
    text-align: center !important;
    color: #1e55b8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.tube-warning {
    margin-top: 7px !important;
    color: #d81e25 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

#barcodePanel,
.barcode-card,
.order-side-info {
    display: none !important;
}

.locked-panel {
    opacity: .48 !important;
    filter: grayscale(.18) !important;
    pointer-events: none !important;
}

.order-card.locked-panel {
    background: #fbfcff !important;
}

@media (max-width: 1280px) {
    .order-main-grid {
        grid-template-columns: minmax(0, 1fr) 280px !important;
    }
    .order-title-row {
        grid-template-columns: minmax(0, 1fr) 220px !important;
    }
    .order-number-header-card {
        width: 220px !important;
    }
}
/* =========================================================
   ORDER PAGE — NEW REQUEST BUTTON, NO GREEN SELECTED PANEL
   ========================================================= */

/* Зелену панель обраного пацієнта прибираємо повністю */
.selected-patient-box,
#selectedPatientBox {
    display: none !important;
}

/* Кнопки Пошук + Нова заявка в одному рядку */
.patient-search-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Кнопка Пошук */
.patient-search-actions .order-search-btn {
    width: 118px !important;
    min-width: 118px !important;
    height: 34px !important;
    min-height: 34px !important;
}

/* Кнопка Нова заявка */
.new-request-btn {
    width: 116px !important;
    min-width: 116px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

/* =========================================================
   ORDER PAGE — TRUE LEFT / RIGHT STACK LAYOUT
   ========================================================= */

body:has(.order-page) .order-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-areas:
        "search popular"
        "current tubes" !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Wrappers are structural only; panels participate in the order grid. */
body:has(.order-page) .left-stack {
    display: contents !important;
}

body:has(.order-page) .right-stack {
    display: contents !important;
}

body:has(.order-page) #testSearchPanel,
body:has(.order-page) #currentOrderPanel,
body:has(.order-page) #popularTestsPanel,
body:has(.order-page) #tubesPanel {
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

body:has(.order-page) #testSearchPanel { grid-area: search !important; align-self: stretch !important; }
body:has(.order-page) #popularTestsPanel { grid-area: popular !important; align-self: stretch !important; }
body:has(.order-page) #currentOrderPanel { grid-area: current !important; align-self: start !important; }
body:has(.order-page) #tubesPanel { grid-area: tubes !important; align-self: start !important; }

/* Компактна висота панелі пошуку */
body:has(.order-page) #testSearchPanel {
    min-height: 0 !important;
    height: auto !important;
}

/* Поточна заявка росте вниз, а не створює порожній проміжок */
body:has(.order-page) #currentOrderPanel {
    min-height: 0 !important;
    height: auto !important;
}

/* Список результатів пошуку тестів не створює зайвої висоти */
body:has(.order-page) #testResultsList {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

/* Якщо ордер порожній — таблиця компактна */
body:has(.order-page) #orderItemsBody .muted.center {
    padding: 10px !important;
}

/* На вужчих екранах права колонка трохи менша */
@media (max-width: 1280px) {
    body:has(.order-page) .order-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }
}


/* =========================================================
   ORDER PAGE — FINAL LEFT/RIGHT STACK OVERRIDE
   Use with order_new.php where #testSearchPanel and #currentOrderPanel
   are wrapped in .left-stack.
   ========================================================= */

body:has(.order-page) .order-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-areas:
        "search popular"
        "current tubes" !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

body:has(.order-page) .order-main-grid > .left-stack {
    display: contents !important;
}

body:has(.order-page) .order-main-grid > .right-stack {
    display: contents !important;
}

body:has(.order-page) .left-stack > #testSearchPanel,
body:has(.order-page) .left-stack > #currentOrderPanel,
body:has(.order-page) .right-stack > #popularTestsPanel,
body:has(.order-page) .right-stack > #tubesPanel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

body:has(.order-page) .left-stack > #testSearchPanel { grid-area: search !important; align-self: stretch !important; }
body:has(.order-page) .right-stack > #popularTestsPanel { grid-area: popular !important; align-self: stretch !important; }
body:has(.order-page) .left-stack > #currentOrderPanel { grid-area: current !important; align-self: start !important; }
body:has(.order-page) .right-stack > #tubesPanel { grid-area: tubes !important; align-self: start !important; }

/* compact empty panels */
body:has(.order-page) #testResultsList {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

body:has(.order-page) #testResultsList .test-result-placeholder,
body:has(.order-page) .test-result-placeholder {
    min-height: 0 !important;
    padding: 10px !important;
    margin: 0 !important;
}

body:has(.order-page) #currentOrderPanel {
    min-height: 0 !important;
    height: auto !important;
}

body:has(.order-page) #orderItemsBody .muted.center {
    padding: 10px !important;
}

@media (max-width: 1280px) {
    body:has(.order-page) .order-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }
}

@media (max-width: 980px) {
    body:has(.order-page) .order-main-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "search"
            "popular"
            "current"
            "tubes" !important;
    }
}
/* Patients concept update: Пацієнти + Журнал відправки */
.patients-section-head {
    align-items: flex-start;
}

.patients-main-tabs {
    margin: 4px 0 6px;
}

.patients-list-table td:first-child {
    min-width: 320px;
}

.patient-birth-inline {
    color: #52627a;
    font-weight: 700;
    margin-left: 8px;
    white-space: nowrap;
}

.patient-summary-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px 44px;
}

.patient-head-wide {
    padding-bottom: 10px;
}

.patient-profile-form {
    margin-top: 20px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
}

.profile-form-grid .form-field:first-child {
    grid-column: span 2;
}

.profile-actions-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}

@media (max-width: 1200px) {
    .profile-form-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .profile-form-grid,
    .patient-summary-grid {
        grid-template-columns: 1fr;
    }
}
/* Patients date-group view */
.patients-date-card {
    padding: 14px 20px;
}

.patients-toolbar {
    margin-bottom: 10px;
}

.patients-search-input {
    min-width: 360px;
}

.patients-date-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.patient-day-group {
    border: 1px solid #cfe0f7;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(13, 52, 112, 0.05);
}

.patient-day-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border-bottom: 1px solid #d7e5f8;
}

.patient-day-summary::-webkit-details-marker {
    display: none;
}

.patient-day-summary::after {
    content: "⌄";
    margin-left: auto;
    color: #1e55b8;
    font-size: 22px;
    font-weight: 900;
    transition: transform .18s ease;
}

.patient-day-group:not([open]) .patient-day-summary::after {
    transform: rotate(-90deg);
}

.patient-day-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #1e55b8, #2e78ff);
    box-shadow: 0 8px 18px rgba(11, 87, 255, .22);
    flex: 0 0 auto;
}

.patient-day-title {
    color: #082466;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
}

.patient-day-count {
    color: #587095;
    font-weight: 800;
    margin-left: 6px;
}

.patient-day-body {
    padding: 0;
}

.patient-day-table {
    width: 100%;
    border-collapse: collapse;
}

.patient-day-table tr {
    border-bottom: 1px solid #e3edf9;
    cursor: pointer;
    transition: background .15s ease;
}

.patient-day-table tr:last-child {
    border-bottom: none;
}

.patient-day-table tr:hover {
    background: #f4f8ff;
}

.patient-day-table td {
    padding: 14px 18px;
    vertical-align: middle;
}

.patient-day-number {
    width: 74px;
    color: #1e55b8;
    font-weight: 900;
    white-space: nowrap;
}

.patient-day-kind {
    width: 42px;
    color: #082466;
    font-weight: 900;
    text-align: center;
}

.patient-day-patient a {
    color: #001b58;
    text-decoration: none;
    font-weight: 900;
    font-size: 18px;
}

.patient-day-patient a:hover {
    color: #1e55b8;
}

.patient-birth-inline {
    color: #52627a;
    font-weight: 800;
    margin-left: 8px;
    white-space: nowrap;
}

.empty-date-patients {
    padding: 28px;
    border: 1px solid #d7e5f8;
    border-radius: 18px;
    background: #fff;
}

@media (max-width: 760px) {
    .patients-date-card {
        padding: 18px;
    }

    .patients-search-input {
        min-width: 0;
        width: 100%;
    }

    .patient-day-title {
        font-size: 18px;
    }

    .patient-day-table td {
        padding: 12px 10px;
    }

    .patient-day-kind {
        display: none;
    }
}

/* =========================================================
   PATIENTS DATE GROUP — COMPACT FONT FIX
   ========================================================= */

.patients-date-card {
    padding: 14px 20px !important;
}

.patients-toolbar {
    margin-bottom: 10px !important;
}

.patient-day-summary {
    padding: 11px 16px !important;
    gap: 10px !important;
}

.patient-day-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;
}

.patient-day-title {
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.patient-day-count {
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin-left: 6px !important;
}

.patient-day-summary::after {
    font-size: 16px !important;
}

.patient-day-table td {
    padding: 8px 14px !important;
}

.patient-day-number,
.patient-day-kind {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.patient-day-number {
    width: 60px !important;
}

.patient-day-kind {
    width: 34px !important;
}

.patient-day-patient a {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.patient-birth-inline {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-left: 7px !important;
}

@media (max-width: 760px) {
    .patient-day-title {
        font-size: 15px !important;
    }

    .patient-day-patient a {
        font-size: 13px !important;
    }

    .patient-birth-inline {
        font-size: 12px !important;
    }
}
.patient-day-kind {
    display: none !important;
}
/* =========================================================
   PROLAB RESPONSIVE DESIGN SYSTEM 100 PERCENT
   Professional responsive sizing without browser zoom hacks
   ========================================================= */

/*
   Головна ідея:
   - браузер залишається на 100%;
   - дизайн стискається через змінні, clamp(), max-width/minmax і нормальні breakpoints;
   - немає global transform: scale() і немає body zoom.
*/

:root {
    /* Layout */
    --ui-page-bg: #eef5fb;
    --ui-sidebar-w: clamp(218px, 14.3vw, 258px);
    --ui-shell-gap: clamp(10px, 0.85vw, 16px);
    --ui-shell-pad: clamp(10px, 0.85vw, 16px);
    --ui-content-pad-x: clamp(14px, 1.25vw, 22px);
    --ui-content-pad-y: clamp(16px, 1.35vw, 24px);

    /* Typography */
    --ui-font-base: clamp(13px, 0.82vw, 15px);
    --ui-font-small: clamp(11px, 0.72vw, 13px);
    --ui-font-menu: clamp(13px, 0.86vw, 15px);
    --ui-font-title: clamp(27px, 2.15vw, 38px);
    --ui-font-section: clamp(20px, 1.45vw, 27px);
    --ui-font-card-title: clamp(16px, 1.05vw, 19px);

    /* Controls */
    --ui-control-h: clamp(36px, 2.55vw, 44px);
    --ui-btn-h: 34px;
    --ui-btn-pad-x: 12px;
    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;

    /* Colors */
    --ui-blue: #1e55b8;
    --ui-blue-2: #174a9f;
    --ui-blue-3: #1e55b8;
    --ui-ink: #05070f;
    --ui-muted: #63759b;
    --ui-border: #d7e6f8;
    --ui-soft: #edf5ff;
    --ui-shadow: 0 10px 28px rgba(23,63,138,.10);
}

/* Base: no forced browser-scale, no fixed minimum page width */
html,
body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background: var(--ui-page-bg) !important;
    font-size: var(--ui-font-base) !important;
}

/* Cancel old pseudo-scale patterns if any were added earlier */
body,
.app-shell,
.prolab-login-shell,
.login-shell,
.login-reference-shell {
    zoom: 1 !important;
}

body:not(.prolab-login-page) .app-shell {
    transform: none !important;
    width: auto !important;
    min-height: auto !important;
}

/* Portal shell */
.app-shell-dashboard,
.app-shell {
    display: grid !important;
    grid-template-columns: var(--ui-sidebar-w) minmax(0, 1fr) !important;
    gap: var(--ui-shell-gap) !important;
    padding: var(--ui-shell-pad) !important;
    min-height: 100vh !important;
    background: var(--ui-page-bg) !important;
}

/* Sidebar */
.dashboard-sidebar,
.sidebar {
    width: var(--ui-sidebar-w) !important;
    min-width: var(--ui-sidebar-w) !important;
    height: calc(100vh - (var(--ui-shell-pad) * 2)) !important;
    min-height: min(760px, calc(100vh - (var(--ui-shell-pad) * 2))) !important;
    top: var(--ui-shell-pad) !important;
    padding: clamp(18px, 1.25vw, 24px) clamp(12px, .9vw, 16px) 0 !important;
    border-radius: clamp(18px, 1.25vw, 24px) !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 52%,
            #ddebff 68%,
            #1e55b8 86%,
            #1e55b8 100%
        ) !important;
    overflow: hidden !important;
}

.sidebar-logo {
    padding: clamp(4px, .7vw, 10px) 6px clamp(22px, 2vw, 34px) !important;
}

.sidebar-logo img {
    width: clamp(168px, 11.8vw, 218px) !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Navigation */
.dashboard-nav,
.nav {
    gap: clamp(6px, .55vw, 10px) !important;
}

.nav-item {
    display: flex !important;
    align-items: center !important;
    min-height: clamp(42px, 3.1vw, 52px) !important;
    padding: 0 clamp(10px, .85vw, 15px) !important;
    gap: clamp(9px, .75vw, 13px) !important;
    border-radius: clamp(10px, .75vw, 13px) !important;
    background: transparent !important;
    color: #002e7a !important;
    font-size: var(--ui-font-menu) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.nav-item:hover {
    background: #eef6ff !important;
    color: #1e55b8 !important;
    text-decoration: none !important;
}

.nav-item.active {
    background: #1e55b8 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(30, 85, 184, .18) !important;
}

.nav-item.active .nav-icon {
    color: #ffffff !important;
}

.nav-icon {
    width: clamp(22px, 1.7vw, 28px) !important;
    height: clamp(22px, 1.7vw, 28px) !important;
    min-width: clamp(22px, 1.7vw, 28px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
}

.nav-icon svg {
    display: block !important;
    width: clamp(21px, 1.55vw, 26px) !important;
    height: clamp(21px, 1.55vw, 26px) !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.nav-icon svg path,
.nav-icon svg circle,
.nav-icon svg line,
.nav-icon svg polyline,
.nav-icon svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

/* Sidebar bottom icon cloud */
.sidebar-icon-cloud,
.sidebar .sidebar-icon-cloud {
    left: clamp(14px, .9vw, 18px) !important;
    right: clamp(14px, .9vw, 18px) !important;
    bottom: clamp(24px, 1.9vw, 36px) !important;
    height: clamp(150px, 12vw, 195px) !important;
    transform: none !important;
}

.sidebar-med-square {
    width: clamp(40px, 3vw, 50px) !important;
    height: clamp(40px, 3vw, 50px) !important;
}

.sidebar-med-square svg {
    width: clamp(24px, 1.85vw, 30px) !important;
    height: clamp(24px, 1.85vw, 30px) !important;
}

/* Main content */
.dashboard-main,
.main {
    min-width: 0 !important;
    width: 100% !important;
    padding-top: 0 !important;
}

.dashboard-main .content,
.main .content,
.content {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    align-content: start !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: var(--ui-content-pad-y) var(--ui-content-pad-x) clamp(22px, 1.8vw, 32px) !important;
}

/* Top service row: clinic / user / logout */
.portal-inline-head {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: var(--ui-control-h) !important;
    pointer-events: auto !important;
}

.portal-inline-spacer {
    display: none !important;
}

.portal-inline-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, .75vw, 12px) !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    pointer-events: auto !important;
}

.portal-inline-actions .home-clinic-chip,
.portal-global-userbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--ui-control-h) !important;
    min-height: var(--ui-control-h) !important;
    max-height: var(--ui-control-h) !important;
    padding: 0 clamp(12px, .9vw, 16px) !important;
    gap: 8px !important;
    border-radius: clamp(10px, .75vw, 12px) !important;
    border: 1px solid #b8d3ff !important;
    background: #ffffff !important;
    color: #1e55b8 !important;
    box-shadow: 0 10px 22px rgba(30, 85, 184, .08) !important;
    font-size: var(--ui-font-small) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.home-clinic-chip,
.home-userbox,
.portal-global-chip,
.portal-global-userbox {
    text-decoration: none !important;
}

.portal-inline-actions .home-clinic-chip {
    max-width: clamp(230px, 24vw, 560px) !important;
}

.portal-inline-actions .home-clinic-chip span,
.portal-global-userbox .home-user-avatar,
.portal-global-userbox .home-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
}

.portal-inline-actions .home-clinic-chip strong {
    font-size: var(--ui-font-small) !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.portal-global-userbox {
    gap: clamp(7px, .6vw, 10px) !important;
    padding: 0 clamp(8px, .75vw, 12px) !important;
    color: #05070f !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.portal-global-userbox .home-user-avatar {
    width: var(--ui-control-h) !important;
    height: var(--ui-control-h) !important;
    min-width: var(--ui-control-h) !important;
    padding: 0 !important;
    border: 1px solid #d5e6ff !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #002e7a !important;
}

.portal-inline-actions svg,
.portal-global-userbox .home-user-avatar svg {
    width: clamp(21px, 1.55vw, 24px) !important;
    height: clamp(21px, 1.55vw, 24px) !important;
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.portal-inline-actions svg path,
.portal-inline-actions svg circle,
.portal-inline-actions svg line,
.portal-inline-actions svg polyline,
.portal-inline-actions svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

.portal-global-userbox strong {
    font-size: clamp(12px, .82vw, 14px) !important;
    font-weight: 900 !important;
    max-width: clamp(105px, 9vw, 150px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.portal-global-userbox .home-logout {
    width: var(--ui-control-h) !important;
    height: var(--ui-control-h) !important;
    min-width: var(--ui-control-h) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #1e55b8 !important;
    text-decoration: none !important;
}

.portal-global-userbox .home-logout svg {
    width: clamp(20px, 1.4vw, 22px) !important;
    height: clamp(20px, 1.4vw, 22px) !important;
}

/* Page title row */
.home-head,
.page-head,
.batch-print-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(10px, .9vw, 16px) !important;
    padding: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(5px, .45vw, 8px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.page-head > div,
.batch-print-head > div,
.order-title-left {
    min-width: 0 !important;
}

.home-head {
    display: none !important;
}

.home-title-block {
    min-width: 0 !important;
}

/* Page titles */
.home-head h1,
.page-title-with-icon,
.order-title-row h1,
.batch-print-head h1 {
    color: #05070f !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.page-title-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1vw, 18px) !important;
    margin: 0 !important;
}

.page-title-with-icon span:last-child {
    color: #05070f !important;
}

.home-head p,
.page-head .muted,
.order-subtitle,
.topbar-page-subtitle,
.batch-print-head p {
    color: #6d7ea4 !important;
    font-size: clamp(13px, .9vw, 15px) !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
    line-height: 1.22 !important;
}

.page-title-icon,
.order-title-icon {
    width: clamp(48px, 3.8vw, 64px) !important;
    height: clamp(48px, 3.8vw, 64px) !important;
    min-width: clamp(48px, 3.8vw, 64px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: clamp(12px, .9vw, 16px) !important;
    background: #1e55b8 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(30, 85, 184, .18) !important;
}

.page-title-icon svg,
.order-title-icon svg {
    display: block !important;
    width: clamp(25px, 2vw, 34px) !important;
    height: clamp(25px, 2vw, 34px) !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.page-title-icon svg path,
.page-title-icon svg circle,
.page-title-icon svg line,
.page-title-icon svg polyline,
.page-title-icon svg polygon,
.order-title-icon svg path,
.order-title-icon svg circle,
.order-title-icon svg line,
.order-title-icon svg polyline,
.order-title-icon svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

/* Tabs */
.tabs,
.documents-tabs,
.patients-main-tabs,
.results-module-tabs,
.admin-tabs,
.admin-tabs-grouped,
.page-tabs,
.portal-tabs {
    display: flex !important;
    align-items: flex-end !important;
    gap: clamp(6px, .6vw, 10px) !important;
    margin-top: clamp(4px, .45vw, 7px) !important;
    margin-bottom: clamp(2px, .2vw, 4px) !important;
    padding: 0 !important;
    border-bottom: 1px solid #cfe0fb !important;
}

.tab,
.tab-link,
.tabs a,
.documents-tabs .tab,
.patients-main-tabs .tab,
.results-module-tab,
.admin-tab,
.page-tab,
.portal-tab {
    position: relative !important;
    top: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    border: 1px solid #cfe0fb !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f5f9ff !important;
    color: #082466 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

.tab.active,
.tabs .tab.active,
.patients-main-tabs .tab.active,
.documents-tabs .tab.active,
.results-module-tab.active,
.admin-tab.active,
.page-tab.active,
.portal-tab.active {
    top: 1px !important;
    z-index: 1 !important;
    background: #ffffff !important;
    color: #d71920 !important;
    border-color: #cfe0fb !important;
    border-bottom-color: #ffffff !important;
}

.tab-disabled {
    opacity: .6 !important;
    cursor: default !important;
}

/* Cards, sections */
.card,
.patient-card,
.patients-date-card,
.profile-modern-card,
.messages-card,
.order-card,
.results-search-card,
.results-orders-card,
.result-patient-card,
.result-group-card,
.admin-card,
.filter-drawer,
.filter-drawer-panel,
.results-date-filter-drawer,
.home-action-card,
.home-info-strip,
.home-hero {
    background: #ffffff !important;
    border: 1px solid #d5e6ff !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow) !important;
}

.card,
.patient-card,
.patients-card,
.patients-date-card,
.profile-modern-card,
.messages-card,
.order-card,
.results-search-card,
.results-orders-card,
.result-patient-card,
.result-group-card,
.admin-card,
.content-section,
.page-section {
    margin-top: 0 !important;
    margin-bottom: clamp(10px, .85vw, 14px) !important;
}

.page-head + .tabs,
.page-head + .patients-main-tabs,
.page-head + .results-module-tabs,
.page-head + .documents-tabs,
.page-head + .admin-tabs,
.page-head + .admin-tabs-grouped {
    margin-top: clamp(6px, .5vw, 9px) !important;
}

.tabs + .card,
.tabs + .patients-date-card,
.tabs + .results-search-card,
.tabs + .content-section,
.tabs + .page-section,
.tabs + .section-card,
.patients-main-tabs + .patients-date-card,
.results-module-tabs + .results-search-card,
.documents-tabs + .card,
.admin-tabs + .card,
.admin-tabs-grouped + .card {
    margin-top: clamp(4px, .4vw, 8px) !important;
}

.results-search-card + .results-orders-card,
.content-section + .content-section,
.page-section + .page-section,
.section-card + .section-card {
    margin-top: clamp(12px, .9vw, 18px) !important;
}

/* Profile */
.profile-modern-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
    gap: clamp(18px, 1.7vw, 30px) !important;
    align-items: stretch !important;
    padding: clamp(22px, 1.8vw, 32px) !important;
}

.profile-info-table,
.profile-edit-form {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.profile-row {
    display: grid !important;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border: 1px solid #d7e6f8 !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
}

.profile-label {
    color: #6d7ea4 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.profile-value,
.profile-readonly-value {
    min-width: 0 !important;
    color: #05070f !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}

.profile-role-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border: 1px solid #bdd8ff !important;
    border-radius: 999px !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.profile-role-panel {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: clamp(18px, 1.5vw, 26px) !important;
    border: 1px solid #d7e6f8 !important;
    border-radius: var(--ui-radius-lg) !important;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
}

.profile-role-illustration {
    width: clamp(86px, 7vw, 118px) !important;
    height: clamp(86px, 7vw, 118px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
}

.profile-role-illustration svg {
    width: clamp(56px, 4.8vw, 82px) !important;
    height: clamp(56px, 4.8vw, 82px) !important;
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.profile-role-illustration svg path,
.profile-role-illustration svg circle,
.profile-role-illustration svg line,
.profile-role-illustration svg polyline,
.profile-role-illustration svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

.profile-current-role {
    text-align: center !important;
    color: #6d7ea4 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.profile-current-role strong {
    display: block !important;
    margin-top: 4px !important;
    color: #05070f !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.profile-edit-card {
    align-items: start !important;
}

.profile-edit-field {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.profile-edit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}

.profile-edit-note {
    align-self: end !important;
    padding: 12px 14px !important;
    border: 1px solid #d7e6f8 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #6d7ea4 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* Messages */
.messages-card {
    padding: clamp(22px, 1.8vw, 32px) !important;
}

.messages-list {
    display: grid !important;
    gap: 12px !important;
}

.messages-filter-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 0 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #d7e6f8 !important;
}

.messages-filter-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #cfe0fb !important;
    border-radius: 999px !important;
    background: #f5f9ff !important;
    color: #082466 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.messages-filter-tab.active {
    background: #ffffff !important;
    color: #d71920 !important;
    border-color: #bfd4f6 !important;
}

.message-item {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 14px 16px !important;
    border: 1px solid #d7e6f8 !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
}

.message-icon,
.empty-state-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
}

.message-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
}

.message-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.message-icon svg,
.empty-state-icon svg {
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.message-icon svg path,
.message-icon svg circle,
.message-icon svg line,
.message-icon svg polyline,
.message-icon svg polygon,
.empty-state-icon svg path,
.empty-state-icon svg circle,
.empty-state-icon svg line,
.empty-state-icon svg polyline,
.empty-state-icon svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

.message-body {
    min-width: 0 !important;
}

.message-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: #05070f !important;
}

.message-row strong {
    font-weight: 900 !important;
}

.message-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.message-status-sent {
    background: #e8f8f0 !important;
    border-color: #bcebd0 !important;
    color: #08764b !important;
}

.message-status-error {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
    color: #be123c !important;
}

.message-status-warn {
    background: #fff7e6 !important;
    border-color: #fde3a7 !important;
    color: #b45309 !important;
}

.message-status-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e55b8 !important;
}

.message-time {
    color: #6d7ea4 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.message-text {
    margin-top: 5px !important;
    color: #2d3b52 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.message-link {
    display: inline-flex !important;
    margin-top: 8px !important;
    color: #1e55b8 !important;
    font-weight: 900 !important;
}

.empty-state {
    display: grid !important;
    justify-items: center !important;
    gap: 10px !important;
    padding: clamp(24px, 2vw, 36px) !important;
    border: 1px dashed #bdd6fb !important;
    border-radius: var(--ui-radius-lg) !important;
    background: #f8fbff !important;
    text-align: center !important;
}

.empty-state-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
}

.empty-state-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.empty-state h2 {
    margin: 0 !important;
    color: #05070f !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.empty-state p {
    max-width: 560px !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .profile-modern-card {
        grid-template-columns: 1fr !important;
    }

    .profile-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

.card,
.patient-card,
.order-card,
.admin-card {
    padding: clamp(18px, 1.55vw, 28px) !important;
}

.card h2,
.patient-card h2,
.order-card h2,
.card-title,
.section-title {
    font-size: var(--ui-font-section) !important;
    line-height: 1.15 !important;
}

/* Toolbars and filter drawers */
.filter-drawer-form,
.patients-toolbar,
.journal-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(14px, 1.1vw, 20px) !important;
    margin: 0 0 clamp(16px, 1.2vw, 22px) !important;
}

.filter-drawer-toprow,
.filter-drawer-toolbar-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(16px, 1.3vw, 24px) !important;
    width: 100% !important;
}

.journal-title-period {
    min-width: 0 !important;
}

.journal-section-title {
    margin: 0 0 6px !important;
    color: #05070f !important;
    font-size: var(--ui-font-section) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.active-filter-summary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    color: #6d7ea4 !important;
    font-size: clamp(13px, .88vw, 15px) !important;
    font-weight: 800 !important;
}

.active-filter-summary strong {
    color: #05070f !important;
    font-weight: 900 !important;
}

.active-filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border: 1px solid #cfe0fb !important;
    border-radius: 999px !important;
    background: #f5f9ff !important;
    color: #1e55b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.filter-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.filter-drawer-panel {
    position: fixed !important;
    top: clamp(16px, 1.4vw, 24px) !important;
    right: clamp(16px, 1.4vw, 24px) !important;
    z-index: 901 !important;
    width: min(430px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    overflow: auto !important;
    padding: clamp(20px, 1.55vw, 28px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(calc(100% + 32px)) !important;
    transition: transform .18s ease, opacity .18s ease !important;
}

.filter-drawer-panel.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.filter-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid #d7e6f8 !important;
}

.filter-drawer-head h3 {
    margin: 0 !important;
    color: #05070f !important;
    font-size: clamp(22px, 1.7vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

.filter-drawer-close,
.results-date-filter-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
    box-shadow: none !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.filter-drawer-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid #d7e6f8 !important;
}

.filter-field {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.filter-field .input,
.filter-field select,
.filter-field input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.filter-drawer-actions,
.results-date-filter-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.filter-drawer-actions .btn,
.results-date-filter-actions .btn {
    flex: 0 0 auto !important;
}

.filter-drawer-backdrop,
.results-filter-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 900 !important;
    background: rgba(20, 38, 70, .22) !important;
}

.filter-drawer-backdrop {
    display: none !important;
}

body.filter-drawer-open .filter-drawer-backdrop {
    display: block !important;
}

@media (max-width: 900px) {
    .filter-drawer-toprow,
    .filter-drawer-toolbar-row {
        grid-template-columns: 1fr !important;
    }

    .filter-toolbar-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* Forms */
.input,
select.input,
textarea.input,
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
select {
    min-height: var(--ui-control-h) !important;
    height: var(--ui-control-h) !important;
    border-radius: clamp(9px, .75vw, 12px) !important;
    font-size: var(--ui-font-base) !important;
    padding-left: clamp(12px, .9vw, 16px) !important;
    padding-right: clamp(12px, .9vw, 16px) !important;
}

textarea.input,
textarea {
    height: auto !important;
    min-height: clamp(70px, 5.2vw, 96px) !important;
}

label,
.form-field label {
    font-size: clamp(12px, .78vw, 14px) !important;
    font-weight: 900 !important;
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.admin-btn,
.admin-nav-item,
.patient-search-actions .order-search-btn,
.new-request-btn,
.filter-open-btn,
.results-open-filter-btn,
.batch-print-open-filter-btn,
.btn-search,
.order-search-btn,
.order-new-request-btn,
.patients-toolbar-new-order,
.btn-icon-filter,
.btn-icon-apply,
.btn-icon-clear,
.btn-icon-upload,
.btn-icon-edit,
.profile-edit-btn,
.profile-update-btn,
.patient-summary-new-order-btn,
.btn-add-test,
.btn-big,
.btn-print-small,
.btn-new-patient,
.btn-select-patient,
.results-search-actions .btn,
.results-date-filter-actions .btn,
.results-view-page .results-print-actions .btn,
.filter-drawer-actions .btn,
.price-search-row .btn,
form .btn-icon-search,
#newOrderBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: none !important;
    height: var(--ui-btn-h) !important;
    min-height: var(--ui-btn-h) !important;
    max-height: var(--ui-btn-h) !important;
    padding: 0 var(--ui-btn-pad-x) !important;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
}

.btn-primary,
.filter-open-btn,
.results-open-filter-btn,
.batch-print-open-filter-btn,
.btn-search,
.order-search-btn,
.order-new-request-btn,
.patients-toolbar-new-order,
.patient-summary-new-order-btn,
.btn-add-test,
.btn-big,
.btn-new-patient,
.btn-select-patient,
form .btn-icon-search,
#newOrderBtn {
    border-color: #1e55b8 !important;
    background: #1e55b8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(30, 85, 184, .18) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-print-small {
    background: #ffffff !important;
    color: #1e55b8 !important;
    border-color: #c8d6ec !important;
    box-shadow: none !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover,
.filter-open-btn:hover,
.results-open-filter-btn:hover,
.batch-print-open-filter-btn:hover {
    opacity: .96 !important;
    text-decoration: none !important;
    transform: none !important;
}

.btn:disabled,
.btn[disabled],
button.btn:disabled,
button.btn[disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Search/new-order buttons should not become oversized */
.patient-search-actions .order-search-btn,
.new-request-btn,
.filter-open-btn,
.results-open-filter-btn,
.batch-print-open-filter-btn,
.order-search-btn,
form .btn-icon-search,
.btn-search {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}

.order-new-request-btn,
.patients-toolbar-new-order,
.patient-summary-new-order-btn,
#newOrderBtn {
    flex: 0 0 148px !important;
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
}

.order-page #newOrderBtn,
.order-page .order-new-request-btn {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

.order-page #patientSearchBtn,
.order-page .order-search-btn {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    padding: 0 10px !important;
}

.btn[class*="btn-icon-"]::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background-color: currentColor !important;
    -webkit-mask: var(--btn-icon) center / contain no-repeat !important;
    mask: var(--btn-icon) center / contain no-repeat !important;
}

.btn-icon-filter { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16l-6.5 7.5V19l-3 1v-7.5L4 5z' fill='black'/%3E%3C/svg%3E"); }
.btn-icon-plus { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.btn-icon-search { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='m16 16 4 4' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.btn-icon-print { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v5H7zM6 17H4V9h16v8h-2M7 14h10v7H7z' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-icon-clear,
.btn-icon-trash { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.btn-icon-apply,
.btn-icon-check { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5L20 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-icon-upload { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-icon-download { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v12M7 11l5 5 5-5M5 20h14' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-icon-edit { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.5V21h3.5L19 9.5 15.5 6 4 17.5zM14 7.5 16.5 10' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn-icon-barcode { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5v14M8 5v14M11 5v14M16 5v14M20 5v14' stroke='black' stroke-width='2.8'/%3E%3C/svg%3E"); }
.btn-icon-save { --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h13l1 1v15H5zM8 4v6h8V4M8 17h8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Tables */
.data-table,
.price-table,
table,
.admin-table {
    font-size: clamp(12px, .82vw, 15px) !important;
}

.data-table th,
.data-table td,
.price-table th,
.price-table td,
.admin-table th,
.admin-table td,
table th,
table td {
    padding: clamp(10px, .9vw, 16px) clamp(10px, .95vw, 18px) !important;
}

.data-table,
.price-table,
.admin-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #d5e6ff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.data-table th,
.price-table th,
.admin-table th {
    background: #f2f7ff !important;
    color: #05070f !important;
    font-weight: 900 !important;
}

.table-wrapper,
.admin-table-scroll,
.result-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

/* Home page */
.home-head {
    display: none !important;
}

.home-page {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: clamp(14px, 1.2vw, 20px) !important;
    align-content: start !important;
    min-width: 0 !important;
}

.content:has(.home-page) {
    row-gap: clamp(12px, 1vw, 18px) !important;
}

.home-hero {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: var(--ui-radius-lg) !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}

.home-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: clamp(12px, 1vw, 18px) !important;
    margin: 0 !important;
}

.home-action-card {
    min-height: 148px !important;
    height: auto !important;
    padding: clamp(16px, 1.25vw, 22px) clamp(12px, 1vw, 18px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #05070f !important;
    text-decoration: none !important;
}

.home-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    border-radius: 50% !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
}

.home-card-icon svg,
.home-info-item svg {
    display: block !important;
    color: currentColor !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.home-card-icon svg path,
.home-card-icon svg circle,
.home-card-icon svg line,
.home-card-icon svg polyline,
.home-card-icon svg polygon,
.home-info-item svg path,
.home-info-item svg circle,
.home-info-item svg line,
.home-info-item svg polyline,
.home-info-item svg polygon {
    stroke: currentColor !important;
    fill: none !important;
}

.home-card-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.home-action-card strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 0 0 7px !important;
}

.home-action-card small {
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #657399 !important;
    font-weight: 700 !important;
}

.home-info-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.home-info-item {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 22px !important;
    min-width: 0 !important;
}

.home-info-item + .home-info-item {
    border-left: 1px solid #d5e6ff !important;
}

.home-info-item > span {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
}

.home-info-item svg {
    width: 24px !important;
    height: 24px !important;
}

.home-info-item strong {
    display: block !important;
    color: #05070f !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.home-info-item small {
    display: block !important;
    margin-top: 4px !important;
    color: #657399 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.home-card-icon svg {
    width: clamp(28px, 2.55vw, 38px) !important;
    height: clamp(28px, 2.55vw, 38px) !important;
}

.home-action-card strong {
    font-size: var(--ui-font-card-title) !important;
}

.home-action-card small {
    font-size: clamp(11px, .78vw, 13px) !important;
}

/* Order page */
html body:has(.order-page) .content {
    padding-top: var(--ui-content-pad-y) !important;
}

html body:has(.order-page) .order-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: clamp(5px, .45vw, 8px) !important;
}

html body:has(.order-page) .order-title-left {
    min-width: 0 !important;
}

html body:has(.order-page) .order-number-header-card {
    justify-self: end !important;
}

html body:has(.order-page) .order-title-row h1 {
    white-space: nowrap !important;
    font-size: clamp(24px, 1.85vw, 34px) !important;
}

/* Login page: make it responsive, not browser-zoom dependent */
body.prolab-login-page {
    min-width: 0 !important;
    min-height: 100vh !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(18px, 2vw, 36px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        linear-gradient(135deg, #eef5ff 0%, #f8fbff 42%, #ffffff 100%) !important;
}

body.prolab-login-page .prolab-login-shell,
body.prolab-login-page .login-shell,
body.prolab-login-page .login-reference-shell {
    position: relative !important;
    width: min(96vw, 1500px) !important;
    max-width: 1500px !important;
    display: block !important;
    aspect-ratio: 1672 / 941 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: clamp(20px, 1.8vw, 32px) !important;
    transform: none !important;
}

body.prolab-login-page .prolab-login-reference {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

body.prolab-login-page .login-panel,
body.prolab-login-page .prolab-login-panel,
body.prolab-login-page .login-form-card {
    position: absolute !important;
    top: clamp(220px, 24%, 270px) !important;
    right: clamp(70px, 7vw, 130px) !important;
    z-index: 2 !important;
    width: clamp(340px, 24vw, 410px) !important;
    max-width: min(410px, calc(100% - 140px)) !important;
    padding: clamp(22px, 2vw, 32px) clamp(28px, 2.4vw, 38px) !important;
    border-radius: clamp(24px, 2vw, 32px) !important;
    background: #ffffff !important;
    border: 1px solid #d5e6ff !important;
    box-shadow: 0 18px 48px rgba(16, 70, 150, .14) !important;
    transform: none !important;
}

body.prolab-login-page .login-panel h1,
body.prolab-login-page .prolab-login-panel h1,
body.prolab-login-page .login-form-card h1 {
    font-size: clamp(28px, 2.4vw, 42px) !important;
}

body.prolab-login-page .login-panel .input,
body.prolab-login-page .prolab-login-panel .input,
body.prolab-login-page .login-form-card .input,
body.prolab-login-page .login-panel .btn-primary,
body.prolab-login-page .prolab-login-panel .btn-primary,
body.prolab-login-page .login-form-card .btn-primary {
    height: clamp(46px, 3.3vw, 60px) !important;
    min-height: clamp(46px, 3.3vw, 60px) !important;
}

body.prolab-login-page .prolab-forgot-link {
    display: inline-flex !important;
    align-self: center !important;
    margin-top: 12px !important;
    color: #1e55b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.prolab-login-page .prolab-login-separator {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    color: #8b9ab8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.prolab-login-page .prolab-login-separator::before,
body.prolab-login-page .prolab-login-separator::after {
    content: "" !important;
    height: 1px !important;
    flex: 1 1 auto !important;
    background: #dbe7f8 !important;
}

body.prolab-login-page .prolab-support-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #1e55b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.prolab-login-page .prolab-login-copyright {
    margin-top: 12px !important;
    color: #7f8da8 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

@media (max-width: 980px) {
    body.prolab-login-page .prolab-login-shell {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.prolab-login-page .prolab-login-reference {
        height: auto !important;
        max-height: 42vh !important;
        object-fit: contain !important;
    }

    body.prolab-login-page .prolab-login-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(92vw, 410px) !important;
        max-width: min(92vw, 410px) !important;
        margin: 14px auto 0 !important;
    }
}

@media (max-width: 980px) {
    body.prolab-login-page .prolab-login-shell,
    body.prolab-login-page .login-shell,
    body.prolab-login-page .login-reference-shell {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.prolab-login-page .prolab-login-reference {
        height: auto !important;
        max-height: 42vh !important;
        object-fit: contain !important;
    }

    body.prolab-login-page .prolab-login-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(92vw, 410px) !important;
        max-width: min(92vw, 410px) !important;
        margin: 14px auto 0 !important;
    }
}

/* Breakpoints */
@media (max-width: 1500px) {
    :root {
        --ui-sidebar-w: clamp(206px, 14vw, 235px);
        --ui-font-title: clamp(25px, 2vw, 34px);
    }

    .portal-inline-actions .home-clinic-chip {
        max-width: clamp(210px, 23vw, 420px) !important;
    }
}

@media (max-width: 1280px) {
    .app-shell-dashboard,
    .app-shell {
        grid-template-columns: clamp(190px, 16vw, 220px) minmax(0, 1fr) !important;
    }

    .portal-inline-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .home-quick-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }

    html body:has(.order-page) .order-title-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .app-shell-dashboard,
    .app-shell {
        display: block !important;
        padding: 10px !important;
    }

    .dashboard-sidebar,
    .sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 12px !important;
    }

    .sidebar-logo img {
        width: 165px !important;
    }

    .dashboard-nav,
    .nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .sidebar-icon-cloud,
    .sidebar::before,
    .sidebar::after {
        display: none !important;
    }

    .home-quick-grid,
    .home-info-strip {
        grid-template-columns: 1fr !important;
    }

    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        width: min(92vw, 420px) !important;
        max-width: min(92vw, 420px) !important;
    }
}


/* =========================================================
   SIDEBAR STRETCH + VISIBLE ICON CLOUD FINAL FIX
   ========================================================= */

/*
   Завдання:
   1) ліва панель тягнеться по висоті сторінки, а не обривається на 100vh;
   2) синя нижня зона є CSS-градієнтом і не спотворюється;
   3) медичні іконки завжди видимі в нижній зоні, у тому числі на головній;
   4) на довгих сторінках фон sidebar не закінчується посеред сторінки.
*/

.app-shell,
.app-shell-dashboard {
    min-height: 100vh !important;
    align-items: stretch !important;
}

/* Важливо: прибираємо sticky/fixed-висоту, щоб sidebar розтягувався разом із довгою сторінкою */
.sidebar,
.dashboard-sidebar {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;

    height: auto !important;
    min-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 51%,
            #ddebff 66%,
            #1e55b8 84%,
            #1e55b8 100%
        ) !important;
}

/* Старі декоративні псевдоелементи не повинні перекривати іконки */
.sidebar::after,
.dashboard-sidebar::after {
    display: none !important;
    content: none !important;
}

/* Навігація займає тільки свій природний розмір */
.sidebar-logo,
.sidebar .nav,
.dashboard-sidebar .nav {
    flex: 0 0 auto !important;
}

/* Нижній блок з іконками притиснутий донизу flex-розкладкою */
.sidebar-icon-cloud,
.sidebar .sidebar-icon-cloud,
.dashboard-sidebar .sidebar-icon-cloud {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    margin-top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: clamp(12px, 1.2vw, 22px) !important;

    width: 100% !important;
    height: clamp(190px, 22vh, 245px) !important;
    min-height: 190px !important;
    flex: 0 0 clamp(190px, 22vh, 245px) !important;

    display: block !important;
    overflow: visible !important;
    transform: none !important;

    z-index: 2 !important;
    pointer-events: none !important;
}

/* Додаткові напівпрозорі квадрати фону всередині хмарки */
.sidebar-icon-cloud::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.10) 0 44px, transparent 45px),
        linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.12) 73px 118px, transparent 119px),
        radial-gradient(circle at 70% 46%, rgba(255,255,255,.16) 0 20px, transparent 21px) !important;
    opacity: .75 !important;
    z-index: 0 !important;
}

/* Квадрати з іконками: всі координати від верхнього краю cloud-блоку */
.sidebar-med-square {
    position: absolute !important;
    bottom: auto !important;
    z-index: 2 !important;

    width: clamp(42px, 3.2vw, 52px) !important;
    height: clamp(42px, 3.2vw, 52px) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255,255,255,.48) !important;
    border-radius: 9px !important;
    background: rgba(0, 91, 216, .72) !important;
    box-shadow:
        0 10px 24px rgba(0, 37, 110, .16),
        inset 0 0 0 1px rgba(255,255,255,.12) !important;
    backdrop-filter: blur(2px) !important;
}

/* SVG всередині квадратів */
.sidebar-med-square svg {
    display: block !important;
    width: clamp(25px, 2vw, 32px) !important;
    height: clamp(25px, 2vw, 32px) !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    stroke-width: 2.05 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sidebar-med-square svg path,
.sidebar-med-square svg circle,
.sidebar-med-square svg line,
.sidebar-med-square svg polyline,
.sidebar-med-square svg polygon {
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Фон-квадрати навколо окремих іконок */
.sidebar-med-square::before,
.sidebar-med-square::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 4px !important;
    z-index: -1 !important;
}

.sidebar-med-square::before {
    width: 38px !important;
    height: 38px !important;
    left: -18px !important;
    top: -16px !important;
}

.sidebar-med-square::after {
    width: 24px !important;
    height: 24px !important;
    right: -14px !important;
    bottom: -11px !important;
}

/* Розкладка іконок у видимій зоні */
.sidebar-med-square.sq-1 {
    left: 8px !important;
    top: 118px !important;
    transform: rotate(-2deg) !important;
}

.sidebar-med-square.sq-2 {
    left: 62px !important;
    top: 70px !important;
    width: clamp(50px, 3.7vw, 60px) !important;
    height: clamp(50px, 3.7vw, 60px) !important;
}

.sidebar-med-square.sq-3 {
    right: 8px !important;
    top: 78px !important;
    transform: rotate(2deg) !important;
}

.sidebar-med-square.sq-4 {
    left: 78px !important;
    top: 145px !important;
}

.sidebar-med-square.sq-5 {
    left: 4px !important;
    top: 60px !important;
}

.sidebar-med-square.sq-6 {
    right: 14px !important;
    top: 145px !important;
}

.sidebar-med-square.sq-7 {
    left: 128px !important;
    top: 112px !important;
    width: clamp(38px, 2.8vw, 44px) !important;
    height: clamp(38px, 2.8vw, 44px) !important;
}

.sidebar-med-square.sq-8 {
    right: 54px !important;
    top: 28px !important;
    width: clamp(34px, 2.5vw, 40px) !important;
    height: clamp(34px, 2.5vw, 40px) !important;
}

/* Головна сторінка компактніше, щоб основні блоки влазили без zoom */
.content:has(.home-page) {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.home-page {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
}

.home-head {
    display: none !important;
}

.home-hero {
    margin-bottom: 12px !important;
}

.home-hero img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2048 / 684 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

.home-quick-grid {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.home-action-card {
    min-height: clamp(158px, 17vh, 184px) !important;
    padding: 16px 12px 14px !important;
}

.home-card-icon {
    width: 56px !important;
    height: 56px !important;
}

.home-card-icon svg {
    width: 29px !important;
    height: 29px !important;
}

.home-action-card strong {
    font-size: 15px !important;
    line-height: 1.12 !important;
}

.home-action-card small {
    font-size: 11px !important;
    line-height: 1.22 !important;
}

.home-info-strip {
    padding: 11px 16px !important;
}

.home-info-item {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 10px !important;
}

.home-info-item > span {
    width: 44px !important;
    height: 44px !important;
}

.home-info-item svg {
    width: 23px !important;
    height: 23px !important;
}

.home-info-item strong {
    font-size: 13px !important;
}

.home-info-item small {
    font-size: 11px !important;
    line-height: 1.22 !important;
}

/* На дуже низьких екранах робимо нижній декор меншим, але не ховаємо його */
@media (max-height: 760px) {
    .sidebar-icon-cloud,
    .sidebar .sidebar-icon-cloud,
    .dashboard-sidebar .sidebar-icon-cloud {
        height: 175px !important;
        min-height: 175px !important;
        flex-basis: 175px !important;
        margin-bottom: 10px !important;
    }

    .sidebar-med-square.sq-1 { top: 98px !important; }
    .sidebar-med-square.sq-2 { top: 55px !important; }
    .sidebar-med-square.sq-3 { top: 62px !important; }
    .sidebar-med-square.sq-4 { top: 123px !important; }
    .sidebar-med-square.sq-5 { top: 48px !important; }
    .sidebar-med-square.sq-6 { top: 124px !important; }
    .sidebar-med-square.sq-7 { top: 94px !important; }
    .sidebar-med-square.sq-8 { top: 20px !important; }
}

/* На малих екранах залишаємо мобільну логіку */
@media (max-width: 900px) {
    .sidebar,
    .dashboard-sidebar {
        height: auto !important;
        min-height: 0 !important;
    }

    .sidebar-icon-cloud,
    .sidebar .sidebar-icon-cloud,
    .dashboard-sidebar .sidebar-icon-cloud {
        display: none !important;
    }
}


/* =========================================================
   SIDEBAR VIEWPORT HEIGHT + HOME FIT FINAL FIX
   ========================================================= */

/*
   Виправлення після варіанту, де sidebar розтягувався по довжині сторінки.
   Тепер:
   - ліва панель має висоту екрана, а не висоту всього контенту;
   - при довгих сторінках вона sticky і лишається біля користувача;
   - синій низ не розтягується нескінченно;
   - медичні іконки завжди внизу видимої панелі;
   - головна сторінка компактніша при 100% браузера.
*/

/* Оболонка порталу: висота не примушує sidebar тягнутись по контенту */
.app-shell,
.app-shell-dashboard {
    min-height: 100vh !important;
    align-items: start !important;
}

/* Sidebar фіксуємо відносно viewport, а не розтягуємо на всю довгу сторінку */
.sidebar,
.dashboard-sidebar {
    position: sticky !important;
    top: var(--ui-shell-pad, 14px) !important;
    align-self: start !important;

    height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;
    min-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;
    max-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 54%,
            #ddebff 68%,
            #1e55b8 86%,
            #1e55b8 100%
        ) !important;
}

/* Старий псевдодекор не перекриває медичні іконки */
.sidebar::after,
.dashboard-sidebar::after {
    display: none !important;
    content: none !important;
}

/* Меню не розтягується */
.sidebar-logo,
.sidebar .nav,
.dashboard-sidebar .nav {
    flex: 0 0 auto !important;
}

/* Нижній декор тепер не бере участь у розтягуванні сторінки,
   а завжди сидить внизу sidebar */
.sidebar-icon-cloud,
.sidebar .sidebar-icon-cloud,
.dashboard-sidebar .sidebar-icon-cloud {
    position: absolute !important;

    left: clamp(14px, .9vw, 18px) !important;
    right: clamp(14px, .9vw, 18px) !important;
    top: auto !important;
    bottom: clamp(12px, 1.1vw, 20px) !important;

    width: auto !important;
    height: clamp(175px, 20vh, 220px) !important;
    min-height: 175px !important;

    display: block !important;
    overflow: visible !important;
    transform: none !important;

    z-index: 2 !important;
    pointer-events: none !important;
}

/* Фонові квадрати в нижній хмарці */
.sidebar-icon-cloud::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.10) 0 44px, transparent 45px),
        linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.12) 73px 118px, transparent 119px),
        radial-gradient(circle at 70% 46%, rgba(255,255,255,.16) 0 20px, transparent 21px) !important;
    opacity: .75 !important;
    z-index: 0 !important;
}

/* Іконки позиціонуємо від верхнього краю декоративного блоку */
.sidebar-med-square {
    position: absolute !important;
    bottom: auto !important;
    z-index: 2 !important;
}

/* Видима компактна розкладка */
.sidebar-med-square.sq-1 {
    left: 8px !important;
    top: 104px !important;
    transform: rotate(-2deg) !important;
}

.sidebar-med-square.sq-2 {
    left: 62px !important;
    top: 58px !important;
    width: clamp(50px, 3.6vw, 58px) !important;
    height: clamp(50px, 3.6vw, 58px) !important;
}

.sidebar-med-square.sq-3 {
    right: 8px !important;
    top: 66px !important;
    transform: rotate(2deg) !important;
}

.sidebar-med-square.sq-4 {
    left: 78px !important;
    top: 132px !important;
}

.sidebar-med-square.sq-5 {
    left: 4px !important;
    top: 50px !important;
}

.sidebar-med-square.sq-6 {
    right: 14px !important;
    top: 132px !important;
}

.sidebar-med-square.sq-7 {
    left: 128px !important;
    top: 100px !important;
    width: clamp(38px, 2.8vw, 44px) !important;
    height: clamp(38px, 2.8vw, 44px) !important;
}

.sidebar-med-square.sq-8 {
    right: 54px !important;
    top: 18px !important;
    width: clamp(34px, 2.5vw, 40px) !important;
    height: clamp(34px, 2.5vw, 40px) !important;
}

/* SVG не зникають */
.sidebar-med-square svg,
.sidebar-med-square svg path,
.sidebar-med-square svg circle,
.sidebar-med-square svg line,
.sidebar-med-square svg polyline,
.sidebar-med-square svg polygon {
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Щоб головна сторінка не вилазила по висоті при 100% */
.content:has(.home-page) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.home-page {
    gap: 12px !important;
}

.home-head {
    display: none !important;
}

.home-head h1 {
    font-size: clamp(25px, 1.9vw, 32px) !important;
    line-height: 1.05 !important;
}

.home-head p {
    font-size: clamp(12px, .82vw, 14px) !important;
}

/* Банер компактніше без спотворення */
.home-hero {
    margin-bottom: 10px !important;
}

.home-hero img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2048 / 684 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Картки компактніше */
.home-quick-grid {
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.home-action-card {
    min-height: clamp(145px, 16vh, 170px) !important;
    padding: 14px 10px 12px !important;
}

.home-card-icon {
    width: 52px !important;
    height: 52px !important;
}

.home-card-icon svg {
    width: 27px !important;
    height: 27px !important;
}

.home-action-card strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
}

.home-action-card small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

/* Нижній інфоблок компактніше */
.home-info-strip {
    padding: 9px 14px !important;
}

.home-info-item {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important;
}

.home-info-item > span {
    width: 40px !important;
    height: 40px !important;
}

.home-info-item svg {
    width: 22px !important;
    height: 22px !important;
}

.home-info-item strong {
    font-size: 12.5px !important;
}

.home-info-item small {
    font-size: 10.5px !important;
    line-height: 1.18 !important;
}

/* На низьких екранах зменшуємо саме decorative cloud */
@media (max-height: 780px) {
    .sidebar-icon-cloud,
    .sidebar .sidebar-icon-cloud,
    .dashboard-sidebar .sidebar-icon-cloud {
        height: 165px !important;
        min-height: 165px !important;
        bottom: 8px !important;
    }

    .sidebar-med-square {
        width: 40px !important;
        height: 40px !important;
    }

    .sidebar-med-square svg {
        width: 24px !important;
        height: 24px !important;
    }

    .sidebar-med-square.sq-1 { top: 92px !important; }
    .sidebar-med-square.sq-2 { top: 48px !important; width: 50px !important; height: 50px !important; }
    .sidebar-med-square.sq-3 { top: 54px !important; }
    .sidebar-med-square.sq-4 { top: 118px !important; }
    .sidebar-med-square.sq-5 { top: 42px !important; }
    .sidebar-med-square.sq-6 { top: 118px !important; }
    .sidebar-med-square.sq-7 { top: 88px !important; }
    .sidebar-med-square.sq-8 { top: 14px !important; }
}

/* На мобільних sidebar стає звичайним блоком */
@media (max-width: 900px) {
    .sidebar,
    .dashboard-sidebar {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .sidebar-icon-cloud,
    .sidebar .sidebar-icon-cloud,
    .dashboard-sidebar .sidebar-icon-cloud {
        display: none !important;
    }
}


/* =========================================================
   HOME HERO ORIGINAL PROPORTION FIX
   ========================================================= */

/*
   Використовуємо новий нормальний файл:
   public/assets/img/home-hero-reference.png

   Важливо:
   - не розтягуємо зображення непропорційно;
   - задаємо природне співвідношення сторін 1912:990;
   - висоту отримуємо через aspect-ratio, а не через довільне 45vh.
*/

.home-hero {
    width: 100% !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}

/* Прибираємо попередні примусові висоти, які спотворювали банер */
.home-hero img[style] {
    height: auto !important;
}

/* Щоб головна все одно краще влазила при 100%, стискаємо не банер, а картки */
.home-action-card {
    min-height: 145px !important;
    padding: 14px 10px 12px !important;
}

.home-card-icon {
    width: 52px !important;
    height: 52px !important;
}

.home-card-icon svg {
    width: 27px !important;
    height: 27px !important;
}

.home-action-card strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
}

.home-action-card small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

.home-info-strip {
    padding: 9px 14px !important;
}


/* =========================================================
   HOME HERO CLEAN BANNER CROP FIX
   ========================================================= */

/*
   Попередній файл home-hero-reference.png містив скрін усієї сторінки,
   тому портал відображався "всередині порталу".
   Тепер файл замінено на чистий банер "Ласкаво просимо".
*/

.home-hero {
    width: 100% !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}


/* =========================================================
   HOME HERO CLEAN CROP V2
   ========================================================= */

/*
   Банер home-hero-reference.png замінено на чистий фрагмент без
   лівого шматка бокової панелі/логотипу. Пропорції не спотворюються.
*/

.home-hero {
    width: 100% !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}


/* =========================================================
   HOME ALIGN + HERO PROPORTIONS FINAL
   ========================================================= */

/*
   1) Права робоча область опущена на рівень верхнього краю лівої панелі.
   2) Банер "Ласкаво просимо" замінено чистим пропорційним фрагментом.
   3) Зображення більше не розтягується довільними vh-висотами.
*/

/* Права панель/контент не прилипає до самого верху */
.dashboard-main,
.main {
    padding-top: 0 !important;
}

.dashboard-main .content,
.main .content,
.content {
    padding-top: 18px !important;
}

/* Для головної сторінки робимо рівний верхній відступ, як у лівої панелі */
.content:has(.home-page) {
    padding-top: 18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Службові плашки справа залишаються на рівні заголовка після зміщення */
/* Заголовок головної сторінки */
.home-head {
    display: none !important;
}

.home-head h1 {
    margin-top: 0 !important;
}

/* Головний банер: тільки правильні пропорції, без спотворення */
.home-hero {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}

/* Прибираємо ефект "занадто високого банера" з попередніх правок */
.home-page .home-hero img {
    height: auto !important;
}

/* Картки та нижня інфопанель лишаються компактними, щоб вся головна влазила краще */
.home-quick-grid {
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.home-action-card {
    min-height: 150px !important;
    padding: 14px 10px 12px !important;
}

.home-card-icon {
    width: 52px !important;
    height: 52px !important;
}

.home-card-icon svg {
    width: 27px !important;
    height: 27px !important;
}

.home-action-card strong {
    font-size: 14px !important;
    line-height: 1.12 !important;
}

.home-action-card small {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

.home-info-strip {
    padding: 10px 14px !important;
}

@media (max-width: 1280px) {
    .portal-inline-head {
        position: static !important;
        margin: 0 0 14px 0 !important;
    }

    .portal-inline-actions {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .portal-inline-actions .home-clinic-chip {
        max-width: min(100%, 560px) !important;
    }

    .content:has(.home-page) {
        padding-top: 14px !important;
    }
}


/* =========================================================
   HOME HERO SHARPNESS UPDATE
   ========================================================= */

/*
   home-hero-reference.png замінено на 2x PNG із підвищеною різкістю.
   CSS лишає правильні пропорції й не розтягує зображення.
*/

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;
    object-fit: contain !important;
    object-position: center center !important;
    image-rendering: auto !important;
    transform: none !important;
}


/* =========================================================
   HOME HERO 4X HIGH RESOLUTION
   ========================================================= */

/*
   Банер замінено на 4x PNG: 4104x1132px.
   Для вебу важлива не DPI, а кількість пікселів.
   CSS показує файл у нормальному розмірі, браузер сам зменшує 4x-версію.
*/

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    image-rendering: auto !important;
    transform: none !important;
}


/* =========================================================
   HOME FIT SMALLER SCALE FINAL
   ========================================================= */

/*
   Завдання: головна сторінка має влазити по висоті при 100% браузера.
   Не використовуємо zoom/transform scale.
   Замість цього:
   - повертаємо 4 картки в один ряд;
   - тримаємо картки у стабільній grid-сітці;
   - показуємо банер повністю без обрізання через object-fit: contain;
   - зменшуємо проміжки між блоками.
*/

.content:has(.home-page) {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
}

.home-page {
    gap: 10px !important;
}

.home-hero {
    margin-bottom: 10px !important;
    border-radius: 16px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2048 / 684 !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}

.home-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.home-action-card {
    min-height: 150px !important;
    height: auto !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
}

.home-card-icon {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 12px !important;
}

.home-card-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.home-action-card strong {
    font-size: 15px !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
}

.home-action-card small {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.home-action-card .card-arrow,
.home-action-card .home-card-arrow {
    right: 12px !important;
    bottom: 8px !important;
}

/* Нижня інформаційна панель нижча */
.home-info-strip {
    padding: 0 !important;
    min-height: 0 !important;
}

.home-info-item {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px 26px !important;
}

.home-info-item > span {
    width: 42px !important;
    height: 42px !important;
}

.home-info-item svg {
    width: 24px !important;
    height: 24px !important;
}

.home-info-item strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
}

.home-info-item small {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

@media (max-width: 1280px) {
    .home-quick-grid {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .home-action-card {
        min-height: 140px !important;
        height: auto !important;
        padding: 14px 14px !important;
    }

    .home-action-card strong {
        font-size: 14px !important;
    }

    .home-action-card small {
        font-size: 11px !important;
    }
}

/* На дуже вузьких екранах вже можна переносити */
@media (max-width: 1050px) {
    .home-quick-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }

    .home-action-card {
        height: auto !important;
        min-height: 138px !important;
    }
}

/* =========================================================
   TOP CHIPS — притиснути плашки до правого краю
   ========================================================= */

/* =========================================================
   SIDEBAR — довга синя зона без повторення іконок
   ========================================================= */

.app-shell,
.app-shell-dashboard {
    align-items: stretch !important;
    min-height: 100vh !important;
}

.sidebar,
.dashboard-sidebar {
    position: relative !important;
    height: auto !important;
    min-height: calc(100vh - 24px) !important;
    align-self: stretch !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 50%,
            #dcebff 65%,
            #1e55b8 84%,
            #1e55b8 100%
        ) !important;
}
/* =========================================================
   FIXED SIDEBAR + SCROLLABLE MAIN AREA
   ========================================================= */

/* Забороняємо скрол усієї сторінки */
html,
body {
    height: 100% !important;
    overflow: hidden !important;
}

/* Оболонка порталу займає рівно висоту екрана */
.app-shell,
.app-shell-dashboard {
    height: 100vh !important;
    min-height: 100vh !important;

    display: grid !important;
    grid-template-columns: var(--ui-sidebar-w, 250px) minmax(0, 1fr) !important;
    gap: var(--ui-shell-gap, 14px) !important;

    padding: var(--ui-shell-pad, 14px) !important;
    overflow: hidden !important;
}

/* Ліва панель не прокручується */
.sidebar,
.dashboard-sidebar {
    position: relative !important;
    top: auto !important;

    height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;
    min-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;
    max-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;

    overflow: hidden !important;
}

/* Прокручується тільки права частина */
.main,
.dashboard-main {
    height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;
    max-height: calc(100vh - (var(--ui-shell-pad, 14px) * 2)) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    min-width: 0 !important;
    padding-right: 4px !important;
}

/* Контент усередині правої частини */
.main .content,
.dashboard-main .content,
.content {
    min-height: 100% !important;
}
/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

.back-to-top {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 9999 !important;

    width: 46px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    border-radius: 14px !important;

    background: linear-gradient(180deg, #1e55b8, #1e55b8) !important;
    color: #ffffff !important;

    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    box-shadow: 0 12px 28px rgba(23, 63, 138, .28) !important;
    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.back-to-top:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 32px rgba(23, 63, 138, .34) !important;
}
/* =========================================================
   HOME HERO IMAGE SCALE
   ========================================================= */

.home-hero {
    overflow: hidden !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}


/* =========================================================
   HOME HERO NO CROP USER IMAGE
   ========================================================= */

/*
   На стартовій сторінці використовується файл:
   public/assets/img/home-hero-reference.png

   Зображення показується повністю, без обрізання країв.
   Для цього використовується object-fit: contain, а не cover.
*/

.home-hero {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    margin-bottom: 12px !important;
}

.home-hero img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 684 !important;

    min-height: 0 !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    display: block !important;
    transform: none !important;
    image-rendering: auto !important;
}

/* Прибираємо попередні примусові висоти банера, які могли обрізати зображення */
.home-page .home-hero img,
.content:has(.home-page) .home-hero img {
    height: auto !important;
}


/* =========================================================
   LOGIN PANEL FIT + SEARCH BLUE BUTTON
   ========================================================= */

/*
   Вхід у систему:
   - кнопка "Увійти" має той самий синій стиль, що й кнопка "Пошук";
   - біла панель логіна компактніша;
   - внутрішні елементи не виходять за межі панелі;
   - "Підтримка користувачів" гарантовано залишається всередині білої панелі.
*/

/* Основна біла панель логіна */
body.prolab-login-page .login-panel,
body.prolab-login-page .prolab-login-panel,
body.prolab-login-page .login-form-card {
    width: clamp(360px, 25vw, 455px) !important;
    max-width: clamp(360px, 25vw, 455px) !important;

    min-height: auto !important;
    height: auto !important;

    padding: 30px 38px 26px !important;
    border-radius: 32px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Заголовок входу */
body.prolab-login-page .login-panel h1,
body.prolab-login-page .prolab-login-panel h1,
body.prolab-login-page .login-form-card h1 {
    font-size: 34px !important;
    line-height: 1.08 !important;
    margin: 0 0 20px !important;
    text-align: center !important;
}

/* Поля й групи форми компактніше */
body.prolab-login-page .form-group,
body.prolab-login-page .login-field,
body.prolab-login-page .login-form-row {
    margin-bottom: 16px !important;
}

body.prolab-login-page label {
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin-bottom: 7px !important;
}

/* Поля вводу */
body.prolab-login-page .login-panel input,
body.prolab-login-page .prolab-login-panel input,
body.prolab-login-page .login-form-card input,
body.prolab-login-page .login-input,
body.prolab-login-page input[type="text"],
body.prolab-login-page input[type="password"] {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    font-size: 16px !important;
    border-radius: 13px !important;
}

/* Кнопка "Увійти" — такий самий синій, як у кнопки "Пошук" */
body.prolab-login-page .btn-primary,
body.prolab-login-page .login-submit,
body.prolab-login-page button[type="submit"],
body.prolab-login-page .login-panel button,
body.prolab-login-page .prolab-login-panel button,
body.prolab-login-page .login-form-card button {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    border: none !important;
    border-radius: 13px !important;

    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 900 !important;

    box-shadow: 0 14px 28px rgba(10, 92, 216, .24) !important;
    cursor: pointer !important;
}

body.prolab-login-page .btn-primary:hover,
body.prolab-login-page .login-submit:hover,
body.prolab-login-page button[type="submit"]:hover {
    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
}

/* Посилання "Забули пароль?" */
body.prolab-login-page .forgot-password,
body.prolab-login-page .login-forgot,
body.prolab-login-page .login-links {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

/* Розділювач "або" */
body.prolab-login-page .login-divider,
body.prolab-login-page .divider {
    margin: 8px 0 14px !important;
    min-height: 18px !important;
}

/* Технічна підтримка/підтримка користувачів — всередині панелі */
body.prolab-login-page .support-link,
body.prolab-login-page .login-support,
body.prolab-login-page .support-users,
body.prolab-login-page .login-panel-footer,
body.prolab-login-page .login-help {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Якщо підтримка зроблена звичайним a всередині панелі */
body.prolab-login-page .login-panel a,
body.prolab-login-page .prolab-login-panel a,
body.prolab-login-page .login-form-card a {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Copyright / нижній дрібний текст теж не має виходити за межі */
body.prolab-login-page .login-copyright,
body.prolab-login-page .copyright {
    position: static !important;
    margin-top: 16px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    max-width: 100% !important;
}

/* Якщо стара верстка позиціонувала підтримку абсолютом */
body.prolab-login-page .login-panel * ,
body.prolab-login-page .prolab-login-panel * ,
body.prolab-login-page .login-form-card * {
    box-sizing: border-box !important;
}

/* Для нижчих екранів ще компактніше */
@media (max-height: 820px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        padding: 24px 34px 22px !important;
        border-radius: 28px !important;
    }

    body.prolab-login-page .login-panel h1,
    body.prolab-login-page .prolab-login-panel h1,
    body.prolab-login-page .login-form-card h1 {
        font-size: 30px !important;
        margin-bottom: 16px !important;
    }

    body.prolab-login-page .form-group,
    body.prolab-login-page .login-field,
    body.prolab-login-page .login-form-row {
        margin-bottom: 12px !important;
    }

    body.prolab-login-page .login-panel input,
    body.prolab-login-page .prolab-login-panel input,
    body.prolab-login-page .login-form-card input,
    body.prolab-login-page .btn-primary,
    body.prolab-login-page .login-submit,
    body.prolab-login-page button[type="submit"] {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    body.prolab-login-page .forgot-password,
    body.prolab-login-page .login-forgot,
    body.prolab-login-page .login-links {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    body.prolab-login-page .login-divider,
    body.prolab-login-page .divider {
        margin: 6px 0 10px !important;
    }
}

/* На вузьких екранах панель займає доступну ширину */
@media (max-width: 900px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        width: min(92vw, 420px) !important;
        max-width: min(92vw, 420px) !important;
        padding: 24px 24px 22px !important;
    }
}


/* =========================================================
   LOGIN PANEL SMALLER HIGHER FINAL
   ========================================================= */

/*
   Сторінка входу:
   - біла панель логіна менша за масштабом;
   - усі елементи всередині також менші;
   - панель піднята вище;
   - центр панелі приблизно на рівні центру фонового зображення;
   - права межа панелі не виходить за межі другого напівовала.
*/

/* Позиціонування всієї області логіна справа */
body.prolab-login-page .login-side,
body.prolab-login-page .login-right,
body.prolab-login-page .prolab-login-right,
body.prolab-login-page .login-form-side {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Основна біла панель: менша і трохи вище */
body.prolab-login-page .login-panel,
body.prolab-login-page .prolab-login-panel,
body.prolab-login-page .login-form-card {
    width: clamp(330px, 22.5vw, 405px) !important;
    max-width: clamp(330px, 22.5vw, 405px) !important;

    min-height: auto !important;
    height: auto !important;

    padding: 24px 32px 22px !important;
    border-radius: 28px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    /*
       Підняти панель відносно попереднього положення.
       Якщо треба ще вище: -44px або -52px.
       Якщо занадто високо: -24px.
    */
    transform: none !important;
}

/* Заголовок */
body.prolab-login-page .login-panel h1,
body.prolab-login-page .prolab-login-panel h1,
body.prolab-login-page .login-form-card h1 {
    font-size: 29px !important;
    line-height: 1.08 !important;
    margin: 0 0 16px !important;
    text-align: center !important;
}

/* Підписи */
body.prolab-login-page label {
    font-size: 13px !important;
    line-height: 1.05 !important;
    margin-bottom: 6px !important;
}

/* Групи полів */
body.prolab-login-page .form-group,
body.prolab-login-page .login-field,
body.prolab-login-page .login-form-row {
    margin-bottom: 12px !important;
}

/* Поля вводу компактніше */
body.prolab-login-page .login-panel input,
body.prolab-login-page .prolab-login-panel input,
body.prolab-login-page .login-form-card input,
body.prolab-login-page .login-input,
body.prolab-login-page input[type="text"],
body.prolab-login-page input[type="password"] {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    font-size: 14px !important;
    border-radius: 12px !important;
    padding-left: 48px !important;
    padding-right: 42px !important;
}

/* Іконки всередині полів — менші */
body.prolab-login-page .input-icon,
body.prolab-login-page .login-input-icon,
body.prolab-login-page .password-toggle,
body.prolab-login-page .toggle-password {
    transform: scale(.88) !important;
}

/* Кнопка Увійти — як Пошук, але компактніше */
body.prolab-login-page .btn-primary,
body.prolab-login-page .login-submit,
body.prolab-login-page button[type="submit"],
body.prolab-login-page .login-panel button,
body.prolab-login-page .prolab-login-panel button,
body.prolab-login-page .login-form-card button {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    border: none !important;
    border-radius: 12px !important;

    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 900 !important;

    box-shadow: 0 12px 24px rgba(10, 92, 216, .24) !important;
    cursor: pointer !important;
}

/* Забули пароль */
body.prolab-login-page .forgot-password,
body.prolab-login-page .login-forgot,
body.prolab-login-page .login-links {
    margin-top: 10px !important;
    margin-bottom: 9px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
}

/* Розділювач "або" */
body.prolab-login-page .login-divider,
body.prolab-login-page .divider {
    margin: 4px 0 10px !important;
    min-height: 16px !important;
    font-size: 13px !important;
}

/* Підтримка користувачів — строго всередині панелі */
body.prolab-login-page .support-link,
body.prolab-login-page .login-support,
body.prolab-login-page .support-users,
body.prolab-login-page .login-panel-footer,
body.prolab-login-page .login-help {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Нижній copyright не вилазить за панель */
body.prolab-login-page .login-copyright,
body.prolab-login-page .copyright {
    position: static !important;
    margin-top: 12px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    max-width: 100% !important;
}

/* Усі вкладені елементи не мають виходити за межі панелі */
body.prolab-login-page .login-panel *,
body.prolab-login-page .prolab-login-panel *,
body.prolab-login-page .login-form-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Якщо висота екрана менша — ще компактніше і ще трохи вище */
@media (max-height: 820px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        width: clamp(320px, 21vw, 390px) !important;
        max-width: clamp(320px, 21vw, 390px) !important;
        padding: 20px 30px 18px !important;
        border-radius: 26px !important;
        transform: none !important;
    }

    body.prolab-login-page .login-panel h1,
    body.prolab-login-page .prolab-login-panel h1,
    body.prolab-login-page .login-form-card h1 {
        font-size: 27px !important;
        margin-bottom: 13px !important;
    }

    body.prolab-login-page .form-group,
    body.prolab-login-page .login-field,
    body.prolab-login-page .login-form-row {
        margin-bottom: 10px !important;
    }

    body.prolab-login-page .login-panel input,
    body.prolab-login-page .prolab-login-panel input,
    body.prolab-login-page .login-form-card input,
    body.prolab-login-page .btn-primary,
    body.prolab-login-page .login-submit,
    body.prolab-login-page button[type="submit"] {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    body.prolab-login-page .forgot-password,
    body.prolab-login-page .login-forgot,
    body.prolab-login-page .login-links {
        margin-top: 8px !important;
        margin-bottom: 7px !important;
    }

    body.prolab-login-page .login-divider,
    body.prolab-login-page .divider {
        margin: 3px 0 8px !important;
    }
}

/* На вузьких екранах панель не вилітає за край */
@media (max-width: 900px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        width: min(90vw, 390px) !important;
        max-width: min(90vw, 390px) !important;
        padding: 22px 22px 20px !important;
        transform: none !important;
    }
}


/* =========================================================
   LOGIN PANEL SHORTER HEIGHT FINAL
   ========================================================= */

/*
   Зменшуємо саме висоту панелі логіна:
   - менші вертикальні padding;
   - менші проміжки між полями;
   - нижній блок підтримки/копірайт компактніший;
   - панель залишається вище і не випускає елементи назовні.
*/

body.prolab-login-page .login-panel,
body.prolab-login-page .prolab-login-panel,
body.prolab-login-page .login-form-card {
    width: clamp(330px, 22.5vw, 405px) !important;
    max-width: clamp(330px, 22.5vw, 405px) !important;

    padding: 18px 32px 16px !important;
    border-radius: 26px !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    transform: none !important;
}

/* Заголовок компактніше */
body.prolab-login-page .login-panel h1,
body.prolab-login-page .prolab-login-panel h1,
body.prolab-login-page .login-form-card h1 {
    font-size: 27px !important;
    line-height: 1.05 !important;
    margin: 0 0 10px !important;
}

/* Підписи ближче до полів */
body.prolab-login-page label {
    font-size: 12.5px !important;
    line-height: 1.0 !important;
    margin-bottom: 4px !important;
}

/* Проміжки між полями */
body.prolab-login-page .form-group,
body.prolab-login-page .login-field,
body.prolab-login-page .login-form-row {
    margin-bottom: 8px !important;
}

/* Поля вводу нижчі */
body.prolab-login-page .login-panel input,
body.prolab-login-page .prolab-login-panel input,
body.prolab-login-page .login-form-card input,
body.prolab-login-page .login-input,
body.prolab-login-page input[type="text"],
body.prolab-login-page input[type="password"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    font-size: 13.5px !important;
    border-radius: 11px !important;
}

/* Кнопка Увійти нижча */
body.prolab-login-page .btn-primary,
body.prolab-login-page .login-submit,
body.prolab-login-page button[type="submit"],
body.prolab-login-page .login-panel button,
body.prolab-login-page .prolab-login-panel button,
body.prolab-login-page .login-form-card button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    border-radius: 11px !important;
    font-size: 14.5px !important;

    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
}

/* Забули пароль */
body.prolab-login-page .forgot-password,
body.prolab-login-page .login-forgot,
body.prolab-login-page .login-links {
    margin-top: 7px !important;
    margin-bottom: 5px !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
}

/* Розділювач "або" */
body.prolab-login-page .login-divider,
body.prolab-login-page .divider {
    margin: 2px 0 6px !important;
    min-height: 12px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
}

/* Підтримка користувачів */
body.prolab-login-page .support-link,
body.prolab-login-page .login-support,
body.prolab-login-page .support-users,
body.prolab-login-page .login-panel-footer,
body.prolab-login-page .login-help {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 12.5px !important;
    line-height: 1.1 !important;

    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* Copyright */
body.prolab-login-page .login-copyright,
body.prolab-login-page .copyright {
    position: static !important;
    margin-top: 8px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

/* Усі елементи всередині не виходять за межі */
body.prolab-login-page .login-panel *,
body.prolab-login-page .prolab-login-panel *,
body.prolab-login-page .login-form-card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Для нижчих екранів ще коротше */
@media (max-height: 820px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        padding: 15px 30px 14px !important;
        transform: none !important;
    }

    body.prolab-login-page .login-panel h1,
    body.prolab-login-page .prolab-login-panel h1,
    body.prolab-login-page .login-form-card h1 {
        font-size: 25px !important;
        margin-bottom: 8px !important;
    }

    body.prolab-login-page .login-panel input,
    body.prolab-login-page .prolab-login-panel input,
    body.prolab-login-page .login-form-card input,
    body.prolab-login-page .btn-primary,
    body.prolab-login-page .login-submit,
    body.prolab-login-page button[type="submit"] {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    body.prolab-login-page .form-group,
    body.prolab-login-page .login-field,
    body.prolab-login-page .login-form-row {
        margin-bottom: 6px !important;
    }
}


/* =========================================================
   LOGIN PANEL LOWER + REMOVE PASSWORD BLUE OVERLAY
   ========================================================= */

/*
   Виправлення:
   - панель логіна опущена нижче;
   - прибрано синю "плашку" поверх поля Пароль;
   - кнопка Увійти лишається синьою як Пошук;
   - кнопка показу/приховування пароля не має виглядати як submit-кнопка.
*/

/* Остаточна модель login: поточна prolab-структура, без portal layout */
body.prolab-login-page {
    min-height: 100vh !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(18px, 2vw, 36px) !important;
    margin: 0 !important;
    overflow: hidden auto !important;
    background: linear-gradient(135deg, #eef5ff 0%, #f8fbff 42%, #ffffff 100%) !important;
}

body.prolab-login-page .prolab-login-shell {
    position: relative !important;
    width: min(96vw, 1500px) !important;
    max-width: 1500px !important;
    display: block !important;
    aspect-ratio: 1672 / 941 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: clamp(20px, 1.8vw, 32px) !important;
    transform: none !important;
}

body.prolab-login-page .prolab-login-reference {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

/* Панель логіна — компактна права grid-зона */
body.prolab-login-page .login-panel,
body.prolab-login-page .prolab-login-panel,
body.prolab-login-page .login-form-card {
    position: absolute !important;
    top: clamp(220px, 24%, 270px) !important;
    right: clamp(70px, 7vw, 130px) !important;
    z-index: 2 !important;
    width: clamp(340px, 24vw, 410px) !important;
    max-width: min(410px, calc(100% - 140px)) !important;
    padding: clamp(22px, 2vw, 32px) clamp(28px, 2.4vw, 38px) !important;
    border-radius: clamp(24px, 2vw, 32px) !important;
    background: #ffffff !important;
    border: 1px solid #d5e6ff !important;
    box-shadow: 0 18px 48px rgba(16, 70, 150, .14) !important;
    transform: none !important;
}

body.prolab-login-page .prolab-forgot-link {
    display: inline-flex !important;
    align-self: center !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    color: #1e55b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

body.prolab-login-page .prolab-login-separator {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    color: #8b9ab8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.prolab-login-page .prolab-login-separator::before,
body.prolab-login-page .prolab-login-separator::after {
    content: "" !important;
    height: 1px !important;
    flex: 1 1 auto !important;
    background: #dbe7f8 !important;
}

body.prolab-login-page .prolab-support-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #1e55b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.prolab-login-page .prolab-login-copyright {
    margin-top: 12px !important;
    color: #7f8da8 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

/* На нижчих екранах також не піднімати занадто високо */
@media (max-height: 820px) {
    body.prolab-login-page .login-panel,
    body.prolab-login-page .prolab-login-panel,
    body.prolab-login-page .login-form-card {
        transform: none !important;
    }
}

@media (max-width: 980px) {
    body.prolab-login-page .prolab-login-shell {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.prolab-login-page .prolab-login-reference {
        height: auto !important;
        max-height: 42vh !important;
        object-fit: contain !important;
    }

    body.prolab-login-page .prolab-login-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(92vw, 410px) !important;
        max-width: min(92vw, 410px) !important;
        margin: 14px auto 0 !important;
    }
}

/* Поле пароля та його обгортка не повинні мати синій фон */
body.prolab-login-page .password-field,
body.prolab-login-page .password-wrap,
body.prolab-login-page .password-wrapper,
body.prolab-login-page .login-password,
body.prolab-login-page .input-password,
body.prolab-login-page .input-with-icon,
body.prolab-login-page .input-wrap {
    background: transparent !important;
}

/* Усі input на login-сторінці — білі, навіть password */
body.prolab-login-page input[type="password"],
body.prolab-login-page input[type="text"],
body.prolab-login-page .login-input {
    background: #ffffff !important;
    color: #05070f !important;
}

/*
   Ключове: попереднє правило зачепило всі button у login-panel,
   тому кнопка-іконка "око" стала синьою широкою кнопкою.
   Повертаємо кнопки показу пароля до маленької прозорої іконки.
*/
body.prolab-login-page .password-toggle,
body.prolab-login-page .toggle-password,
body.prolab-login-page .show-password,
body.prolab-login-page .login-password-toggle,
body.prolab-login-page button.password-toggle,
body.prolab-login-page button.toggle-password,
body.prolab-login-page button.show-password,
body.prolab-login-page button.login-password-toggle,
body.prolab-login-page .password-field button,
body.prolab-login-page .password-wrap button,
body.prolab-login-page .password-wrapper button,
body.prolab-login-page .login-password button,
body.prolab-login-page .input-password button,
body.prolab-login-page .input-with-icon button {
    position: absolute !important;
    right: 0px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;

    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #1e55b8 !important;
    font-size: 0 !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    z-index: 5 !important;
}

/* SVG-іконка ока */
body.prolab-login-page .password-toggle svg,
body.prolab-login-page .toggle-password svg,
body.prolab-login-page .show-password svg,
body.prolab-login-page .login-password-toggle svg,
body.prolab-login-page .password-field button svg,
body.prolab-login-page .password-wrap button svg,
body.prolab-login-page .password-wrapper button svg,
body.prolab-login-page .login-password button svg,
body.prolab-login-page .input-password button svg,
body.prolab-login-page .input-with-icon button svg {
    width: 21px !important;
    height: 21px !important;
    stroke: #1e55b8 !important;
    fill: none !important;
    opacity: 1 !important;
}

/* Submit-кнопка Увійти — синя, але тільки submit, не всі button */
body.prolab-login-page button[type="submit"],
body.prolab-login-page .btn-primary,
body.prolab-login-page .login-submit {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 11px !important;

    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;

    font-size: 14.5px !important;
    font-weight: 900 !important;

    box-shadow: 0 12px 24px rgba(10, 92, 216, .24) !important;
}

/* Обгортка поля з паролем має бути position:relative для ока */
body.prolab-login-page .password-field,
body.prolab-login-page .password-wrap,
body.prolab-login-page .password-wrapper,
body.prolab-login-page .login-password,
body.prolab-login-page .input-password,
body.prolab-login-page .input-with-icon {
    position: relative !important;
}

/* =========================================================
   LOGIN PASSWORD EYE BUTTON FIX
   ========================================================= */

/* Синьою має бути тільки кнопка входу */
body.prolab-login-page button[type="submit"],
body.prolab-login-page .login-submit,
body.prolab-login-page .btn-primary {
    position: static !important;

    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 18px !important;
    border: none !important;
    border-radius: 11px !important;

    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;

    font-size: 14.5px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(10, 92, 216, .24) !important;
}

/* Кнопка "око" не повинна бути синьою */
body.prolab-login-page button:not([type="submit"]) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Конкретно кнопка показу пароля */
body.prolab-login-page .password-toggle,
body.prolab-login-page .toggle-password,
body.prolab-login-page .show-password,
body.prolab-login-page .login-password-toggle,
body.prolab-login-page button.password-toggle,
body.prolab-login-page button.toggle-password,
body.prolab-login-page button.show-password,
body.prolab-login-page button.login-password-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #1e55b8 !important;
    cursor: pointer !important;
    z-index: 5 !important;
}

/* SVG ока */
body.prolab-login-page .password-toggle svg,
body.prolab-login-page .toggle-password svg,
body.prolab-login-page .show-password svg,
body.prolab-login-page .login-password-toggle svg {
    width: 21px !important;
    height: 21px !important;
    stroke: #1e55b8 !important;
    fill: none !important;
}

/* =========================================================
   LOGIN PASSWORD EYE POSITION
   ========================================================= */

body.prolab-login-page .password-toggle,
body.prolab-login-page .toggle-password,
body.prolab-login-page .show-password,
body.prolab-login-page .login-password-toggle,
body.prolab-login-page button.password-toggle,
body.prolab-login-page button.toggle-password,
body.prolab-login-page button.show-password,
body.prolab-login-page button.login-password-toggle,
body.prolab-login-page .password-field button,
body.prolab-login-page .password-wrap button,
body.prolab-login-page .password-wrapper button,
body.prolab-login-page .login-password button,
body.prolab-login-page .input-password button,
body.prolab-login-page .input-with-icon button {
    right: -20px !important;
    left: auto !important;
}
body.prolab-login-page input[type="password"] {
    padding-right: 52px !important;
}
/* =========================================================
   FORCE PASSWORD EYE POSITION
   ========================================================= */

/* Обгортка поля пароля має бути базою для абсолютного позиціонування */
body.prolab-login-page .input-with-icon,
body.prolab-login-page .password-field,
body.prolab-login-page .password-wrap,
body.prolab-login-page .password-wrapper,
body.prolab-login-page .login-password,
body.prolab-login-page .input-password {
    position: relative !important;
}

/* Примусово рухаємо будь-яку кнопку/іконку всередині password-блоку */
body.prolab-login-page .input-with-icon button,
body.prolab-login-page .password-field button,
body.prolab-login-page .password-wrap button,
body.prolab-login-page .password-wrapper button,
body.prolab-login-page .login-password button,
body.prolab-login-page .input-password button,
body.prolab-login-page .input-with-icon span,
body.prolab-login-page .password-field span,
body.prolab-login-page .password-wrap span,
body.prolab-login-page .password-wrapper span,
body.prolab-login-page .login-password span,
body.prolab-login-page .input-password span,
body.prolab-login-page .input-with-icon i,
body.prolab-login-page .password-field i,
body.prolab-login-page .password-wrap i,
body.prolab-login-page .password-wrapper i,
body.prolab-login-page .login-password i,
body.prolab-login-page .input-password i,
body.prolab-login-page .input-with-icon svg,
body.prolab-login-page .password-field svg,
body.prolab-login-page .password-wrap svg,
body.prolab-login-page .password-wrapper svg,
body.prolab-login-page .login-password svg,
body.prolab-login-page .input-password svg {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 24px !important;
    height: 24px !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;

    color: #1e55b8 !important;
    stroke: #1e55b8 !important;
    fill: none !important;

    z-index: 20 !important;
}

/* Щоб текст пароля не заходив під іконку */
body.prolab-login-page input[type="password"] {
    padding-right: 52px !important;
}
/* =========================================================
   LOGIN PASSWORD EYE — exact selector
   ========================================================= */

body.prolab-login-page .prolab-login-input-password {
    position: relative !important;
}

body.prolab-login-page .prolab-login-input-password input {
    padding-right: 54px !important;
}

body.prolab-login-page .prolab-password-toggle {
    position: absolute !important;

    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 5 !important;
}
/* =========================================================
   LIS RESULTS MODULE — grouped medical protocol
   ========================================================= */
.results-section-head{align-items:flex-start;margin-bottom:6px}.results-search-card,.results-orders-card,.results-protocol-head,.result-sample-strip,.result-group-card,.result-comments-card,.result-summary-strip{background:#fff;border:1px solid #cfe0fb;border-radius:22px;box-shadow:0 18px 42px rgba(16,70,150,.08)}.results-search-card{padding:12px 16px;margin-bottom:12px}.results-search-form{display:grid;grid-template-columns:minmax(320px,1fr) 190px 190px 150px;gap:12px;align-items:end}.results-search-form label{display:block;margin-bottom:6px;color:#05070f;font-weight:900}.results-search-actions .btn{width:100%;height:44px}.results-alert{margin:12px 0}.results-orders-card{padding:16px;margin-top:0}.results-orders-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}.results-orders-head h2{margin:0;color:#05070f;font-size:28px}.results-orders-head p{margin:4px 0 0;color:#607199}.results-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:40px;padding:0 16px;border-radius:14px;background:#eef6ff;color:#1e55b8;font-weight:900}.results-order-list{display:flex;flex-direction:column;gap:12px}.results-order-card{display:grid;grid-template-columns:52px minmax(220px,1fr) minmax(300px,.9fr) 100px 24px;gap:14px;align-items:center;padding:16px 18px;border:1px solid #d5e6ff;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff);color:#05070f;text-decoration:none;transition:.15s ease}.results-order-card:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(20,90,210,.11);text-decoration:none}.results-order-icon{width:44px;height:44px;border-radius:14px;background:#eef6ff;color:#0867e9;display:flex;align-items:center;justify-content:center}.results-order-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2.2}.results-order-main{display:flex;flex-direction:column;gap:4px}.results-order-main strong{font-size:18px}.results-order-main small,.results-order-meta span{color:#657399}.results-order-meta{display:flex;gap:18px;flex-wrap:wrap}.results-order-tests{justify-self:end;border-radius:999px;background:#eff7ff;color:#1e55b8;font-weight:900;padding:8px 12px}.results-order-arrow{font-size:28px;color:#1e55b8}.results-empty-state{display:flex;flex-direction:column;gap:7px;padding:28px;border:1px dashed #bdd6fb;border-radius:20px;background:#f8fbff;color:#05070f}.results-empty-state span{color:#657399}.results-view-page{display:flex;flex-direction:column;gap:16px}.results-protocol-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px}.results-protocol-head h1{margin:0;color:#05070f;font-size:30px}.results-protocol-head p{margin:5px 0 0;color:#657399;font-weight:700}.result-sample-strip{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}.result-sample-item{display:flex;align-items:center;gap:14px;padding:17px 20px;border-right:1px solid #cfe0fb}.result-sample-item:last-child{border-right:none}.result-sample-item>span{width:38px;height:38px;color:#0799b2;display:flex;align-items:center;justify-content:center}.result-sample-item svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2}.result-sample-item small{display:block;color:#607199;font-weight:800}.result-sample-item strong{display:block;margin-top:3px;color:#05070f}.result-summary-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 18px}.result-summary-strip div{display:flex;align-items:baseline;justify-content:center;gap:8px;border-right:1px solid #d8e7fb}.result-summary-strip div:last-child{border-right:none}.result-summary-strip strong{font-size:25px;color:#1e55b8}.result-summary-strip span{color:#607199;font-weight:800}.result-group-card{overflow:hidden}.result-group-title{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid #13a6b8;background:linear-gradient(90deg,#f5ffff,#fff);color:#0792a6;font-size:20px;font-weight:1000;text-transform:uppercase}.result-group-title em{margin-left:auto;font-size:12px;color:#7b8aaa;font-style:normal;text-transform:none}.result-group-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#16c1bd,#0398aa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(0,164,187,.18)}.result-group-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2}.result-table-wrap{overflow-x:auto}.result-med-table{width:100%;border-collapse:collapse;font-size:15px}.result-med-table th{padding:11px 16px;background:#f6fbff;color:#3f4b62;text-align:left;font-size:13px;font-weight:900}.result-med-table td{padding:12px 16px;border-top:1px dashed #cfe0fb;color:#05070f;vertical-align:top}.result-med-table td strong{display:block;color:#05070f}.result-med-table td small{display:block;margin-top:4px;color:#7a89a8;font-size:12px}.result-value{font-size:18px;font-weight:1000}.result-value-high{color:#d71920}.result-value-low{color:#d71920}.result-value-normal{color:#05070f}.result-status{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:6px 10px;border-radius:8px;font-weight:900;font-size:13px;white-space:nowrap}.result-status-normal{background:#dcf6e9;color:#08764b}.result-status-high{background:#ffe5ec;color:#d71920}.result-status-low{background:#ffe5ec;color:#d71920}.result-status-no-reference,.result-status-text{background:#edf2f7;color:#607199}.result-pomtext{max-width:360px}.result-comment-row td{padding-top:0;background:#fbfdff}.result-dlhytext{padding:10px 14px;border-left:4px solid #13a6b8;border-radius:10px;background:#f2fbff;color:#234060;line-height:1.45}.result-comments-card{position:relative;overflow:hidden;padding:18px 22px;background:linear-gradient(90deg,#f2ffff,#fbffff);border-color:#70ccd4}.result-comments-card:after{content:"";position:absolute;right:22px;top:14px;width:86px;height:86px;border:9px solid rgba(17,180,181,.15);border-radius:18px;transform:rotate(10deg)}.result-comments-title{display:flex;align-items:center;gap:12px;color:#0792a6;text-transform:uppercase;font-size:18px;margin-bottom:12px}.result-comments-title span{width:36px;height:36px;border-radius:50%;background:#11b5b6;color:#fff;display:flex;align-items:center;justify-content:center}.result-comments-title svg{width:23px;height:23px;stroke:currentColor;fill:none}.result-general-comment{position:relative;z-index:1;margin-top:10px}.result-general-comment strong{color:#05070f}.result-general-comment p{margin:5px 0 0;color:#2d3b52;line-height:1.45}
@media(max-width:1200px){.results-search-form{grid-template-columns:1fr 1fr}.result-sample-strip{grid-template-columns:1fr 1fr}.results-order-card{grid-template-columns:52px 1fr 24px}.results-order-meta,.results-order-tests{grid-column:2 / span 1;justify-self:start}.results-order-arrow{grid-column:3;grid-row:1 / span 2}}@media(max-width:760px){.results-search-form,.result-sample-strip,.result-summary-strip{grid-template-columns:1fr}.result-sample-item,.result-summary-strip div{border-right:none;border-bottom:1px solid #d8e7fb}.result-sample-item:last-child,.result-summary-strip div:last-child{border-bottom:none}.results-protocol-head{align-items:flex-start;flex-direction:column}.result-med-table{font-size:13px}.result-med-table th,.result-med-table td{padding:9px 10px}.result-status{min-width:0}}
@media print{.sidebar,.topbar,.portal-inline-head,.back-link,.results-protocol-actions,.back-to-top{display:none!important}.app-shell{display:block!important}.main,.content{padding:0!important;overflow:visible!important}.results-view-page{gap:10px}.result-group-card,.result-sample-strip,.result-comments-card{box-shadow:none;break-inside:avoid}}


/* =========================================================
   RESULTS MODULE: NO ICONS + ENCODING-FRIENDLY VIEW
   ========================================================= */

/* У модулі результатів не використовуємо SVG-іконки в групах, шапці та коментарях. */
.results-view-page .result-group-icon,
.results-view-page .result-sample-item > span,
.results-view-page .result-comments-title > span {
    display: none !important;
}

.results-view-page .result-sample-strip {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.results-view-page .result-sample-item {
    padding: 15px 20px !important;
    gap: 0 !important;
}

.results-view-page .result-sample-item small {
    color: #607199 !important;
    font-weight: 900 !important;
}

.results-view-page .result-sample-item strong {
    color: #05070f !important;
    font-weight: 900 !important;
}

.results-view-page .result-group-title {
    padding: 14px 18px !important;
    gap: 10px !important;
    background: linear-gradient(90deg, #f7fcff, #ffffff) !important;
    border-bottom: 2px solid #2da7c7 !important;
    color: #1e55b8 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
}

.results-view-page .result-group-title em {
    margin-left: 8px !important;
    color: #7b8aaa !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.results-view-page .result-med-table th {
    color: #05070f !important;
    background: #f6fbff !important;
    border-bottom: 1px solid #d5e6ff !important;
}

.results-view-page .result-med-table td {
    border-top: 1px dashed #d5e6ff !important;
}

.results-view-page .result-med-table td strong {
    font-weight: 900 !important;
}

.results-view-page .result-comments-card {
    background: linear-gradient(90deg, #f4ffff, #ffffff) !important;
    border-color: #83d2db !important;
}

.results-view-page .result-comments-card::after {
    display: none !important;
}

.results-view-page .result-comments-title {
    color: #1e55b8 !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
}

@media(max-width: 1200px) {
    .results-view-page .result-sample-strip {
        grid-template-columns: 1fr !important;
    }

    .results-view-page .result-sample-item {
        border-right: none !important;
        border-bottom: 1px solid #d8e7fb !important;
    }
}


/* =========================================================
   RESULTS DETAIL REFINEMENT: PATIENT CARD + RANGE GROUPING
   ========================================================= */

/* Прибираємо стару статистичну плашку 28/17/9, якщо вона залишиться в HTML старої версії. */
.results-view-page .result-summary-strip {
    display: none !important;
}

.results-print-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 0 !important;
}

.result-patient-card {
    background: linear-gradient(90deg, #ffffff 0%, #f8fdff 100%) !important;
    border: 1px solid #bfe8e7 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(16,70,150,.08) !important;
    padding: 18px 22px !important;
    display: grid !important;
    grid-template-columns: 1.05fr 2.2fr !important;
    gap: 22px !important;
    align-items: center !important;
}

.result-patient-main h1 {
    margin: 0 !important;
    color: #05070f !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    font-weight: 1000 !important;
}

.result-patient-subtitle {
    margin-top: 6px !important;
    color: #607199 !important;
    font-weight: 900 !important;
}

.result-patient-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 0 !important;
}

.result-patient-field {
    padding: 6px 18px !important;
    border-left: 1px solid #cfe0fb !important;
}

.result-patient-field small {
    display: block !important;
    color: #607199 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.result-patient-field strong {
    display: block !important;
    margin-top: 5px !important;
    color: #05070f !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 1000 !important;
}

/* Назва групи тільки за nazovskup, без tlacskup X. */
.results-view-page .result-group-title {
    justify-content: flex-start !important;
    padding: 12px 18px !important;
    font-size: 17px !important;
    color: #008f9f !important;
    border-bottom: 2px solid #25a9ba !important;
}

.results-view-page .result-group-title em {
    display: none !important;
}

/* Менший шрифт результатів, без візуального домінування числа. */
.results-view-page .result-value {
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.results-view-page .result-med-table {
    font-size: 14px !important;
}

.results-view-page .result-med-table th {
    font-size: 12px !important;
    padding: 9px 14px !important;
}

.results-view-page .result-med-table td {
    padding: 10px 14px !important;
}

.results-view-page .result-med-table td strong {
    font-size: 14px !important;
}

@media(max-width: 1300px) {
    .result-patient-card {
        grid-template-columns: 1fr !important;
    }

    .result-patient-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr)) !important;
    }

    .result-patient-field:nth-child(1),
    .result-patient-field:nth-child(4) {
        border-left: none !important;
    }
}

@media(max-width: 760px) {
    .result-patient-grid {
        grid-template-columns: 1fr !important;
    }

    .result-patient-field {
        border-left: none !important;
        border-top: 1px solid #cfe0fb !important;
        padding: 10px 0 !important;
    }
}

@media print {
    .results-print-actions {
        display: none !important;
    }
    .result-patient-card {
        box-shadow: none !important;
        break-inside: avoid !important;
    }
}


/* =========================================================
   RESULTS MODULE: USER REQUEST GROUP SORT + BLUE HEADERS
   ========================================================= */

/* Групи результатів і службові плашки — синій стиль як кнопка "Пошук", з білими літерами. */
.results-view-page .result-group-title {
    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 13px 18px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
}

.results-view-page .result-group-title span,
.results-view-page .result-group-title strong {
    color: #ffffff !important;
}

/* Шрифт результату компактний, без зайвого акценту. */
.results-view-page .result-value {
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.results-view-page .result-med-table td.result-value-high,
.results-view-page .result-med-table td.result-value-low {
    color: #d71920 !important;
}

/* Верхній індекс для одиниць вимірювання: 10^9 -> 10⁹ через HTML <sup>. */
.results-view-page .result-med-table sup {
    font-size: .72em !important;
    line-height: 0 !important;
    vertical-align: super !important;
}

/* Статус лишаємо бейджем, групи без технічного tlacskup у заголовку. */
.results-view-page .result-group-title em {
    display: none !important;
}


/* =========================================================
   RESULTS MODULE: FIXED COLUMNS + PATIENT CARD COLOR + STATUS FILTER
   ========================================================= */

/* Однакова ширина колонок у всіх групах результатів. */
.results-view-page .result-med-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.results-view-page .result-med-table .result-col-name,
.results-view-page .result-med-table col.result-col-name {
    width: 32% !important;
}

.results-view-page .result-med-table .result-col-value,
.results-view-page .result-med-table col.result-col-value {
    width: 13% !important;
}

.results-view-page .result-med-table .result-col-unit,
.results-view-page .result-med-table col.result-col-unit {
    width: 13% !important;
}

.results-view-page .result-med-table .result-col-reference,
.results-view-page .result-med-table col.result-col-reference {
    width: 24% !important;
}

.results-view-page .result-med-table .result-col-status,
.results-view-page .result-med-table col.result-col-status {
    width: 18% !important;
}

.results-view-page .result-med-table th,
.results-view-page .result-med-table td {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.results-view-page .result-med-table th:nth-child(2),
.results-view-page .result-med-table td:nth-child(2),
.results-view-page .result-med-table th:nth-child(3),
.results-view-page .result-med-table td:nth-child(3),
.results-view-page .result-med-table th:nth-child(4),
.results-view-page .result-med-table td:nth-child(4),
.results-view-page .result-med-table th:nth-child(5),
.results-view-page .result-med-table td:nth-child(5) {
    text-align: center !important;
}

.results-view-page .result-med-table th:nth-child(2),
.results-view-page .result-med-table td:nth-child(2),
.results-view-page .result-med-table th:nth-child(3),
.results-view-page .result-med-table td:nth-child(3),
.results-view-page .result-med-table th:nth-child(5),
.results-view-page .result-med-table td:nth-child(5) {
    white-space: nowrap !important;
}

/* Плашка пацієнта — інший колір, не як сині заголовки груп. */
.results-view-page .result-patient-card {
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
    border: 1px solid #cfe0fb !important;
    box-shadow: 0 18px 42px rgba(16, 70, 150, .08) !important;
}

.results-view-page .result-patient-main h1,
.results-view-page .result-patient-subtitle,
.results-view-page .result-patient-field small,
.results-view-page .result-patient-field strong {
    color: #05070f !important;
    opacity: 1 !important;
}

.results-view-page .result-patient-subtitle,
.results-view-page .result-patient-field small {
    color: #607199 !important;
}

.results-view-page .result-patient-field {
    border-left-color: #cfe0fb !important;
}

.results-view-page .result-patient-main-head {
    display: grid !important;
    gap: 10px !important;
    align-items: start !important;
}

.results-view-page .result-patient-profile-link {
    justify-self: start !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}

/* Верхній ряд дій: фільтр статусу + друк. */
.results-view-page .results-print-actions {
    display: flex !important;
    align-items: end !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    flex-wrap: wrap !important;
}

.results-view-page .result-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: end !important;
    gap: 18px !important;
}

.result-status-filter-form {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 210px) !important;
    align-items: center !important;
    gap: 8px !important;
}

.result-status-filter-form label {
    color: #05070f !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.result-status-filter-form select {
    width: 210px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
}

.results-view-page .results-print-actions .btn {
    height: 40px !important;
    border-radius: 12px !important;
}

/* Заголовки груп лишаються синіми з білим текстом. */
.results-view-page .result-group-title {
    background: linear-gradient(180deg, #1e55b8 0%, #1e55b8 100%) !important;
    color: #ffffff !important;
}

@media(max-width: 900px) {
    .results-view-page .result-toolbar {
        grid-template-columns: 1fr !important;
    }

    .results-view-page .results-print-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .result-status-filter-form {
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    .result-status-filter-form select {
        width: auto !important;
    }

    .results-view-page .result-med-table th:nth-child(2),
    .results-view-page .result-med-table td:nth-child(2),
    .results-view-page .result-med-table th:nth-child(3),
    .results-view-page .result-med-table td:nth-child(3),
    .results-view-page .result-med-table th:nth-child(5),
    .results-view-page .result-med-table td:nth-child(5) {
        white-space: normal !important;
    }
}


/* =========================================================
   RESULTS GROUP HEADER SMALLER SAMPLE BLUE
   ========================================================= */

/*
   Групи друку / nazovskup:
   - менший шрифт;
   - фон кольору з наданого зразка: #1e55b8;
   - білий текст;
   - без зайвої висоти.
*/

.result-group-header,
.result-group-title,
.result-group-card .result-group-header,
.result-group-card .result-group-title,
.results-group-header,
.results-group-title {
    background: #1e55b8 !important;
    color: #ffffff !important;

    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;

    padding: 10px 16px !important;
    min-height: 0 !important;

    border-radius: 18px 18px 0 0 !important;
    border: 1px solid #1e55b8 !important;
    box-shadow: none !important;
}

/* Усі вкладені елементи в заголовку групи також білі та менші */
.result-group-header *,
.result-group-title *,
.result-group-card .result-group-header *,
.result-group-card .result-group-title *,
.results-group-header *,
.results-group-title * {
    color: #ffffff !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Якщо назва групи виводиться окремим span/div */
.result-group-name,
.results-group-name {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

/* Трохи компактніша відстань між групами */
.result-group-card,
.results-group-card {
    margin-bottom: 16px !important;
}


/* =========================================================
   RESULTS ORDER STATUS FILTER
   ========================================================= */

.results-order-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 128px !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.results-order-status-confirmed {
    color: #087a4b !important;
    background: #dff7ea !important;
    border: 1px solid #b8edcf !important;
}

.results-order-status-partial {
    color: #9a5a00 !important;
    background: #fff0c7 !important;
    border: 1px solid #ffdf82 !important;
}

.results-order-status-in-work {
    color: #5b6680 !important;
    background: #eef3fb !important;
    border: 1px solid #d7e3f5 !important;
}

.results-search-form {
    grid-template-columns: minmax(280px, 1.55fr) minmax(160px, .75fr) minmax(160px, .75fr) minmax(170px, .75fr) auto !important;
}

@media (max-width: 1200px) {
    .results-search-form {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 720px) {
    .results-search-form {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   RESULTS PERIOD PICKER
   ========================================================= */

.results-search-form {
    grid-template-columns: minmax(260px, 1.45fr) minmax(150px, .62fr) minmax(160px, .7fr) minmax(160px, .7fr) minmax(160px, .7fr) auto !important;
}

.results-custom-period-field.is-hidden {
    display: none !important;
}

@media (max-width: 1350px) {
    .results-search-form {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
}

@media (max-width: 900px) {
    .results-search-form {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .results-search-form {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   RESULTS SIDE DATE FILTER
   ========================================================= */

.results-search-card-compact {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
}

.results-orders-card {
    margin-top: 0 !important;
}

.results-search-form-compact {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(220px, 260px) auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.results-search-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.results-open-filter-btn {
    height: var(--ui-btn-h) !important;
    min-height: var(--ui-btn-h) !important;
    min-width: 118px !important;
    border-radius: 8px !important;
    background: #1e55b8 !important;
    border: 1px solid #1e55b8 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(30, 85, 184, .18) !important;
}

.results-open-filter-btn:hover {
    background: #1e55b8 !important;
}

.results-filter-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(20, 38, 70, .22) !important;
    z-index: 900 !important;
}

.results-date-filter-drawer {
    position: fixed !important;
    top: 16px !important;
    right: 18px !important;
    width: min(430px, calc(100vw - 36px)) !important;
    max-height: calc(100vh - 32px) !important;
    overflow: auto !important;
    z-index: 901 !important;

    background: #ffffff !important;
    border: 1px solid #d7e5fb !important;
    border-radius: 26px !important;
    box-shadow: 0 28px 70px rgba(25, 54, 100, .24) !important;

    padding: 28px 28px 24px !important;

    transform: translateX(calc(100% + 34px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .22s ease, opacity .22s ease !important;
}

.results-date-filter-drawer.is-open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.results-date-filter-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 22px !important;
    border-bottom: 1px solid #dce8fb !important;
}

.results-date-filter-head h2 {
    margin: 0 !important;
    color: #05070f !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.results-date-filter-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #eef6ff !important;
    color: #1e55b8 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.results-date-filter-body {
    display: grid !important;
    gap: 18px !important;
    padding-bottom: 24px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #dce8fb !important;
}

.results-drawer-custom-period-field.is-hidden {
    display: none !important;
}

.results-date-filter-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.results-date-filter-actions .btn {
    min-width: 110px !important;
    height: var(--ui-btn-h) !important;
    min-height: var(--ui-btn-h) !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
}

.results-date-filter-actions .btn-link {
    background: transparent !important;
    color: #1e55b8 !important;
    box-shadow: none !important;
    border: none !important;
}

@media (max-width: 1100px) {
    .results-search-form-compact {
        grid-template-columns: 1fr 1fr !important;
    }

    .results-search-actions {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 720px) {
    .results-search-form-compact {
        grid-template-columns: 1fr !important;
    }

    .results-search-actions-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}


/* =========================================================
   RESULTS DEFAULT TODAY NOTE
   ========================================================= */

.results-current-period-note {
    margin: 6px 0 0 !important;
    color: #6b7aa5 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.results-date-filter-head > div {
    min-width: 0 !important;
}


/* =========================================================
   REMOVE THIN BLUE ARROWS
   ========================================================= */

/*
   Прибираємо тонкі сині стрілки:
   - з карток на головній сторінці порталу;
   - зі списку ордерів результатів біля статусу.
*/

/* Головна сторінка: стрілка внизу праворуч у картках */
.portal-card-arrow,
.home-card-arrow,
.dashboard-card-arrow,
.quick-card-arrow,
.module-card-arrow,
.action-card-arrow,
.portal-action-arrow,
.card-arrow,
.card-link-arrow,
.feature-card-arrow,
.portal-home-card .arrow,
.portal-home-card .card-arrow,
.portal-quick-card .arrow,
.portal-quick-card .card-arrow,
.dashboard-card .arrow,
.dashboard-card .card-arrow,
.home-card .arrow,
.home-card .card-arrow,
.quick-card .arrow,
.quick-card .card-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Якщо стрілка намальована псевдоелементом */
.portal-home-card::after,
.portal-quick-card::after,
.dashboard-card::after,
.home-card::after,
.quick-card::after,
.module-card::after,
.action-card::after,
.feature-card::after {
    content: none !important;
    display: none !important;
}

/* Список результатів: стрілка біля статусу ордера */
.results-order-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Статус можна трохи відсунути від правого краю після видалення стрілки */
.results-order-status {
    margin-right: 0 !important;
}



/* =========================================================
   LIS PATIENTS VISIBLE AFTER MYSQL CLEANUP
   ========================================================= */

.lis-patient-row .patient-day-patient {
    position: relative !important;
}

.patient-source-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    min-width: 42px !important;
    padding: 0 8px !important;
    margin-left: 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.patient-source-badge-lis {
    color: #1e55b8 !important;
    background: #eef6ff !important;
    border: 1px solid #bdd8ff !important;
}

.patient-lis-meta {
    display: inline-flex !important;
    margin-left: 10px !important;
    color: #607199 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

@media (max-width: 900px) {
    .patient-lis-meta {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
}


/* =========================================================
   SCOPED FIX: PATIENT PROFILE NAME-ONLY EDIT FORM
   ========================================================= */

html body .main .content .patient-profile-form .patient-profile-edit-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    align-items: end !important;
}

html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-lastname {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
}

html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-firstname {
    grid-column: 4 / span 3 !important;
    grid-row: 1 !important;
}

html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-middlename {
    grid-column: 7 / span 3 !important;
    grid-row: 1 !important;
}

html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-actions {
    grid-column: 10 / span 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    justify-self: start !important;
}

@media (max-width: 1000px) {
    html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-lastname,
    html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-firstname,
    html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-middlename,
    html body .main .content .patient-profile-form .patient-profile-edit-grid .profile-field-actions {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}


/* =========================================================
   SCOPED FIX: LIS FOREIGN ORDER BADGE
   ========================================================= */

html body .main .content .lis-foreign-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
    margin-left: 8px !important;
    padding: 2px 8px !important;
    border: 1px solid #cfe0fb !important;
    border-radius: 999px !important;
    background: #f5f9ff !important;
    color: #1e55b8 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}