/* NEXORA APP — Authenticated shell (must NOT look like marketing) */
.app-body { background: var(--bg); color: var(--text-primary); font-family: var(--font-en); }
html[dir="rtl"] .app-body { font-family: var(--font-ar); }

/* Login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(600px 400px at 20% 10%, rgba(26,86,219,.14), transparent 60%), radial-gradient(500px 300px at 90% 90%, rgba(15,111,92,.10), transparent 60%), var(--bg);
}
.login-card {
  width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg);
}
.login-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.02em; }
.login-mark { width:36px; height:36px; border-radius:10px; background:var(--nexora); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px; }
.login-card h1 { font-size:22px; font-weight:900; letter-spacing:-.02em; margin-top:14px; }
.login-sub { font-size:14px; color:var(--text-secondary); margin-top:6px; line-height:1.5; }
.login-form { display:grid; gap:12px; margin-top:18px; }
.field label { display:block; font-size:12px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.field input {
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text-primary);
  font-size:14px; outline:0;
}
.field input:focus { border-color: var(--nexora); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }
.login-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.check { display:flex; align-items:center; gap:8px; }

/* Demo banner */
.demo-banner {
  background: repeating-linear-gradient(45deg, #FEF3C7 0 10px, #FFFBEB 10px 20px);
  border-bottom: 1px solid #FDE68A; color:#92400E; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-align:center; padding:7px 12px;
}
[data-theme="dark"] .demo-banner { background: repeating-linear-gradient(45deg, #422006 0 10px, #78350F 10px 20px); color:#FDE68A; border-color:#92400E; }

/* Layout */
.app-layout {
  display:grid; grid-template-columns: 260px 1fr; min-height: 100vh;
}
.app-sidebar {
  background: var(--surface); border-inline-end: 1px solid var(--border); position: sticky; top:0; height:100vh; overflow:auto;
  display:flex; flex-direction:column;
}
html[dir="rtl"] .app-sidebar { border-inline-end:0; border-inline-start:1px solid var(--border); }
.sidebar-head { display:flex; align-items:center; gap:10px; padding:16px 14px; border-bottom:1px solid var(--border); }
.sidebar-head .mark { width:32px; height:32px; border-radius:9px; background:var(--nexora); color:#fff; display:grid; place-items:center; font-weight:900; font-size:13px; }
.sidebar-head strong { font-size:14px; font-weight:900; letter-spacing:-.02em; }
.sidebar-head small { display:block; font-size:10px; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.nav-section { padding:12px 8px; }
.nav-section h4 { font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--text-muted); padding:8px 8px 6px; }
.side-link {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-secondary); cursor:pointer; border:0; background:transparent; width:100%; text-align:start;
}
.side-link:hover { background: var(--surface-muted); color:var(--text-primary); }
.side-link.is-active { background: var(--nexora); color:#fff; }
.side-link .ico { width:20px; height:20px; display:grid; place-items:center; font-size:13px; opacity:.9; }
.side-link.is-active .ico { opacity:1; }

/* Topbar */
.app-main { display:flex; flex-direction:column; min-width:0; }
.app-topbar {
  height:56px; display:flex; align-items:center; gap:12px; padding:0 16px;
  background: var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.top-search { flex:1; max-width:420px; position:relative; }
.top-search input {
  width:100%; padding:9px 12px 9px 36px; border-radius:999px; border:1px solid var(--border); background:var(--bg); color:var(--text-primary); font-size:13.5px;
}
.top-search svg { position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.company-select {
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12.5px; font-weight:700; cursor:pointer;
}
.company-select select { border:0; background:transparent; font-weight:700; color:var(--text-primary); outline:0; }
.icon-chip { width:36px; height:36px; border-radius:999px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text-secondary); }
.avatar { width:32px; height:32px; border-radius:999px; background: linear-gradient(135deg, #1A56DB, #0B1220); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; }

/* Content */
.app-content { padding:18px; display:grid; gap:18px; }
.view { display:none; }
.view.is-active { display:block; }
.view-head { display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.view-head h2 { font-size:22px; font-weight:900; letter-spacing:-.02em; }
.view-head p { font-size:13px; color:var(--text-secondary); }

/* Cards */
.kpi-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; }
.kpi-card small { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.kpi-card strong { display:block; font-size:20px; font-weight:900; letter-spacing:-.02em; margin-top:6px; }
.kpi-card span.trend { font-size:12px; font-weight:700; color:var(--success); }
.chart-card, .table-card, .list-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; }
.card-title { font-size:13px; font-weight:800; letter-spacing:-.01em; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bar-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.bar-label { width:48px; font-size:11px; color:var(--text-muted); font-weight:700; text-align:end; }
.bar-track { flex:1; height:10px; border-radius:999px; background:var(--surface-muted); overflow:hidden; border:1px solid var(--border); }
.bar-fill { height:100%; border-radius:999px; background: var(--nexora); }
.bar-val { width:70px; font-size:12px; font-weight:700; color:var(--text-secondary); }

/* Tables */
.table-wrap { overflow:auto; border:1px solid var(--border); border-radius:12px; }
table.app-table { width:100%; border-collapse:collapse; font-size:13.5px; }
table.app-table th { text-align:start; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:800; padding:10px 12px; background:var(--surface-muted); border-bottom:1px solid var(--border); white-space:nowrap; }
table.app-table td { padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.app-table tr:hover td { background: var(--surface-hover); }
.badge { padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid var(--border); }
.badge-success { background:#DCFCE7; color:#166534; border-color:#86EFAC; }
.badge-warn { background:#FEF3C7; color:#92400E; border-color:#FDE68A; }
.badge-muted { background:var(--surface-muted); color:var(--text-muted); }
[data-theme="dark"] .badge-success { background:rgba(22,101,52,.2); color:#86EFAC; }
[data-theme="dark"] .badge-warn { background:rgba(146,64,14,.2); color:#FDE68A; }

/* Pipeline */
.pipeline { display:grid; grid-template-columns: repeat(6,1fr); gap:10px; overflow:auto; }
.pipe-col { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; min-width:180px; }
.pipe-col h4 { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; display:flex; justify-content:space-between; }
.opp-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:8px; cursor:pointer; }
.opp-card:hover { border-color:var(--nexora); }
.opp-card strong { font-size:13px; font-weight:800; display:block; }
.opp-card small { font-size:11px; color:var(--text-muted); }

/* Map */
.map-grid { display:grid; grid-template-columns: 1.6fr .9fr; gap:14px; }
.map-canvas { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; min-height:360px; position:relative; overflow:hidden; }
.map-canvas::before{content:""; position:absolute; inset:0; background: radial-gradient(400px 200px at 50% 30%, rgba(26,86,219,.08), transparent 70%); pointer-events:none; }
.pin { position:absolute; width:28px; height:28px; border-radius:999px; background:var(--nexora); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; border:2px solid #fff; box-shadow: var(--shadow-sm); cursor:pointer; }

/* Responsive */
@media (max-width: 1100px){
  .kpi-grid { grid-template-columns: repeat(3,1fr); }
  .pipeline { grid-template-columns: repeat(3,1fr); }
  .map-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .app-layout { grid-template-columns:1fr; }
  .app-sidebar { position:fixed; inset:0 auto 0 0; width:300px; z-index:20; transform: translateX(-100%); transition: transform var(--ease); }
  html[dir="rtl"] .app-sidebar { inset:0 0 0 auto; transform: translateX(100%); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position:fixed; inset:0; background:rgba(11,18,32,.48); backdrop-filter: blur(4px); z-index:19; display:none; }
  .sidebar-backdrop.open { display:block; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .app-topbar { padding:0 12px; }
  .top-search { display:none; }
}