:root { --bg:#0b0e12; --card:#121821; --text:#e6ecf5; --muted:#8aa0b6; --accent:#3aa3ff; --good:#1db954; --warn:#ffb020; --bad:#ff5c5c; --ring:#243140; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:var(--text)}
.tt-topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0a111a;border-bottom:1px solid #17202b;position:sticky;top:0;z-index:10}
.tt-brand{font-weight:700;letter-spacing:.2px}
.tt-nav a{color:var(--muted);margin-left:14px;text-decoration:none}
.tt-nav a:hover{color:var(--text)}
.tt-logout{color:var(--bad)!important}
#app{max-width:1100px;margin:24px auto;padding:0 16px}
.tt-card{background:var(--card);border:1px solid #1d2633;border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 6px 24px rgba(0,0,0,.2)}
.tt-row{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:16px}
.tt-col-6{grid-column:span 6} .tt-col-12{grid-column:span 12}
@media (max-width:900px){.tt-col-6{grid-column:span 12}}

.tt-h1{font-size:22px;margin:0 0 6px 0} .tt-muted{color:var(--muted);font-size:14px}
.tt-footer{opacity:.6;text-align:center;padding:24px}

/* Inputs / Buttons */
.tt-btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.tt-btn-subtle{background:#192332;border:1px solid #243246}
.tt-link{color:#9cc7ff;text-decoration:none}
.tt-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #223048;background:#0e141d;color:var(--text)}
.tt-form-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px}
@media (max-width:700px){.tt-form-row{grid-template-columns:1fr}}
.tt-login-box{max-width:460px;margin:60px auto}

/* Dashboard */
.tt-dash-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.tt-quick a{margin-left:8px}
.tt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
@media (max-width:900px){.tt-stats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.tt-stats{grid-template-columns:1fr}}
.tt-stat{background:#0f1620;border:1px solid #1b2636;border-radius:12px;padding:14px}
.tt-stat-label{font-size:12px;color:var(--muted);letter-spacing:.2px}
.tt-stat-value{font-size:24px;font-weight:800;margin-top:2px}
.tt-stat-foot{font-size:12px;color:var(--muted);margin-top:6px}
.tt-stat-flex{display:flex;gap:12px;align-items:center}

/* Progress ring */
.tt-ring{position:relative;width:76px;height:76px;min-width:76px}
.tt-ring-svg{width:76px;height:76px;transform:rotate(-90deg)}
.tt-ring-svg .bg{fill:none;stroke:var(--ring);stroke-width:6}
.tt-ring-svg .fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 999}
.tt-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800}
.tt-progress{flex:0 0 76px}
.tt-progress-bar{width:76px;height:6px;background:var(--ring);border-radius:999px;overflow:hidden;margin-top:4px}
.tt-progress-bar>span{display:block;height:100%;background:var(--good);width:0%}

/* Panels */
.tt-panel{background:#0f1620;border:1px solid #1b2636;border-radius:12px;padding:12px}
.tt-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tt-empty{color:var(--muted);font-size:14px}

/* Tables */
.tt-table{width:100%;border-collapse:collapse}
.tt-table th,.tt-table td{padding:10px 8px;border-bottom:1px solid #1b2431;font-size:14px}

/* Filters & table wrap */
.tt-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tt-table-wrap{overflow:auto}

/* Status pillen */
.tt-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid #223248;background:#121b28;color:#a7c2e8}
.tt-badge.open{background:rgba(255,176,32,.12);border-color:#3a2a00;color:#ffb020}
.tt-badge.processing{background:rgba(58,163,255,.12);border-color:#103a5a;color:#9cc7ff}
.tt-badge.paid{background:rgba(29,185,84,.12);border-color:#104421;color:#1db954}
.tt-badge.cancelled{background:rgba(255,92,92,.12);border-color:#5a1212;color:#ff7a7a}
.tt-badge.refunded{background:rgba(147,112,219,.12);border-color:#3d2964;color:#c0a7ff}

/* Pager */
.tt-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}

/* Drawer (order details) */
.tt-drawer{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:saturate(130%) blur(2px);display:none;align-items:flex-start;justify-content:flex-end;padding:24px;z-index:20}
.tt-drawer[aria-hidden="false"]{display:flex}
.tt-drawer-card{width:520px;max-width:100%;background:#0f1620;border:1px solid #1b2636;border-radius:14px;padding:16px;box-shadow:0 16px 36px rgba(0,0,0,.45);max-height:100%;overflow:auto}
.tt-drawer-head{display:flex;align-items:center;justify-content:space-between}
.tt-drawer-actions{display:flex;justify-content:flex-end;margin-top:12px}
.tt-kv{margin:2px 0}

/* Facturen kleine tweaks */
.tt-table .right { text-align:right }
.tt-action-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Header-acties + auth badge uitlijning */
.tt-topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.tt-link-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border:1px solid #2b3a4d;border-radius:10px;
  background:#0f1720;color:#e6ecf5;text-decoration:none;
  transition:all .2s ease;
}
.tt-link-btn:hover{background:#162233;border-color:#3a4f6a;transform:translateY(-1px)}
.tt-link-btn svg{width:16px;height:16px;opacity:.9}
@media (max-width:640px){ .tt-link-btn{padding:.45rem .75rem} }

/* (indien je globale header gebruikt) */
header .max-w-7xl { gap: .5rem; }
/* Only affects Arabic pages because we set <html dir="rtl"> for 'ar' */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .text-start { text-align: right; }
html[dir="rtl"] .text-end   { text-align: left;  }
/* Add more selectors as your layout needs */