body.light-mode {
  background-color: #f8f9fa;
  color: #212529;
}

body.dark-mode {
  background-color: #1e1e2f;
  color: #f1f1f1;
}

.dark-mode .bg-light {
  background-color: #2c2c3e !important;
}

.dark-mode .bg-primary {
  background-color: #3c3c5c !important;
}

footer { position: relative; z-index: 1; }

/* PWA Splash Screen Styles */
.pwa-splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  visibility: visible;
}

.pwa-splash-screen.hidden {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.pwa-splash-logo {
  margin-bottom: 30px;
  animation: logoBounce 2s ease-in-out infinite;
}

.pwa-splash-logo img {
  width: 100px;
  height: 100px;
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.pwa-splash-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 15px;
  text-align: center;
  color: white;
  text-shadow: 0 0 30px rgba(255,255,255,0.5);
}

.pwa-splash-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 50px;
  text-align: center;
  letter-spacing: 1px;
}

.pwa-splash-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pwa-splash-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.pwa-splash-loading span {
  font-size: 1.1rem;
  opacity: 0.8;
  font-weight: 500;
}

/* Animations */
@keyframes logoBounce {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-20px); 
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

html[dir="rtl"] .nav{
  padding-right: 0 !important;
  padding-left: none;
}

.nav-link {
  color: #333;
}

.dark-mode .nav-link {
  color: #ddd;
}

.hovered-nav-item:hover {
  background: #020024;
  background: linear-gradient(90deg, rgb(68 56 220) 0%, rgb(161 140 255) 50%, rgb(68 56 220) 100%);
  text-decoration: none;
  color: #ffffff !important;
  --bs-nav-link-hover-color: #ffffff !important;
  --bs-nav-link-color: #ffffff !important;
  font-weight: 900;
  transition: transform 0.3s ease;
  border-radius:10px ;
  -webkit-border-radius:10px ;
  -moz-border-radius:10px ;
  -ms-border-radius:10px ;
  -o-border-radius:10px ;
}

.online {  color: #37db5d; }
.offline {  color: #721c24; }
html[dir="rtl"] { text-align: right; }

.header{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1030; /* above sidebar/overlay */
}

.nav-link.active {
  font-weight: bold;
  background-color: #007bff;
  color: white !important;
  border-radius: 5px;
}

/* Base sidebar */
#sidebar {
  width: 235px;
  background-color: #f8f9fa;
  transition: transform 0.3s ease;
  z-index: 1030; /* Lower than modals (1050) */
  box-shadow: 1px 0px 20px #555;
  height: 94vh;
  border-bottom-right-radius: 50px;
}

html[dir="rtl"] #sidebar {
  border-bottom-left-radius: 50px !important;
  border-bottom-right-radius: 0px !important;
}

/* Overlay */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1030; /* Lower than modals (1050) but higher than sidebar */
}
#overlay.active { display: block; }

/* Sidebar brand: show user name + role */
.sidebar-brand {
  display: flex;
  flex-direction: column;
  border-bottom: #333 solid 1px;
}
.sidebar-brand .user-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
}
.sidebar-brand .user-role {
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: right; /* role underneath on the right */
  color: #333;
}

html[dir="rtl"] .sidebar-brand .user-role { text-align: left; }

.dark-mode .sidebar-brand .user-name,
.dark-mode .sidebar-brand .user-role {
  color: #ddd;
}

#sidebar .nav-link.active {
  font-weight: 600;
}

#sidebar [data-bs-toggle="collapse"].active {
  color: var(--bs-primary);
}

/* Mobile bottom control bar */
#mobile-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: none; /* shown on mobile via media query */
}
#mobile-controls .ctrl-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  text-decoration: none;
  color: inherit;
}
#mobile-controls .ctrl-btn i {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 2px;
}
.dark-mode #mobile-controls { background: #2c2c3e; border-top-color: #3b3b55; }
.dark-mode #mobile-controls .ctrl-btn { color: #ddd; }

/* Make room for the fixed bar so footer/content aren't hidden */
@media (max-width: 767.98px) {
  :root { --bar-h: 64px; }
  #mobile-controls { display: flex; min-height: var(--bar-h); }
  body { padding-bottom: var(--bar-h); }       /* <- key line */
}

/* Clock in header */
#clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: 0.9;
}

/* Style dropdown arrow (caret) */
.dropdown-toggle::after {
  color: white !important; /* default color */
}

/* On hover */
.dropdown-toggle:hover::after {
  color: rgb(14, 235, 14) !important;
}

/* Compact, animated, RTL-ready Day/Night switch */
.theme-switch{
  /* sizing vars */
  --w: 140px;            /* wider so text never hides */
  --h: 36px;
  --pad: 4px;
  --circle: 28px;
  --dir: 1;              /* LTR = 1, RTL = -1 (set below) */
  --slide: calc(var(--w) - (var(--circle) + var(--pad)*2));

  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;        /* centers the text */
  padding-inline: var(--pad);
  cursor: pointer;
  user-select: none;
  transition: background .35s ease;
}

.theme-switch .toggle-text{
  color:#fff;
  font-weight:700;
  font-size:.62rem;               /* smaller text */
  letter-spacing:.3px;
  pointer-events:none;
  padding-inline: calc(var(--circle) + var(--pad)*1.2); /* reserve room both sides */
  white-space: nowrap;
}

/* Knob */
.theme-switch .toggle-circle{
  position:absolute;
  inset-block-start: var(--pad);
  inset-inline-start: var(--pad); /* logical start; we animate with transform */
  width:var(--circle);
  height:var(--circle);
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition: transform .35s ease;  /* smooth slide */
  will-change: transform;
}

/* Gradients */
.theme-switch.day   { background: linear-gradient(90deg,#f56ba7,#f29e36); }
.theme-switch.night { background: linear-gradient(90deg,#374ab5,#1a85c3); }

/* Slide the knob in night mode */
.theme-switch.night .toggle-circle{
  transform: translateX(calc(var(--dir) * var(--slide)));
}

/* Direction awareness */
html[dir="rtl"] .theme-switch{ --dir:-1; }
html[dir="ltr"] .theme-switch{ --dir: 1; }

/* Icon colors */
.bi-sun-fill{ color:#fdc401; }
.bi-moon-fill{ color:#28bcd7; }

/* MOBILE: sidebar is hidden by default */
@media (max-width: 767.98px) {
  html[dir="ltr"] #sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    right: auto;
    height: 80vh;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
  html[dir="ltr"] #sidebar.show {
    transform: translateX(0);
  }

  html[dir="rtl"] #sidebar {
    position: fixed;
    top: 70px;
    right: 0;
    left: auto;
    height: 80vh;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
  html[dir="rtl"] #sidebar.show {
    transform: translateX(0);
  }
}

/* ================================
   Procedures page (namespaced)
   ================================ */

.procedures .procedures-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-areas: "list form";
  gap: 16px;
  padding: 16px;
}

/* Place list and form in named areas */
.procedures .list-card { grid-area: list; }
.procedures .form-card { grid-area: form; }

/* subtle fade when rows update */
.procedures #rowsWrap { transition: opacity .15s ease; }
.procedures #rowsWrap.updating { opacity: .6; }

/* Cards (containers) */
body.light-mode .procedures .card {
  background: #ffffff;
  border: 1px solid #dee2e6;
  color: #212529;
  border-radius: 14px;
  padding: 14px;
}
body.dark-mode .procedures .card {
  background: #111827;
  border: 1px solid #1f2937;
  color: #e5e7eb;
  border-radius: 14px;
  padding: 14px;
}

/* Header with Add button */
.procedures .list-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.procedures .list-header h1 { margin: 0 6px 0 0; font-size: 18px; }

/* Row "cards" (separated with shadow) */
.procedures .card-row {
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid;
  transition: box-shadow 0.2s ease, transform 0.05s ease;
}
body.light-mode .procedures .card-row {
  background: #ffffff;
  border-color: #e9ecef;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
body.dark-mode .procedures .card-row {
  background: #111827;
  border-color: #1f2937;
  box-shadow: 0 1px 6px rgba(255,255,255,0.12);
}
.procedures .card-row:hover { transform: translateY(-1px); }

/* Meta + badge */
.procedures .row-meta { margin-bottom: 8px; }
.procedures .badge { padding: 2px 8px; border-radius: 999px; border: 1px solid; font-size: 12px; margin-left: 4px; }
body.light-mode .procedures .badge.gray  { background: #f1f3f5; border-color: #dee2e6; color: #495057; }
body.dark-mode  .procedures .badge.gray  { background: #111827; border-color: #1f2937; color: #cbd5e1; }
body.light-mode .procedures .badge.green { background: #e6f9ef; border-color: #c3f0d7; color: #0f5132; }
body.dark-mode  .procedures .badge.green { background: #0b3a1a; border-color: #14532d; color: #a7f3d0; }

/* Label/Value grid (desktop) */
.procedures .row-main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* Name, Company, Category, Price, Cost */
  gap: 10px;
}
.procedures .kv { display: grid; gap: 2px; }
.procedures .k  { font-size: 12px; }
body.light-mode .procedures .k { color: #6c757d; }
body.dark-mode  .procedures .k { color: #9ca3af; }
.procedures .v  { font-size: 14px; }

/* Actions */
.procedures .row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.procedures form.inline { display: inline; }

/* Buttons */
.procedures .btn { display: inline-block; padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid; }
body.light-mode .procedures .btn { background: #f8f9fa; border-color: #dee2e6; color: #212529; }
body.dark-mode  .procedures .btn { background: #0b1220; border-color: #1f2937; color: #e5e7eb; }
.procedures .btn.primary { background: linear-gradient(180deg, #16a34a, #15803d); border-color: #14532d; color: #ffffff; }
.procedures .btn.ghost   { background: transparent; }
.procedures .btn.warn    { background: linear-gradient(180deg, #ef4444, #b91c1c); border-color: #7f1d1d; color: #ffffff; }

/* Filters + inputs */
.procedures .filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.procedures input[type="text"],
.procedures input[type="number"],
.procedures select { width: 100%; padding: 10px; border-radius: 10px; outline: none; }
body.light-mode .procedures input[type="text"],
body.light-mode .procedures input[type="number"],
body.light-mode .procedures select { background: #ffffff; border: 1px solid #dee2e6; color: #212529; }
body.dark-mode  .procedures input[type="text"],
body.dark-mode  .procedures input[type="number"],
body.dark-mode  .procedures select { background: #0b1220; border: 1px solid #1f2937; color: #e5e7eb; }

/* Flash */
.procedures .flash { margin-bottom: 10px; padding: 10px; border-radius: 10px; border: 1px solid; }
body.light-mode .procedures .flash.success { background: #e6f9ef; color: #0f5132; border-color: #c3f0d7; }
body.dark-mode  .procedures .flash.success { background: #052e1a; color: #a7f3d0; border-color: #14532d; }
body.light-mode .procedures .flash.error   { background: #fdecea; color: #842029; border-color: #f5c2c7; }
body.dark-mode  .procedures .flash.error   { background: #3f1d1d; color: #fecaca; border-color: #7f1d1d; }

/* HR */
.procedures hr.soft { border: none; border-top: 1px solid; margin: 10px 0; }
body.light-mode .procedures hr.soft { border-color: #e9ecef; }
body.dark-mode  .procedures hr.soft { border-color: #1f2937; }

/* Helpers */
.procedures .controls { display: flex; gap: 6px; }
.procedures .grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.procedures .checkbox { margin: 8px 0; }

/* Form card visibility */
.procedures .form-card { display: none; }
.procedures .form-card.open { display: block; }

/* ================================
   Responsive
   ================================ */

/* Tablet */
@media (max-width: 992px) {
  .procedures .procedures-container {
    grid-template-columns: 1fr;
    /* On tablet we still want form on top when open */
    grid-template-areas:
      "form"
      "list";
  }
  .procedures .row-main { grid-template-columns: repeat(2, 1fr); }
}

/* Phones — form first, then list */
@media (max-width: 600px) {
  .procedures .procedures-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "list";
  }
  .procedures .row-main { grid-template-columns: 1fr; gap: 6px; }
  .procedures .kv { display: flex; gap: 6px; align-items: baseline; }
  .procedures .k::after { content: ': '; }
  .procedures .k { min-width: max-content; }
  .procedures .btn { padding: 8px 10px; border-radius: 8px; }
}