/* BeSpoke Art Studio - custom theme
   Layered on top of Bootstrap 5 defaults. */

:root {
  --bas-primary: #7a3b2e;      /* warm terracotta */
  --bas-primary-dark: #5c2c22;
  --bas-accent: #c99a3d;       /* muted gold */
  --bas-ink: #2b2420;
  --bas-cream: #faf6f0;
}

body {
  background-color: var(--bas-cream);
  color: var(--bas-ink);
}

h1, h2, h3, h4, h5, .brand-font {
  font-family: Georgia, 'Times New Roman', serif;
}

.navbar-brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.bas-navbar {
  background-color: var(--bas-primary) !important;
}

.bas-navbar .nav-link,
.bas-navbar .navbar-brand {
  color: #fff !important;
}

.bas-navbar .nav-link:hover {
  color: var(--bas-accent) !important;
}

.btn-brand {
  background-color: var(--bas-primary);
  border-color: var(--bas-primary);
  color: #fff;
}

.btn-brand:hover {
  background-color: var(--bas-primary-dark);
  border-color: var(--bas-primary-dark);
  color: #fff;
}

.sidebar {
  background-color: #fff;
  min-height: calc(100vh - 56px);
  border-right: 1px solid #e7dfd3;
}

.sidebar .nav-link {
  color: var(--bas-ink);
  border-radius: 6px;
  margin-bottom: 2px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background-color: var(--bas-primary);
  color: #fff;
}

.sidebar .nav-link i {
  width: 1.25rem;
  display: inline-block;
}

/* Collapsible sidebar - defaults to icon-only to free up screen space;
   toggled via #sidebarToggleBtn, preference remembered in localStorage. */
.sidebar {
  transition: flex-basis 0.15s ease, width 0.15s ease;
  overflow-x: hidden;
}

.sidebar-toggle-btn {
  border: none;
  background: transparent;
  color: var(--bas-ink);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.sidebar-toggle-btn:hover {
  background-color: var(--bas-cream);
}

html.sidebar-collapsed .sidebar {
  flex: 0 0 64px;
  max-width: 64px;
}

html.sidebar-collapsed .sidebar .nav-label,
html.sidebar-collapsed .sidebar .nav-badge,
html.sidebar-collapsed .sidebar .nav-section-label,
html.sidebar-collapsed .sidebar .submenu-wrap {
  display: none !important;
}

html.sidebar-collapsed .sidebar .nav-link {
  text-align: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

html.sidebar-collapsed .sidebar .sidebar-toggle-btn {
  width: 100%;
}

html.sidebar-collapsed .sidebar .sidebar-toggle-btn i {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  html.sidebar-collapsed main {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bas-primary) 0%, var(--bas-primary-dark) 100%);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.auth-card .card-header {
  background-color: transparent;
  border-bottom: none;
  text-align: center;
  padding-top: 2rem;
}

.stat-card {
  border: none;
  border-radius: 10px;
  color: #fff;
  background-color: var(--bas-primary);
}

.stat-card.alt {
  background-color: var(--bas-accent);
  color: var(--bas-ink);
}

.table thead {
  background-color: #f1e9dd;
}

.badge-role-admin   { background-color: var(--bas-primary); }
.badge-role-manager { background-color: var(--bas-accent); color: var(--bas-ink); }
.badge-role-staff   { background-color: #8a8a8a; }

/* Shown only in the printed/PDF output (e.g. a text fallback for the
   interactive workflow canvas, which can't meaningfully print). */
.only-print {
	display: none;
}

/* Print / Export PDF support (used by the Product Preview screen) -
   hides app chrome and lets the printable content take the full page,
   so "Export PDF" (browser print -> Save as PDF) looks clean. */
@media print {
  .navbar, .sidebar, .no-print {
    display: none !important;
  }
  .only-print {
    display: block !important;
  }
  main {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }
  body {
    background-color: #fff !important;
  }
  .card {
    break-inside: avoid;
  }
}