/* MNDC SMS — minimal custom styles */

body { font-size: 0.9rem; }

.hover-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.hover-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
}

.table-sm td, .table-sm th { padding: .35rem .5rem; }

.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile responsiveness ──────────────────────────────────────────────── */

/* Tighten container padding on small screens */
@media (max-width: 576px) {
  main.container-fluid { padding-left: .75rem; padding-right: .75rem; }

  /* Wizard cards — reduce padding */
  .card-body { padding: .875rem; }
  .card-header { padding: .625rem .875rem; }

  /* Progress stats — smaller font on tiny screens */
  .fw-bold.fs-3 { font-size: 1.4rem !important; }

  /* Button groups in attendance mark table — compact */
  .btn-group-sm > .btn { padding: .2rem .45rem; font-size: .75rem; }

  /* Navbar brand — slightly smaller */
  .navbar-brand { font-size: .95rem; }

  /* History table — hide less critical columns on XS */
  .history-hide-xs { display: none !important; }
}

/* Sticky top header in attendance table only when not on mobile
   (sticky-top breaks horizontal scroll on iOS Safari) */
@media (max-width: 767px) {
  #contactsTable thead.sticky-top th {
    position: static;
  }
}

/* Prevent long template/message text breaking layouts */
.text-break-word { word-break: break-word; }

/* Input group labels — truncate gracefully */
.input-group-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════════════════════
   INVENTORY THEME  —  scoped entirely under `.inv-theme`
   This block ONLY affects pages whose URL contains "/inventory" (the body gets
   the `inv-theme` class in layout.ejs). The SMS section never has this class, so
   none of these rules can reach it. To remove the theme: delete this block and
   the body-class snippet in views/layout.ejs. Nothing else depends on it.
   Glassy / frosted, clean white, soft shadows, rounded — mobile-first.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Palette + global feel ─────────────────────────────────────────────────── */
.inv-theme {
  --inv-bg1: #eef2ff;          /* soft indigo tint */
  --inv-bg2: #f7fafc;          /* near-white        */
  --inv-bg3: #e8f0fb;          /* light sky tint    */
  --inv-ink: #1e293b;          /* slate-800 text    */
  --inv-muted: #64748b;        /* slate-500         */
  --inv-accent: #4f46e5;       /* indigo-600        */
  --inv-accent-soft: rgba(79,70,229,.10);
  --inv-glass-bg: rgba(255,255,255,.72);
  --inv-glass-border: rgba(255,255,255,.65);
  --inv-radius: 16px;
  --inv-shadow: 0 6px 24px rgba(30,41,59,.08), 0 1px 2px rgba(30,41,59,.04);
  --inv-shadow-hover: 0 12px 32px rgba(30,41,59,.14), 0 2px 6px rgba(30,41,59,.06);
}

/* Backdrop: a calm white-ish gradient that the frosted cards sit on. Fixed so it
   doesn't scroll. Applied to body — overrides Bootstrap's bg-light visually. */
.inv-theme {
  color: var(--inv-ink);
  background: linear-gradient(135deg, var(--inv-bg1) 0%, var(--inv-bg2) 45%, var(--inv-bg3) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}

.inv-theme .text-muted { color: var(--inv-muted) !important; }

/* ── Navbar → translucent white glass (was navbar-dark bg-dark) ─────────────── */
.inv-theme .navbar.bg-dark {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 16px rgba(30,41,59,.06);
}
/* Re-ink the navbar text/links since the dark bg is now light */
.inv-theme .navbar.navbar-dark .navbar-brand,
.inv-theme .navbar.navbar-dark .nav-link,
.inv-theme .navbar.navbar-dark .navbar-nav .nav-link {
  color: var(--inv-ink) !important;
}
.inv-theme .navbar.navbar-dark .navbar-brand { font-weight: 700; }
.inv-theme .navbar.navbar-dark .nav-link:hover,
.inv-theme .navbar.navbar-dark .nav-link.active {
  color: var(--inv-accent) !important;
}
.inv-theme .navbar.navbar-dark .nav-link.active {
  background: var(--inv-accent-soft);
  border-radius: 10px;
}
/* Toggler (hamburger) needs a dark icon on the now-light bar */
.inv-theme .navbar.navbar-dark .navbar-toggler {
  border-color: rgba(30,41,59,.18);
}
.inv-theme .navbar.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,41,59,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* The warning-bell button on the navbar (was btn-dark) */
.inv-theme .navbar .btn-dark {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(30,41,59,.10);
  color: var(--inv-ink);
}
.inv-theme .navbar .btn-dark:hover { background: rgba(255,255,255,.85); }
/* Collapsed mobile menu panel gets a glass drop too */
@media (max-width: 991.98px) {
  .inv-theme .navbar .navbar-collapse {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-radius: 14px;
    box-shadow: var(--inv-shadow);
  }
  .inv-theme .navbar .nav-link { padding: .55rem .5rem; }
}

/* Dropdown menu (profile) → glass */
.inv-theme .dropdown-menu {
  background: var(--inv-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--inv-glass-border);
  border-radius: 14px;
  box-shadow: var(--inv-shadow);
}

/* ── Cards → frosted glass ─────────────────────────────────────────────────── */
.inv-theme .card {
  background: var(--inv-glass-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--inv-glass-border) !important;
  border-radius: var(--inv-radius);
  box-shadow: var(--inv-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Lift cards that link somewhere / are shadowed (dashboard tiles use shadow-sm) */
.inv-theme .card.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--inv-shadow-hover);
}
/* Keep the coloured accent stripe used on dashboard cards (border-left inline) */
.inv-theme .card[style*="border-left"] { border-left-width: 4px !important; }

.inv-theme .card-header {
  background: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.5);
  border-top-left-radius: var(--inv-radius);
  border-top-right-radius: var(--inv-radius);
}

/* ── Buttons → softer, rounded, gentle depth ───────────────────────────────── */
.inv-theme .btn {
  border-radius: 11px;
  font-weight: 500;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.inv-theme .btn:active { transform: translateY(1px); }
.inv-theme .btn-primary {
  background: var(--inv-accent);
  border-color: var(--inv-accent);
  box-shadow: 0 4px 12px rgba(79,70,229,.25);
}
.inv-theme .btn-primary:hover {
  background: #4338ca; border-color: #4338ca;
  box-shadow: 0 6px 16px rgba(79,70,229,.32);
}
.inv-theme .btn-outline-secondary {
  border-color: rgba(30,41,59,.18);
  color: var(--inv-ink);
  background: rgba(255,255,255,.5);
}
.inv-theme .btn-outline-secondary:hover {
  background: #fff; color: var(--inv-accent);
  border-color: var(--inv-accent);
}

/* ── Forms → glassy inputs ─────────────────────────────────────────────────── */
.inv-theme .form-control,
.inv-theme .form-select {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(30,41,59,.12);
  border-radius: 11px;
  color: var(--inv-ink);
}
.inv-theme .form-control:focus,
.inv-theme .form-select:focus {
  background: #fff;
  border-color: var(--inv-accent);
  box-shadow: 0 0 0 .2rem var(--inv-accent-soft);
}
.inv-theme .input-group-text {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(30,41,59,.12);
  border-radius: 11px;
}

/* ── Tables → clean, airy, rounded container ───────────────────────────────── */
.inv-theme .table {
  --bs-table-bg: transparent;
  color: var(--inv-ink);
}
.inv-theme .table > thead th {
  border-bottom: 1px solid rgba(30,41,59,.12);
  color: var(--inv-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .72rem;
}
.inv-theme .table > tbody td { border-color: rgba(30,41,59,.07); }
.inv-theme .table-hover > tbody > tr:hover > * {
  background: var(--inv-accent-soft);
}
/* When a table is wrapped in .table-responsive, give that wrapper a glass card */
.inv-theme .table-responsive {
  background: var(--inv-glass-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--inv-glass-border);
  border-radius: var(--inv-radius);
  box-shadow: var(--inv-shadow);
  padding: .25rem .5rem;
}

/* ── Badges, alerts, tabs, offcanvas — small polish ────────────────────────── */
.inv-theme .badge { border-radius: 8px; font-weight: 600; }

.inv-theme .alert {
  border-radius: 14px;
  border: 1px solid rgba(30,41,59,.08);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inv-theme .nav-tabs {
  border-bottom: 1px solid rgba(30,41,59,.1);
}
.inv-theme .nav-tabs .nav-link {
  border: none;
  border-radius: 10px 10px 0 0;
  color: var(--inv-muted);
  font-weight: 500;
}
.inv-theme .nav-tabs .nav-link:hover { color: var(--inv-accent); background: var(--inv-accent-soft); }
.inv-theme .nav-tabs .nav-link.active {
  color: var(--inv-accent);
  background: var(--inv-glass-bg);
  border: 1px solid var(--inv-glass-border);
  border-bottom-color: transparent;
}

.inv-theme .offcanvas {
  background: var(--inv-glass-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

/* ── Mobile-first refinements ──────────────────────────────────────────────── */
@media (max-width: 576px) {
  .inv-theme .card { border-radius: 14px; }
  .inv-theme .card-body { padding: 1rem; }
  /* Make the dashboard quick-action buttons full-width-friendly + tappable */
  .inv-theme .btn { padding-top: .5rem; padding-bottom: .5rem; }
  /* Tables can overflow on phones — let them scroll smoothly inside the glass */
  .inv-theme .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .inv-theme .card,
  .inv-theme .btn { transition: none; }
  .inv-theme .card.shadow-sm:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Student QR module — scoped phone-first theme. Applies ONLY when <body> has
   the .stu-theme class (added in layout.ejs for /students/* pages). Nothing
   here affects the SMS or inventory apps.
   ══════════════════════════════════════════════════════════════════════════ */
.stu-theme {
  --stu-accent: #0d9488;        /* teal */
  --stu-accent-dark: #0f766e;
  --stu-databases: #4f46e5;     /* indigo */
  --stu-bus: #d97706;           /* amber */
  --stu-users: #475569;         /* slate */
  font-size: 1rem;
  background: #f6f8fa;
  /* room for the fixed bottom tab bar so content isn't hidden behind it */
  padding-bottom: 5.5rem;
}
.stu-theme main.container-fluid { padding-top: .5rem; }

/* Slim top bar */
.stu-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: .6rem .9rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1020;
}
.stu-topbar .stu-brand { font-weight: 700; color: var(--stu-accent); font-size: 1.05rem; }
.stu-topbar .stu-brand i { margin-right: .35rem; }

/* Big primary buttons / touch targets */
.stu-theme .btn { border-radius: .7rem; }
.stu-btn-lg {
  min-height: 52px; font-size: 1.05rem; font-weight: 600;
  border-radius: .9rem; display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem;
}
.stu-btn-accent { background: var(--stu-accent); border-color: var(--stu-accent); color: #fff; }
.stu-btn-accent:hover, .stu-btn-accent:focus { background: var(--stu-accent-dark); border-color: var(--stu-accent-dark); color: #fff; }

/* Friendly cards */
.stu-card {
  background: #fff; border: 1px solid #eef0f2; border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); padding: 1rem;
}
.stu-stat { text-align: center; }
.stu-stat .stu-stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stu-stat .stu-stat-label { color: #6b7280; font-size: .85rem; }

/* Tile (home quick links) */
.stu-tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  text-decoration: none; color: #111827; padding: 1rem .5rem;
  background: #fff; border: 1px solid #eef0f2; border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.stu-tile i { font-size: 1.7rem; }
.stu-tile span { font-weight: 600; font-size: .9rem; }

/* Bottom tab bar */
.stu-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 1px solid #e5e7eb;
  display: flex; justify-content: space-around; align-items: stretch;
  padding: .25rem 0 calc(.25rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 6px rgba(16,24,40,.06);
}
.stu-tabbar a {
  flex: 1 1 0; text-align: center; text-decoration: none;
  color: #6b7280; font-size: .72rem; padding: .35rem .1rem;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.stu-tabbar a i { font-size: 1.35rem; }
.stu-tabbar a.active { color: var(--stu-accent); font-weight: 600; }

/* Bus YES/NO banner */
.stu-bus-yes { background: #dcfce7; color: #166534; }
.stu-bus-no  { background: #f1f5f9; color: #475569; }
.stu-bus-banner { border-radius: .9rem; padding: .8rem 1rem; font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }

/* On wider screens, keep the bottom bar centered and not full-bleed huge */
@media (min-width: 768px) {
  .stu-tabbar { max-width: 640px; margin: 0 auto; border-radius: 1rem 1rem 0 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SMS APP THEME — scoped entirely under `.sms-theme` (body class set in
   layout.ejs for SMS pages). Mirrors the .inv-theme approach. Deep emerald +
   slate, warm off-white canvas, soft shadows, rounded. Nothing here affects the
   inventory/students/launcher sections. To remove: delete this block + the
   sms-theme body-class snippet in views/layout.ejs.
   ════════════════════════════════════════════════════════════════════════════ */
.sms-theme {
  --sms-accent: #0E7C66;
  --sms-accent-dark: #0B5E4E;
  --sms-accent-soft: rgba(14,124,102,.10);
  --sms-ink: #0F172A;
  --sms-muted: #64748B;
  --sms-surface: #FFFFFF;
  --sms-canvas: #F6F7F5;
  --sms-line: #E7E9E5;
  --sms-radius: 14px;
  --sms-shadow: 0 6px 24px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sms-shadow-hover: 0 12px 30px rgba(15,23,42,.12);
}
.sms-theme {
  color: var(--sms-ink);
  background: var(--sms-canvas);
  -webkit-font-smoothing: antialiased;
}
.sms-theme .text-muted { color: var(--sms-muted) !important; }

/* Navbar: convert the bright bg-primary blue bar to a clean white bar w/ emerald accents */
.sms-theme .navbar.bg-primary {
  background: var(--sms-surface) !important;
  border-bottom: 1px solid var(--sms-line);
  box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 2px 14px rgba(15,23,42,.04);
}
.sms-theme .navbar.navbar-dark .navbar-brand,
.sms-theme .navbar.navbar-dark .nav-link {
  color: var(--sms-ink) !important;
}
.sms-theme .navbar.navbar-dark .navbar-brand { font-weight: 700; }
.sms-theme .navbar.navbar-dark .navbar-brand i { color: var(--sms-accent); }
.sms-theme .navbar.navbar-dark .nav-link:hover { color: var(--sms-accent) !important; }
.sms-theme .navbar.navbar-dark .nav-link.active {
  color: var(--sms-accent) !important;
  background: var(--sms-accent-soft);
  border-radius: 9px;
}
.sms-theme .navbar.navbar-dark .navbar-toggler { border-color: rgba(15,23,42,.15); }
.sms-theme .navbar.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.sms-theme .navbar .badge.bg-warning { box-shadow: none; }
@media (max-width: 991.98px) {
  .sms-theme .navbar .navbar-collapse {
    background: var(--sms-surface);
    margin-top: .5rem; padding: .5rem .75rem;
    border-radius: 12px; box-shadow: var(--sms-shadow);
    border: 1px solid var(--sms-line);
  }
}
.sms-theme .dropdown-menu {
  border: 1px solid var(--sms-line); border-radius: 12px; box-shadow: var(--sms-shadow);
}

/* Cards */
.sms-theme .card {
  background: var(--sms-surface);
  border: 1px solid var(--sms-line) !important;
  border-radius: var(--sms-radius);
  box-shadow: var(--sms-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sms-theme .card.hover-card:hover,
.sms-theme a .card.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--sms-shadow-hover);
}
.sms-theme .card-header {
  background: var(--sms-surface);
  border-bottom: 1px solid var(--sms-line);
  border-top-left-radius: var(--sms-radius);
  border-top-right-radius: var(--sms-radius);
}
.sms-theme .card-footer { background: var(--sms-surface); border-top: 1px solid var(--sms-line); }

/* Buttons */
.sms-theme .btn { border-radius: 10px; font-weight: 500; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.sms-theme .btn:active { transform: translateY(1px); }
.sms-theme .btn-primary {
  background: var(--sms-accent); border-color: var(--sms-accent);
  box-shadow: 0 4px 12px rgba(14,124,102,.22);
}
.sms-theme .btn-primary:hover, .sms-theme .btn-primary:focus {
  background: var(--sms-accent-dark); border-color: var(--sms-accent-dark);
  box-shadow: 0 6px 16px rgba(14,124,102,.28);
}
/* Outline buttons hover to a SOFT tint (not a solid green fill) so the icon/
   label stays readable — fixes the "full green blob on hover" look. */
.sms-theme .btn-outline-primary { color: var(--sms-accent); border-color: var(--sms-accent); }
.sms-theme .btn-outline-primary:hover,
.sms-theme .btn-outline-primary:focus {
  background: var(--sms-accent-soft); color: var(--sms-accent-dark); border-color: var(--sms-accent);
}
.sms-theme .btn-outline-secondary {
  border-color: rgba(15,23,42,.18); color: var(--sms-ink); background: var(--sms-surface);
}
.sms-theme .btn-outline-secondary:hover,
.sms-theme .btn-outline-secondary:focus {
  background: #f1f3f0; color: var(--sms-accent-dark); border-color: var(--sms-accent);
}
.sms-theme .btn-outline-danger:hover,
.sms-theme .btn-outline-danger:focus {
  background: rgba(190,40,54,.10); color: #a52834; border-color: #be2836;
}

/* Refined success/danger so the attendance Present/Absent controls match the
   theme instead of Bootstrap's harsh defaults. Green = present, red = absent. */
.sms-theme {
  --sms-success: #0E7C66;       /* present — same emerald family as the accent */
  --sms-success-dark: #0B5E4E;
  --sms-danger: #BE2836;        /* absent — a deep, muted red (not bright) */
  --sms-danger-dark: #9F1F2C;
}
/* Solid "All Present" / "All Absent" bulk buttons */
.sms-theme .btn-success {
  background: var(--sms-success); border-color: var(--sms-success);
  box-shadow: 0 4px 12px rgba(14,124,102,.20);
}
.sms-theme .btn-success:hover, .sms-theme .btn-success:focus {
  background: var(--sms-success-dark); border-color: var(--sms-success-dark);
}
.sms-theme .btn-danger {
  background: var(--sms-danger); border-color: var(--sms-danger);
  box-shadow: 0 4px 12px rgba(190,40,54,.18);
}
.sms-theme .btn-danger:hover, .sms-theme .btn-danger:focus {
  background: var(--sms-danger-dark); border-color: var(--sms-danger-dark);
}
/* Present/Absent toggle (radio btn-check) — unselected outline, soft hover */
.sms-theme .btn-outline-success { color: var(--sms-success-dark); border-color: var(--sms-success); }
.sms-theme .btn-outline-success:hover {
  background: var(--sms-accent-soft); color: var(--sms-success-dark); border-color: var(--sms-success);
}
/* The SELECTED toggle fills with the refined colour + white text (was harsh
   bright Bootstrap green/red before). */
.sms-theme .btn-check:checked + .btn-outline-success {
  background: var(--sms-success); border-color: var(--sms-success); color: #fff;
}
.sms-theme .btn-check:checked + .btn-outline-danger {
  background: var(--sms-danger); border-color: var(--sms-danger); color: #fff;
}
/* Emerald text links — but NOT anchor-styled buttons (`<a class="btn ...">`),
   whose text colour must come from the .btn-* rules (e.g. white on btn-primary).
   Without :not(.btn) this painted "Mark Attendance" green-on-green = invisible. */
.sms-theme a:not(.btn) { color: var(--sms-accent); }

/* Forms */
.sms-theme .form-control, .sms-theme .form-select {
  border: 1px solid rgba(15,23,42,.14); border-radius: 10px; color: var(--sms-ink);
}
.sms-theme .form-control:focus, .sms-theme .form-select:focus {
  border-color: var(--sms-accent); box-shadow: 0 0 0 .2rem var(--sms-accent-soft);
}
.sms-theme .form-check-input:checked { background-color: var(--sms-accent); border-color: var(--sms-accent); }
.sms-theme .input-group-text { background: #f1f3f0; border: 1px solid rgba(15,23,42,.14); border-radius: 10px; }

/* Tables */
.sms-theme .table { --bs-table-bg: transparent; color: var(--sms-ink); }
.sms-theme .table > thead th, .sms-theme .table-light th {
  background: #f3f5f2; border-bottom: 1px solid var(--sms-line);
  color: var(--sms-muted); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; font-size: .72rem;
}
.sms-theme .table > tbody td { border-color: rgba(15,23,42,.06); }
.sms-theme .table-hover > tbody > tr:hover > * { background: var(--sms-accent-soft); }

/* Tabs → underline style (emerald) */
.sms-theme .nav-tabs { border-bottom: 1px solid var(--sms-line); }
.sms-theme .nav-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--sms-muted); font-weight: 500; margin-bottom: -1px;
}
.sms-theme .nav-tabs .nav-link:hover { color: var(--sms-accent); border-bottom-color: var(--sms-accent-soft); }
.sms-theme .nav-tabs .nav-link.active {
  color: var(--sms-accent); background: transparent; border-bottom: 2px solid var(--sms-accent);
}
.sms-theme .nav-tabs .nav-link .badge { background: #eef1ee !important; color: var(--sms-muted) !important; }

/* Badges / alerts / modals */
.sms-theme .badge { border-radius: 7px; font-weight: 600; }
.sms-theme .alert { border-radius: 12px; }
.sms-theme .modal-content { border: 1px solid var(--sms-line); border-radius: var(--sms-radius); box-shadow: var(--sms-shadow-hover); }

/* Headings: a touch tighter/bolder for hierarchy */
.sms-theme h4, .sms-theme h5, .sms-theme h6 { color: var(--sms-ink); letter-spacing: -.01em; }

/* Mobile + reduced motion */
@media (max-width: 576px) {
  .sms-theme .card { border-radius: 12px; }
  .sms-theme .btn { padding-top: .5rem; padding-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sms-theme .card, .sms-theme .btn { transition: none; }
  .sms-theme .card.hover-card:hover, .sms-theme a .card.shadow-sm:hover { transform: none; }
}