:root {
    --bg: #f6fbff;
    --ink: #071625;
    --muted: #647082;
    --line: #c9d7e3;
    --primary: #06233a;
    --secondary: #0798d7;
    --secondary-strong: #006eaa;
    --accent: #0f766e;
    --danger: #ba1a1a;
    --surface: #ffffff;
    --surface-soft: #eaf7fd;
    --surface-blue: #dff3fb;
    --landing-ice: #f4fbff;
    --landing-mint: #e6f7f2;
    --landing-ink-soft: #173349;
    --landing-gold: #f2b84b;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.material-symbols-outlined {
    font-size: 22px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    line-height: 1;
}

.app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px clamp(18px, 2.5vw, 40px) 64px;
}

.topbar {
    min-height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 6px rgba(11, 28, 48, .06);
}

.topbar-inner {
    min-height: 64px;
    padding-inline: clamp(18px, 2vw, 28px);
}

.topbar-brand {
    color: var(--primary);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0;
    margin-right: 24px;
}

.topbar-brand:hover {
    color: var(--primary);
}

.topbar-nav {
    gap: 18px;
}

.topbar-nav .nav-link {
    color: #1d2433;
    padding: 20px 0 17px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
}

.topbar-nav .nav-link:hover,
.topbar-nav .nav-link.active {
    color: var(--secondary);
    border-bottom-color: var(--secondary);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #2c3342;
    border-radius: 8px;
    text-decoration: none;
}

.topbar-icon:hover {
    color: var(--primary);
    background: var(--surface-soft);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.topbar-user-text {
    text-align: right;
}

.topbar-user-text strong {
    display: block;
    color: #111827;
    font-size: 15px;
}

.topbar-user-text form {
    margin: 0;
}

.topbar-user-text button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
}

.topbar-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.topbar-toggle {
    border-color: var(--line);
}

.btn-primary {
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #e7f0f7, #f7f8fb 48%, #eef8f5);
}

.public-shell {
    min-height: 100vh;
    background: var(--landing-ice);
}

.landing-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 24px clamp(18px, 4vw, 72px) 80px;
    background:
        linear-gradient(90deg, rgba(244, 251, 255, .98) 0%, rgba(244, 251, 255, .94) 44%, rgba(230, 247, 242, .64) 100%),
        var(--landing-ice);
}

.landing-nav {
    position: absolute;
    z-index: 2;
    top: 22px;
    left: clamp(18px, 4vw, 72px);
    right: clamp(18px, 4vw, 72px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.landing-brand img {
    width: clamp(188px, 22vw, 286px);
    height: auto;
    display: block;
}

.landing-copy {
    position: relative;
    z-index: 2;
    width: min(660px, 100%);
    padding-top: 72px;
}

.landing-copy h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 5vw, 76px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: 0;
    color: var(--primary);
}

.landing-copy p {
    max-width: 610px;
    color: var(--landing-ink-soft);
    font-size: 18px;
    line-height: 1.6;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.landing-preview {
    position: absolute;
    right: clamp(-180px, -8vw, -70px);
    bottom: clamp(24px, 7vw, 90px);
    width: min(720px, 54vw);
    min-height: 460px;
    border: 1px solid rgba(7, 152, 215, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 80px rgba(6, 35, 58, .15);
    transform: rotate(-2deg);
    padding: 18px;
}

.preview-topbar {
    display: flex;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dbe3ea;
}

.preview-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--secondary);
}

.preview-topbar span:nth-child(2) {
    background: var(--accent);
}

.preview-topbar span:nth-child(3) {
    background: var(--landing-gold);
}

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

.preview-metrics div {
    border: 1px solid #d6e8f1;
    border-radius: 8px;
    padding: 18px;
    background: #f8fcff;
}

.preview-metrics strong {
    display: block;
    color: var(--secondary-strong);
    font-size: 32px;
}

.preview-metrics span {
    color: var(--muted);
    font-size: 12px;
}

.preview-table {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr .8fr;
    gap: 10px;
}

.preview-table span {
    min-height: 34px;
    border-radius: 6px;
    background: linear-gradient(90deg, #dff3fb, #eef9f6);
}

.landing-services {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
    gap: 28px;
    padding: 56px clamp(18px, 4vw, 72px) 20px;
    background: #fff;
}

.landing-services h2 {
    margin: 0;
    font-size: 34px;
    color: var(--primary);
    font-weight: 800;
    line-height: 1.16;
}

.landing-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.landing-service-list article {
    min-height: 190px;
    border: 1px solid #d7e7ee;
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 12px 28px rgba(6, 35, 58, .06);
}

.landing-service-list .material-symbols-outlined {
    display: block;
    margin-bottom: 14px;
    color: var(--secondary-strong);
    font-size: 34px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.landing-service-list strong {
    display: block;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.landing-service-list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.landing-section {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr);
    gap: 28px;
    padding: 56px clamp(18px, 4vw, 72px) 72px;
    background:
        linear-gradient(135deg, rgba(6, 35, 58, .94), rgba(0, 110, 170, .86)),
        var(--primary);
}

.landing-section h2 {
    margin: 0;
    color: #fff;
    font-size: 34px;
}

.landing-section .eyebrow {
    color: rgba(255, 255, 255, .74);
}

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

.landing-features article {
    min-height: 170px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    padding: 20px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .14);
}

.landing-features strong {
    display: block;
    margin-bottom: 10px;
    font-size: 17px;
}

.landing-features p {
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.landing-faq {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(0, 1.5fr);
    gap: 28px;
    padding: 56px clamp(18px, 4vw, 72px);
    background: linear-gradient(180deg, #fff 0%, var(--landing-ice) 100%);
}

.landing-faq h2 {
    margin: 0;
    color: var(--primary);
    font-size: 34px;
    font-weight: 800;
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.faq-list article {
    border: 1px solid #d7e7ee;
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    padding: 20px;
    box-shadow: 0 12px 28px rgba(6, 35, 58, .05);
}

.faq-list h3 {
    margin: 0 0 9px;
    color: var(--primary);
    font-size: 17px;
    font-weight: 800;
}

.faq-list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 22px clamp(18px, 4vw, 72px);
    border-top: 1px solid #d7e7ee;
    background: #fff;
    color: var(--landing-ink-soft);
}

.landing-footer strong {
    color: var(--secondary-strong);
    letter-spacing: .08em;
}

.login-card {
    width: min(860px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(31, 41, 55, .12);
}

.brand-panel {
    background: #123d5a;
    color: #fff;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.55);
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 24px;
}

.form-panel {
    padding: 44px;
}

.page-title {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 42px;
}

.page-title h1 {
    color: #081426;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.page-title p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #2d3442;
    font-size: 17px;
}

.eyebrow {
    color: #bec1cf;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

.grid {
    display: grid;
    gap: 18px;
}

.grid.two {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
}

.admin-dashboard-grid {
    gap: 30px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: clamp(14px, 1.6vw, 22px);
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(11, 28, 48, .04);
}

.panel h2 {
    font-size: 18px;
    margin-bottom: 16px;
}

.panel-head,
.actions,
.inline-fields,
.invoice-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.panel-head-modern {
    justify-content: space-between;
    padding: 4px 4px 18px;
    border-bottom: 1px solid var(--line);
    margin: -4px -4px 0;
}

.btn-icon-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
}

.btn-icon-label .material-symbols-outlined {
    font-size: 18px;
}

.doctors-panel {
    padding: 0;
    overflow: hidden;
}

.doctors-panel .panel-head {
    padding: 24px;
    margin: 0;
    background: rgba(239, 244, 255, .45);
}

.doctors-panel h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.doctors-list {
    display: grid;
}

.doctor-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 22px 24px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.doctor-row:hover {
    background: var(--surface-soft);
}

.doctor-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #dce1ff;
    color: #001a42;
}

.doctor-main strong,
.doctor-main small {
    display: block;
}

.doctor-main strong {
    font-size: 17px;
}

.doctor-main small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.doctor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.doctor-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: var(--secondary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.doctor-action:hover,
.doctor-action:focus {
    color: var(--primary);
}

.doctor-action-button {
    padding: 0;
}

.doctor-action .material-symbols-outlined {
    font-size: 18px;
}

.doctors-empty-note {
    padding: 38px 24px;
    color: #b7bac9;
    text-align: center;
}

.doctors-empty-note .material-symbols-outlined {
    display: block;
    margin-bottom: 10px;
    color: #c4c7d5;
    font-size: 42px;
}

.doctors-empty-note p {
    margin: 0;
}

.dashboard-summary {
    min-width: 0;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.section-heading span {
    width: 4px;
    height: 34px;
    border-radius: 999px;
    background: var(--primary);
}

.section-heading h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.stack-form {
    display: grid;
    gap: 10px;
}

.record-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}

.record-form .wide {
    grid-column: span 2;
}

.form-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.form-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.modal-eyebrow {
    margin-bottom: 4px;
}

.doctor-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.doctor-edit-modal {
    border: 1px solid #bfc6d8;
    border-radius: 12px;
    overflow: hidden;
}

.doctor-edit-modal .modal-header,
.doctor-edit-modal .modal-footer {
    padding: 22px 26px;
}

.doctor-edit-modal .modal-title {
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
}

.doctor-edit-modal .modal-body {
    padding: 26px;
}

.doctor-edit-modal .form-control,
.doctor-edit-modal .form-select {
    min-height: 50px;
    border-color: #bfc6d8;
    border-radius: 9px;
}

.doctor-edit-modal .form-control:focus,
.doctor-edit-modal .form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem rgba(7, 152, 215, .16);
}

.doctor-status-field {
    grid-column: 1 / -1;
}

.doctors-page-title {
    align-items: flex-start;
    margin-bottom: 46px;
}

.doctors-page-title h1 {
    color: var(--primary);
    font-size: clamp(34px, 3.3vw, 48px);
    font-weight: 800;
    letter-spacing: 0;
}

.doctors-page-title p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #2d3442;
    font-size: 18px;
}

.doctors-management {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.doctor-create-card {
    position: sticky;
    top: 96px;
    border: 1px solid #bfc6d8;
    border-radius: 12px;
    background: #fff;
    padding: 28px;
    box-shadow: 0 1px 5px rgba(11, 28, 48, .06);
}

.doctor-create-card h2,
.doctors-directory h2 {
    margin: 0;
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
}

.doctor-create-form {
    display: grid;
    gap: 18px;
    margin-top: 26px;
}

.doctor-create-form .form-control,
.doctor-create-form .form-select {
    min-height: 52px;
    border-color: #bfc6d8;
    border-radius: 9px;
    color: var(--ink);
    font-size: 15px;
}

.doctor-create-form .form-control:focus,
.doctor-create-form .form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem rgba(7, 152, 215, .16);
}

.doctor-form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.doctor-icon-field {
    position: relative;
}

.doctor-icon-field .material-symbols-outlined {
    position: absolute;
    left: 14px;
    bottom: 14px;
    color: var(--secondary-strong);
    font-size: 21px;
    font-style: normal;
}

.doctor-icon-field .form-control {
    padding-left: 46px;
}

.doctor-form-divider {
    height: 1px;
    background: #d3d8e5;
    margin: 4px 0;
}

.doctor-submit {
    min-height: 58px;
    justify-content: center;
    margin-top: 2px;
    border-radius: 9px;
    background: #243f97;
    border-color: #243f97;
    box-shadow: 0 4px 10px rgba(6, 35, 58, .18);
    font-size: 17px;
}

.doctor-submit:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.doctors-directory {
    min-width: 0;
}

.doctors-directory-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.doctors-tools {
    display: flex;
    gap: 10px;
}

.doctor-filter {
    margin: -8px 0 18px;
}

.doctor-filter[hidden] {
    display: none;
}

.doctor-filter .form-control {
    min-height: 48px;
    border-color: #bfc6d8;
    border-radius: 9px;
}

.btn-soft-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: #dbe9ff;
    --bs-btn-border-color: #dbe9ff;
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-bg: #cddfff;
    --bs-btn-hover-border-color: #cddfff;
    min-height: 48px;
    padding-inline: 18px;
    font-weight: 700;
}

.doctor-card-list {
    display: grid;
    gap: 18px;
}

.doctor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #bfc6d8;
    border-radius: 12px;
    background: #fff;
    padding: 26px;
    box-shadow: 0 1px 5px rgba(11, 28, 48, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}

.doctor-card:hover {
    box-shadow: 0 12px 28px rgba(11, 28, 48, .09);
    transform: translateY(-1px);
}

.doctor-card-inactive {
    background: #f8fafc;
}

.doctor-card-inactive .doctor-card-avatar {
    background: linear-gradient(135deg, #7b8794, #293241);
    border-color: #d7dde7;
}

.doctor-card-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.doctor-card-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border: 3px solid #dbe9ff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.doctor-card-copy {
    min-width: 0;
}

.doctor-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.doctor-card-title h3 {
    margin: 0;
    color: #081426;
    font-size: 24px;
    font-weight: 800;
}

.doctor-card-title .doctor-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 13px;
    font-weight: 800;
}

.doctor-status-active {
    background: #dbe5ff;
    color: #123b91;
}

.doctor-status-inactive {
    background: #edf0f5;
    color: #5d6675;
}

.doctor-card-copy p {
    margin: 2px 0 0;
    color: #0058be;
    font-size: 17px;
    font-weight: 700;
}

.doctor-card-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 9px;
}

.doctor-card-contact span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: #283041;
    font-size: 14px;
    font-weight: 700;
}

.doctor-card-contact .material-symbols-outlined {
    color: #1d2635;
    font-size: 18px;
    font-style: normal;
}

.doctor-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.doctor-card-actions .btn {
    min-width: 112px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 700;
}

.doctors-list-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #bfc6d8;
}

.doctors-list-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.settings-side {
    display: grid;
    gap: 26px;
}

.settings-create-card,
.settings-table-card,
.settings-preview-card {
    border: 1px solid #bfc6d8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(11, 28, 48, .06);
}

.settings-create-card {
    padding: 26px;
}

.settings-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-card-title .material-symbols-outlined {
    color: #0058be;
    font-size: 27px;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.settings-card-title h2 {
    margin: 0;
    color: #081426;
    font-size: 24px;
    font-weight: 800;
}

.settings-create-form {
    display: grid;
    gap: 24px;
    margin-top: 30px;
}

.settings-create-form .form-control {
    min-height: 56px;
    border-color: #bfc6d8;
    border-radius: 9px;
    color: var(--ink);
    font-size: 16px;
}

.settings-create-form .form-control:focus,
.settings-table-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 .2rem rgba(7, 152, 215, .16);
}

.settings-submit {
    min-height: 50px;
    justify-content: center;
    border-radius: 9px;
    background: #243f97;
    border-color: #243f97;
    font-size: 18px;
}

.settings-submit:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.settings-preview-card {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: end;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(248, 249, 255, .15) 0%, rgba(0, 35, 111, .76) 100%),
        #dce9ff;
}

.settings-preview-window {
    position: absolute;
    inset: 18px 0 auto 0;
    height: 170px;
    opacity: .62;
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid #d3e4fe;
    box-shadow: 0 18px 48px rgba(6, 35, 58, .12);
}

.settings-preview-window::before {
    content: "Tablas";
    position: absolute;
    top: 16px;
    left: 18px;
    color: #0058be;
    font-size: 9px;
    font-weight: 800;
}

.settings-preview-window span {
    position: absolute;
    display: block;
    height: 18px;
    border-radius: 4px;
    background: #dce9ff;
}

.settings-preview-window span:nth-child(1) { left: 24px; right: 52%; top: 72px; height: 58px; }
.settings-preview-window span:nth-child(2) { left: 51%; right: 24px; top: 72px; height: 20px; }
.settings-preview-window span:nth-child(3) { left: 51%; right: 24px; top: 102px; height: 20px; }
.settings-preview-window span:nth-child(4) { left: 51%; right: 24px; top: 132px; height: 20px; }
.settings-preview-window span:nth-child(5) { left: 24px; width: 44px; top: 42px; height: 8px; }

.settings-preview-card p {
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

.settings-table-card {
    overflow: hidden;
}

.settings-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 30px;
    border-bottom: 1px solid #bfc6d8;
    background: rgba(248, 249, 255, .78);
}

.settings-count {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    border-radius: 999px;
    padding: 4px 17px;
    background: #d3e4fe;
    color: #313a49;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
}

.settings-table {
    margin: 0;
}

.settings-table thead th {
    padding: 16px 30px;
    border-bottom: 1px solid #bfc6d8;
    background: rgba(248, 249, 255, .78);
    color: #1d2433;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-table tbody td {
    padding: 20px 30px;
    border-bottom: 1px solid #e5e9f1;
}

.settings-table tbody tr:hover {
    background: #f7fbff;
}

.settings-row-form {
    margin: 0;
}

.settings-table-input {
    max-width: 360px;
    min-height: 42px;
    border-color: transparent;
    background: transparent;
    color: #081426;
    font-size: 16px;
    font-weight: 600;
}

.settings-table-input:disabled {
    opacity: 1;
    cursor: default;
}

.settings-table-input:focus {
    background: #fff;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}

.settings-edit,
.settings-save {
    min-height: 39px;
    border-radius: 9px;
    padding-inline: 14px;
    color: #0058be;
    border-color: #0058be;
    font-weight: 800;
}

.settings-edit .material-symbols-outlined,
.settings-save .material-symbols-outlined {
    font-size: 19px;
}

.settings-delete {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #ba1a1a;
}

.settings-delete:hover,
.settings-delete:focus {
    background: #ffdad6;
    color: #93000a;
}

.settings-pagination {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid #bfc6d8;
    background: rgba(248, 249, 255, .58);
}

.settings-pagination:empty {
    display: none;
}

.settings-page-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1d2433;
    font-weight: 800;
}

.settings-page-btn:hover,
.settings-page-btn:focus {
    background: #dce9ff;
}

.settings-page-btn.active {
    background: #00236f;
    color: #fff;
}

.settings-page-btn[disabled] {
    opacity: .45;
    pointer-events: none;
}

.lookup-field {
    position: relative;
}

.lookup-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(31, 41, 55, .16);
}

.lookup-results[hidden] {
    display: none;
}

.lookup-option {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
    color: var(--ink);
    text-align: left;
}

.lookup-option:hover,
.lookup-option:focus {
    background: #eef6fb;
}

.lookup-option strong {
    font-size: 13px;
}

.lookup-option small {
    color: var(--muted);
}

.record-form.compact {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.invoice-form label {
    display: grid;
    gap: 6px;
    flex: 1 1 180px;
}

.invoice-form .wide {
    flex-basis: 360px;
}

.metric-row,
.metric-grid {
    display: grid;
    gap: 12px;
}

.metric-row {
    grid-template-columns: 1fr 1fr;
}

.metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.admin-dashboard-grid .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.metric-row div,
.metric-grid div,
.metric-grid a {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.metric-card {
    min-height: 158px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(11, 28, 48, .05);
}

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

.metric-top > span:first-child {
    max-width: 140px;
    color: #6f7280;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.metric-top .material-symbols-outlined {
    color: var(--primary);
    font-size: 28px;
}

.metric-row strong,
.metric-grid strong {
    display: block;
    font-size: clamp(30px, 2.4vw, 42px);
    color: #0b1c30;
    line-height: 1.1;
}

.metric-row span,
.metric-grid span,
td small {
    display: block;
    color: var(--muted);
}

.metric-card small {
    display: block;
    color: #6f7280;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.metric-grid a {
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.metric-grid a:hover,
.metric-grid a:focus {
    border-color: rgba(23, 105, 170, .45);
    box-shadow: 0 10px 24px rgba(31, 41, 55, .1);
    transform: translateY(-1px);
}

.metric-info {
    border-left: 4px solid var(--secondary-strong) !important;
}

.metric-info small,
.metric-info .metric-top .material-symbols-outlined {
    color: var(--secondary-strong);
}

.metric-danger {
    border-left: 4px solid var(--danger) !important;
}

.metric-danger small,
.metric-danger .metric-top .material-symbols-outlined {
    color: var(--danger);
}

.metric-solid {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 12px 28px rgba(0, 35, 111, .22);
}

.metric-solid .metric-top > span:first-child,
.metric-solid .metric-top .material-symbols-outlined,
.metric-solid strong,
.metric-solid small {
    color: #fff;
}

.metric-solid .metric-top > span:first-child,
.metric-solid small {
    opacity: .82;
}

.metric-solid strong {
    font-size: clamp(24px, 1.9vw, 31px);
}

.insight-panel {
    margin-top: 30px;
    padding: 38px;
    border: 1px dashed #b7c0d2;
    border-radius: 12px;
    background: rgba(229, 238, 255, .45);
    text-align: center;
}

.insight-visual {
    position: relative;
    width: min(720px, 100%);
    height: 210px;
    margin: 0 auto 26px;
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(229, 238, 255, .15), rgba(248, 249, 255, .92)),
        #14364a;
}

.insight-visual::before {
    content: "";
    position: absolute;
    inset: 24px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 58px 42px;
}

.insight-visual span,
.insight-visual i {
    position: absolute;
    bottom: 42px;
    display: block;
    border-radius: 4px 4px 0 0;
    background: rgba(137, 206, 255, .75);
}

.insight-visual span:nth-child(1) { left: 90px; width: 24px; height: 52px; }
.insight-visual span:nth-child(2) { left: 132px; width: 24px; height: 84px; }
.insight-visual span:nth-child(3) { left: 174px; width: 24px; height: 116px; }
.insight-visual span:nth-child(4) { left: 216px; width: 24px; height: 70px; }
.insight-visual span:nth-child(5) { left: 258px; width: 24px; height: 136px; }

.insight-visual i {
    right: 96px;
    width: 32px;
    background: rgba(182, 196, 255, .78);
}

.insight-visual i:nth-of-type(1) { height: 120px; }
.insight-visual i:nth-of-type(2) { right: 148px; height: 92px; }
.insight-visual i:nth-of-type(3) { right: 200px; height: 142px; }
.insight-visual i:nth-of-type(4) { right: 252px; height: 72px; }

.insight-panel h3 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
}

.insight-panel p {
    max-width: 620px;
    margin: 0 auto;
    color: #2f3948;
    line-height: 1.55;
}

.status {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
}

.status.ok {
    background: #e7f7ef;
    color: #12633f;
}

.status.pending {
    background: #fff3dc;
    color: #8a5400;
}

.table-actions {
    min-width: 250px;
}

.table-responsive {
    width: 100%;
}

.table {
    width: 100%;
}

.inline-form {
    display: inline;
}

.search-box {
    max-width: 320px;
    margin-bottom: 12px;
}

.print-invoice {
    display: none;
}

@media (max-width: 900px) {
    .grid.two,
    .admin-dashboard-grid,
    .login-card,
    .landing-section,
    .landing-features,
    .landing-services,
    .landing-service-list,
    .landing-faq,
    .doctors-management,
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .faq-list {
        grid-template-columns: 1fr;
    }

    .doctor-create-card {
        position: static;
    }

    .doctor-card {
        align-items: stretch;
        flex-direction: column;
    }

    .doctor-card-actions {
        justify-content: flex-start;
    }

    .admin-dashboard-grid .metric-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .topbar-actions {
        align-items: stretch;
        gap: 10px;
        padding: 14px 0 8px;
    }

    .topbar-user {
        justify-content: space-between;
        padding-left: 0;
        border-left: 0;
    }

    .topbar-user-text {
        text-align: left;
    }

    .topbar-nav .nav-link {
        padding: 10px 0;
    }

    .landing-hero {
        min-height: auto;
        padding-bottom: 44px;
    }

    .landing-preview {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: auto;
        margin-top: 30px;
        transform: none;
    }

    .record-form,
    .record-form.compact {
        grid-template-columns: 1fr 1fr;
    }

    .doctor-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .doctor-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .record-form .wide {
        grid-column: span 2;
    }

    .insight-panel {
        padding: 24px;
    }

    .insight-visual {
        height: 170px;
    }
}

@media (max-width: 560px) {
    .page-title {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-nav {
        position: relative;
        inset: auto;
        margin-bottom: 28px;
    }

    .landing-nav .btn {
        padding-inline: 14px;
    }

    .landing-copy {
        padding-top: 0;
    }

    .landing-copy h1 {
        font-size: 36px;
    }

    .landing-actions .btn {
        width: 100%;
    }

    .preview-metrics {
        grid-template-columns: 1fr;
    }

    .preview-table {
        grid-template-columns: 1fr 1fr;
    }

    .landing-services h2 {
        font-size: 30px;
    }

    .landing-service-list article {
        min-height: auto;
    }

    .landing-footer {
        flex-direction: column;
    }

    .record-form,
    .record-form.compact,
    .doctor-edit-form,
    .doctor-form-split {
        grid-template-columns: 1fr;
    }

    .doctors-directory-head,
    .doctors-list-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .doctors-tools,
    .doctor-card-actions,
    .settings-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settings-table-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-table thead {
        display: none;
    }

    .settings-table tbody td {
        display: block;
        padding: 16px 20px;
        text-align: left !important;
    }

    .settings-table tbody td + td {
        padding-top: 0;
    }

    .settings-table-input {
        max-width: none;
    }

    .settings-edit,
    .settings-save,
    .settings-delete {
        width: 100%;
        justify-content: center;
    }

    .doctor-card {
        padding: 20px;
    }

    .doctor-card-profile {
        align-items: flex-start;
    }

    .doctor-card-title h3 {
        font-size: 21px;
    }

    .record-form .wide {
        grid-column: auto;
    }
}

@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    body {
        background: #fff;
        color: #111827;
        font-size: 11px;
    }

    body > nav,
    .app-shell > :not(.print-invoice) {
        display: none !important;
    }

    .app-shell {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .print-invoice {
        display: block;
    }

    .print-invoice-head {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        align-items: flex-start;
        border-bottom: 2px solid #111827;
        padding-bottom: 14px;
        margin-bottom: 18px;
    }

    .print-brand {
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .1em;
    }

    .print-invoice h1 {
        margin: 0 0 4px;
        font-size: 28px;
        line-height: 1;
    }

    .print-invoice p {
        margin: 0;
    }

    .print-invoice-meta {
        min-width: 190px;
        display: grid;
        gap: 6px;
        text-align: right;
        font-weight: 700;
    }

    .print-invoice-parties {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }

    .print-invoice-parties div,
    .print-invoice-total,
    .print-invoice-notes {
        border: 1px solid #cbd5e1;
        padding: 10px;
    }

    .print-invoice span {
        display: block;
        color: #475569;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .print-invoice strong {
        font-size: 13px;
    }

    .print-invoice-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 16px;
    }

    .print-invoice-table th,
    .print-invoice-table td {
        border-bottom: 1px solid #d7dee8;
        padding: 6px 5px;
        vertical-align: top;
    }

    .print-invoice-table th {
        color: #111827;
        font-size: 10px;
        text-transform: uppercase;
    }

    .print-invoice-summary {
        display: grid;
        grid-template-columns: 1fr 180px;
        gap: 12px;
        align-items: start;
        page-break-inside: avoid;
    }

    .print-invoice-total {
        text-align: right;
    }

    .print-invoice-total strong {
        display: block;
        margin-top: 4px;
        font-size: 20px;
    }

    .print-invoice-notes p {
        margin-top: 5px;
    }

    .text-end {
        text-align: right;
    }
}