/* === Android POS Theme (Gradient Boost) === */
:root{
  --brand:#0ea5e9;      /* sky-500 */
  --brand2:#2563eb;     /* blue-600 */
  --brand3:#1e40af;     /* blue-800 */
  --fg:#0f172a;
  --muted:#64748b;
  --success:#22c55e;
  --danger:#ef4444;
  --warn:#f59e0b;
  --bg1:#e9f2ff;
  --bg2:#eaf0ff;
  --bg3:#e6e9ff;
  --card:#ffffff;
  --ring:rgba(14,165,233,.25);
}

/* Background: layered gradient + subtle pattern for "padet" look */
html,body{
  min-height:100%;
  background: radial-gradient(1200px 600px at -10% -10%, rgba(14,165,233,.18), transparent 60%),
              radial-gradient(1200px 600px at 110% -20%, rgba(37,99,235,.20), transparent 60%),
              linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
}
/* optional fine grid pattern */
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image: linear-gradient(rgba(2,6,23,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(2,6,23,.03) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}

/* Navbar with strong gradient */
.navbar{background:linear-gradient(90deg,var(--brand2),var(--brand3))!important;box-shadow:0 10px 28px rgba(2,6,23,.12)}
.navbar-brand{letter-spacing:.3px}

/* Hero band (header section inside page) */
.hero-band{
  background: linear-gradient(135deg, rgba(14,165,233,.25), rgba(37,99,235,.25));
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 24px rgba(2,6,23,.08);
  margin-bottom: 14px;
}

/* Cards */
.card-soft{border:none;border-radius:20px;background:var(--card);box-shadow:0 14px 30px rgba(2,6,23,.08)}
.card-soft .card-header{background:linear-gradient(90deg,rgba(14,165,233,.12),rgba(37,99,235,.12));border-bottom:none;border-radius:20px 20px 0 0}

/* Buttons */
.btn{border-radius:14px}
.btn-primary{background:var(--brand2);border-color:var(--brand2)}
.btn-primary:hover{background:var(--brand3);border-color:var(--brand3)}
.btn-success{background:var(--success);border-color:var(--success)}
.btn-outline-primary{color:var(--brand2);border-color:var(--brand2)}
.btn-outline-primary:hover{background:var(--brand2);border-color:var(--brand2)}

/* Inputs */
.form-control{border-radius:14px;border-color:#e2e8f0}
.form-control:focus{border-color:var(--brand2);box-shadow:0 0 0 .25rem var(--ring)}

/* Table */
.table{background:#fff}
.table td,.table th{vertical-align:middle}
.table-hover tbody tr:hover{background:#f1f5ff}

/* FAB & Paybar */
.fab-scan{
  position:fixed;right:18px;bottom:96px;z-index:1030;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  box-shadow:0 12px 30px rgba(2,6,23,.24);
  border:none;
}
.fab-scan:active{transform:scale(.98)}

.paybar{
  position:fixed;left:0;right:0;bottom:0;z-index:1029;
  background:linear-gradient(90deg,var(--brand2),var(--brand3));
  color:#fff;box-shadow:0 -12px 24px rgba(2,6,23,.16);
  padding:.8rem .9rem;
}
.paybar .total{font-weight:800;font-size:1.25rem}