/* ============================================
   Deipo's Brand Theme — Bootstrap 5 Override
   Generated from official Deipo's Brand Book
   ============================================ */

/* 1. Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Dancing+Script:wght@600;700&display=swap');

/* 2. Deipo's Design Tokens */
:root {
  --color-primary:          #6a1918;
  --color-primary-dark:     #4a1010;
  --color-primary-light:    #8e2020;
  --color-accent:           #8e4f36;
  --color-accent-light:     #c4856a;
  --color-accent-blue:      #3b5468;
  --color-accent-blue-light:#5a7a94;
  --color-bg:               #fef4e2;
  --color-surface:          #FFFFFF;
  --color-surface-warm:     #fff8ee;
  --color-border:           #e8d8c4;
  --color-text:             #1C1C1C;
  --color-text-muted:       #6B6B6B;
  --color-text-on-primary:  #fef4e2;
  --color-success:          #2D7A4F;
  --color-warning:          #C07E00;
  --color-danger:           #C0392B;
  --color-info:             #2471A3;

  --font-heading:           'Outfit', sans-serif;
  --font-body:              'Outfit', sans-serif;
  --font-script:            'Dancing Script', cursive;
  --font-mono:              'JetBrains Mono', monospace;

  --radius-sm:              6px;
  --radius-md:              12px;
  --radius-lg:              20px;
  --shadow-card:            0 2px 8px rgba(106,25,24,.10);
  --shadow-elevated:        0 4px 16px rgba(106,25,24,.15);

  /* Bootstrap 5 override */
  --bs-primary:             #6a1918;
  --bs-primary-rgb:         106, 25, 24;
  --bs-link-color:          #6a1918;
  --bs-font-sans-serif:     'Outfit', system-ui, sans-serif;
}

/* 3. Global */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 4. Bootstrap Primary Override */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color:     var(--color-primary-dark) !important;
  color:            var(--color-text-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark) !important;
  border-color:     var(--color-primary-dark) !important;
}
.btn-outline-primary {
  color:            var(--color-primary) !important;
  border-color:     var(--color-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color:            var(--color-text-on-primary) !important;
}
.bg-primary       { background-color: var(--color-primary) !important; }
.text-primary     { color: var(--color-primary) !important; }
.border-primary   { border-color: var(--color-primary) !important; }
.badge.bg-primary { background-color: var(--color-primary) !important; }
a                 { color: var(--color-primary); }
a:hover           { color: var(--color-primary-dark); }

/* 5. Sidebar */
.sidebar, #sidebar, .nav-sidebar, aside.sidebar {
  background-color: var(--color-primary) !important;
  min-height: 100vh;
  padding: 1.5rem 1rem;
}
.sidebar .nav-link,
#sidebar .nav-link {
  color: rgba(254,244,226,.80);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sidebar .nav-link:hover,
#sidebar .nav-link:hover,
.sidebar .nav-link.active,
#sidebar .nav-link.active {
  background-color: var(--color-primary-dark);
  color: #fff;
}
.sidebar .nav-link i,
#sidebar .nav-link i {
  opacity: .75;
}
.sidebar .nav-link.active i,
#sidebar .nav-link.active i {
  opacity: 1;
}

/* 6. Navbar */
.navbar, .topbar, .top-navbar {
  background-color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary-dark);
}
.navbar-brand, .navbar .nav-link {
  color: var(--color-text-on-primary) !important;
}

/* 7. Cards */
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background-color: var(--color-surface);
}
.card-header {
  background-color: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

/* 8. Tables */
.table thead th {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 600;
  font-family: var(--font-heading);
}
.table tbody tr:hover {
  background-color: var(--color-surface-warm);
}

/* 9. Form inputs */
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 .25rem rgba(106,25,24,.15);
}

/* 10. Logo */
.cafe-logo         { max-height: 52px; object-fit: contain; }
.cafe-logo-sm      { max-height: 36px; object-fit: contain; }
.cafe-logo-login   { max-height: 140px; object-fit: contain; }
.cafe-logo-receipt { max-height: 90px; object-fit: contain; }

/* 11. Tagline */
.cafe-tagline {
  font-family: var(--font-script);
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .5px;
}

/* 12. Login page */
.login-wrapper, .login-container, .auth-wrapper {
  min-height: 100vh;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  max-width: 420px;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: 2.5rem;
  background: var(--color-surface);
}

/* 13. POS */
.pos-product-card {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border-radius: var(--radius-md);
}
.pos-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--color-primary-light) !important;
}
.pos-cart-header, .cart-header {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: .75rem 1rem;
  font-weight: 600;
}
.pos-checkout-btn, .btn-checkout {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: .75rem;
  width: 100%;
  border: none;
}
.pos-checkout-btn:hover { background-color: var(--color-primary-dark) !important; }

/* 14. Receipt */
.receipt-header {
  text-align: center;
  padding: 1rem;
  border-bottom: 2px dashed var(--color-accent);
}
.receipt-footer {
  text-align: center;
  padding: 1rem;
  border-top: 2px dashed var(--color-accent);
  font-family: var(--font-script);
  color: var(--color-accent);
  font-size: 1rem;
}

/* ============================================
   15. System-specific mapping
   Applies the brand to the class names this
   app's markup actually uses.
   ============================================ */

/* Navbar */
.app-navbar .navbar-brand { padding-top: .2rem; padding-bottom: .2rem; }
.app-navbar .nav-link { opacity: .85; }
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active,
.app-navbar .nav-link.show { opacity: 1; }
.app-navbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -2px 0 var(--color-accent-light); }
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--color-primary);
  --bs-dropdown-link-active-color: var(--color-text-on-primary);
  --bs-dropdown-link-hover-bg: var(--color-surface-warm);
  border-color: var(--color-border);
  box-shadow: var(--shadow-elevated);
}

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 600;
}
.modal-title { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted) !important; }

/* Tables: header cells stay burgundy even inside .table-light; warm hover row */
.table { --bs-table-hover-bg: var(--color-surface-warm); --bs-table-striped-bg: rgba(254,244,226,.55); }
.table thead th { border-color: var(--color-primary-dark); }
.table thead th a { color: var(--color-text-on-primary); }

/* Buttons used across the app */
.btn { font-family: var(--font-body); font-weight: 500; }
.btn-dark {
  --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-dark); --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-primary-dark); --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-color: var(--color-text-on-primary); --bs-btn-hover-color: var(--color-text-on-primary); --bs-btn-active-color: var(--color-text-on-primary);
}
.btn-outline-dark {
  --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-bg: var(--color-surface-warm); --bs-btn-hover-color: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary-light);
  --bs-btn-active-bg: var(--color-primary); --bs-btn-active-color: var(--color-text-on-primary); --bs-btn-active-border-color: var(--color-primary);
  background-color: var(--color-surface);
}
.btn-secondary {
  --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: #74402c; --bs-btn-hover-border-color: #74402c;
  --bs-btn-active-bg: #74402c; --bs-btn-active-border-color: #74402c;
}
.btn-outline-secondary {
  --bs-btn-color: var(--color-accent); --bs-btn-border-color: var(--color-accent-light);
  --bs-btn-hover-bg: var(--color-accent); --bs-btn-hover-border-color: var(--color-accent); --bs-btn-hover-color: var(--color-text-on-primary);
  --bs-btn-active-bg: var(--color-accent); --bs-btn-active-border-color: var(--color-accent);
}
.btn-success, .text-bg-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-hover-bg: #236140; --bs-btn-hover-border-color: #236140; }
.text-bg-success { background-color: var(--color-success) !important; }
.text-bg-danger  { background-color: var(--color-danger) !important; }
.text-bg-info    { background-color: var(--color-accent-blue) !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--color-accent) !important; }
.text-bg-dark    { background-color: var(--color-primary) !important; color: var(--color-text-on-primary) !important; }
.text-success    { color: var(--color-success) !important; }
.text-danger     { color: var(--color-danger) !important; }
.btn-link { --bs-btn-color: var(--color-primary); --bs-btn-hover-color: var(--color-primary-dark); }

/* Forms */
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 .25rem rgba(106,25,24,.15); }
.form-control, .form-select, .input-group-text { border-color: var(--color-border); }
.input-group-text { background-color: var(--color-surface-warm); }

/* Tabs, lists, alerts */
.nav-tabs { border-bottom-color: var(--color-border); }
.nav-tabs .nav-link { color: var(--color-accent); }
.nav-tabs .nav-link.active { color: var(--color-primary); font-weight: 600; background: var(--color-surface); border-color: var(--color-border) var(--color-border) var(--color-surface); }
.list-group { --bs-list-group-border-color: var(--color-border); --bs-list-group-action-hover-bg: var(--color-surface-warm); }
.modal-content { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); }
.modal-header { border-bottom-color: var(--color-border); }
.modal-footer { border-top-color: var(--color-border); }
.card-footer { background-color: var(--color-surface-warm); border-top-color: var(--color-border); }
.card-body.border-bottom, .card-body.border-top { border-color: var(--color-border) !important; }

/* POS product tiles & cart */
.product-tile { border-color: var(--color-border); border-radius: var(--radius-md); transition: transform .15s, box-shadow .15s, border-color .15s; }
.product-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); border-color: var(--color-primary-light); }
.product-tile.in-cart { border-color: var(--color-primary-light); background: var(--color-surface-warm); }
.product-tile .product-name { color: var(--color-text); }
.product-tile .product-price { color: var(--color-accent); }
.product-qty { background: var(--color-primary); color: var(--color-text-on-primary); }
.order-panel .pos-cart-header { display: flex; justify-content: space-between; align-items: baseline; }
.order-panel .pos-cart-header .cafe-tagline { color: var(--color-accent-light); font-size: 1rem; }
.pos-checkout-btn:disabled { opacity: .55; }
.cart-line { border-bottom-color: var(--color-border); }
.customer-chip { background: var(--color-surface-warm); border: 1px solid var(--color-border); }

/* Receipt (modal preview) */
.receipt .receipt-header { padding-top: 0; }
.receipt .receipt-meta { margin-top: .5rem; color: var(--color-text); }
.receipt .receipt-footer { font-size: 1.25rem; margin-top: .75rem; }

/* Login */
.login-card .cafe-tagline { font-size: 1.45rem; }