/*
  giveBeauty Admin — new dashboard design system.

  Every rule here is prefixed with .gb- so it can be loaded site-wide
  (via _Layout.cshtml) without touching the visual behaviour of the
  older, pre-existing admin pages (Business/List, GiftCards/List,
  People/Admins/List, etc.) which keep their own bespoke styles.
  New pages (the dashboard, and the "coming soon" placeholders) opt
  into this system by using the gb- classes below.
*/

:root{
  --gb-green: #1E3D2F;
  --gb-green-deep: #163024;
  --gb-green-light: #E7EFE9;
  --gb-gold: #B8892E;
  --gb-gold-light: #F5EAD1;
  --gb-grey: #6B6F68;
  --gb-grey-light: #F1F0EA;

  --gb-bg: #FFFFFF;
  --gb-surface: #FFFFFF;
  --gb-surface-alt: #F8F7F3;
  --gb-surface-hover: #F1EFE7;
  --gb-border: #E4E1D6;
  --gb-border-strong: #D2CEBE;

  --gb-sidebar-bg: #1E3D2F;
  --gb-sidebar-active: #28503E;
  --gb-sidebar-text: #EAF1EC;
  --gb-sidebar-text-muted: #A9C2B3;

  --gb-text: #202821;
  --gb-text-muted: #6B6F68;
  --gb-text-faint: #96988F;

  --gb-success: #2E7D4F;
  --gb-success-bg: #E5F3EA;
  --gb-warning: #B8862B;
  --gb-warning-bg: #FBF1DC;
  --gb-danger: #B23A32;
  --gb-danger-bg: #F9E8E6;

  --gb-font-display: 'Fraunces', serif;
  --gb-font-body: 'Inter', sans-serif;
  --gb-font-mono: 'IBM Plex Mono', monospace;
  --gb-radius: 10px;
}

/* ---------- Shell layout ---------- */
.gb-app{
  display: flex;
  height: 100vh;
  font-family: var(--gb-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gb-text);
  background: var(--gb-bg);
  -webkit-font-smoothing: antialiased;
}
.gb-app *, .gb-app *::before, .gb-app *::after{ box-sizing: border-box; }
.gb-app a{ color: inherit; text-decoration: none; }

.gb-sidebar{
  width: 236px;
  flex-shrink: 0;
  background: var(--gb-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.gb-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 22px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 18px;
}
.gb-brand-mark{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gb-gold), #8C6A22 90%);
  position: relative;
  flex-shrink: 0;
}
.gb-brand-name{
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gb-sidebar-text);
}
.gb-brand-name span{ color: var(--gb-gold); font-style: italic; }
.gb-brand-sub{ font-size: 10.5px; color: var(--gb-sidebar-text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }

.gb-nav{ display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; }

/* Collapsible nav groups: each is a native <details>/<summary> pair, so
   the expand/collapse chevron and disclosure marker need explicit sizing —
   without this, browsers render the <summary> at its default (huge)
   marker/intrinsic SVG size. */
.gb-nav-group{ display: block; }
.gb-nav-group-items{ display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.gb-nav-label{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gb-sidebar-text-muted); padding: 14px 12px 6px; opacity: 0.8;
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none;
}
.gb-nav-label::-webkit-details-marker{ display: none; }
.gb-nav-label::marker{ content: ""; font-size: 0; }
.gb-chevron{ width: 10px; height: 10px; flex-shrink: 0; opacity: 0.75; transition: transform 0.15s ease; }
.gb-nav-group[open] > .gb-nav-label .gb-chevron{ transform: rotate(90deg); }
.gb-sidebar .gb-nav-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--gb-sidebar-text-muted) !important;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.gb-nav-item:hover{ background: var(--gb-sidebar-active); color: var(--gb-sidebar-text) !important; }
.gb-nav-item.gb-active{ background: var(--gb-sidebar-active); color: var(--gb-sidebar-text) !important; box-shadow: inset 3px 0 0 var(--gb-gold); }
.gb-nav-item svg{ width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.gb-nav-item.gb-disabled{ opacity: 0.55; cursor: default; }
.gb-nav-count{
  margin-left: auto;
  font-family: var(--gb-font-mono);
  font-size: 10.5px;
  color: var(--gb-sidebar-text-muted);
  background: rgba(0,0,0,0.18);
  padding: 1px 6px;
  border-radius: 20px;
}
.gb-nav-item.gb-active .gb-nav-count{ color: var(--gb-gold); }
.gb-nav-soon{
  margin-left: auto;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gb-sidebar-text-muted);
  background: rgba(0,0,0,0.18);
  padding: 1px 6px;
  border-radius: 20px;
}

.gb-sidebar-foot{
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gb-logout-form{ margin-left: auto; flex-shrink: 0; }
.gb-logout-btn{
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: none;
  color: var(--gb-sidebar-text-muted);
  cursor: pointer;
}
.gb-logout-btn svg{ width: 15px; height: 15px; }
.gb-logout-btn:hover{ background: var(--gb-sidebar-active); color: var(--gb-danger); border-color: var(--gb-danger); }
.gb-avatar-sm{
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gb-gold), var(--gb-green));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.gb-foot-name{ font-size: 12.5px; font-weight: 600; color: var(--gb-sidebar-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-foot-role{ font-size: 11px; color: var(--gb-sidebar-text-muted); }

/* ---------- Main / topbar ---------- */
.gb-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }

.gb-topbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--gb-border);
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.gb-page-title{ font-family: var(--gb-font-display); font-size: 24px; font-weight: 500; color: var(--gb-green-deep); }
.gb-page-sub{ color: var(--gb-text-muted); font-size: 12.5px; margin-top: 2px; }

.gb-topbar-right{ display: flex; align-items: center; }
.gb-topbar-right .navbar-nav{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.gb-topbar-right .nav-item{ list-style: none; }
.gb-topbar-right .nav-link{ color: var(--gb-text-muted) !important; }
.gb-topbar-right .nav-link:hover{ color: var(--gb-green) !important; }

.gb-content{ padding: 24px 28px 60px; overflow-x: auto; overflow-y: auto; flex: 1; min-height: 0; }

/* ---------- Stat cards ---------- */
.gb-stat-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 900px){ .gb-stat-row{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .gb-stat-row{ grid-template-columns: 1fr; } }
.gb-stat-card{
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 16px 18px;
}
.gb-stat-label{ font-size: 11.5px; color: var(--gb-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.gb-stat-value{ font-family: var(--gb-font-display); font-size: 26px; margin-top: 6px; color: var(--gb-green-deep); }
.gb-stat-delta{ font-size: 11.5px; margin-top: 6px; color: var(--gb-text-faint); font-family: var(--gb-font-mono); }
.gb-stat-delta.gb-up{ color: var(--gb-success); }
.gb-stat-delta.gb-down{ color: var(--gb-danger); }

/* ---------- Panel / table ---------- */
.gb-panel{
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  overflow: hidden;
  margin-bottom: 22px;
}
.gb-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gb-border);
  gap: 16px;
  flex-wrap: wrap;
}
.gb-panel-head h3{ font-family: var(--gb-font-display); font-size: 16px; font-weight: 500; color: var(--gb-green-deep); margin: 0; }
.gb-panel-head p{ color: var(--gb-text-muted); font-size: 12px; margin: 2px 0 0; }

.gb-table{ width: 100%; border-collapse: collapse; min-width: 640px; }
.gb-table thead th{
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gb-text-muted);
  font-weight: 600;
  padding: 10px 18px;
  background: var(--gb-surface-alt);
  border-bottom: 1px solid var(--gb-border);
  white-space: nowrap;
}
.gb-table tbody td{
  padding: 13px 18px;
  border-bottom: 1px solid var(--gb-border);
  font-size: 13px;
  vertical-align: middle;
}
.gb-table tbody tr:last-child td{ border-bottom: none; }
.gb-table tbody tr:hover{ background: var(--gb-surface-alt); }
.gb-mono{ font-family: var(--gb-font-mono); font-size: 12px; color: var(--gb-text-muted); }

.gb-gift-trail{ display: flex; align-items: center; gap: 6px; }
.gb-trail-name{ font-weight: 500; }
.gb-trail-line{
  width: 30px; height: 1px;
  background-image: linear-gradient(to right, var(--gb-gold) 50%, transparent 50%);
  background-size: 6px 1px;
  position: relative;
  flex-shrink: 0;
}
.gb-trail-line::after{
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gb-gold);
}

.gb-badge{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.gb-badge::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; }
.gb-badge.gb-completed, .gb-badge.gb-active{ background: var(--gb-success-bg); color: var(--gb-success); }
.gb-badge.gb-completed::before, .gb-badge.gb-active::before{ background: var(--gb-success); }
.gb-badge.gb-pending{ background: var(--gb-warning-bg); color: var(--gb-warning); }
.gb-badge.gb-pending::before{ background: var(--gb-warning); }
.gb-badge.gb-failed{ background: var(--gb-danger-bg); color: var(--gb-danger); }
.gb-badge.gb-failed::before{ background: var(--gb-danger); }
.gb-badge.gb-review, .gb-badge.gb-manual{ background: var(--gb-gold-light); color: var(--gb-gold); }
.gb-badge.gb-review::before, .gb-badge.gb-manual::before{ background: var(--gb-gold); }

.gb-pill{
  background: var(--gb-green-light);
  color: var(--gb-green);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.gb-btn{
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  background: var(--gb-surface);
  color: var(--gb-text);
  border: 1px solid var(--gb-border-strong);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gb-btn:hover{ border-color: var(--gb-gold); }
.gb-btn-primary{
  background: var(--gb-green);
  color: #fff;
  border: none;
  font-weight: 600;
}
.gb-btn-primary:hover{ filter: brightness(1.15); }

.gb-empty-state{
  text-align: center;
  padding: 64px 24px;
  color: var(--gb-text-muted);
}
.gb-empty-state .gb-empty-icon{
  width: 46px; height: 46px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gb-gold-light);
  color: var(--gb-gold);
  display: flex; align-items: center; justify-content: center;
}
.gb-empty-state h3{ font-family: var(--gb-font-display); font-size: 19px; color: var(--gb-green-deep); font-weight: 500; margin-bottom: 6px; }
.gb-empty-state p{ font-size: 13px; max-width: 420px; margin: 0 auto; }

.gb-avatar{
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--gb-gold), var(--gb-green));
  margin-right: 8px; vertical-align: middle; flex-shrink: 0;
}
.gb-person{ display: inline-flex; align-items: center; }

.gb-app ::-webkit-scrollbar{ height: 8px; width: 8px; }
.gb-app ::-webkit-scrollbar-thumb{ background: var(--gb-border-strong); border-radius: 4px; }

/* ---------- Filters / search / selects (list-page toolbars) ---------- */
.gb-filter-row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.gb-select{
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  background: var(--gb-surface);
  color: var(--gb-text);
  border: 1px solid var(--gb-border-strong);
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
}
.gb-select:hover{ border-color: var(--gb-gold); }

.gb-mini-search{ position: relative; }
.gb-mini-search input{
  font-family: var(--gb-font-body);
  font-size: 12.5px;
  background: var(--gb-surface);
  color: var(--gb-text);
  border: 1px solid var(--gb-border-strong);
  border-radius: 7px;
  padding: 6px 10px 6px 28px;
  cursor: text;
  width: 190px;
}
.gb-mini-search input:focus{ outline: none; border-color: var(--gb-gold); }
.gb-mini-search svg{ position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--gb-text-faint); pointer-events: none; }

/* ---------- Row actions (per-row edit/delete buttons in a .gb-table) ---------- */
.gb-row-actions{ display: flex; gap: 6px; justify-content: flex-end; }
.gb-row-actions button{
  background: none; border: 1px solid var(--gb-border-strong); color: var(--gb-text-muted);
  border-radius: 6px; padding: 4px 9px; font-size: 11.5px; cursor: pointer;
  font-family: var(--gb-font-body);
  display: inline-flex; align-items: center; gap: 4px;
}
.gb-row-actions button:hover{ color: var(--gb-green); border-color: var(--gb-gold); }
.gb-row-actions button.gb-danger:hover{ color: var(--gb-danger); border-color: var(--gb-danger); }
.gb-row-actions img{ width: 15px; height: 15px; vertical-align: middle; }

/* ---------- Panel footer / pagination ---------- */
.gb-panel-foot{
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  font-size: 12px;
  color: var(--gb-text-faint);
  flex-wrap: wrap;
  gap: 10px;
}
.gb-page-btns{ display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.gb-page-btns a, .gb-page-btns span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--gb-border-strong);
  background: none; color: var(--gb-text-muted); font-size: 11.5px;
  text-decoration: none;
  padding: 0 6px;
}
.gb-page-btns a:hover{ border-color: var(--gb-gold); color: var(--gb-green); }
.gb-page-btns .gb-page-current{ background: var(--gb-gold); color: #fff; border-color: transparent; font-weight: 700; }

/* ---------- Empty column count fallback for narrow tables ---------- */
.gb-table .gb-cell-muted{ color: var(--gb-text-faint); }

/* ---------- Settings-style panels (toggle switches, field rows) ---------- */
.gb-setting-block{
  background: var(--gb-surface);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.gb-setting-block h4{ font-family: var(--gb-font-display); font-size: 15px; font-weight: 500; margin-bottom: 3px; color: var(--gb-green-deep); }
.gb-setting-block p.gb-desc{ color: var(--gb-text-muted); font-size: 12px; margin-bottom: 14px; }
.gb-field-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--gb-border);
  gap: 20px;
  flex-wrap: wrap;
}
.gb-field-row:last-child{ border-bottom: none; }
.gb-field-label{ font-size: 13px; font-weight: 500; }
.gb-field-hint{ font-size: 11.5px; color: var(--gb-text-faint); margin-top: 2px; }
.gb-field-control input[type="text"], .gb-field-control input[type="number"]{
  background: var(--gb-surface-alt); border: 1px solid var(--gb-border-strong); border-radius: 7px;
  color: var(--gb-text); padding: 6px 10px; font-size: 13px; width: 160px; font-family: var(--gb-font-mono);
}

.gb-toggle{ position: relative; width: 38px; height: 21px; flex-shrink: 0; display: inline-block; }
.gb-toggle input{ opacity: 0; width: 0; height: 0; }
.gb-toggle-track{
  position: absolute; inset: 0; background: var(--gb-border-strong); border-radius: 20px; cursor: pointer; transition: 0.15s;
}
.gb-toggle-track::after{
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.gb-toggle input:checked + .gb-toggle-track{ background: var(--gb-green); }
.gb-toggle input:checked + .gb-toggle-track::after{ transform: translateX(17px); }

/* Small screens: collapse sidebar to icons-only isn't implemented yet;
   keep it usable by letting the whole shell scroll horizontally rather
   than clipping the sidebar. */
@media (max-width: 720px){
  .gb-sidebar{ width: 200px; }
  .gb-content{ padding: 18px 16px 40px; }
}