/* Voomi Logistics — Brand UI (Client Palette + Hash Background)
   Palette (client):
   - Charcoal: #433F33
   - Utility Grey: #9FA097
   - Orange Accent: #E65127
   - Gold Highlight: #BCA651
   - Olive Charcoal: #49463D
*/
:root{
  --voomi-charcoal:#433F33;
  --voomi-olive:#49463D;
  --voomi-grey:#9FA097;
  --voomi-orange:#E65127;
  --voomi-gold:#BCA651;

  /* Brand-driven background (NO more purple / generic dark) */
  --bg-0: var(--voomi-charcoal);
  --bg-1: var(--voomi-olive);

  /* Glass tuned for earth-tone background */
  --glass: rgba(255,255,255,.10);
  --glass-2: rgba(255,255,255,.07);

  /* Borders slightly warm/grey, not bright white */
  --stroke: rgba(159,160,151,.30);   /* based on #9FA097 */
  --stroke-2: rgba(159,160,151,.22);

  --shadow: 0 20px 60px rgba(0,0,0,.42);
}

/* Background: hash texture + warm brand glows + charcoal/olive base */
body{
  background:
    /* Hash/texture */
    repeating-linear-gradient(135deg, rgba(159,160,151,.16) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(45deg, rgba(159,160,151,.10) 0 1px, transparent 1px 18px),

    /* Brand glows (subtle) */
    radial-gradient(1200px 700px at 18% 0%, rgba(188,166,81,.18), transparent 62%),   /* gold */
    radial-gradient(1000px 700px at 82% 10%, rgba(230,81,39,.16), transparent 60%),   /* orange */

    /* Base */
    linear-gradient(180deg, var(--bg-0), var(--bg-1));

  color: rgba(255,255,255,.92);
}

/* Glass cards */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid var(--stroke-2);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Accent glow */
.glow{ position: relative; }
.glow::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 24px;
  pointer-events:none;
  background:
    radial-gradient(820px 260px at 22% 0%, rgba(230,81,39,.20), transparent 60%),
    radial-gradient(780px 260px at 82% 20%, rgba(188,166,81,.18), transparent 55%);
  opacity:.95;
}

/* UI bits */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  border-radius:999px;
  font-size:.80rem;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--stroke);
}
.v-divider{ width:1px; background: var(--stroke); }

/* Buttons (brand) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 14px;
  padding: .75rem 1rem;
  font-weight: 600;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.btn:hover{ background: rgba(255,255,255,.12); }

.btn-primary{
  border: 1px solid rgba(230,81,39,.45);
  background: linear-gradient(180deg, rgba(230,81,39,.98), rgba(230,81,39,.82));
  box-shadow: 0 12px 28px rgba(230,81,39,.20);
}
.btn-primary:hover{
  background: linear-gradient(180deg, rgba(230,81,39,1), rgba(230,81,39,.88));
}

.btn-gold{
  border: 1px solid rgba(188,166,81,.48);
  background: linear-gradient(180deg, rgba(188,166,81,.92), rgba(188,166,81,.74));
  box-shadow: 0 12px 28px rgba(188,166,81,.18);
  color:#1b1b1b;
}
.btn-gold:hover{
  background: linear-gradient(180deg, rgba(188,166,81,1), rgba(188,166,81,.80));
}

/* Inputs focus = orange (no violet) */
input:focus, textarea:focus, select:focus{
  outline:none;
  box-shadow: 0 0 0 2px rgba(230,81,39,.40);
  border-color: rgba(230,81,39,.55);
}

/* Tiny UI helpers */
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.78rem;
  padding:.12rem .42rem;
  border-radius:.5rem;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
}
.pulse-dot{
  width:.55rem; height:.55rem;
  border-radius:999px;
  background: var(--voomi-orange);
  box-shadow: 0 0 0 0 rgba(230,81,39,.45);
  animation: pulse 1.35s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(230,81,39,.45); }
  70%{ box-shadow: 0 0 0 10px rgba(230,81,39,0); }
  100%{ box-shadow: 0 0 0 0 rgba(230,81,39,0); }
}

/* Hard override: kill any remaining Tailwind violet classes globally */
[class*="bg-violet-"]{ background: var(--voomi-orange) !important; }
[class*="text-violet-"]{ color: var(--voomi-orange) !important; }
[class*="border-violet-"]{ border-color: rgba(230,81,39,.55) !important; }
[class*="ring-violet-"]{ --tw-ring-color: rgba(230,81,39,.40) !important; }