/* =========================================================
   Design Tokens
   ========================================================= */
:root {
  /* Primary: refined teal */
  --primary-50:  #e6f6fa;
  --primary-100: #ccecf5;
  --primary-200: #99d9eb;
  --primary-300: #66c7e0;
  --primary-400: #33b4d6;
  --primary-500: #0097c1;
  --primary-600: #00799a;
  --primary-700: #005b74;
  --primary-800: #003c4d;
  --primary-900: #001e27;

  /* Secondary: soft slate blue */
  --secondary-50:  #eef1fa;
  --secondary-100: #dde3f5;
  --secondary-200: #bbc7eb;
  --secondary-300: #99abe0;
  --secondary-400: #778fd6;
  --secondary-500: #5573cc;
  --secondary-600: #445ca3;
  --secondary-700: #33457a;
  --secondary-800: #222e52;
  --secondary-900: #111729;

  /* Success: muted emerald */
  --success-50:  #e8f7f0;
  --success-100: #d1efe1;
  --success-200: #a3dfc3;
  --success-300: #75cfa5;
  --success-400: #47bf87;
  --success-500: #1a9f69;
  --success-600: #157f54;
  --success-700: #105f3f;
  --success-800: #0a402a;
  --success-900: #052015;

  /* Warning: warm amber */
  --warning-50:  #fef6e6;
  --warning-100: #fdedcc;
  --warning-200: #fbdb99;
  --warning-300: #f9c966;
  --warning-400: #f7b733;
  --warning-500: #f5a500;
  --warning-600: #c48400;
  --warning-700: #936300;
  --warning-800: #624200;
  --warning-900: #312100;

  /* Danger: soft crimson */
  --danger-50:  #fbeaed;
  --danger-100: #f7d5db;
  --danger-200: #efacb7;
  --danger-300: #e78293;
  --danger-400: #df596f;
  --danger-500: #d7304b;
  --danger-600: #ac263c;
  --danger-700: #811d2d;
  --danger-800: #56131e;
  --danger-900: #2b0a0f;

  /* Neutral: slate-based gray */
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* RGB values for rgba() operations */
  --primary-500-rgb:   0, 151, 193;
  --secondary-500-rgb: 85, 115, 204;
  --success-500-rgb:   26, 159, 105;
  --warning-500-rgb:   245, 165, 0;
  --danger-500-rgb:    215, 48, 75;

  /* Semantic references */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --body-bg:      var(--neutral-50);
  --body-color:   var(--neutral-800);
  --border-color: var(--neutral-200);

  /* Sidebar */
  --sidebar-width:  15rem;
  --sidebar-bg:     #ffffff;
  --sidebar-border: var(--neutral-200);

  /* Card */
  --card-bg:           #ffffff;
  --card-border:       var(--neutral-200);
  --card-radius:       0.875rem;
  --card-shadow:       0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 8px 24px rgba(0,0,0,0.08);
  --card-header-bg:    var(--neutral-50);

  /* Input */
  --input-bg:           #ffffff;
  --input-border:       var(--neutral-300);
  --input-focus-border: var(--primary-400);
  --input-focus-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.12);
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:             var(--font-sans);
  background-color:        var(--body-bg);
  color:                   var(--body-color);
  font-size:               0.9375rem;
  line-height:             1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar {
  position:        fixed;
  top:             0;
  left:            0;
  height:          100vh;
  width:           var(--sidebar-width);
  background:      var(--sidebar-bg);
  border-right:    1px solid var(--sidebar-border);
  flex-direction:  column;
  z-index:         200;
  overflow-y:      auto;
  overflow-x:      hidden;
}

/* When used as Bootstrap offcanvas on mobile, override offcanvas defaults */
.offcanvas.sidebar {
  width: var(--sidebar-width) !important;
}

.sidebar-brand {
  display:        flex;
  align-items:    center;
  gap:            0.625rem;
  padding:        1.25rem 1.5rem;
  font-weight:    700;
  font-size:      0.9375rem;
  letter-spacing: 0.01em;
  color:          var(--neutral-900);
  border-bottom:  1px solid var(--sidebar-border);
  flex-shrink:    0;
  text-decoration: none;
  white-space:    nowrap;
}

.sidebar-brand i {
  color:     var(--primary-500);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sidebar-nav {
  padding:    0.75rem;
  overflow-y: auto;
}

.sidebar-nav-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.sidebar-nav-link {
  display:         flex;
  align-items:     center;
  gap:             0.6rem;
  padding:         0.5625rem 0.875rem;
  border-radius:   0.5rem;
  font-size:       0.875rem;
  font-weight:     500;
  color:           var(--neutral-600);
  text-decoration: none;
  transition:      background-color 0.15s ease, color 0.15s ease;
  white-space:     nowrap;
  cursor:          pointer;
}

.sidebar-nav-link:hover {
  background-color: var(--neutral-100);
  color:            var(--neutral-900);
}

.sidebar-nav-link.active {
  background-color: rgba(var(--primary-500-rgb), 0.08);
  color:            var(--primary-700);
  font-weight:      600;
}

.sidebar-nav-link i {
  font-size:   1rem;
  flex-shrink: 0;
  width:       1.1rem;
  text-align:  center;
}

.sidebar-section {
  padding:        0.875rem 0.875rem 0.3rem;
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--neutral-400);
  list-style:     none;
}

.sidebar-footer {
  padding:        0.75rem;
  border-top:     1px solid var(--sidebar-border);
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  margin-top:     auto;
}

.sidebar-user {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  padding:       0.5rem 0.875rem;
  font-size:     0.8125rem;
  font-weight:   500;
  color:         var(--neutral-500);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-user i {
  font-size:   1rem;
  flex-shrink: 0;
  color:       var(--neutral-400);
}

/* Offcanvas header brand (mobile) */
.offcanvas-header .sidebar-brand {
  border-bottom: none;
  padding:       0;
}

/* =========================================================
   App Layout
   ========================================================= */
.app-main-area {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}

@media (min-width: 992px) {
  .app-main-area {
    margin-left: var(--sidebar-width);
  }
}

/* =========================================================
   Mobile Top Bar
   ========================================================= */
.mobile-topbar {
  align-items:  center;
  gap:          0.75rem;
  padding:      0 1rem;
  height:       3.5rem;
  background:   #fff;
  border-bottom: 1px solid var(--neutral-200);
  position:     sticky;
  top:          0;
  z-index:      99;
  flex-shrink:  0;
}

.mobile-toggle {
  background:    none;
  border:        none;
  border-radius: 0.5rem;
  padding:       0.35rem 0.625rem;
  font-size:     1.25rem;
  line-height:   1;
  color:         var(--neutral-700);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
}

.mobile-toggle:hover {
  background: var(--neutral-100);
}

.offcanvas-backdrop {
  display: none !important;
}

.mobile-brand {
  font-weight:     700;
  font-size:       0.9rem;
  color:           var(--neutral-900);
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
}

.mobile-brand i {
  color:     var(--primary-500);
  font-size: 1.1rem;
}

/* =========================================================
   Main Content & Messages
   ========================================================= */
.main-content {
  flex:    1;
  padding: 2rem 2rem 3rem;
}

.messages-wrapper {
  padding: 1.5rem 2rem 0;
}

@media (max-width: 767.98px) {
  .main-content    { padding: 1.5rem 1rem 2.5rem; }
  .messages-wrapper { padding: 1rem 1rem 0; }
}

/* =========================================================
   Cards
   ========================================================= */
.card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  transition:    box-shadow 0.2s ease;
  overflow:      hidden;
}

.card-header {
  background:    var(--card-header-bg);
  border-bottom: 1px solid var(--card-border);
  padding:       0.875rem 1.25rem;
  font-weight:   600;
  font-size:     0.875rem;
  color:         var(--neutral-700);
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

.card-header i {
  color:     var(--primary-500);
  font-size: 0.9375rem;
}

.card-body { padding: 1.5rem; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  font-family:     var(--font-sans);
  font-weight:     500;
  font-size:       0.875rem;
  border-radius:   0.5rem;
  padding:         0.5rem 1rem;
  transition:      background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  border:          none;
  letter-spacing:  0.01em;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  box-shadow:      0 1px 2px rgba(0,0,0,0.06);
  cursor:          pointer;
  line-height:     1.5;
}

.btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.btn:active { transform: translateY(0);    box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.btn-primary  { background: var(--primary-500);  color: #fff; }
.btn-primary:hover  { background: var(--primary-600);  color: #fff; }
.btn-primary:focus  { background: var(--primary-600);  color: #fff; box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.25); }

.btn-success  { background: var(--success-500);  color: #fff; }
.btn-success:hover  { background: var(--success-600);  color: #fff; }

.btn-warning  { background: var(--warning-500);  color: #fff; }
.btn-warning:hover  { background: var(--warning-600);  color: #fff; }

.btn-danger   { background: var(--danger-500);   color: #fff; }
.btn-danger:hover   { background: var(--danger-600);   color: #fff; }

.btn-outline-secondary {
  background:   transparent;
  border:       1px solid var(--neutral-300);
  color:        var(--neutral-600);
  box-shadow:   none;
}
.btn-outline-secondary:hover {
  background:   var(--neutral-100);
  border-color: var(--neutral-400);
  color:        var(--neutral-800);
}

/* =========================================================
   Forms
   ========================================================= */
.form-control,
.form-select {
  font-family:   var(--font-sans);
  font-size:     0.875rem;
  border-radius: 0.5rem;
  padding:       0.5rem 0.75rem;
  border:        1px solid var(--input-border);
  background:    var(--input-bg);
  color:         var(--neutral-800);
  transition:    border-color 0.15s ease, box-shadow 0.15s ease;
  line-height:   1.5;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--input-focus-border);
  box-shadow:   var(--input-focus-shadow);
  outline:      none;
}

.form-label {
  font-size:      0.78rem;
  font-weight:    600;
  margin-bottom:  0.35rem;
  color:          var(--neutral-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.form-check-input:checked {
  background-color: var(--primary-500);
  border-color:     var(--primary-500);
}

.input-group-text {
  background:    var(--neutral-50);
  border:        1px solid var(--neutral-300);
  color:         var(--neutral-500);
  font-size:     0.875rem;
  padding:       0.5rem 0.75rem;
  border-radius: 0.5rem;
}

/* =========================================================
   Alerts
   ========================================================= */
.alert {
  border:        none;
  border-radius: 0.75rem;
  padding:       0.875rem 1.125rem;
  display:       flex;
  align-items:   flex-start;
  gap:           0.625rem;
  font-size:     0.875rem;
}

.alert i { font-size: 1rem; margin-top: 0.1rem; flex-shrink: 0; }

.alert-success { background: rgba(var(--success-500-rgb), 0.08); color: var(--success-700); }
.alert-danger,
.alert-error   { background: rgba(var(--danger-500-rgb),  0.08); color: var(--danger-700);  }
.alert-warning { background: rgba(var(--warning-500-rgb), 0.08); color: var(--warning-700); }
.alert-info    { background: rgba(var(--primary-500-rgb), 0.08); color: var(--primary-700); }

/* =========================================================
   Badges
   ========================================================= */
.badge {
  font-size:      0.7rem;
  font-weight:    600;
  border-radius:  999px;
  padding:        0.275em 0.65em;
  letter-spacing: 0.02em;
}

/* =========================================================
   Footer
   ========================================================= */
footer {
  background:  var(--neutral-50);
  color:       var(--neutral-500);
  padding:     1.25rem 2rem;
  border-top:  1px solid var(--neutral-200);
  font-size:   0.8125rem;
  flex-shrink: 0;
}

/* =========================================================
   Utilities
   ========================================================= */
.font-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.8125rem;
}

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

/* Login page opts out of sidebar layout */
body.no-navbar .app-main-area { margin-left: 0; }