/* RBE Utilities – Global Theme (modern, sleek, professional) */
/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.2;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}

:root{
  --bg:#041622;
  --bg-gradient:linear-gradient(180deg,#041622 0%,#071b2c 100%);
  --surface:#0b2333;
  --surface-2:#0f2e44;
  --accent:#7ed957;
  --accent2:#00ccff;
  --text:#e6f5ff;
  --muted:#8aaec5;
  --danger:#ff5b5b;
  --radius:12px;
  --shadow:0 8px 26px rgba(0,0,0,0.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,0.25);
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --pad:24px;
}

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-gradient);
  min-height:100vh;
}

/* Typography */
h1,h2,h3{margin:0 0 10px 0; font-weight:600; letter-spacing:.2px}
h1{font-size:1.8rem; color:var(--accent)}
h2{font-size:1.3rem; color:var(--accent)}
h3{font-size:1.1rem; color:var(--accent2)}
p{margin:0 0 10px 0; color:var(--text)}
a{color:#66cfff; text-decoration:none}
a:hover{color:#9ee3ff}

/* Layout */
.container{max-width:1200px; margin:0 auto; padding:20px}
.grid{display:grid; gap:12px}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Card */
.card{
  background:var(--surface-2);
  border-radius:var(--radius);
  padding:var(--pad);
  box-shadow:var(--shadow);
}
.card.flat{box-shadow:var(--shadow-sm); background:var(--surface)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:none; border-radius:999px; cursor:pointer; font-weight:600; background:linear-gradient(90deg,#7ed957,#9bff6d); color:#0a1b25; transition:transform .15s ease, box-shadow .2s}
.btn:hover{transform:translateY(-1px); box-shadow:0 0 12px rgba(126,217,87,.35)}
.btn.secondary{background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--text)}
.btn.cta{background:linear-gradient(90deg,#00ccff,#33ddff); color:#00131a}
.btn.danger{background:linear-gradient(90deg,#ff5b5b,#ff7e7e); color:#2b0000}

/* Inputs */
label{display:block; font-size:.88rem; color:var(--muted); margin-bottom:4px}
input[type="text"],input[type="number"],input[type="date"],select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#0c2536; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s
}
input:focus,select:focus,textarea:focus{border-color:var(--accent2); box-shadow:0 0 0 3px rgba(0,204,255,.12)}

/* Tables */
table{width:100%; border-collapse:collapse; background:#0b2333; color:var(--text); border-radius:12px; overflow:hidden}
th,td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left}
th{background:#0f2e44; color:var(--accent); font-weight:700}
tr:hover td{background:rgba(255,255,255,.03)}
tfoot td{background:#0f2e44}

/* Tabs */
.tabs{display:flex; gap:8px; border-bottom:1px solid rgba(255,255,255,.08); margin:20px 0; flex-wrap:wrap}
.tab{padding:10px 16px; color:var(--muted); cursor:pointer; border-radius:999px; transition:all .2s}
.tab.active{background:rgba(0,204,255,.12); color:var(--accent); border:1px solid rgba(126,217,87,.25)}
.section{display:none}
.section.active{display:block}

/* Modals */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:2000}
.modal .modal-content{background:var(--surface-2); border-radius:14px; padding:20px; width:min(680px,95vw); box-shadow:var(--shadow)}
.modal .modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.modal .close{cursor:pointer; font-size:22px; color:var(--muted)}

/* Helpers */
.muted{color:var(--muted)}
.pill{border-radius:999px; padding:4px 10px}
.tag{display:inline-block; border:1px solid rgba(126,217,87,.35); color:#7ed957; border-radius:999px; padding:2px 10px}
.right{text-align:right}
.center{text-align:center}
.mb-0{margin-bottom:0}
.mt-10{margin-top:10px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}

/* Nav bars (optional generic) */
.topbar{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:linear-gradient(90deg,#062235,#08314d); box-shadow:var(--shadow-sm)}
.topbar h1{font-size:1.1rem; color:var(--accent2)}

