css
rd
/* revwise-theme.css */

/* === Design tokens === */
:root{
  /* Brand */
  --brand-600:#00C37A; /* RevWise green (primary) */
  --brand-700:#00A265;
  --brand-50:#ECFFF7;

  /* Neutrals */
  --bg:#0F1115;           /* page bg (dark mode default) */
  --surface:#141821;      /* cards/nav */
  --elev:#1A2030;         /* elevated panels */
  --text:#E9EDF3;
  --muted:#A6B1C2;
  --divider:#2A3142;

  /* Light mode */
  --bg-light:#ebf2f7;
  --surface-light:#FFFFFF;
  --elev-light:#F7F9FC;
  --text-dark:#0F1115;
  --muted-dark:#5E6B82;
  --divider-light:#E6EAF2;

  /* Accents / status */
  --ok:#15C47E;
  --warn:#F59E0B;
  --err:#EF4444;
  --info:#3B82F6;

  /* Layout */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(15,17,21,.25);
  --gap-xs:6px; --gap-sm:10px; --gap:16px; --gap-md:20px; --gap-lg:28px; --gap-xl:40px;

  /* Typography (recommend Inter or Manrope) */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --h1:36px; --h2:28px; --h3:22px; --body:15px; --caption:13px;
}

/* Light mode (default if you prefer) */
html.light {
  --bg:var(--bg-light);
  --surface:var(--surface-light);
  --elev:var(--elev-light);
  --text:var(--text-dark);
  --muted:var(--muted-dark);
  --divider:var(--divider-light);
}

/* Optional: respect user preference */
@media (prefers-color-scheme: light){
  :root{ /* swap if you want light first */
    --bg:var(--bg-light);
    --surface:var(--surface-light);
    --elev:var(--elev-light);
    --text:var(--text-dark);
    --muted:var(--muted-dark);
    --divider:var(--divider-light);
  }
}



/* === Base === */
html,body{background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--body); line-height:1.5;}
*{box-sizing:border-box}
a{color:var(--brand-600); text-decoration:none}
a:hover{color:var(--brand-700)}
hr{border:0; border-top:1px solid var(--divider); margin:var(--gap-lg) 0}

/* === Layout primitives === */
.container{max-width:1200px; margin:0 auto; padding:0 var(--gap);}
.card{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius); box-shadow:var(--shadow)}
.card--elev{background:var(--elev)}
.grid{display:grid; gap:var(--gap)}
.grid.kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid.kpis{grid-template-columns:1fr}}

/* === Top nav === */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
  background:linear-gradient(180deg, rgba(20,24,33,.8), rgba(20,24,33,.6));
  border-bottom:1px solid var(--divider);}
.topbar .brand{display:flex; align-items:center; gap:10px; padding:14px var(--gap);}
.topbar .brand img{height:22px}

/* === Buttons & inputs === */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--divider); background:var(--surface); color:var(--text); transition:.2s}
.btn--primary{background:var(--brand-600); border-color:transparent; color:#0b1f16; font-weight:600}
.btn:hover{transform:translateY(-1px)}
.input, .select{height:40px; padding:8px 12px; border-radius:10px; border:1px solid var(--divider); background:var(--elev); color:var(--text)}
.input:focus, .select:focus{outline:2px solid rgba(0,195,122,.35); border-color:transparent}

/* === KPI cards === */
.kpi{padding:16px; border-radius:var(--radius); border:1px solid var(--divider); background:var(--elev)}
.kpi h3{font-size:var(--caption); color:var(--muted); margin:0 0 6px}
.kpi .value{font-size:28px; font-weight:700}
.kpi .delta{font-size:13px; color:var(--muted)}
.kpi .delta.up{color:var(--ok)}
.kpi .delta.down{color:var(--err)}

/* === Tables === */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius); border:1px solid var(--divider)}
.table thead th{position:sticky; top:0; background:var(--surface); text-align:left; font-size:13px;
  color:var(--muted); padding:12px; border-bottom:1px solid var(--divider)}
.table tbody td{padding:12px; border-bottom:1px solid var(--divider)}
.table tbody tr:hover{background:rgba(255,255,255,.03)}
.badge{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--divider); background:var(--surface)}
.badge--ok{color:var(--ok); border-color:rgba(21,196,126,.35); background:rgba(21,196,126,.08)}
.badge--warn{color:var(--warn); border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08)}
.badge--err{color:var(--err); border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08)}

/* === Filters bar === */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px; margin-bottom:var(--gap); border-bottom:1px solid var(--divider)}
.filters .pill{padding:8px 12px; border-radius:999px; background:var(--elev); border:1px solid var(--divider); color:var(--muted)}

/* === Charts (global theming if using Chart.js/Highcharts) === */
:root{
  --chart-grid: rgba(166,177,194,.25);
  --chart-text: var(--muted);
}
canvas, .chart{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius); padding:12px}

body {
    background-color: #ebf2f7;
    padding: 20px;
}
nav {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #f9fcff;
}

nav .text-sm {
    font-size: 1rem;
}
.rw-gray-100 {
    background-color: #F3F9FC;
}
.btn-info {
    background-color: #363636;
    color: #FFF;
}
.btn-primary {
    background-color: #0BC840;
    color: #FFF;
}
header .text-xl {
    font-size: 2rem;
}
.statistic__item {
    width: 250px;   
}
.text-success {
    color: #0BC840;
}
.text-danger {
    color: #DB1515;
}

.input, .select {
    background-color: #FFF;
    appearance: auto;
}
.select {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}
.table {
    background-color: #FFF;
}
.dt-input {
    border:0;
}
.dt-length, .dt-info {
    padding-left: 5px;
}
.dt-search {
    padding-right: 5px;
}
.table thead {
    background-color:#F3F9FC;
}

.table tbody tr:nth-of-type(2n) {
  background-color: #f9fcff;
}

.table a i {
    background-color: #FFF;
    color: #3e8d95;
}
/* === Print/PDF tidy === */
@media print{
  body{background:#fff; color:#000}
  .topbar{display:none}
  .card, .kpi, .table, canvas{box-shadow:none; border-color:#D0D6E2}
}