/* ============= FleetLite v2 Theme (Banani-like) =============
   Adjust variables below to match your exact design.
===============================================================*/

:root{
  /* Colors */
  --color-bg: #F6F7F9;
  --color-card: #FFFFFF;
  --color-text: #111827;
  --color-muted: #6B7280;
  --color-border: #E6E8EB;

  --color-primary: #0EA5E9;
  --color-primary-ink: #FFFFFF;

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  --badge-ok-bg:   #E9F7EF;
  --badge-due-bg:  #FFE8E6;
  --badge-exp-bg:  #FEF3C7;

  /* Elevation */
  --shadow-card: 0 8px 24px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);

  /* Radii */
  --radius-card: 16px;
  --radius-ctl:  12px;
  --radius-badge: 999px;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* Table */
  --table-row-h: 48px;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --h1: 24px; --h2: 20px; --body: 15px; --small: 13px;
  --weight-regular: 400; --weight-semibold: 600;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--body);
  color:var(--color-text);
  background:var(--color-bg);
}

/* Layout */
.container{max-width:1120px;margin:calc(var(--space-8) + 8px) auto;padding:0 var(--space-4)}
.card{
  background:var(--color-card);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:var(--space-6);
  margin-bottom:var(--space-4);
}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.col{flex:1;min-width:260px}

/* Top Nav */
.navwrap{
  position:sticky;top:0;z-index:20;
  background:rgba(246,247,249,.75);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--color-border);
}
.nav{
  max-width:1120px;margin:0 auto;padding:10px var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--weight-semibold)}
.brand img{height:28px;width:auto}
.nav a{color:var(--color-text);text-decoration:none;padding:8px 10px;border-radius:10px}
.nav a:hover{background:#eee}
.spacer{flex:1}
.user{font-size:var(--small);color:var(--color-muted)}

/* Headings */
h1{font-size:var(--h1);margin:0 0 var(--space-3);font-weight:var(--weight-semibold)}
h2{font-size:var(--h2);margin:var(--space-5) 0 var(--space-3);font-weight:var(--weight-semibold)}
.small{font-size:var(--small);color:var(--color-muted)}

/* Inputs & Buttons */
.input{
  width:100%;padding:12px;border:1px solid var(--color-border);
  border-radius:var(--radius-ctl);outline:none;background:#fff;
  transition:border .15s, box-shadow .15s;
}
.input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--color-border);
  background:#fff;cursor:pointer;
}
.btn:hover{background:#f3f4f6}
.btn.primary{background:var(--color-primary);color:var(--color-primary-ink);border-color:var(--color-primary)}
.btn.ghost{background:transparent}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{
  padding:12px var(--space-4);border-bottom:1px solid var(--color-border);
  text-align:left;height:var(--table-row-h);vertical-align:middle
}
.table thead th{font-size:var(--small);text-transform:uppercase;letter-spacing:.02em;color:var(--color-muted)}
.table tbody tr:hover{background:#fafafa}

/* Badges */
.badge{padding:4px 10px;border-radius:var(--radius-badge);font-size:var(--small);border:1px solid var(--color-border);display:inline-block}
.badge.ok{background:var(--badge-ok-bg)}
.badge.due{background:var(--badge-due-bg)}
.badge.exp{background:var(--badge-exp-bg)}

/* Notices */
.notice{
  padding:12px;border-left:4px solid var(--color-primary);
  background:color-mix(in srgb, var(--color-primary) 12%, #fff);
  border-radius:12px;
}

/* Media */
.avatar{width:240px;max-width:100%;border-radius:14px;border:1px solid var(--color-border);display:block}

/* Auth Screen */
.authwrap{display:grid;place-items:center;min-height:100vh;padding:var(--space-8)}
.authcard{width:min(480px, 92vw)}
.authbrand{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.authbrand img{height:36px}
.help{color:var(--color-muted);font-size:var(--small)}