/* ==========================================================================
   Cubic Marketing Platform — design system v2
   Direction: refined modern SaaS, geometric brand identity, depth + motion.
   Brand: green #10B259, Rubik (Latin) / Bahij The Sans (Arabic).
   ========================================================================== */

:root{
  /* Brand */
  --green:#10B259;
  --green-600:#0d9c4e;
  --green-700:#0a803f;
  --green-bright:#1fd968;
  --green-glow:rgba(16,178,89,.35);

  /* Neutrals (warm charcoal scale) */
  --ink:#0b1410;
  --ink-2:#13201a;
  --slate-900:#0e1613;
  --slate-800:#18211d;
  --slate-700:#222e29;
  --text:#1a241f;
  --text-soft:#5b6a63;
  --text-faint:#8a958f;
  --line:#e7ebe8;
  --line-soft:#eef1ef;

  /* Surfaces */
  --bg:#f4f7f5;
  --bg-2:#eef2f0;
  --card:#ffffff;

  /* Sidebar (dark) */
  --side-bg:#0c1411;
  --side-bg-2:#101a16;
  --side-text:#aab4ae;
  --side-text-dim:#6f7c76;

  /* Radii + shadow */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(11,20,16,.04), 0 1px 3px rgba(11,20,16,.06);
  --shadow:0 4px 12px rgba(11,20,16,.05), 0 12px 28px rgba(11,20,16,.06);
  --shadow-lg:0 20px 50px rgba(11,20,16,.12);
  --shadow-green:0 8px 24px rgba(16,178,89,.28);

  --font:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar:"Bahij The Sans","Rubik",system-ui,"Segoe UI",Tahoma,sans-serif;

  --sidebar-w:268px;
}

/* Fonts */
@font-face{font-family:"Rubik";src:url("/assets/fonts/Rubik-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/Rubik-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/Rubik-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Rubik";src:url("/assets/fonts/Rubik-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Bahij The Sans";src:url("/assets/fonts/BahijTheSans-Plain.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bahij The Sans";src:url("/assets/fonts/BahijTheSans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.dir-rtl{font-family:var(--font-ar)}
a{color:inherit;text-decoration:none}
::selection{background:var(--green-glow)}

/* Subtle page atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 100% -5%, rgba(16,178,89,.10), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(16,178,89,.06), transparent 55%);
}

/* ===== App shell ===== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ===== Sidebar ===== */
.sidebar{
  background:linear-gradient(180deg,var(--side-bg) 0%, var(--side-bg-2) 100%);
  color:var(--side-text);
  display:flex;flex-direction:column;
  padding:20px 16px;
  position:sticky;top:0;height:100vh;
  border-inline-end:1px solid rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
/* geometric cube texture in sidebar */
.sidebar::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(420px 380px at 50% 12%, #000, transparent 75%);
}
.sidebar > *{position:relative;z-index:1}

.brand{display:flex;align-items:center;gap:12px;padding:8px 8px 22px}
.brand-mark{width:32px;height:32px;filter:brightness(0) invert(1)}
.brand-name{font-weight:800;letter-spacing:.2px;color:#fff;font-size:16px}

.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--side-text-dim);padding:14px 12px 6px}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:11px;
  color:var(--side-text);font-weight:500;font-size:14.5px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(16,178,89,.14);color:#fff}
.nav-item.active::before{
  content:"";position:absolute;inset-inline-start:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;background:var(--green);border-radius:0 3px 3px 0;
}
.nav-ico{width:18px;height:18px;flex:none;opacity:.9;display:grid;place-items:center}
.nav-ico svg{width:18px;height:18px}

.sidebar-foot{display:flex;flex-direction:column;gap:12px;margin-top:14px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.lang-switch{display:flex;gap:6px;background:rgba(255,255,255,.05);padding:4px;border-radius:10px}
.lang-switch button{
  flex:1;background:transparent;border:none;color:var(--side-text);
  padding:7px;border-radius:7px;cursor:pointer;font-weight:600;font-family:inherit;font-size:13px;
  transition:.15s;
}
.lang-switch button.on{background:var(--green);color:#fff;box-shadow:var(--shadow-green)}
.logout{color:var(--side-text-dim);font-size:13.5px;padding:4px 12px;transition:.15s}
.logout:hover{color:#fff}

/* ===== Main ===== */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
}
.topbar-title{font-weight:800;font-size:19px;letter-spacing:-.01em}
.topbar-user{display:flex;align-items:center;gap:10px}
.avatar{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,var(--green),var(--green-700));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;
  box-shadow:var(--shadow-green);
}
.uname{font-weight:600;font-size:14.5px}

.content{padding:30px 32px;max-width:1120px;width:100%;animation:rise .5s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Cards ===== */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);
  margin-bottom:18px;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.card h2{margin:0 0 4px;font-weight:800;font-size:21px;letter-spacing:-.01em}
.card .muted,.muted{color:var(--text-soft)}
.card .muted{margin:0 0 18px}

/* Hero card with brand gradient */
.hero{
  background:
    radial-gradient(600px 200px at 90% 0%, rgba(16,178,89,.12), transparent 60%),
    linear-gradient(180deg,#fff,#fbfdfc);
  border:1px solid var(--line);
}
.hero h2{font-size:24px}

/* Clickable action cards */
a.card.action{display:block;cursor:pointer}
a.card.action:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(16,178,89,.4)}
.action .ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(16,178,89,.14),rgba(16,178,89,.06));
  color:var(--green-700);margin-bottom:14px;
}
.action .ico svg{width:24px;height:24px}
.action .t{font-weight:800;font-size:16px;letter-spacing:-.01em}
.action .d{color:var(--text-soft);font-size:13.5px;margin-top:3px}

/* ===== Forms ===== */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:7px;font-size:13.5px;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:14.5px;background:#fff;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-glow);
}
.field textarea{resize:vertical;min-height:90px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--green),var(--green-600));
  color:#fff;border:none;
  padding:12px 22px;border-radius:var(--r-sm);font:inherit;font-weight:700;font-size:14.5px;
  cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;
  box-shadow:var(--shadow-green);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:var(--bg-2);color:var(--text);box-shadow:none;border:1px solid var(--line)}
.btn.secondary:hover{background:#e6ece9}

.group-title{font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.12em;
  color:var(--green-700);margin:6px 0 14px}

/* Flash */
.flash{padding:13px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-weight:500;font-size:14px;
  display:flex;align-items:center;gap:8px}
.flash.ok{background:linear-gradient(180deg,#eafaf0,#e3f7eb);color:#0a7038;border:1px solid #c5ecd4}
.flash.err{background:linear-gradient(180deg,#fdeeee,#fce7e7);color:#a8281f;border:1px solid #f3cdcb}

/* Badges */
.badge{font-size:12px;padding:4px 11px;border-radius:20px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.badge.set{background:#e3f7eb;color:#0a7038}
.badge.empty{background:#f0f2f1;color:var(--text-faint)}

/* Stat tiles (job queue etc.) */
.stat{
  text-align:center;padding:20px 14px;border-radius:var(--r);
  background:linear-gradient(180deg,#fff,#fafdfb);border:1px solid var(--line);
}
.stat .n{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.02em}
.stat .l{color:var(--text-soft);font-size:12.5px;text-transform:capitalize;margin-top:7px}

/* Progress */
.progress{background:var(--bg-2);border-radius:30px;height:12px;overflow:hidden;margin:10px 0}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-bright));
  border-radius:30px;transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* Asset grid */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.asset-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.asset-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.asset-thumb{aspect-ratio:1;background:var(--bg-2);border-radius:12px;overflow:hidden;
  display:grid;place-items:center;margin-bottom:11px}
.asset-thumb img{width:100%;height:100%;object-fit:cover}

/* Tables */
table.clean{width:100%;border-collapse:collapse;font-size:13.5px}
table.clean td{padding:9px 10px;border-bottom:1px solid var(--line-soft)}

/* Rows */
.row-between{display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line-soft)}
.row-between:last-child{border-bottom:none}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0c1411,#10231a 60%,#0c1411)}
.login-wrap::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(700px 500px at 50% 40%,#000,transparent 80%);
}
.login-wrap::after{
  content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,var(--green-glow),transparent 65%);
  top:-150px;inset-inline-end:-150px;filter:blur(20px);
}
.login-card{position:relative;z-index:2;width:400px;max-width:92vw;
  background:rgba(255,255,255,.98);border-radius:var(--r-lg);
  padding:38px;box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:rise .5s cubic-bezier(.2,.7,.2,1)}
.login-logo{width:48px;height:48px;margin-bottom:16px}
.login-card h1{margin:0 0 24px;font-weight:900;font-size:26px;letter-spacing:-.02em}

/* Cube motif block */
.cube-grid{
  background-color:#fff;
  background-image:
    linear-gradient(135deg, rgba(16,178,89,.10) 25%, transparent 25%),
    linear-gradient(225deg, rgba(16,178,89,.10) 25%, transparent 25%);
  background-size:20px 20px;
  border:1px solid var(--line);border-radius:var(--r);
}

/* RTL */
body.dir-rtl .nav-item,body.dir-rtl .brand,body.dir-rtl .row-between{flex-direction:row-reverse}
body.dir-rtl .topbar-user{flex-direction:row-reverse}

/* Responsive */
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset-inline-start:-100%;width:var(--sidebar-w);z-index:100;transition:.25s}
  .sidebar.open{inset-inline-start:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .content{padding:20px}
}