/* =========================================================================
   MedShare Community — Design System
   Healthcare Professional Case Sharing Platform
   Built on Bootstrap 5.3 (bootstrap.min.css must be loaded BEFORE this file)
   ========================================================================= */
/* -------------------------------------------------------------------------
Typography Scale — Compact UI
Keeps the whole interface visually consistent and less oversized.
------------------------------------------------------------------------- */

html {
    font-size: 14px;
}

body {
    font-size: .95rem;
    line-height: 1.5;
}

/* Headings */
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.65rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.05rem;
}

h6 {
    font-size: .95rem;
}

/* Bootstrap display headings */
.display-1 {
    font-size: 3rem;
}

.display-2 {
    font-size: 2.5rem;
}

.display-3 {
    font-size: 2.1rem;
}

.display-4 {
    font-size: 1.8rem;
}

/* Body / secondary text */
.lead {
    font-size: 1.05rem;
}

.small,
small {
    font-size: .82rem;
}

/* Buttons */
.btn {
    font-size: .9rem;
}

.btn-sm {
    font-size: .8rem;
}

.btn-lg {
    font-size: 1rem;
}

/* Forms */
.form-label {
    font-size: .85rem;
}

.form-control,
.form-select {
    font-size: .9rem;
}

.form-text {
    font-size: .8rem;
}

.required-note {
    font-size: .78rem;
}

/* Navigation */
.navbar-public .nav-link {
    font-size: .9rem;
}

.app-sidebar .nav-link {
    font-size: .88rem;
}

.app-sidebar .nav-section-title {
    font-size: .65rem;
}

/* Tables */
.table {
    font-size: .88rem;
}

    .table thead th {
        font-size: .7rem;
    }

/* Status / badges */
.status-pill {
    font-size: .7rem;
}

.case-card .badge-specialty {
    font-size: .68rem;
}

.case-meta {
    font-size: .78rem;
}

/* Filters */
.filter-chip {
    font-size: .8rem;
}

/* Misc */
.section-eyebrow {
    font-size: 17px;
}

.divider-label {
    font-size: .78rem;
}

.step-indicator .step {
    font-size: .8rem;
}

.site-footer h6 {
    font-size: .8rem;
}

/* Icons that are text-sized */
.navbar-brand-mark {
    font-size: 1rem;
}

.avatar {
    font-size: .8rem;
}

.avatar-sm {
    font-size: .68rem;
}

.notif-icon {
    font-size: .9rem;
}

/* -------------------------------------------------------------------------
   1. Design tokens — override Bootstrap's own CSS variables so every
   .btn-primary / .bg-primary / .text-primary / form-check etc. in Bootstrap
   automatically inherits this palette with zero extra classes.
   ------------------------------------------------------------------------- */
:root {
  /* Brand palette — clinical teal/blue, calm and trustworthy */
  --brand-50:  #eef7f9;
  --brand-100: #d7edf1;
  --brand-200: #b0dbe3;
  --brand-300: #7fc2d0;
  --brand-400: #47a3b8;
  --brand-500: #0f6e8c;   /* primary */
  --brand-600: #0c5c76;
  --brand-700: #0a4f66;
  --brand-800: #083f52;
  --brand-900: #072f3d;

  --accent-500: #2d9cdb;  /* secondary accent blue */
  --ink-900: #14212b;     /* near-black navy for headings */
  --ink-700: #33454f;
  --ink-500: #5b6e78;
  --ink-300: #8fa0a8;

  --surface-0: #ffffff;
  --surface-50: #f5f9fa;
  --surface-100: #eef3f5;
  --surface-200: #e2e9ec;

  --success-500: #1e8e5a;
  --warning-500: #c77c11;
  --danger-500: #d64545;
  --info-500: #2d9cdb;

  /* Bootstrap variable overrides */
  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 15, 110, 140;
  --bs-secondary: var(--ink-500);
  --bs-secondary-rgb: 91, 110, 120;
  --bs-success: var(--success-500);
  --bs-success-rgb: 30, 142, 90;
  --bs-warning: var(--warning-500);
  --bs-warning-rgb: 199, 124, 17;
  --bs-danger: var(--danger-500);
  --bs-danger-rgb: 214, 69, 69;
  --bs-info: var(--info-500);
  --bs-info-rgb: 45, 156, 219;
  --bs-light: var(--surface-50);
  --bs-dark: var(--ink-900);
  --bs-body-color: var(--ink-700);
  --bs-body-bg: var(--surface-50);
  --bs-border-color: var(--surface-200);
  --bs-link-color: var(--brand-500);
  --bs-link-hover-color: var(--brand-700);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 1px 2px rgba(20, 33, 43, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 33, 43, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 33, 43, 0.12);

  --sidebar-w: 264px;
  --topbar-h: 68px;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--ink-700);
  background-color: var(--surface-50);
  -webkit-font-smoothing: antialiased;
  /* Guards against the 1-2px negative-margin bleed that nested Bootstrap
     .row grids (e.g. a stats row nested inside a hero column) can produce
     at narrow widths — no visible content relies on that overflow, so
     clipping it is safe and prevents a stray mobile horizontal scrollbar. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-muted { color: var(--ink-300) !important; }
.lead { color: var(--ink-500); font-weight: 400; }

a { text-decoration: none; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-500);
  background: var(--brand-50);
  padding: .35rem .75rem;
  border-radius: 50rem;
}

.bg-brand-50 { background-color: var(--brand-50) !important; }
.bg-surface-50 { background-color: var(--surface-50) !important; }
.bg-surface-100 { background-color: var(--surface-100) !important; }
.text-ink-900 { color: var(--ink-900) !important; }
.text-ink-500 { color: var(--ink-500) !important; }

/* Gradient hero background used on marketing pages */
/*.bg-hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(45,156,219,.18), transparent 60%),
    linear-gradient(180deg, var(--brand-800) 0%, var(--brand-600) 55%, var(--brand-500) 100%);
  color: #fff;
}*/

.bg-hero {
    background: linear-gradient(#26569d, #0e284c5c), url(/images/images.jfif) center center / cover no-repeat;
    color: #fff;
}
.bg-hero h1, .bg-hero h2, .bg-hero h3 { color: #fff; }

/* -------------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: var(--bs-border-radius); padding: .55rem 1.15rem; }
.btn-sm { padding: .32rem .75rem; }
.btn-lg { padding: .8rem 1.6rem; border-radius: .8rem; }

.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-outline-primary { color: var(--brand-500); border-color: var(--brand-300); }
.btn-outline-primary:hover { background: var(--brand-500); border-color: var(--brand-500); }

.btn-light-brand {
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid var(--brand-100);
}
.btn-light-brand:hover { background: var(--brand-100); color: var(--brand-700); }

.btn-icon {
  width: 2.4rem; height: 2.4rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* -------------------------------------------------------------------------
   4. Navbar — public site
   ------------------------------------------------------------------------- */
.navbar-brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.1rem;
}
.navbar-public {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--surface-200);
}
.navbar-public .nav-link {
  font-weight: 600;
  color: var(--ink-700);
  padding: .5rem 1rem !important;
}
.navbar-public .nav-link.active, .navbar-public .nav-link:hover { color: var(--brand-500); }

/* -------------------------------------------------------------------------
   5. App shell — top bar + sidebar (logged-in / admin)
   ------------------------------------------------------------------------- */
.app-topbar {
  height: var(--topbar-h);
  background: var(--surface-0);
  border-bottom: 1px solid var(--surface-200);
  position: sticky; top: 0; z-index: 1030;
}

.app-search {
  background: var(--surface-100);
  border-radius: 50rem;
  border: 1px solid transparent;
  min-width: 280px;
}
.app-search input { background: transparent; }
.app-search:focus-within { border-color: var(--brand-300); background: #fff; }

.app-sidebar {
  width: var(--sidebar-w);
  background: var(--ink-900);
  color: #cfe3ea;
  min-height: 100vh;
}
.app-sidebar .side-brand { color: #fff; }
.app-sidebar .nav-section-title {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: #6f8a95; padding: 1.1rem 1rem .4rem;
}
.app-sidebar .nav-link {
  color: #b9cdd4;
  font-weight: 600;
  border-radius: .55rem;
  padding: .6rem .8rem;
  margin: .1rem .6rem;
  display: flex; align-items: center; gap: .65rem;
}
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-sidebar .nav-link.active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.app-main {
  background: var(--surface-50);
  min-height: 100vh;
  /* Without this, a wide child (e.g. a table forcing intrinsic content width)
     can stretch this flex item beyond the viewport and cause page-level
     horizontal scroll. min-width: 0 lets it shrink to the space actually
     available so descendants (like .table-responsive) can contain overflow
     internally instead. */
  min-width: 0;
}

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1045;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .app-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(15,20,25,.45);
    z-index: 1040; display: none;
  }
  .sidebar-backdrop.show { display: block; }
}

/* -------------------------------------------------------------------------
   6. Cards, surfaces
   ------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--surface-200);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-flush { border: none; box-shadow: none; background: transparent; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.stat-card { border-radius: var(--bs-border-radius-lg); }
.stat-card .stat-icon {
  width: 3rem; height: 3rem; border-radius: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}

/* -------------------------------------------------------------------------
   7. Status badges — Users & Cases
   ------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .65rem; border-radius: 50rem;
}
.status-pill::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor;
}
.status-active, .status-published, .status-approved { color: var(--success-500); background: rgba(30,142,90,.1); }
.status-pending { color: var(--warning-500); background: rgba(199,124,17,.1); }
.status-suspended, .status-hidden { color: #8a5a00; background: rgba(199,124,17,.12); }
.status-rejected, .status-deactivated, .status-inactive { color: var(--danger-500); background: rgba(214,69,69,.1); }
.status-draft { color: var(--ink-500); background: var(--surface-200); }

/* -------------------------------------------------------------------------
   8. Forms
   ------------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--ink-900); font-size: .9rem; }
.form-label .text-danger { font-weight: 700; }
.form-control, .form-select {
  border-color: var(--surface-200);
  padding: .6rem .85rem;
  font-size: .95rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 .2rem rgba(15,110,140,.15);
}
.form-section-title {
  font-size: 1.02rem; font-weight: 700; color: var(--ink-900);
  padding-bottom: .5rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--surface-200);
}
.form-text { color: var(--ink-300); }

.required-note { font-size: .82rem; color: var(--ink-300); }

/* File dropzone */
.dropzone {
  border: 2px dashed var(--brand-200);
  border-radius: var(--bs-border-radius-lg);
  background: var(--brand-50);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dropzone:hover, .dropzone.dragover { background: var(--brand-100); border-color: var(--brand-400); }
.dropzone i { font-size: 2rem; color: var(--brand-500); }

.privacy-alert {
  border: 1px solid #f3d9a4;
  background: #fff8ec;
  border-radius: var(--bs-border-radius-lg);
  color: #7a5310;
}
.privacy-alert i { color: var(--warning-500); }

/* Password strength */
.pw-strength { height: 5px; border-radius: 50rem; background: var(--surface-200); overflow: hidden; }
.pw-strength span { display: block; height: 100%; width: 0%; background: var(--danger-500); transition: width .2s ease, background .2s ease; }

/* -------------------------------------------------------------------------
   9. Tables
   ------------------------------------------------------------------------- */
.table-card { border-radius: var(--bs-border-radius-lg); overflow: hidden; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
  background: var(--surface-100);
  color: var(--ink-500);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  border-bottom: none;
  padding: .85rem 1rem;
  white-space: nowrap;
}
.table tbody td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--surface-100); }
.table tbody tr:hover { background: var(--brand-50); }

.avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
  object-fit: cover;
}
.avatar-lg { width: 5.5rem; height: 5.5rem; font-size: 1.6rem; }
.avatar-sm { width: 1.9rem; height: 1.9rem; font-size: .72rem; }

/* -------------------------------------------------------------------------
   10. Case card / feed
   ------------------------------------------------------------------------- */
.case-card .case-thumb {
  height: 170px; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-50));
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-400); font-size: 2.2rem;
  overflow: hidden;
}
.case-card .badge-specialty {
  background: var(--brand-50); color: var(--brand-600);
  font-weight: 700; font-size: .72rem; padding: .35rem .6rem; border-radius: 50rem;
}
.case-meta { font-size: .82rem; color: var(--ink-300); }

/* Comments */
.comment-item { border-radius: var(--bs-border-radius); }
.comment-thread { border-left: 2px solid var(--surface-200); margin-left: 1.2rem; padding-left: 1.2rem; }
.comment-box textarea { resize: none; }

/* Filters / offcanvas search */
.filter-chip {
  border: 1px solid var(--surface-200);
  background: #fff;
  border-radius: 50rem;
  padding: .4rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-700);
}
.filter-chip.active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* -------------------------------------------------------------------------
   11. Notifications
   ------------------------------------------------------------------------- */
.notif-item { border-radius: var(--bs-border-radius); }
.notif-item.unread { background: var(--brand-50); }
.notif-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; }
.notif-icon {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
/*.site-footer { background: var(--ink-900); color: #a9bcc4; }*/

.site-footer {
    /* background-image: url("/images/footer-bg.jfif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #a9bcc4;*/
    background: linear-gradient(rgba(10, 20, 25, 0.75), rgba(10, 20, 25, 0.75)), url("/images/banner-industry-home-medical.webp") center / cover no-repeat;
    color: #a9bcc4;
}

.site-footer a { color: #d7e4e8; }
.site-footer a:hover { color: #fff; }
.site-footer h6 { color: #fff; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }

/* -------------------------------------------------------------------------
   13. Auth pages
   ------------------------------------------------------------------------- */
.auth-shell { min-height: 100vh; }
/*.auth-side {
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(160deg, var(--brand-800), var(--brand-600));
  color: #fff;
  position: relative;
  overflow: hidden;
}*/


.auth-side {
    background: linear-gradient(160deg, rgb(15 110 140 / 85%), rgb(15 110 140 / 89%)), url(/images/GeneralSurgery_111433.jpg) center / cover no-repeat;
    /* color: blanchedalmond; */
    position: relative;
    overflow: hidden;
}

.auth-card {
    max-width: 460px;
    width: 100%;
}

/* -------------------------------------------------------------------------
   14. Misc utilities
   ------------------------------------------------------------------------- */
.divider-label {
  display: flex; align-items: center; gap: .75rem;
  color: var(--ink-300); font-size: .82rem; font-weight: 600;
}
.divider-label::before, .divider-label::after {
  content: ""; flex: 1; height: 1px; background: var(--surface-200);
}

.step-indicator { display: flex; align-items: center; gap: .5rem; }
.step-indicator .step {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--surface-200); color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}
.step-indicator .step.active { background: var(--brand-500); color: #fff; }
.step-indicator .step.done { background: var(--success-500); color: #fff; }

.empty-state { padding: 3.5rem 1.5rem; text-align: center; color: var(--ink-500); }
.empty-state i { font-size: 2.6rem; color: var(--brand-200); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--brand-500); color: #fff;
  padding: .6rem 1rem; z-index: 2000; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

/* Lets a flex child shrink below its content's natural width so
   text-truncate/text-nowrap siblings can coexist without overflowing
   (Bootstrap doesn't ship a min-width utility by default). */
.min-w-0 { min-width: 0; }

/* 5-up grid helper (Bootstrap ships 1–6 col helpers, not 5) */
@media (min-width: 992px) {
  .col-lg-2-4 { flex: 0 0 auto; width: 20%; }
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-200); border-radius: 50rem; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* Print */
@media print {
  .app-sidebar, .app-topbar, .site-footer, .no-print { display: none !important; }
}



.bg-white {
    background-color: white;
}








/* =========================================================================
   Case Details — Compact UI
   ========================================================================= */

.case-detail-title {
    font-size: 1.55rem;
    line-height: 1.3;
    color: var(--ink-900);
    font-weight: 700;
}

.case-header-card {
    overflow: hidden;
}

.case-header-divider {
    height: 1px;
    background: var(--surface-200);
    margin: 1rem 0;
}

.case-breadcrumb {
    font-size: .78rem;
}

    .case-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        color: var(--ink-300);
    }


/* -------------------------------------------------------------------------
   Section heading
   ------------------------------------------------------------------------- */

.case-section-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-900);
    font-size: .95rem;
    font-weight: 700;
}

    .case-section-heading i {
        color: var(--brand-500);
        font-size: .95rem;
    }


/* -------------------------------------------------------------------------
   Clinical content
   ------------------------------------------------------------------------- */

.case-description {
    color: var(--ink-700);
    font-size: .9rem;
    line-height: 1.7;
    white-space: pre-line;
    margin-bottom: 1.25rem;
}

.clinical-section {
    border-top: 1px solid var(--surface-100);
    padding: .85rem 0;
}

.clinical-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink-900);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

    .clinical-label i {
        color: var(--brand-500);
        font-size: .85rem;
    }

.clinical-value {
    color: var(--ink-500);
    font-size: .86rem;
    line-height: 1.65;
    white-space: pre-line;
}

.clinical-highlight {
    color: var(--brand-700);
    font-weight: 600;
    background: var(--brand-50);
    border-radius: .45rem;
    padding: .55rem .7rem;
}

.clinical-separator {
    color: var(--ink-300);
    margin: 0 .3rem;
}


/* -------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */

.case-sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
}

.author-profile {
    text-align: center;
    padding: .25rem 0 .5rem;
}

    .author-profile .avatar-lg {
        margin-bottom: .7rem;
    }

.author-name {
    color: var(--ink-900);
    font-size: .95rem;
    font-weight: 700;
}

.author-type {
    color: var(--ink-500);
    font-size: .8rem;
    margin-top: .15rem;
}

.author-meta {
    color: var(--ink-300);
    font-size: .75rem;
    margin-top: .15rem;
}


/* -------------------------------------------------------------------------
   Case info
   ------------------------------------------------------------------------- */

.case-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
    padding: .55rem 0;
    border-bottom: 1px solid var(--surface-100);
    font-size: .78rem;
}

    .case-info-row span {
        color: var(--ink-500);
    }

    .case-info-row strong {
        color: var(--ink-900);
        font-weight: 600;
        text-align: right;
    }


/* -------------------------------------------------------------------------
   Attachments
   ------------------------------------------------------------------------- */

.attachment-preview {
    height: 125px;
    width: 100%;
    border-radius: .6rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surface-200);
    background: var(--surface-50);
    transition: all .15s ease;
}

    .attachment-preview:hover {
        border-color: var(--brand-300);
        box-shadow: var(--shadow-sm);
    }

.attachment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.attachment-image:hover img {
    transform: scale(1.03);
}

.attachment-file {
    flex-direction: column;
    gap: .3rem;
    color: var(--danger-500);
}

    .attachment-file i {
        font-size: 2rem;
    }

    .attachment-file span {
        font-size: .7rem;
        font-weight: 700;
        color: var(--ink-500);
    }

.attachment-name {
    margin-top: .45rem;
    color: var(--ink-700);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-size {
    color: var(--ink-300);
    font-size: .7rem;
}


/* -------------------------------------------------------------------------
   Empty states
   ------------------------------------------------------------------------- */

.case-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 80px;
    color: var(--ink-500);
    font-size: .8rem;
    background: var(--surface-50);
    border: 1px dashed var(--surface-200);
    border-radius: .6rem;
}

    .case-empty i {
        color: var(--brand-300);
        font-size: 1rem;
    }


/* -------------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------------- */

.comment-composer {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--surface-100);
}

.comment-input {
    font-size: .84rem;
    padding: .55rem .7rem;
    min-height: 72px;
}

.comments-list {
    margin-top: 1rem;
}

.discussion-card .form-control {
    background: #fff;
}

    .discussion-card .form-control:focus {
        background: #fff;
    }


/* -------------------------------------------------------------------------
   Alerts
   ------------------------------------------------------------------------- */

.compact-alert {
    font-size: .82rem;
    padding: .65rem .85rem;
}


/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .case-sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {

    .case-detail-title {
        font-size: 1.25rem;
    }

    .case-section-heading {
        font-size: .9rem;
    }

    .case-description,
    .clinical-value {
        font-size: .84rem;
    }

    .case-info-row {
        font-size: .75rem;
    }

    .attachment-preview {
        height: 110px;
    }
}



.f-10 {
    font-size: 10px;
}

.f-11 {
    font-size: 11px;
}

.f-12 {
    font-size: 12px;
}

.f-13 {
    font-size: 13px;
}

.f-14 {
    font-size: 14px;
}

.f-15 {
    font-size: 15px;
}

.f-35 {
    font-size: 35px;
}
.bg-surface-img {
    background: linear-gradient(135deg, #f9f0f0, rgba(255, 255, 255, 0.75)), url(/images/GeneralSurgery_111433.jpg) center center / cover no-repeat;
}


.logo {
    height: 60px;
    width: auto;
    margin-top: 10px;
}

.imgcase {
    height: 106px;
    border: 5px solid #fefeff;
    border-radius: 7px;
}