/* TSIT Client Portal — design system (aplicație) */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --navy:#1b2a4a; --navy-d:#142138; --navy-l:#2c3f66;
  --blue:#0188A8; --blue-d:#016f89; --blue-l:#e8f5f9;
  --red:#E24B40; --red-l:#fdf0ef;
  --ok:#28a745; --ok-l:#eefaf1;
  --warn:#e0a800; --warn-l:#fff9e8;
  --purple:#A54887; --purple-l:#f7eef4;
  --ink:#1f2430; --mut:#6b7385; --line:#e4e8ef; --bg:#f4f6fa; --card:#fff;
  --sb:264px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Roboto',sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Roboto Slab',serif;line-height:1.2}
a{color:var(--blue);text-decoration:none}
img{max-width:100%}

/* ===== LOGIN ===== */
.login-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.login-vis{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-d) 60%,#0e1830 100%);color:#fff;padding:56px 54px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-vis::after{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(1,136,168,.35),transparent 70%)}
.login-vis .inner{position:relative;z-index:2;max-width:460px}
.login-vis .lg{font-family:'Roboto Slab',serif;font-weight:800;font-size:1.1rem;margin-bottom:38px}
.login-vis .lg span{color:var(--red)}
.login-vis h1{font-size:2.1rem;font-weight:800;margin-bottom:14px}
.login-vis p.s{color:#c8d1e2;font-weight:300;font-size:1.05rem;margin-bottom:30px}
.login-ben{display:grid;gap:12px}
.login-ben div{display:flex;align-items:center;gap:11px;font-size:.93rem;color:#dde3ee}
.login-ben i{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-style:normal;flex-shrink:0}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px 34px;background:var(--card)}
.login-form .box{width:100%;max-width:380px}
.login-form h2{font-size:1.5rem;color:var(--navy);margin-bottom:6px}
.login-form .hint{color:var(--mut);font-size:.9rem;margin-bottom:24px}
.login-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--mut);text-align:center}

/* ===== FORM ===== */
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.82rem;font-weight:500;color:var(--navy);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff;color:var(--ink)}
.fld textarea{resize:vertical;min-height:90px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,136,168,.12)}
.fld .err{color:var(--red);font-size:.8rem;margin-top:5px}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea{border-color:var(--red)}
.row-between{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.row-between label{display:flex;align-items:center;gap:7px;color:var(--mut);cursor:pointer}
.grid-f{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}
.alert{padding:12px 16px;border-radius:10px;font-size:.88rem;margin-bottom:16px}
.alert-err{background:var(--red-l);border:1px solid rgba(226,75,64,.3);color:#8a2820}
.alert-ok{background:var(--ok-l);border:1px solid rgba(40,167,69,.3);color:#1e7e34}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 19px;border-radius:10px;font-weight:600;font-size:.92rem;border:0;cursor:pointer;font-family:inherit;transition:.15s;text-align:center}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-primary.full,.btn.full{width:100%}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-red{background:var(--red);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-sm{padding:7px 13px;font-size:.84rem;border-radius:8px}

/* ===== APP SHELL =====
   .scrim trebuie declarat AICI, în afara media query-ului: e copil al .app și,
   fără position:fixed, ar deveni un al treilea element de grid pe desktop
   (împinge .sb în coloana 1fr și .main pe rândul 2). Plasarea explicită de mai
   jos garantează că niciun copil suplimentar nu mai poate deturna layout-ul. */
.scrim{position:fixed;inset:0;background:rgba(10,15,28,.5);z-index:55;opacity:0;visibility:hidden;pointer-events:none;-webkit-tap-highlight-color:transparent}
.app{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);min-height:100vh}
.sb{grid-column:1;grid-row:1;background:var(--navy);color:#fff;padding-bottom:24px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
.sb .lg{padding:20px 22px 16px;font-family:'Roboto Slab',serif;font-weight:800;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sb .lg span{color:var(--red)}
.sb .lg small{display:block;font-family:'Roboto',sans-serif;font-weight:400;font-size:.75rem;color:#8f9cb8;margin-top:3px}
.locsel{margin:14px 16px}
.locsel select{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:9px 12px;font-size:.85rem;color:#fff;font-family:inherit;cursor:pointer}
.locsel select option{background:var(--navy);color:#fff}
.sb .grp{padding:14px 22px 5px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7b88a5;font-weight:700}
.sb a.it{display:flex;align-items:center;gap:11px;padding:8px 22px;color:#c4cddf;font-size:.9rem;transition:.13s;border-left:3px solid transparent}
.sb a.it:hover{background:rgba(255,255,255,.06);color:#fff}
.sb a.it.on{background:rgba(1,136,168,.22);border-left-color:var(--blue);color:#fff;font-weight:500}
.sb a.it .ic{width:19px;text-align:center;flex-shrink:0}
.sb a.it .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:99px}
.sb .logout{margin:16px 22px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.sb .logout button{background:transparent;border:0;color:#8f9cb8;font-size:.85rem;cursor:pointer;font-family:inherit;padding:0}
.sb .logout button:hover{color:#fff}

.main{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column}
.tb{background:var(--card);border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.tb h1{font-size:1.2rem;color:var(--navy);line-height:1.25}
.tb .crumb{font-size:.79rem;color:var(--mut)}
.tb .sp{margin-left:auto;display:flex;align-items:center;gap:12px}
.tb .who{display:flex;align-items:center;gap:9px;font-size:.86rem}
.tb .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}
.tb .who small{display:block;color:var(--mut);font-size:.74rem}
.burger-p{display:none;background:transparent;border:0;cursor:pointer;flex-direction:column;gap:4px;padding:8px;width:40px;height:38px;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.burger-p span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.22s}
.content{padding:24px 26px 44px;min-width:0;flex:1}

/* ===== KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:.15s;display:block;color:inherit;min-width:0}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,26,45,.08);border-color:var(--blue)}
.kpi .lab{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.kpi .num{font-family:'Roboto Slab',serif;font-size:1.8rem;font-weight:800;color:var(--navy);line-height:1}
.kpi .num.red{color:var(--red)}.kpi .num.ok{color:var(--ok)}.kpi .num.warn{color:#b58600}
.kpi .sub{font-size:.77rem;color:var(--mut);margin-top:5px}

.sec-h{display:flex;align-items:center;gap:12px;margin:26px 0 14px;flex-wrap:wrap}
.sec-h h2{font-size:1.06rem;color:var(--navy)}
.sec-h .more{margin-left:auto;font-size:.84rem}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px;min-width:0}
.card h3{font-size:1.02rem;color:var(--navy);margin-bottom:4px}
.card .meta{font-size:.8rem;color:var(--mut);margin-bottom:14px}
.card h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:11px;font-family:'Roboto',sans-serif;font-weight:700}
.empty{text-align:center;color:var(--mut);padding:34px 16px;font-size:.9rem}
.empty .ic{font-size:2rem;display:block;margin-bottom:8px;opacity:.5}

/* location card */
.loc .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.loc .hd h3{margin:0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.kv:last-child{border-bottom:none}
.kv>span:first-child{color:var(--mut);flex-shrink:0}
.kv b{font-weight:600;text-align:right}

/* ===== PILLS ===== */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.p-ok{background:var(--ok-l);color:var(--ok)}
.p-warn{background:var(--warn-l);color:#b58600}
.p-red{background:var(--red-l);color:var(--red)}
.p-blue{background:var(--blue-l);color:var(--blue-d)}
.p-gray{background:#f0f2f6;color:var(--mut)}
.p-purple{background:var(--purple-l);color:var(--purple)}

/* ===== TIMELINE ===== */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding-bottom:15px}
.tl .ev::before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 2px var(--blue-l)}
.tl .ev.red::before{background:var(--red);box-shadow:0 0 0 2px var(--red-l)}
.tl .ev.ok::before{background:var(--ok);box-shadow:0 0 0 2px var(--ok-l)}
.tl .ev .t{font-size:.74rem;color:var(--mut)}
.tl .ev .x{font-size:.89rem}

/* ===== PRIORITY BOXES ===== */
.pri{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:14px}
.pri .ph{padding:12px 16px;font-weight:700;font-size:.87rem;display:flex;align-items:center;gap:8px}
.pri.urg .ph{background:var(--red-l);color:var(--red)}
.pri.med .ph{background:var(--warn-l);color:#b58600}
.pri.rec .ph{background:var(--blue-l);color:var(--blue-d)}
.pri ul{list-style:none;padding:10px 16px 14px}
.pri li{font-size:.86rem;padding:7px 0 7px 15px;position:relative;border-bottom:1px solid var(--line);color:#3a4250}
.pri li:last-child{border-bottom:none}
.pri li::before{content:"›";position:absolute;left:0;color:var(--mut);font-weight:700}

/* ===== TOOLBAR & TABLE ===== */
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input[type=search],.toolbar select{padding:9px 13px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:.88rem;background:#fff}
.toolbar input[type=search]{flex:1;min-width:170px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--blue)}
.chipf{padding:7px 13px;border:1.5px solid var(--line);background:#fff;border-radius:99px;font-size:.82rem;cursor:pointer;color:var(--mut);font-family:inherit;text-decoration:none;display:inline-block}
.chipf:hover{border-color:var(--blue);color:var(--blue)}
.chipf.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.tbl-wrap{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:.87rem;min-width:680px}
table.t th{background:#fafbfd;text-align:left;padding:11px 14px;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr{transition:.12s}
table.t tbody tr:hover{background:#fafbfd}
table.t .id{font-family:monospace;font-size:.81rem;color:var(--mut)}
table.t .ttl{font-weight:600;color:var(--navy)}
table.t a.ttl:hover{color:var(--blue)}
table.t .sm{font-size:.77rem;color:var(--mut)}
.tfoot{padding:12px 16px;border-top:1px solid var(--line);font-size:.83rem;color:var(--mut);background:#fafbfd}

/* ===== TICKET DETAIL ===== */
.tk-head{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px;margin-bottom:16px}
.tk-head .top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tk-head h2{font-size:1.16rem;color:var(--navy);flex:1;min-width:200px}
.tk-head .idn{font-family:monospace;color:var(--mut);font-size:.84rem}
.tk-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);padding-top:14px}
.tk-meta .m .k{font-size:.71rem;text-transform:uppercase;color:var(--mut);letter-spacing:.03em}
.tk-meta .m .v{font-size:.89rem;font-weight:500;margin-top:2px}
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}

/* chat */
.chat{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.chat .ch{padding:13px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:.91rem;color:var(--navy);display:flex;align-items:center;gap:9px}
.chat .body{padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:11px;max-width:88%}
.msg .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.74rem;color:#fff;flex-shrink:0}
.msg .bub{background:#f4f6fa;border-radius:12px;padding:11px 14px;font-size:.89rem;min-width:0;word-wrap:break-word;overflow-wrap:anywhere}
.msg .nm{font-size:.75rem;font-weight:700;margin-bottom:3px;color:var(--navy)}
.msg .tm{font-size:.71rem;color:var(--mut);margin-top:5px}
.msg.client .av{background:var(--navy)}
.msg.tsit{align-self:flex-end;flex-direction:row-reverse}
.msg.tsit .av{background:var(--blue)}
.msg.tsit .bub{background:var(--blue-l)}
.msg.tsit .nm{color:var(--blue-d)}
.msg.intern{align-self:flex-end;flex-direction:row-reverse;max-width:92%}
.msg.intern .av{background:var(--warn);color:#4a3800}
.msg.intern .bub{background:var(--warn-l);border:1px dashed var(--warn)}
.msg.intern .nm{color:#8a6d00}
.msg .tag{font-size:.66rem;font-weight:700;text-transform:uppercase;color:#8a6d00;background:rgba(224,168,0,.25);padding:1px 7px;border-radius:4px;margin-left:6px}
.msg.sys{align-self:center;max-width:100%}
.msg.sys .bub{background:transparent;border:1px dashed var(--line);color:var(--mut);font-size:.79rem;text-align:center;padding:7px 14px}
.reply{border-top:1px solid var(--line);padding:14px 18px;background:#fafbfd}
.reply textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:.9rem;resize:vertical;min-height:76px}
.reply textarea:focus{outline:none;border-color:var(--blue)}
.reply .acts{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;align-items:center}
.reply .modes{display:flex;gap:6px;margin-right:auto}
.mode{padding:6px 12px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font-size:.81rem;cursor:pointer;font-family:inherit;color:var(--mut)}
.mode.on{background:var(--blue-l);border-color:var(--blue);color:var(--blue-d);font-weight:600}
.mode.on.int{background:var(--warn-l);border-color:var(--warn);color:#8a6d00}

/* side */
.side .card{margin-bottom:14px}
.side .acts-v{display:grid;gap:8px}
.side .acts-v .btn,.side .acts-v button{width:100%;justify-content:flex-start}
.linked{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:9px;font-size:.84rem;margin-bottom:8px;color:inherit}
.linked:hover{border-color:var(--blue)}
.linked .ic{width:30px;height:30px;border-radius:7px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.linked b{display:block;font-weight:600}
.linked small{color:var(--mut);font-size:.75rem}

/* progress */
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:8px 0}
.bar span{display:block;height:100%;background:var(--ok);border-radius:99px}
.bar.warn span{background:var(--warn)}
.bar.red span{background:var(--red)}

.note-box{border-radius:10px;padding:13px 15px;font-size:.86rem;margin-bottom:16px}
.note-blue{background:var(--blue-l);border:1px solid rgba(1,136,168,.25);color:#0a5468}
.note-warn{background:var(--warn-l);border:1px solid rgba(224,168,0,.3);color:#8a6d00}
.note-red{background:var(--red-l);border:1px solid rgba(226,75,64,.25);color:#8a2820}
.prose p{margin-bottom:12px}
.prose ul{margin:0 0 12px 20px}
.prose li{margin-bottom:5px;font-size:.92rem}

/* ===== RESPONSIVE ===== */
@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tk-grid{grid-template-columns:minmax(0,1fr)}
  .tk-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  /* shell: o singură coloană, sidebar devine overlay */
  .app{grid-template-columns:minmax(0,1fr)}
  .sb{position:fixed;left:0;top:0;bottom:0;width:var(--sb);max-width:84vw;height:100dvh;
      transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.25)}
  .app.nav-open .sb{transform:translateX(0)}
  .burger-p{display:flex}
  .app.nav-open .burger-p span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .app.nav-open .burger-p span:nth-child(2){opacity:0}
  .app.nav-open .burger-p span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .scrim{position:fixed;inset:0;background:rgba(10,15,28,.5);z-index:55;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .app.nav-open .scrim{display:block;opacity:1;visibility:visible;transition:opacity .25s ease}
  .grid2,.grid3,.login-wrap{grid-template-columns:minmax(0,1fr)}
  .content{padding:18px 15px 36px}
  .tb{padding:10px 14px;gap:10px}
  .tb h1{font-size:1.02rem}
  .tb .crumb{font-size:.74rem}
  .tb .who small{display:none}
  .tb .sp{gap:8px}
  .login-vis{padding:34px 26px}
  .login-vis h1{font-size:1.55rem}
  .login-vis .lg{margin-bottom:22px}
  .login-form{padding:30px 22px}
  .grid-f{grid-template-columns:minmax(0,1fr)}
  .msg{max-width:96%}
  .tk-head{padding:16px}
}
@media(max-width:520px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .tk-meta{grid-template-columns:minmax(0,1fr)}
}