/* -------------------------------------------------------------------------- 
   Cleaned Theme CSS — single-file
   Palette and components tuned to your uploaded logo.
   Replace your existing theme.css with this file (backup first).
   -------------------------------------------------------------------------- */

/* =========================
   1) Theme variables
   ========================= */
:root {
  /* Palette (extracted from logo) */
  --color-bg: #fefdfb; /* off-white */
  --color-monitor: #308b64; /* monitor green */
  --color-primary: #034874; /* deep brand blue (header / primary) */
  --color-accent: #1174a3; /* tile blue accent */
  --color-yellow: #f7c306; /* tile blue accent */
  --color-skyblue: #0dcaf0; /* tile blue accent */
  --tile-orange: #f57c10;
  --tile-yellow: #f7c306;
  --tile-purple: #6e4b93;
  --tile-teal: #67999f;
  --teal-secondary: #0dcaf0;
  /* neutrals and text */
  --text-dark: #163047;
  --text-light: #ffffff;
  --muted: #6b7a86;
  /* layout tokens */
  --radius-md: 12px;
  --tile-radius: 14px;
  --glass-alpha: 0.66;
  /* shadows */
  --shadow-soft: 0 8px 22px rgba(10,20,40,0.06);
  --shadow-glow: 0 18px 48px rgba(3,72,116,0.08);
  /* transitions */
  --ease-fast: 200ms cubic-bezier(.2,.9,.2,1);
}

/* Bootstrap token overrides (light, safe) */
:root{
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--text-dark);
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-accent);
  --bs-success: #79B93C;
  --bs-warning: var(--tile-yellow);
  --bs-danger: #F17228;
  --bs-font-sans-serif: "Source Sans Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================
   2) Base reset (concise)
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--bs-font-sans-serif);
  color:var(--bs-body-color);
  background:linear-gradient(180deg,var(--color-bg), #f6f8fa);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

/* links */
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* headings */
h1,h2,h3,h4,h5{color:var( --color-accent) !important; margin:0 0 .4rem 0}

/* small helpers */
.small{font-size:.875rem;color:var(--muted)}
.text-muted{color:var(--muted)}
.app-title {
  color: var(--color-primary) !important;
}
/* =========================
   3) Header / topbar
   ========================= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem;
  background: linear-gradient(90deg,var(--monitor-green), var(--color-primary));
  color: var(--text-light);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 1100;
}
.brand {
  display:flex; align-items:center; gap:.6rem;
  font-weight:800; font-size:1.05rem;
}
.page-title {
  color: var(--tile-orange) !important; /* brand blue */
  font-weight: 800;
  font-size: 1.6rem; /* adjust for desktop */
  letter-spacing: 0.2px;
  margin: 0 0 0.4rem 0;
}
.group-title {
  color: var(--color-skyblue) !important; /* brand blue */
  font-weight: 800;
  font-size: 1.0rem; /* adjust for desktop */
  letter-spacing: 0.2px;
  margin: 0 0 0.4rem 0;
}

@media (max-width: 767px) {
  .page-title {
    font-size: 1.2rem;
  }
}
.brand .logo-frame {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(90deg,var(--monitor-green), var(--color-primary));
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border: 3px solid rgba(255,255,255,0.06);
}

/* search */
.search-wrap{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,0.12);padding:.4rem .6rem;border-radius:8px}
.search-wrap input{border:none;background:transparent;color:#fff;outline:none;min-width:180px}

/* =========================
   4) Buttons
   ========================= */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:10px;padding:.45rem .7rem;border:0;cursor:pointer;font-weight:600}
.btn-primary{
  background:linear-gradient(90deg,var(--color-primary), #0c84b6);
  color:var(--text-light);
  box-shadow:0 10px 28px rgba(3,72,116,0.08);
  transition:transform var(--ease-fast), box-shadow var(--ease-fast);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow-glow)}
.btn-outline{background:transparent;border:1px solid rgba(3,72,116,0.08); color:var(--color-primary)}

/* small pills */
.kpi{background:rgba(255,255,255,0.92);padding:.5rem .9rem;border-radius:10px; box-shadow:var(--shadow-soft)}

/* =========================
   5) Glass panels & cards
   ========================= */
.panel-glass{
  background: rgba(255,255,255,var(--glass-alpha));
  border-radius:var(--radius-md);
  padding:1rem;
  box-shadow:var(--shadow-soft);
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast);
}
.panel-glass:hover{transform:translateY(-6px); box-shadow:var(--shadow-glow)}

/* =========================
   6) Tile grid (colorful call-to-action tiles)
   ========================= */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin:12px 0;
}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:110px;padding:12px;border-radius:var(--tile-radius);color:var(--text-light);
  cursor:pointer; border:0; box-shadow:0 10px 30px rgba(8,20,40,0.06);
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), filter var(--ease-fast);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.tile:active{transform:scale(.995)}
.tile:focus{outline:3px solid rgba(255,255,255,0.12);outline-offset:2px}
.tile .tile-icon{font-size:26px;margin-bottom:8px; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.12))}
.tile .tile-title{font-weight:800}
.tile .tile-price{font-weight:700;margin-top:6px}

/* tile variants */
.tile-orange{background:linear-gradient(180deg,var(--tile-orange), #ff9b66); color:#111}
.tile-purple{background:linear-gradient(180deg,var(--tile-purple), #a37bff); color:var(--text-light)}
.tile-blue{background:linear-gradient(180deg,var(--color-accent), #4fa5ff); color:var(--text-light)}
.tile-yellow{background:linear-gradient(180deg,var(--tile-yellow), #ffd66a); color:#111}
.tile-secondary {
  background: linear-gradient(180deg,var(--teal-secondary), #ffd66a);
  color: #111
}

/* tile hover lift */
.tile:hover{transform:translateY(-8px) scale(1.02); box-shadow: 0 18px 48px rgba(8,20,60,0.12); filter:saturate(1.05)}

/* tile sizes */
.tile-lg{min-height:150px}
.tile-sm{min-height:92px;padding:10px;font-size:.95rem}

/* quick visual feedback */
.tile.pulse{animation: tilePulse 320ms ease-out}
@keyframes tilePulse{0%{transform:scale(1)}50%{transform:scale(.98)}100%{transform:scale(1)}}

/* =========================
   7) Order/cart & alternating rows
   ========================= */
.order-list, .cart-list{
  min-height:120px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  padding:8px; box-shadow:var(--shadow-soft);
}
.alt-row{
  background: linear-gradient(90deg, rgba(250,250,255,0.72), rgba(243,246,250,0.72));
  border-left:6px solid rgba(11,116,209,0.06);
  padding:.6rem .8rem; border-radius:8px; margin:6px 0;
  transition: transform var(--ease-fast);
}
.alt-row:hover{transform:translateX(4px); background:linear-gradient(90deg, rgba(255,255,255,0.9), rgba(245,249,255,0.9));}

/* =========================
   8) Tables (stylish alternating rows)
   ========================= */
.table.table-styled{width:100%; border-collapse:separate; border-spacing:0; font-family:inherit}
.table.table-styled thead th{color:var(--muted); font-weight:700; border-bottom:1px solid rgba(10,20,40,0.04)}
.table.table-styled tbody tr.alt-row{background: linear-gradient(90deg, rgba(250,250,255,0.72), rgba(243,246,250,0.72));}
.table.table-styled td, .table.table-styled th{padding:.6rem .75rem; vertical-align:middle}

/* =========================
   9) Forms (clean inputs)
   ========================= */
.form-control{
  display:block;width:100%;padding:.5rem 1rem;border-radius:.6rem;border:1px solid #E0E0E0;
  background:#F5F5F5;color:var(--text-dark); transition:box-shadow .15s ease, border-color .15s ease;
}
.form-control:focus{outline:0;border-color:var(--tile-yellow); box-shadow:0 0 0 .25rem rgba(247,195,6,0.12)}
.form-select{appearance:none;padding:.5rem 1rem;border-radius:.6rem;border:1px solid #E0E0E0;background:#F5F5F5}

/* placeholder color */
.form-control::placeholder{color:#BDBDBD; opacity:1}

/* =========================
   10) Utility classes
   ========================= */
.hidden{display:none!important}
.center{display:flex;align-items:center;justify-content:center}
.pulse{animation:tilePulse .34s ease-out}

/* ripple helper (requires small JS to insert span.ripple-effect) */
.ripple{position:relative; overflow:hidden}
.ripple .ripple-effect{
  position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.18);
  animation:rippleAnim 620ms cubic-bezier(.2,.9,.2,1);
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* =========================
   11) Responsive tweaks
   ========================= */
@media (min-width:1200px){
  .tile-grid{grid-template-columns:repeat(4,1fr)}
  .tile-lg{min-height:170px}
}
@media (max-width:991px){
  .search-wrap{display:none}
  .tile-grid{gap:8px}
  .brand .logo-frame{width:38px;height:30px}
}

/* =========================
   12) Accessibility & focus
   ========================= */
:focus{outline-offset:3px}
.btn:focus, .tile:focus{box-shadow:0 0 0 3px rgba(3,72,116,0.08)}

/* =========================
   13) Small helpers to map older selectors
   (keep compatibility with your HTML)
   ========================= */
/* Data-grid compatibility */
.sft-data-grid{background-color:#faefd6}
.sft-data-grid .header, .sft-data-grid th{background-color:var(--tile-yellow); color:#fff}
.sft-data-grid tr td{background-color:#eaf8dd; border:1px solid rgba(241,140,42,0.08); color:var(--muted)}
.sft-data-grid tr:nth-child(2n+1) td{background:#fff}

/* small icon favorite */
.fas-fav{background:transparent;color:var(--text-light);cursor:pointer;transition:transform .25s ease}
.fas-fav.enabled{color:var(--color-monitor)}
.fas-fav:hover{transform:scale(1.15); box-shadow:0 6px 20px rgba(0,0,0,0.12)}

/* badge tweak */
.badge.bg-success{padding:.35rem .6rem}

/* =========================
   14) End
   ========================= */

/* Notes:
   - If browser lacks backdrop-filter, panels fall back to semi-opaque white.
   - To change theme colors, edit :root variables at top.
   - Want SASS partials or a minified version? Tell me and I’ll generate them.
*/