:root{
  /* Brand */
  --primary:#4F46E5;
  --primary-hover:#4338CA;
  --primary-light:#EEF2FF;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;

  /* Layout */
  --sidebar-bg:#F8F9FA;
  --sidebar-width:200px;
  --topbar-height:56px;
  --card-bg:#FFFFFF;
  --page-bg:#F8F9FA;

  /* Surfaces & borders */
  --border-color:#E5E7EB;
  --border-radius:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.1);

  /* Text */
  --text-primary:#111827;
  --text-secondary:#6B7280;
  --text-muted:#9CA3AF;

  /* Typography */
  --font-main:'Inter',-apple-system,sans-serif;

  /* Derived warning UI (keep theme in one place) */
  --warning-box-bg:#FFFBEB;
  --warning-progress-bg:#FDE68A;
}

/* ----------------------------------------------
   Global BookSlot theme defaults
----------------------------------------------- */
html,body{
  height:100%;
}

body{
  font-family:var(--font-main) !important;
  color:var(--text-primary);
  background:var(--page-bg);
}

/* ----------------------------------------------
   Cards
----------------------------------------------- */
.bs-card{
  background:var(--card-bg);
  border-radius:var(--border-radius);
  border:1px solid var(--border-color);
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
}

/* ----------------------------------------------
   Buttons (Bootstrap override)
----------------------------------------------- */
.btn-primary{
  background-color:var(--primary);
  border-color:var(--primary);
}

.btn-primary:hover{
  background-color:var(--primary-hover);
  border-color:var(--primary-hover);
}

.btn-primary:focus,.btn-primary:active{
  background-color:var(--primary);
  border-color:var(--primary);
}

/* ----------------------------------------------
   Form inputs
----------------------------------------------- */
.form-control,.form-select{
  border:1px solid var(--border-color);
  border-radius:var(--border-radius);
  padding:8px 12px;
}

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

/* ----------------------------------------------
   Admin Layout — CSS-only design system
----------------------------------------------- */

/* Sidebar */
.bs-admin-sidebar{
  position:fixed;
  top:0;
  left:0;
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border-color);
  height:100vh;
  overflow-y:auto;
  z-index:1030;
}

.bs-admin-sidebar-inner{
  height:100%;
}

/* Sidebar logo */
.bs-admin-logo{
  padding:16px;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0.1px;
}

.bs-admin-logo .book{
  color:var(--primary);
}

.bs-admin-logo .slot{
  color:var(--text-primary);
}

/* Nav items */
.bs-admin-nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  font-size:13px;
  color:var(--text-secondary);
  cursor:pointer;
  border-left:3px solid transparent;
  transition:all 0.15s ease-in-out;
  text-decoration:none;
}

.bs-admin-nav-item svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}

.bs-admin-nav-item:hover{
  background:var(--card-bg);
  color:var(--text-primary);
}

.bs-admin-nav-item.active{
  border-left-color:var(--primary);
  color:var(--primary);
  font-weight:500;
  background:var(--card-bg);
}

/* Nav section labels */
.bs-admin-section-label{
  font-size:11px;
  color:var(--text-muted);
  padding:16px 16px 4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Credit warning box */
.bs-admin-credit-box{
  margin:12px;
  padding:10px 12px;
  background:var(--warning-box-bg);
  border:1px solid var(--warning);
  border-radius:var(--border-radius);
}

.bs-admin-credit-label{
  font-size:12px;
  color:var(--text-secondary);
  margin-bottom:8px;
}

.bs-admin-credit-progress{
  height:4px;
  background:var(--warning-progress-bg);
  border-radius:999px;
  overflow:hidden;
}

.bs-admin-credit-progress-fill{
  height:100%;
  background:var(--warning);
  width:0%;
  transition:width 0.2s ease-in-out;
}

.bs-admin-credit-used-text{
  margin-top:8px;
  font-size:12px;
  color:var(--text-primary);
  font-weight:500;
}

/* Topbar */
.bs-admin-topbar{
  position:fixed;
  top:0;
  left:var(--sidebar-width);
  right:0;
  height:var(--topbar-height);
  background:var(--card-bg);
  border-bottom:1px solid var(--border-color);
  display:flex;
  align-items:center;
  padding:0 20px;
  z-index:1020;
}

.bs-topbar-title{
  margin:0;
  font-size:18px;
  font-weight:700;
}

.bs-admin-business-name{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.bs-admin-business-name .label{
  font-size:12px;
  color:var(--text-muted);
}

.bs-admin-business-name .value{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  max-width:240px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Main content */
.bs-admin-main{
  margin-left:var(--sidebar-width);
  padding-top:var(--topbar-height);
  min-height:100vh;
  background:var(--page-bg);
}

.bs-admin-main-inner{
  padding:24px 20px 32px;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 767.98px){
  .bs-admin-sidebar{
    display:none;
  }

  .bs-admin-topbar{
    left:0;
  }

  .bs-admin-main{
    margin-left:0;
  }

  .bs-admin-main-inner{
    padding:20px 16px 28px;
  }
}

/* Login page */
.bs-login-bg{
  min-height:100vh;
  background:var(--page-bg);
}

.bs-login-card{
  max-width:420px;
  width:100%;
}

.bs-login-error{
  color:var(--danger);
  font-size:13px;
}

.bs-login-logo{
  font-size:20px;
  font-weight:700;
}

.bs-login-logo .book{
  color:var(--primary);
}

.bs-login-logo .slot{
  color:var(--text-primary);
}