/* =========================================================
   IYERSPINE INTERNAL UI – extracted from internal templates
   Source: internal_base.html, staff_login.html, staff_dashboard.html,
           staff_patient_setup.html, admin_dashboard.html, doctor_dashboard.html
   ========================================================= */

/* ===== Base shell & shared components (from internal_base.html) ===== */
:root{
      --bg:#f7f8fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --border: rgba(15,23,42,.08);
      --shadow: 0 10px 30px rgba(2,6,23,.08);
      --r: 16px;
      --topbar: 56px;
      --sidebar: 260px;
      --accent: #0f766e;
    }

    /* ===============================
      INTERNAL LAYOUT – MOBILE SAFETY
      =============================== */
    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }

    .layout,
    .main,
    .sidebar,
    .card,
    .table-wrap {
      min-width: 0;
    }

    /* Ensure tables never force page width */
    .table-wrap {
      overflow-x: auto;
      width: 100%;
    }

    table {
      width: 100%;
      max-width: 100%;
      border-collapse: collapse;
    }

     *, *::before, *::after { box-sizing: border-box; }
    body { font-family:"DM Sans",sans-serif; background:var(--bg); color:var(--text); margin:0; }

    .internal-shell { min-width: 0; }

    .layout{
      max-width: 1240px;
      margin: 0 auto;
      padding: 18px;
      display:grid;
      grid-template-columns: var(--sidebar) 1fr;
      gap: 18px;
    }

    .sidebar{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      padding: 12px;
      height: fit-content;
      position: sticky;
      top: 18px;
      overflow:auto;
      max-height: calc(100vh - 36px);
    }

    .main{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: var(--shadow);
      padding: 22px;
      min-height: 520px;
    }

    .nav-title{
      font-size: 12px;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 12px 10px 8px;
      font-weight: 800;
    }
    .nav-item{
      display:flex; align-items:center; gap:10px;
      padding: 10px 10px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--text);
      font-weight: 700;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    .nav-item:hover{
      background: rgba(2,6,23,.04);
      color: #0f172a !important;
    }
    .nav-item.active{
      background: rgba(15,118,110,.12);
      color: var(--accent);
    }
    .nav-item.active:hover{
      background: rgba(15,118,110,.16);
      color: var(--accent);
    }

    .h-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .muted{ color: var(--muted); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 800;
      font-size: 14px;
      border: 1px solid transparent;
      cursor:pointer;
      text-decoration:none;
      user-select:none;
      background: #111827;
      color: #fff;
    }
    .btn:hover{
      background:#0b1220;
      color: #fff !important;
    }
    .btn-ghost{
      background:#fff;
      color:#111827;
      border-color: var(--border);
    }
    .btn-ghost:hover{
      background: rgba(2,6,23,.03);
      color: #111827 !important;
    }

    .card{
      background:#fff;
      border: 1px solid var(--border);
      border-radius: var(--r);
      box-shadow: 0 8px 26px rgba(2,6,23,.06);
      padding: 18px;
      min-width: 0;
    }

    .table{ width:100%; border-collapse: collapse; }
    .table th, .table td{ padding: 12px 10px; border-bottom: 1px solid rgba(2,6,23,.06); text-align:left; vertical-align:top; }
    .table th{ font-size: 12px; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); }
    .table td{ font-size:14px; }

    /* Responsive */
    @media (max-width: 980px){
      .layout{ grid-template-columns: 1fr; }
      .sidebar{ height:auto; position:relative; top:0; max-height: none; }
      .main{ padding: 16px; }

      /* Mobile: hide button text, show icons only */
      .btn{ padding: 10px 12px; }
      .btn i{ margin: 0; }
    }

    @media (max-width: 640px){
      /* Ensure View/Edit buttons show text on mobile tables */
      table .btn { white-space: nowrap; }
    }

    .crumbs{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom: 14px;
      font-size: 13px;
      color: var(--muted);
    }
    .crumb-link{
      color: var(--muted);
      text-decoration: none;
      font-weight: 800;
    }
    .crumb-link:hover{
      text-decoration: underline;
      color: #0f172a !important;
    }
    .crumb-sep{ color: rgba(100,116,139,.75); }
    .crumb-current{
      color: var(--text);
      font-weight: 900;
    }

/* ===== Staff login page (from staff_login.html) ===== */
:root{
      --lg-bg1:#eff6ff;
      --lg-bg2:#eef2ff;
      --lg-card:#ffffff;
      --lg-text:#0f172a;
      --lg-muted:#64748b;
      --lg-border: rgba(15,23,42,.10);
      --lg-shadow: 0 16px 50px rgba(2,6,23,.12);
      --lg-r: 18px;
      --lg-primary:#2563eb;
    }

    /* Namespaced wrapper to avoid Webflow collisions */
    .login-wrap{
      width: 100%;
      max-width: 460px;
      margin: 80px auto;
      padding: 22px;
    }
    .login-card{
      background: var(--lg-card);
      border: 1px solid var(--lg-border);
      border-radius: var(--lg-r);
      box-shadow: var(--lg-shadow);
      padding: 26px;
    }

    /* Header */
    .login-header{
      text-align:center;
      margin-bottom: 18px;
    }
    .login-icon{
      width: 64px; height: 64px;
      border-radius: 999px;
      background: var(--lg-primary);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 12px auto;
      box-shadow: 0 12px 30px rgba(37,99,235,.25);
    }
    .login-title{
      margin:0;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .login-sub{
      margin-top: 6px;
      color: #334155;            /* force readable */
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
    }

    /* Flash messages (tight + aligned) */
    .login-flash{
      margin: 10px 0 14px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid;
      display:flex;
      gap: 10px;
      align-items:center;        /* icon aligned to text */
      font-size: 13px;
      line-height: 1.25;
    }
    .login-flash .icon{
      flex: 0 0 auto;
      width: 22px;
      display:flex;
      justify-content:center;
      opacity: .95;
      font-size: 18px;
    }
    .login-flash .msg{
      flex: 1 1 auto;
      font-weight: 900;
      margin: 0;
      display: block !important;
    }
    .login-flash.ok{ background:#ecfdf3; border-color:#86efac; color:#166534; }
    .login-flash.ok .icon{ color:#166534; }
    .login-flash.err{ background:#fef2f2; border-color:#fecaca; color:#991b1b !important; }
    .login-flash.err .icon{ color:#991b1b !important; }
    .login-flash.err .msg{ color:#991b1b !important; }

    /* Form */
    .login-label{
      display:block;
      font-size: 13px;
      font-weight: 800;
      color:#334155;
      margin: 14px 0 6px;
      letter-spacing: .02em;
      text-transform: uppercase;
    }
    .login-input{
      width: 100%;
      border: 1px solid rgba(2,6,23,.14);
      border-radius: 14px;
      padding: 12px 12px;
      outline: none;
      font-size: 14px;
      font-family:"DM Sans", sans-serif;
      background:#fff;
    }
    .login-input:focus{
      border-color: rgba(37,99,235,.65);
      box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    }

    .login-btn{
      width: 100%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid transparent;
      background: var(--lg-primary);
      color:#fff;
      font-weight: 900;
      font-size: 15px;
      cursor:pointer;
      margin-top: 14px;
    }
    .login-btn:hover{ background:#1d4ed8; }

    /* Notice */
    .login-notice{
      margin-top: 18px;
      padding: 14px;
      background: #fff7ed;
      border: 1px solid #fed7aa;
      border-radius: 16px;
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .login-notice h3{ margin:0; font-size: 14px; font-weight: 900; color:#9a3412; }
    .login-notice p{ margin:6px 0 0; font-size: 13px; color:#9a3412; line-height: 1.35; }

    /* Footer (namespaced: avoids Webflow teal footer styles) */
    .login-footer{
      text-align:center;
      margin-top: 14px;
      font-size: 13px;
    }
    .login-footer a{
      color: #1d4ed8;            /* force readable on any background */
      text-decoration:none;
      font-weight: 900;
    }
    .login-footer a:hover{ text-decoration: underline; }

    @media (max-width: 420px){
      .login-card{ padding: 20px; }
      .login-icon{ width:56px; height:56px; }
      .login-title{ font-size: 24px; }
    }

/* ===== Staff dashboard (from staff_dashboard.html) ===== */
.hidden{ display:none !important; }

    .atlas-modal{ position:fixed; inset:0; z-index: 999; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:6vh 0; }
    .atlas-modal__overlay{ position:fixed; inset:0; background: rgba(2,6,23,.45); z-index:-1; }
    .atlas-modal__panel{
      position:relative;
      background:#fff;
      border-radius: 16px;
      max-width: 980px;
      width: calc(100% - 28px);
      margin: 0 auto;
      box-shadow: 0 20px 60px rgba(2,6,23,.25);
      border: 1px solid rgba(15,23,42,.10);
      max-height: calc(100vh - 12vh);
      display:flex;
      flex-direction:column;
    }
    .atlas-modal__header{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(15,23,42,.08);
      background: rgba(2,6,23,.02);
      flex-shrink: 0;
    }
    .atlas-modal__close{
      border: 1px solid rgba(15,23,42,.12);
      background:#fff;
      border-radius: 12px;
      padding: 6px 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .atlas-modal__toolbar{
      display:flex; gap:10px; flex-wrap:wrap;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(15,23,42,.06);
    }

    .atlas-input{
      width: 100%;
      border: 1px solid rgba(15,23,42,.14);
      border-radius: 12px;
      padding: 10px 12px;
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      outline: none;
    }
    .atlas-input:focus{
      border-color: rgba(15,118,110,.55);
      box-shadow: 0 0 0 4px rgba(15,118,110,.12);
    }
    .atlas-label{
      display:block;
      font-size: 13px;
      font-weight: 800;
      color: rgba(15,23,42,.85);
      margin: 10px 0 6px;
    }
    .atlas-grid2{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    @media (max-width: 820px){
      .atlas-grid2{ grid-template-columns: 1fr; }
      .atlas-modal__panel{ margin: 4vh auto; }
    }

    .atlas-alert{
      margin: 12px 18px 0;
      padding: 12px 12px;
      border-radius: 12px;
      font-size: 13px;
      border: 1px solid;
      white-space: pre-wrap;
    }
    .atlas-alert--error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
    .atlas-alert--success{ background:#ecfdf3; border-color:#86efac; color:#166534; }
/* --- Responsive table: stack rows on small screens (no horizontal scroll) --- */
    @media (max-width: 720px){
      .recent-table-wrap{ overflow-x: visible !important; }
      table.recent-table, table.recent-table thead, table.recent-table tbody, table.recent-table th, table.recent-table td, table.recent-table tr{
        display:block;
        width:100%;
      }
      table.recent-table thead{ display:none; }

      table.recent-table tr{
        border-top: 1px solid rgba(15,23,42,.08);
        padding: 10px 0;
        margin-bottom: 4px;
      }
      table.recent-table td{
        border: none !important;
        padding: 4px 0 !important;
        font-size: 13px !important;
      }

      /* Label each cell with its column name */
      table.recent-table td[data-label]::before{
        content: attr(data-label);
        display:block;
        font-size: 11px;
        font-weight: 900;
        color: rgba(100,116,139,.95);
        margin-bottom: 2px;
        letter-spacing: .02em;
        text-transform: uppercase;
      }

      /* Actions row: align buttons nicely - keep them compact and inline */
      table.recent-table td.actions{
        padding-top: 8px !important;
      }
      table.recent-table td.actions > div{
        display: flex;
        gap: 8px;
      }
      table.recent-table td.actions a,
      table.recent-table td.actions button{
        padding: 6px 12px !important;
        font-size: 13px !important;
        flex: 0 0 auto;
      }

      /* prevent long emails from pushing width */
      .wrap-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
    }

/* ===== Staff patient setup (from staff_patient_setup.html) ===== */
/* Page-specific layout helpers (kept local) */
  .setup-wrap { max-width: 800px; margin: 0 auto; }
  .setup-header { margin-bottom: 16px; }
  .setup-sub { opacity: 0.75; margin-top: 4px; font-size: 14px; }

  /* Higher specificity to override Webflow .grid-2 */
  .setup-wrap .grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .setup-wrap .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  @media (max-width: 767px) {
    .setup-wrap .grid-2,
    .setup-wrap .grid-3 {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
    .setup-wrap { padding: 0 4px; }
  }

  .field label {
    display:block;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #334155;
  }
  .w-input, .w-select, textarea.w-input {
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid rgba(2,6,23,.14);
    width: 100%;
    font-family: "DM Sans", sans-serif;
  }
  .w-input:focus, .w-select:focus, textarea.w-input:focus {
    outline: none;
    border-color: rgba(15,118,110,.55);
    box-shadow: 0 0 0 3px rgba(15,118,110,.10);
  }

  .actions { display:flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
  .actions .button-primary { margin: 0; }

  .msg { display:none; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-family: "DM Sans", sans-serif; white-space: pre-wrap; font-size: 13px; }
  .msg-success { background: #ecfdf3; border: 1px solid #86efac; color: #166534; }
  .msg-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

  .opt-row {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(2,6,23,.08);
    flex-wrap:wrap;
  }
  .opt-row label { margin: 0; }
  .opt-row .heading-h5 { font-size: 15px; }
  .toggle { display:flex; align-items:center; gap: 8px; font-size: 13px; font-weight: 600; }

/* ===== Admin dashboard (from admin_dashboard.html) ===== */
/* Keep Tailwind layout inside internal shell without fighting base styles */
    .admin-page-wrap { padding: 2px 0; }
.admin-rebuild-disabled { pointer-events:none !important; user-select:none !important; }
      .admin-rebuild-disabled .temp-disabled { opacity:0.6 !important; pointer-events:none !important; cursor:not-allowed !important; }
      #adminRebuildOverlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
      #adminOverlayProgress { transition: width 0.3s ease-out; }

      .animate-spin { animation: spin 2s linear infinite; }
      @keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

      .progress-shimmer { animation: shimmer 2s ease-in-out infinite alternate; }
      @keyframes shimmer { 0% { opacity:0.8; } 100% { opacity:1; } }

      .hover\:scale-105:hover { transform: scale(1.05); }
      .transition-all { transition: all 0.2s ease-in-out; }

      .bg-white.shadow.rounded-lg:hover {
        transform: translateY(-1px);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      }

      #kbStatsModal .bg-blue-50, #kbStatsModal .bg-green-50, #kbStatsModal .bg-orange-50,
      #kbStatsModal .bg-amber-50, #kbStatsModal .bg-purple-50 { border-left: 4px solid; }
      #kbStatsModal .bg-blue-50 { border-left-color:#3B82F6; }
      #kbStatsModal .bg-green-50 { border-left-color:#10B981; }
      #kbStatsModal .bg-orange-50 { border-left-color:#F59E0B; }
      #kbStatsModal .bg-amber-50 { border-left-color:#F59E0B; }
      #kbStatsModal .bg-purple-50 { border-left-color:#8B5CF6; }

      .loading-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
      @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

      .status-icon{ display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; border-radius:50%; margin-right:0.5rem; }
      .status-icon.success{ background-color:#10B981; color:#fff; }
      .status-icon.warning{ background-color:#F59E0B; color:#fff; }
      .status-icon.error{ background-color:#EF4444; color:#fff; }

      #rebuildBtn:disabled{ position:relative; overflow:hidden; }
      #rebuildBtn:disabled::after{
        content:'';
        position:absolute; top:0; left:-100%;
        width:100%; height:100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: shimmer-btn 2s infinite;
      }
      @keyframes shimmer-btn { 0%{ left:-100%; } 100%{ left:100%; } }

      .modal-fade-in{ animation: fadeIn 0.3s ease-out; }
      @keyframes fadeIn { from{ opacity:0; transform: translateY(-20px);} to{ opacity:1; transform: translateY(0);} }

      @media (max-width: 640px){
        #adminRebuildOverlay .max-w-md{ max-width: 90vw; margin: 0 1rem; }
      }

/* ===== Doctor dashboard (from doctor_dashboard.html) ===== */
/* Enhanced card hover effects (preserved from original) */
    .cursor-pointer:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .cursor-pointer:active {
      transform: translateY(0);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Doctor rebuild styles (preserved from original) */
    .doctor-rebuild-disabled { pointer-events: none; user-select: none; }
    .doctor-rebuild-disabled .temp-disabled { opacity: 0.6 !important; pointer-events: none !important; cursor: not-allowed !important; }
    #doctorRebuildOverlay { backdrop-filter: blur(2px); }

    .animate-spin { animation: spin 2s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ===== Internal auth page helpers (moved from custom.css) ===== */
/* ===============================
   INTERNAL AUTH PAGES (Login)
   =============================== */
.internal-auth-page {
  background: #f7f8fb !important;
}

.internal-auth-page .sub,
.internal-auth-page .footer,
.internal-auth-page .footer a {
  color: #334155 !important;
}

.internal-auth-page .header {
  background: transparent !important;
}

.internal-auth-page .notice {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #9a3412 !important;
}


/* ===== FIX: Modal body padding + nicer form spacing ===== */
.atlas-modal__body{
  padding: 18px;
  overflow-y:auto;
  flex: 1 1 auto;
  min-height: 0;
}
.atlas-modal__panel > form,
.atlas-modal__panel > .atlas-modal__body > form{
  margin: 0;
}
.atlas-modal__footer{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(15,23,42,.06);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink: 0;
}

/* ===== KB Maintenance modal ===== */
.kb-maintenance-panel {
  max-width: 980px;
  position: relative;
}

#kbMaintenanceModal .atlas-modal__panel {
  max-width: 980px;
}

#kbMaintenanceModal .atlas-modal__body {
  max-height: 75vh;
  overflow-y: auto;
}

/* Section containers */
.kb-maintenance-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
}

.kb-maintenance-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}

.kb-maintenance-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-size: 14px;
}

.kb-maintenance-section-title {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
}

/* Tab navigation */
.kb-maintenance-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
  overflow-x: auto;
}

.kb-maintenance-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.kb-maintenance-tab:hover {
  background: #f1f5f9;
  color: #2563eb;
}

/* Upload form grid */
.kb-maintenance-upload-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.kb-maintenance-upload-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: end;
}

.kb-maintenance-file-input {
  width: 100%;
}

#kbMaintenanceModal input[type="file"] {
  width: 100%;
  font-size: 13px;
  padding: 8px;
}

/* Website form grid - tighter layout */
.kb-maintenance-website-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.kb-maintenance-website-grid .kb-maintenance-form-row {
  display: contents;
}

.kb-maintenance-website-grid .kb-maintenance-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-maintenance-website-grid .kb-maintenance-form-field--full {
  grid-column: 1 / -1;
}

.kb-maintenance-website-grid .kb-maintenance-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.kb-maintenance-website-grid .kb-maintenance-form-checkboxes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Compact table styling */
.kb-maintenance-table-wrapper {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.kb-maintenance-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.kb-maintenance-table thead {
  background: #f8fafc;
}

.kb-maintenance-table th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}

.kb-maintenance-table td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
}

.kb-maintenance-table tbody tr:hover {
  background: #f8fafc;
}

.kb-maintenance-table tbody tr:last-child td {
  border-bottom: none;
}

/* Compact paper name - truncate long names */
.kb-maintenance-paper-name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-weight: 500;
}

.kb-maintenance-paper-name a {
  color: #2563eb;
  text-decoration: none;
}

.kb-maintenance-paper-name a:hover {
  text-decoration: underline;
}

/* Inline controls */
.kb-maintenance-select {
  width: 70px;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 6px;
}

.kb-maintenance-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.kb-maintenance-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Action buttons */
.kb-maintenance-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kb-maintenance-button {
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* Badge for status indicators */
.kb-maintenance-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kb-maintenance-badge--success {
  background: #dcfce7;
  color: #166534;
}

.kb-maintenance-badge--warning {
  background: #fef3c7;
  color: #92400e;
}

/* Website paths collapsible */
.kb-maintenance-paths-content {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
}

.kb-maintenance-paths-textarea {
  width: 100%;
  min-height: 100px;
  padding: 8px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  resize: vertical;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .kb-maintenance-upload-row {
    grid-template-columns: 1fr;
  }

  .kb-maintenance-website-grid {
    grid-template-columns: 1fr;
  }

  .kb-maintenance-website-grid > div {
    grid-column: 1 / -1 !important;
  }

  .kb-maintenance-table-wrapper {
    overflow-x: scroll;
  }

  .kb-maintenance-table {
    min-width: 600px;
  }

  .kb-maintenance-section {
    padding: 12px;
  }

  .kb-maintenance-tabs {
    gap: 8px;
  }

  .kb-maintenance-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .kb-maintenance-paper-name {
    max-width: 180px;
  }

  .kb-maintenance-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .kb-maintenance-button {
    width: 100%;
  }
}

/* Textareas feel cramped without min-height on desktop */
.atlas-input textarea,
textarea.atlas-input{
  min-height: 110px;
}

/* --- Modal overlay (shared) --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
}

.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.modal-card {
  position: relative;
  width: min(720px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 18px;
  max-height: calc(100vh - 56px);
  overflow: auto;
}

/* ===== Edit Patient modal layout fixes ===== */

/* Ensure inputs fill the modal width */
#editPatientModal .input,
#editPatientModal input,
#editPatientModal select,
#editPatientModal textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Grid layout for the form */
#editPatientModal .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: start;
}

/* Full-width rows */
#editPatientModal .form-grid .span-2 {
  grid-column: 1 / -1;
}

/* Labels look consistent */
#editPatientModal label.label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Modal header/footer spacing */
#editPatientModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#editPatientModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

#surgeryModal .input, #surgeryModal input, #surgeryModal select, #surgeryModal textarea,
#surgeryNotesModal .input, #surgeryNotesModal textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#surgeryModal .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
#surgeryModal .span-2 { grid-column: 1 / -1; }

/* =====================================================
   Surgeries table – notes + status rendering
   ===================================================== */

/* Notes cell: truncate cleanly */
.table td.surgery-notes {
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer; /* clickable to expand */
}


/* Muted dash placeholder */
.table td.surgery-notes .muted {
  font-style: italic;
}

.table td.surgery-notes.is-expanded {
  white-space: normal;
  overflow: visible;
}

.table td.surgery-notes .notes-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.table td.surgery-notes .notes-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.10);
}

.table td.surgery-notes .notes-indicator.has-notes {
  background: #16a34a; /* green */
}

.table td.surgery-notes .notes-indicator.no-notes {
  background: #cbd5e1; /* slate-300 */
}

.table td.surgery-notes .notes-text {
  min-width: 0;
  flex: 1 1 auto;
}

/* Ensure action buttons never wrap awkwardly */
.table td.surgery-actions {
  white-space: nowrap;
}

/* Status pills – align visually in table rows */
.table .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Responsive: allow notes to wrap on small screens */
@media (max-width: 768px) {
  .table td.surgery-notes {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }
}

/* Mobile: action buttons should always be visible & stacked cleanly */
@media (max-width: 720px){
  table.recent-table td.actions > div{
    grid-template-columns: 1fr;
  }

  /* Patient list modal table: reduce padding on mobile */
  #patientListTable td,
  #patientListTable th {
    padding: 8px 6px !important;
    font-size: 13px !important;
  }

  /* Make action buttons in patient list more compact */
  #patientListTable td .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  #editPatientModal .form-grid {
    grid-template-columns: 1fr;
  }
  #editPatientModal .form-grid .span-2 {
    grid-column: 1 / -1;
  }
  #surgeryModal .form-grid {
    grid-template-columns: 1fr;
  }
}

/* KB Rebuild spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}