/* ===== Panda Suite — design minimalist, stil Apple ===== */
:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#e8e8ed;
  --line-2:#d2d2d7;
  --accent:#5b4bd6;
  --accent-ink:#ffffff;
  --accent-soft:#ece9fb;
  --green:#1f9d57;
  --green-soft:#e4f6ec;
  --amber:#c8890f;
  --amber-soft:#fbf1dc;
  --red:#d33a2c;
  --red-soft:#fbe9e7;
  --blue:#2f7cf6;
  --blue-soft:#e7f0fe;
  --gray-soft:#ececed;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --sidebar:248px;
  /* suprafete + text pe componente (temele de brand le suprascriu) */
  --surface-2:#fafafb; --hover:#faf9fe; --nav-hover:rgba(0,0,0,.04); --ghost-hover:rgba(0,0,0,.03);
  --topbar-bg:rgba(245,245,247,.8); --sidebar-bg:rgba(255,255,255,.72); --col-bg:#efeff2;
  --green-ink:#157a42; --amber-ink:#9a6a0b; --blue-ink:#2060c8; --red-ink:#b02f22; --danger-hover:#f7ddd9; --neutral-hover:#fafafa;
  --btn-bg:var(--accent); --btn-ink:#fff; --nav-active-bg:var(--accent); --nav-active-ink:#fff;
  --chip-active-bg:var(--ink); --chip-active-ink:#fff; --mark-2:#8b7bf0; --login-g1:#e9e5fb; --login-g2:#e7f0fe;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:var(--font); --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  font-size:15px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none;opacity:.85}
h1,h2,h3{letter-spacing:-.02em;font-weight:650;font-family:var(--font-head)}
h1{font-size:1.75rem;margin:0}
h2{font-size:1.2rem;margin:0}
h3{font-size:1.02rem;margin:0}

/* ===== Layout shell ===== */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar); flex:none; background:var(--sidebar-bg); backdrop-filter:blur(20px);
  border-right:1px solid var(--line); position:fixed; top:0; bottom:0; left:0; display:flex; flex-direction:column;
  padding:20px 14px; overflow-y:auto; z-index:30;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 10px 20px;font-weight:700;font-size:1.05rem;color:var(--ink)}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--mark-2));
  display:grid;place-items:center;color:var(--btn-ink);font-weight:800;font-size:1rem;box-shadow:var(--shadow-sm)}
.nav-section{margin:14px 0 4px;padding:0 12px;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-2);
  font-weight:500;font-size:.93rem;margin-bottom:1px;transition:.12s;white-space:nowrap}
.nav-item .ic{width:20px;text-align:center;font-size:1.05rem;flex:none;opacity:.9}
.nav-item:hover{background:var(--nav-hover);color:var(--ink)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-ink);box-shadow:var(--shadow-sm)}
.nav-item.active .ic{opacity:1}
.nav-spacer{flex:1}
.nav-user{border-top:1px solid var(--line);padding:14px 12px 4px;margin-top:10px}
.nav-user .who{font-weight:600;font-size:.9rem}
.nav-user .role{font-size:.76rem;color:var(--ink-3);text-transform:capitalize}

.main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:var(--topbar-bg);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);padding:16px 32px;display:flex;align-items:center;gap:16px}
.topbar h1{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{padding:28px 32px 60px;max-width:1240px;width:100%}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--btn-bg);color:var(--btn-ink);border:none;cursor:pointer;
  font:inherit;font-weight:600;font-size:.92rem;padding:10px 18px;border-radius:999px;transition:.12s;line-height:1;text-decoration:none}
.btn:hover{filter:brightness(1.05);opacity:1}
.btn:active{transform:scale(.98)}
.btn.sm{padding:7px 14px;font-size:.85rem}
.btn.lg{padding:13px 24px;font-size:1rem}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{background:var(--ghost-hover)}
.btn.neutral{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.neutral:hover{background:var(--neutral-hover)}
.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.danger:hover{background:var(--danger-hover)}
.btn.success{background:var(--green)}
.btn.block{width:100%;justify-content:center}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ===== Cards ===== */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.card.tight{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.card-head h2,.card-head h3{margin:0}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.small{font-size:.85rem}

/* ===== KPI tiles ===== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.kpi .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;margin-bottom:14px;background:var(--accent-soft)}
.kpi .val{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.kpi .lbl{color:var(--ink-2);font-size:.86rem;margin-top:5px}
.kpi.green .ic{background:var(--green-soft)} .kpi.amber .ic{background:var(--amber-soft)}
.kpi.blue .ic{background:var(--blue-soft)} .kpi.red .ic{background:var(--red-soft)}

/* ===== Grid helpers ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:14px}
.mt{margin-top:16px}.mb{margin-bottom:16px}.mt-s{margin-top:8px}

/* ===== Tables ===== */
.table-wrap{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 18px;font-size:.92rem;border-bottom:1px solid var(--line)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:650;background:var(--surface-2);font-family:var(--font-mono)}
tbody tr{transition:.1s}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.row-link{cursor:pointer}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--gray-soft);color:var(--ink-2)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.green{background:var(--green-soft);color:var(--green-ink)}
.badge.amber{background:var(--amber-soft);color:var(--amber-ink)}
.badge.blue{background:var(--blue-soft);color:var(--blue-ink)}
.badge.red{background:var(--red-soft);color:var(--red-ink)}
.badge.accent{background:var(--accent-soft);color:var(--accent)}

/* ===== Forms ===== */
.field{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.84rem;color:var(--ink-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],textarea,select{
  width:100%;padding:11px 13px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);font:inherit;font-size:.95rem;
  background:var(--surface);color:var(--ink);transition:.12s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.help{font-size:.78rem;color:var(--ink-3);margin-top:5px}
.check{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink);cursor:pointer}
.check input{width:auto}

/* ===== Alerts ===== */
.alert{padding:13px 17px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:.92rem;font-weight:500;display:flex;gap:9px;align-items:center}
.alert.success{background:var(--green-soft);color:var(--green-ink)}
.alert.error{background:var(--red-soft);color:var(--red-ink)}

/* ===== Empty state ===== */
.empty{text-align:center;padding:56px 24px;color:var(--ink-3)}
.empty .big{font-size:2.6rem;margin-bottom:12px}
.empty h3{color:var(--ink);margin-bottom:6px}

/* ===== Detail header ===== */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head .sub{color:var(--ink-2);font-size:.95rem;margin-top:4px}
.back{color:var(--ink-2);font-size:.9rem;font-weight:500;display:inline-flex;gap:5px;align-items:center;margin-bottom:12px}

/* Definition list */
.dl{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;font-size:.93rem}
.dl dt{color:var(--ink-3);font-weight:500}
.dl dd{margin:0;font-weight:500}

/* ===== Pipeline / Kanban ===== */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--col-bg);border-radius:var(--radius);padding:12px;min-height:200px}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 12px;font-weight:650;font-size:.9rem}
.col-head .count{background:var(--surface);color:var(--ink-2);border-radius:999px;padding:2px 9px;font-size:.76rem;font-weight:600}
.tile{background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:13px 14px;margin-bottom:10px}
.tile .t-title{font-weight:600;font-size:.92rem;margin-bottom:4px}
.tile .t-meta{font-size:.8rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.tile select{padding:6px 8px;font-size:.8rem;border-radius:8px;margin-top:9px}

/* Search bar */
.searchbar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.searchbar input[type=text]{max-width:300px}
.searchbar .filters{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;background:var(--surface);color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px var(--line-2);cursor:pointer}
.chip.active{background:var(--chip-active-bg);color:var(--chip-active-ink);box-shadow:none}

/* Line items editor */
.lines{width:100%;border-collapse:collapse;margin-bottom:8px}
.lines th{background:transparent;border:none;padding:6px 8px}
.lines td{border:none;border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:middle}
.lines input,.lines select{padding:8px 9px;font-size:.88rem}
.addline td{padding-top:12px}

/* Totals box */
.totals{margin-left:auto;max-width:300px}
.totals .trow{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem;color:var(--ink-2)}
.totals .trow.grand{border-top:2px solid var(--line-2);margin-top:6px;padding-top:12px;font-size:1.25rem;font-weight:700;color:var(--ink)}

/* Timeline */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:12px 0 12px 22px;border-left:2px solid var(--line);position:relative}
.timeline li:before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface)}
.timeline .ti-head{font-weight:600;font-size:.92rem}
.timeline .ti-meta{font-size:.78rem;color:var(--ink-3);margin-top:2px}
.timeline .ti-body{font-size:.9rem;color:var(--ink-2);margin-top:4px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 600px at 70% -10%, var(--login-g1), transparent),
  radial-gradient(1000px 500px at 0% 110%, var(--login-g2), transparent), var(--bg);padding:20px}
.login-card{background:var(--surface);border-radius:24px;box-shadow:var(--shadow);padding:40px;width:100%;max-width:400px}
.login-card .mark{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--mark-2));
  display:grid;place-items:center;color:var(--btn-ink);font-weight:800;font-size:1.4rem;margin:0 auto 18px}
.login-card h1{text-align:center;font-size:1.4rem;margin-bottom:6px}
.login-card .sub{text-align:center;color:var(--ink-2);margin-bottom:26px;font-size:.92rem}

.stars{color:var(--amber);letter-spacing:2px}
hr.sep{border:none;border-top:1px solid var(--line);margin:20px 0}

@media(max-width:960px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .split,.grid-2{grid-template-columns:1fr}
  .field-row,.field-row-3{grid-template-columns:1fr}
}
@media(max-width:720px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .content,.topbar{padding-left:18px;padding-right:18px}
  .menu-btn{display:inline-grid!important}
}
.menu-btn{display:none;place-items:center;width:38px;height:38px;border-radius:10px;border:none;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;font-size:1.1rem}

/* ===== Teme de brand (alese dupa divizia activa: <html data-brand="...">) ===== */
/* PandaMedia — dupa pandamedia.ro: bleumarin inchis + lime, Poppins + IBM Plex Mono, colturi drepte */
[data-brand="pandamedia"]{
  color-scheme:dark;
  --bg:#0A0F1C; --surface:#121A2B; --surface-2:#0D1322; --hover:#1A2436;
  --ink:#F2F4F9; --ink-2:#AEB7CA; --ink-3:#7C879D; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --accent:#ADDA1F; --accent-ink:#0A0F1C; --accent-soft:rgba(173,218,31,.14);
  --green:#4ade80; --green-soft:rgba(74,222,128,.14); --green-ink:#86efac;
  --amber:#f59e0b; --amber-soft:rgba(245,158,11,.15); --amber-ink:#fbbf24;
  --red:#f87171; --red-soft:rgba(248,113,113,.14); --red-ink:#fca5a5;
  --blue:#60a5fa; --blue-soft:rgba(96,165,250,.14); --blue-ink:#93c5fd; --gray-soft:rgba(255,255,255,.06);
  --radius:8px; --radius-sm:6px;
  --shadow:0 0 0 1px rgba(173,218,31,.10), 0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 0 0 1px rgba(255,255,255,.07);
  --topbar-bg:rgba(10,15,28,.85); --sidebar-bg:#0B1120; --col-bg:#0D1322;
  --nav-hover:rgba(173,218,31,.07); --ghost-hover:rgba(255,255,255,.05); --danger-hover:rgba(248,113,113,.18); --neutral-hover:#1A2436;
  --btn-bg:#ADDA1F; --btn-ink:#0A0F1C; --nav-active-bg:rgba(173,218,31,.13); --nav-active-ink:#ADDA1F;
  --chip-active-bg:#ADDA1F; --chip-active-ink:#0A0F1C; --mark-2:#87b300; --login-g1:rgba(173,218,31,.10); --login-g2:rgba(40,60,140,.28);
  --font:'Poppins',system-ui,sans-serif; --font-head:'Poppins',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
[data-brand="pandamedia"] .sidebar{border-right-color:rgba(173,218,31,.16)}
[data-brand="pandamedia"] .nav-section,
[data-brand="pandamedia"] .badge,
[data-brand="pandamedia"] .kpi .lbl{font-family:var(--font-mono);letter-spacing:.02em}
[data-brand="pandamedia"] .nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}
[data-brand="pandamedia"] h1,[data-brand="pandamedia"] h2{font-weight:600}
[data-brand="pandamedia"] .kpi .val{color:var(--ink)}

/* Panda Displays — dupa pandadisplays.hu: fundal deschis, mov (logo) + portocaliu (actiuni) + galben, Montserrat */
[data-brand="pandadisplays"]{
  --bg:#F3F5F6; --surface:#ffffff; --surface-2:#f8f9fa; --hover:#f7f2fb;
  --ink:#212529; --ink-2:#5f6870; --ink-3:#8a9299; --line:#e6e9ec; --line-2:#dee2e6;
  --accent:#662D91; --accent-ink:#ffffff; --accent-soft:#f1e9f7;
  --btn-bg:#F16805; --btn-ink:#ffffff; --nav-active-bg:#662D91; --nav-active-ink:#ffffff;
  --chip-active-bg:#662D91; --chip-active-ink:#ffffff; --mark-2:#8e4fc0; --login-g1:#efe4f7; --login-g2:#fff6c7;
  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(33,37,41,.05), 0 6px 18px rgba(33,37,41,.06);
  --topbar-bg:rgba(243,245,246,.88); --sidebar-bg:#ffffff;
  --font:'Montserrat',system-ui,sans-serif; --font-head:'Montserrat',system-ui,sans-serif;
}
[data-brand="pandadisplays"] h1,[data-brand="pandadisplays"] h2,[data-brand="pandadisplays"] h3{font-weight:700;letter-spacing:-.01em}
[data-brand="pandadisplays"] .sidebar{border-right:3px solid #FFDE16}

/* Logo in sidebar / login */
.brand .logo{display:block;max-width:150px;height:auto}
.brand .suite{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.login-card .logo{display:block;max-width:190px;margin:0 auto 18px}
/* titluri: spatiere normala pe fonturile de brand */
[data-brand] h1,[data-brand] h2,[data-brand] h3{letter-spacing:0}
/* PandaMedia: colturi drepte ca pe pandamedia.ro */
[data-brand="pandamedia"] .btn{border-radius:6px}
[data-brand="pandamedia"] .chip{border-radius:6px}