html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: #fcfcfd; /* slightly off-white to help watermark */
}
/* Rotating medical mark (watermark) */
.bg-mark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1; /* always behind everything */
    overflow: hidden;
}
.bg-mark__img {
    position: absolute;
    width: min(560px, 72vw);
    opacity: 0.07; /* slightly stronger */
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    animation: bg-rotate 28s linear infinite;
    filter: grayscale(100%) contrast(1.1);
}

@keyframes bg-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* ---------------- Clinic UI polish ---------------- */

/* Page titles */
.page-title {
    font-weight: 700;
    letter-spacing: .2px;
}

.page-subtitle {
    color: #6c757d;
    font-size: .95rem;
}

/* Bigger buttons for busy clinics */
.btn-clinic {
    padding: .85rem 1.1rem;
    font-weight: 600;
    border-radius: .75rem;
}

.btn-clinic-sm {
    padding: .55rem .8rem;
    font-weight: 600;
    border-radius: .6rem;
}

/* Cards */
.card.clinic-card {
    border-radius: 1rem;
    border: 1px solid rgba(0,0,0,.06);
}

    .card.clinic-card .card-title {
        font-weight: 700;
    }

/* Inputs */
.form-control.clinic-input {
    padding: .85rem 1rem;
    border-radius: .75rem;
    font-size: 1.05rem;
}

/* Tables */
.table.clinic-table thead th {
    font-size: .85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.table.clinic-table tbody td {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Status badges (default + overrides) */
.badge.status {
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 600;
}

    .badge.status.status-success {
        background: #198754;
    }

    .badge.status.status-info {
        background: #0dcaf0;
        color: #0b2a2f;
    }

    .badge.status.status-warn {
        background: #ffc107;
        color: #2b2100;
    }

    .badge.status.status-danger {
        background: #dc3545;
    }

    .badge.status.status-muted {
        background: #6c757d;
    }

/* Clinic grid buttons (big tiles) */
.tile {
    display: block;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

    .tile:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,.06);
    }

.tile-title {
    font-weight: 800;
    margin: 0;
}

.tile-desc {
    color: #6c757d;
    margin: .25rem 0 0;
    font-size: .95rem;
}
/* Busy-doctor UI polish */
.passport-hero__title {
    font-weight: 700;
    font-size: 1.1rem;
}

.passport-hero__hint {
    font-size: .95rem;
}

.action-tile {
    display: block;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    min-height: 138px;
    position: relative;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .action-tile:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0,0,0,.07);
    }

.action-tile__title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #111;
}

.action-tile__text {
    color: #6c757d;
    margin-bottom: 12px;
}

.action-tile__cta {
    font-weight: 700;
    color: #0d6efd;
}

.action-tile--primary .action-tile__cta {
    color: #0d6efd;
}

.action-tile--success .action-tile__cta {
    color: #198754;
}

.action-tile--outline .action-tile__cta {
    color: #0d6efd;
}
.patient-actions .btn {
    min-width: 140px;
}
.portal-bg {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(13,110,253,.10), transparent 60%), radial-gradient(900px 500px at 80% 0%, rgba(25,135,84,.10), transparent 55%), #f6f8fb;
    min-height: calc(100vh - 56px);
}

.portal-title {
    letter-spacing: .2px;
}

.portal-action {
    border: 1px solid rgba(0,0,0,.04);
}

.portal-chip {
    cursor: pointer;
    padding: .55rem .75rem;
    font-weight: 600;
}

.kbd {
    display: inline-block;
    padding: .1rem .35rem;
    border: 1px solid rgba(0,0,0,.15);
    border-bottom-width: 2px;
    border-radius: .35rem;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .85em;
}
/* Keep dashboard centered and not too wide on big screens */
.portal-container {
    max-width: 1100px;
}

/* Header bar feel */
.portal-header {
    padding: 8px 2px;
}

/* Make the hero card slightly stronger */
.portal-hero {
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 8px 26px rgba(0,0,0,.06) !important;
}

    /* Improve the card body spacing */
    .portal-hero .card-body {
        padding: 1.25rem;
    }

/* Suggestions (autocomplete) */
.portal-suggest {
    position: relative;
}

.portal-suggest__box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: .9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    overflow: hidden;
    z-index: 50;
}

.portal-suggest__list {
    max-height: 320px;
    overflow: auto;
}

.portal-suggest__item {
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .portal-suggest__item:hover {
        background: rgba(13,110,253,.06);
    }

    .portal-suggest__item.is-active {
        background: rgba(13,110,253,.10);
    }

.portal-suggest__footer {
    padding: .55rem .9rem;
    background: #fbfbfd;
}

/* Chips look more clickable */
.portal-chip {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

    .portal-chip:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,.07);
    }
/* Make status badge readable even if status string varies */
.badge.status.status-muted {
    background: #6c757d;
}
/* Portal shell width and spacing */
.portal-shell {
    max-width: 1160px;
}

/* Hero glass card */
.portal-hero {
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    overflow: hidden;
}

.portal-hero__head {
    padding: 18px 20px;
    background: linear-gradient(90deg, rgba(13,110,253,.08), rgba(25,135,84,.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.portal-hero__body {
    padding: 18px 20px;
}

/* Suggestions dropdown */
.suggest-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    z-index: 40;
    overflow: hidden;
}

.suggest-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

    .suggest-item:hover {
        background: rgba(13,110,253,.06);
    }

.suggest-item__title {
    font-weight: 700;
}

.suggest-item__meta {
    color: #6c757d;
    font-size: .85rem;
}

/* Recents chips */
#recents .badge {
    border-radius: 999px;
    padding: .55rem .8rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

/* Right widget block */
.portal-info {
    border-radius: 14px;
    background: rgba(13,110,253,.06);
    border: 1px solid rgba(13,110,253,.10);
    padding: 14px;
}

.portal-info__kpi {
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    padding: 12px 14px;
}
/* Suggest dropdown (Index search) */
.suggest-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: .9rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

/* each row is a button/div your JS adds */
.suggest-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: .75rem .9rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .suggest-item:last-child {
        border-bottom: none;
    }

    .suggest-item:hover,
    .suggest-item.is-active {
        background: rgba(13,110,253,.08);
    }

.suggest-main {
    min-width: 0;
}

.suggest-title {
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest-sub {
    color: #6c757d;
    font-size: .9rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggest-meta {
    text-align: end;
    color: #6c757d;
    font-size: .85rem;
    white-space: nowrap;
}

/* optional: empty state */
.suggest-empty {
    padding: .9rem;
    color: #6c757d;
    font-size: .95rem;
}
/* Host wrapper should be position:relative in your markup */
.portal-suggest {
    position: relative;
}

/* The dropdown container (#suggestBox) */
#suggestBox {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: .9rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
    overflow: hidden;
}

/* The scroll area (#suggestList) */
#suggestList {
    max-height: 320px;
    overflow-y: auto;
}

/* Each row button you create */
.portal-suggest__item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .75rem .9rem;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .portal-suggest__item:last-child {
        border-bottom: none;
    }

    .portal-suggest__item:hover,
    .portal-suggest__item.is-active {
        background: rgba(13,110,253,.08);
    }

    .portal-suggest__item:focus {
        outline: none;
    }

    /* Optional: make “Select” badge look consistent */
    .portal-suggest__item .badge {
        font-weight: 700;
    }
/* Suggest dropdown */
.suggest-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    padding: 6px;
    z-index: 50;
}

.portal-suggest__item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}

    .portal-suggest__item:hover {
        background: rgba(13,110,253,.07);
    }

    .portal-suggest__item.is-active {
        background: rgba(13,110,253,.12);
        outline: 2px solid rgba(13,110,253,.20);
    }
/* =========================
   Doctor Portal: Suggest + Chips
   Add to: wwwroot/css/site.css  (or your portal css file)
   ========================= */

/* Chips (recent passports) */
.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

    .portal-chip:hover {
        background: #f8f9fa; /* Bootstrap light */
        border-color: #cfd4da;
    }

    .portal-chip:active {
        transform: translateY(1px);
    }

    .portal-chip:focus {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); /* primary focus */
    }

/* Suggest box container */
.suggest-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .35rem;
    z-index: 1050;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.10);
    overflow: hidden;
}

/* Optional: limit height + scroll */
#suggestList {
    max-height: 320px;
    overflow: auto;
}

/* Suggest item (button) */
.portal-suggest__item {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 0;
    padding: .75rem .85rem;
    display: block;
    transition: background-color .12s ease;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .portal-suggest__item:last-child {
        border-bottom: 0;
    }

    .portal-suggest__item:hover {
        background: #f8f9fa;
    }

    .portal-suggest__item.is-active {
        background: rgba(13,110,253,.08); /* primary tint */
    }

    .portal-suggest__item:focus {
        outline: 0;
        box-shadow: inset 0 0 0 2px rgba(13,110,253,.25);
    }

    /* Make passport/phone line slightly tighter inside suggest */
    .portal-suggest__item .text-muted.small {
        margin-top: .15rem;
    }
.doctor-layout-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}

.doctor-navbar {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.doctor-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 950;
    color: #10243a !important;
    text-decoration: none;
}

.doctor-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 34px;
    border-radius: 13px;
    background: linear-gradient(135deg, #2563eb, #16a34a);
    color: #fff;
    font-size: .88rem;
    font-weight: 950;
    letter-spacing: .03em;
    box-shadow: 0 8px 18px rgba(37,99,235,.22);
}

.doctor-brand-text {
    font-size: 1rem;
    letter-spacing: -.01em;
}

.doctor-nav {
    gap: .2rem;
}

    .doctor-nav .nav-link {
        border-radius: 999px;
        padding: .5rem .78rem !important;
        color: #475569 !important;
        font-weight: 800;
        font-size: .92rem;
        transition: background-color .12s ease, color .12s ease, transform .12s ease;
    }

        .doctor-nav .nav-link:hover {
            background: #f1f5f9;
            color: #10243a !important;
        }

        .doctor-nav .nav-link.active {
            background: #eff6ff;
            color: #1d4ed8 !important;
            box-shadow: inset 0 0 0 1px #dbeafe;
        }

.doctor-user-area {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.doctor-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid #e6edf5;
    border-radius: 999px;
    background: #fff;
    padding: .34rem .55rem .34rem .35rem;
    box-shadow: 0 6px 16px rgba(15,23,42,.04);
}

.doctor-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 950;
    border: 1px solid #dbeafe;
}

.doctor-user-text {
    line-height: 1.1;
    max-width: 220px;
}

.doctor-user-name {
    color: #10243a;
    font-weight: 900;
    font-size: .86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctor-user-sub {
    color: #64748b;
    font-weight: 650;
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctor-logout-btn {
    border-radius: 999px;
    font-weight: 800;
    padding: .42rem .75rem;
}

.doctor-layout-main {
    min-height: calc(100vh - 146px);
    padding: 1rem 0 1.5rem;
    position: relative;
    z-index: 1;
}

.doctor-layout-footer {
    border-top: 1px solid #e6edf5;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(12px);
    color: #64748b;
    font-size: .88rem;
    font-weight: 650;
    padding: 1rem 0;
    position: relative;
    z-index: 1;
}

    .doctor-layout-footer a {
        color: #475569;
        text-decoration: none;
        font-weight: 800;
    }

        .doctor-layout-footer a:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

@media (max-width: 991.98px) {
    .doctor-user-area {
        align-items: stretch;
        margin-top: .75rem;
    }

    .doctor-user-chip {
        border-radius: 18px;
        width: 100%;
    }

    .doctor-logout-btn {
        width: 100%;
    }

    .doctor-nav .nav-link {
        border-radius: 14px;
    }
}

@media (max-width: 576px) {
    .doctor-brand-text {
        font-size: .95rem;
    }

    .doctor-layout-main {
        padding-top: .75rem;
    }
}