/* ==========================================================
   Umu Hamsa — Brand Theme  (loads after bootstrap.min.css)
   ========================================================== */

/* ---------- Design Tokens ---------- */
:root {
  --color-cocoa:    #5B2A1E;
  --color-gold:     #F2A71B;
  --color-cream:    #FBF3E7;
  --color-charcoal: #211712;
  --color-frosting: #FFFFFF;
  --color-success:  #4C7A52;
  --color-warning:  #F2A71B;
  --color-danger:   #B23A2E;

  --sidebar-width:           260px;
  --sidebar-collapsed-width:  64px;
  --header-height:            64px;

  /* Bootstrap 5 variable overrides */
  --bs-body-bg:           var(--color-cream);
  --bs-body-font-family:  'Inter', system-ui, sans-serif;
  --bs-primary:           var(--color-gold);
  --bs-primary-rgb:       242, 167, 27;
  --bs-border-radius:     8px;
  --bs-border-radius-lg:  12px;
  --bs-border-radius-pill: 999px;
}

/* ---------- Base / Typography ---------- */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--color-cream);
  color: var(--color-charcoal);
}
h1, h2, h3 { font-family: 'Fredoka', sans-serif; }
.font-tabular { font-variant-numeric: tabular-nums; }

/* ---------- App Shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--color-cocoa);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1030;
  transition: width 0.22s ease, left 0.22s ease;
  overflow: hidden;
}

/* Mobile: sidebar hidden off-screen by default */
@media (max-width: 991.98px) {
  .sidebar { left: calc(-1 * var(--sidebar-width)); }
  .sidebar.mobile-open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.35); }
  .main-wrapper { margin-left: 0 !important; }
}

/* Sidebar backdrop (mobile only) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1029;
}
.sidebar-backdrop.show { display: block; }

/* ---------- Sidebar Brand Block ---------- */
.sidebar-brand {
  padding: 20px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 76px;
}
.brand-logo { width: 40px; height: 40px; flex-shrink: 0; }
.brand-wordmark {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-cream);
  white-space: nowrap;
  line-height: 1;
}

/* Scalloped divider — signature element */
.scallop-divider {
  flex-shrink: 0;
  height: 14px;
  /* Gold strip with circular cutouts at bottom revealing cocoa behind */
  background:
    radial-gradient(circle at 50% 100%, transparent 7px, var(--color-gold) 7.5px)
    0 0 / 16px 16px repeat-x;
}

/* ---------- Sidebar Nav ---------- */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0 28px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.nav-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(251,243,231,0.55);
  padding: 16px 20px 4px;
  white-space: nowrap;
}
.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: rgba(251,243,231,0.82);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 450;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color 0.14s, background 0.14s;
}
.sidebar-nav-link:hover { color: var(--color-cream); background: rgba(255,255,255,0.07); }
.sidebar-nav-link.active {
  color: var(--color-gold);
  background: rgba(255,255,255,0.09);
  border-left-color: var(--color-gold);
  font-weight: 600;
}
.sidebar-nav-link .bi { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar-nav-link .nav-text { flex: 1; }
.nav-badge-coming {
  font-size: 0.58rem; font-weight: 700;
  background: rgba(255,255,255,0.12);
  color: rgba(251,243,231,0.6);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}

/* ---------- Sidebar Collapse (desktop icon-only) ---------- */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed-width) !important; }
body.sidebar-collapsed .brand-wordmark,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-badge-coming,
body.sidebar-collapsed .scallop-divider { display: none; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 20px 8px; }
body.sidebar-collapsed .sidebar-nav-link {
  justify-content: center; padding: 11px;
  border-left: none; border-right: 3px solid transparent;
}
body.sidebar-collapsed .sidebar-nav-link.active { border-right-color: var(--color-gold); }
body.sidebar-collapsed .sidebar-nav-link .bi { width: auto; font-size: 1.15rem; }

/* ---------- Main Wrapper ---------- */
.main-wrapper {
  margin-left: var(--sidebar-width);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  transition: margin-left 0.22s ease;
}

/* ---------- Top Header ---------- */
.top-header {
  height: var(--header-height);
  background: var(--color-frosting);
  border-bottom: 1px solid rgba(91,42,30,0.1);
  display: flex; align-items: center;
  padding: 0 24px; gap: 12px;
  position: sticky; top: 0; z-index: 100;
  flex-shrink: 0;
}
.header-page-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.1rem; font-weight: 600;
  color: var(--color-cocoa); margin: 0; line-height: 1.2;
}
.header-breadcrumb {
  font-size: 0.7rem; color: rgba(91,42,30,0.48);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-title-block { flex: 1; min-width: 0; }
.header-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--color-cream);
  border: 1px solid rgba(91,42,30,0.12);
  font-size: 0.8rem; color: var(--color-cocoa); font-weight: 500;
  white-space: nowrap;
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-gold); color: var(--color-charcoal);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.8rem;
}
.sidebar-toggle-btn {
  background: none; border: none; padding: 7px 8px;
  color: var(--color-cocoa); border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s; flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: var(--color-cream); }

/* ---------- Page Content ---------- */
.page-content { flex: 1; padding: 28px 28px 40px; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--color-gold); border-color: var(--color-gold);
  color: var(--color-charcoal);
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  border-radius: 999px; padding-left: 20px; padding-right: 20px;
}
.btn-primary:hover, .btn-primary:active {
  background: #d99417; border-color: #d99417; color: var(--color-charcoal);
}
.btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(242,167,27,0.35); }
.btn-outline-secondary {
  color: var(--color-cocoa); border-color: rgba(91,42,30,0.28);
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif; font-weight: 600;
}
.btn-outline-secondary:hover {
  background: rgba(91,42,30,0.06); border-color: var(--color-cocoa); color: var(--color-cocoa);
}

/* Icon action buttons (table rows) */
.btn-icon {
  width: 32px; height: 32px; padding: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; font-size: 0.85rem; cursor: pointer;
  background: transparent; transition: background 0.13s, border-color 0.13s;
  text-decoration: none;
}
.btn-icon-edit   { color: var(--color-cocoa); border-color: rgba(91,42,30,0.18); }
.btn-icon-edit:hover { background: rgba(91,42,30,0.07); color: var(--color-cocoa); }
.btn-icon-view   { color: #5a6a7a; border-color: rgba(90,106,122,0.2); }
.btn-icon-view:hover { background: rgba(90,106,122,0.1); color: #5a6a7a; }
.btn-icon-deactivate { color: var(--color-danger); border-color: rgba(178,58,46,0.2); }
.btn-icon-deactivate:hover { background: rgba(178,58,46,0.08); }
.btn-icon-restore { color: var(--color-success); border-color: rgba(76,122,82,0.2); }
.btn-icon-restore:hover { background: rgba(76,122,82,0.08); }

/* ---------- Tables ---------- */
.table-uhc { margin-bottom: 0; }
.table-uhc thead th {
  background: var(--color-cocoa); color: var(--color-cream);
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: 0.77rem; letter-spacing: 0.05em; text-transform: uppercase;
  border: none; padding: 10px 14px;
  position: sticky; top: var(--header-height); z-index: 2;
}
.table-uhc tbody td {
  font-size: 0.875rem; padding: 10px 14px;
  vertical-align: middle; border-bottom: 1px solid rgba(91,42,30,0.07);
}
.table-uhc tbody tr:hover td { background: rgba(242,167,27,0.04); }
.table-uhc tbody tr.row-inactive td { opacity: 0.55; }
/* Unpaid order — money still owed in full */
.table-uhc tbody tr.row-unpaid td { background: rgba(178,58,46,0.07); }
.table-uhc tbody tr.row-unpaid td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.table-uhc tbody tr.row-unpaid:hover td { background: rgba(178,58,46,0.11); }
.badge-unpaid {
  display: inline-block;
  background: rgba(178,58,46,0.12); color: var(--color-danger);
  border: 1px solid rgba(178,58,46,0.3);
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px;
}

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-color:              var(--color-cocoa);
  --bs-pagination-hover-color:        var(--color-cocoa);
  --bs-pagination-hover-bg:           rgba(242,167,27,0.12);
  --bs-pagination-focus-color:        var(--color-cocoa);
  --bs-pagination-focus-box-shadow:   0 0 0 .2rem rgba(242,167,27,0.25);
  --bs-pagination-active-bg:          var(--color-gold);
  --bs-pagination-active-border-color: var(--color-gold);
  --bs-pagination-active-color:       #fff;
}
.table-uhc .col-num { font-variant-numeric: tabular-nums; }
.table-wrapper {
  background: var(--color-frosting);
  border: 1px solid rgba(91,42,30,0.09);
  border-radius: 12px; overflow: clip;
}
/* `overflow: clip` (not auto) keeps the wrapper from becoming a scroll container, so the
   sticky table header stays pinned under the top bar while the page scrolls. On small
   screens wide tables need horizontal scroll instead, so the header is un-stuck there
   (inside a scroll container its top offset would push it down over the first rows). */
@media (max-width: 991.98px) {
  .table-wrapper { overflow-x: auto; overflow-y: hidden; }
  .table-wrapper .table-uhc thead th { position: static; }
}

/* ---------- Status Pills ---------- */
.badge-active {
  display: inline-block;
  background: rgba(76,122,82,0.1); color: var(--color-success);
  border: 1px solid rgba(76,122,82,0.28);
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; letter-spacing: 0.03em;
}
.badge-inactive {
  display: inline-block;
  background: rgba(110,110,110,0.08); color: #888;
  border: 1px solid rgba(110,110,110,0.2);
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; letter-spacing: 0.03em;
}

/* ---------- CRUD Cards ---------- */
.crud-card {
  background: var(--color-frosting);
  border: 1px solid rgba(91,42,30,0.09);
  border-radius: 12px; overflow: hidden;
}
.crud-card-body { padding: 28px 32px; }
.crud-card-actions {
  padding: 14px 32px;
  background: rgba(251,243,231,0.6);
  border-top: 1px solid rgba(91,42,30,0.08);
  display: flex; gap: 10px; align-items: center;
}

/* ---------- Form Overrides ---------- */
.form-label {
  font-weight: 600; font-size: 0.79rem;
  color: var(--color-cocoa); margin-bottom: 4px;
}
.form-control, .form-select {
  border-color: rgba(91,42,30,0.2); font-size: 0.875rem; border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-gold); box-shadow: 0 0 0 0.18rem rgba(242,167,27,0.22);
}
.form-text { font-size: 0.73rem; color: rgba(91,42,30,0.52); }

/* ---------- Page Header ---------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.page-header h1 {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.65rem; font-weight: 600; color: var(--color-cocoa); margin: 0;
}

/* ---------- Toolbar ---------- */
.toolbar-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.search-input { min-width: 200px; max-width: 320px; }

/* Show-inactive switch */
.show-inactive-switch {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; color: rgba(91,42,30,0.62); cursor: pointer; white-space: nowrap;
}
.form-check-input:checked { background-color: var(--color-gold); border-color: var(--color-gold); }

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center; padding: 56px 20px;
  color: rgba(91,42,30,0.38);
}
.empty-state .bi { font-size: 2.8rem; margin-bottom: 10px; display: block; }
.empty-state p { font-size: 0.9rem; margin-bottom: 18px; }

/* ---------- Alerts ---------- */
.alert-success {
  background: rgba(76,122,82,0.09); border-color: rgba(76,122,82,0.22);
  color: var(--color-success);
}
.alert-danger {
  background: rgba(178,58,46,0.07); border-color: rgba(178,58,46,0.18);
  color: var(--color-danger);
}

/* ---------- Login Page ---------- */
.login-page {
  min-height: 100vh; background: var(--color-cocoa);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--color-frosting);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.38);
}
.login-card-scallop {
  height: 14px;
  background:
    radial-gradient(circle at 50% 0, transparent 7px, var(--color-gold) 7.5px)
    0 0 / 16px 16px repeat-x;
}
.login-card-body { padding: 28px 32px 36px; }
.login-logo { text-align: center; margin-bottom: 6px; }
.login-logo svg { width: 68px; height: 68px; }
.login-wordmark {
  font-family: 'Fredoka', sans-serif; font-size: 1.9rem; font-weight: 600;
  color: var(--color-cocoa); text-align: center; margin: 0;
}
.login-tagline {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(91,42,30,0.4);
  text-align: center; margin-bottom: 24px;
}
.login-separator { height: 1px; background: rgba(91,42,30,0.1); margin-bottom: 22px; }
.btn-login {
  background: var(--color-gold); border: none;
  color: var(--color-charcoal); font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 1.05rem;
  border-radius: 999px; padding: 10px; width: 100%;
  transition: background 0.14s; cursor: pointer;
}
.btn-login:hover { background: #d99417; }
.login-forgot {
  display: block; text-align: center; margin-top: 14px;
  font-size: 0.8rem; color: rgba(91,42,30,0.48); text-decoration: none;
}
.login-forgot:hover { color: var(--color-cocoa); }