@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --navy:#14213D; --navy-light:#1E2E52; --amber:#E8A23A; --amber-dark:#C6801F;
  --teal:#2E7D6E; --paper:#FBF7EF; --paper-line:#E4DCC8; --ink:#23252B;
  --coral:#D65F5F; --muted:#8B8578; --card:#FFFFFF;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink);}
.font-display{font-family:'Barlow Condensed',sans-serif;}
.font-mono{font-family:'IBM Plex Mono',monospace;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--paper-line);border-radius:8px;}

.app-shell{display:flex; min-height:100vh; width:100%; position:relative;}
.sidebar-toggle{position:absolute; top:24px; left:228px; width:26px; height:26px; border-radius:50%; background:var(--amber); border:2px solid var(--navy); color:var(--navy); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:20; transition:left .2s ease; box-shadow:0 2px 6px rgba(0,0,0,.25); padding:0;}
.sidebar-toggle.collapsed{left:4px;}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(15,20,35,.5); z-index:25;}
.sidebar-overlay.active{display:block;}
.sidebar{width:240px; flex-shrink:0; background:var(--navy); padding:24px 16px; display:flex; flex-direction:column; position:relative; transition:width .2s ease, padding .2s ease;}
.sidebar.collapsed{width:64px; padding-left:8px; padding-right:8px;}
.sidebar.collapsed .brand{padding:0; text-align:center;}
.sidebar.collapsed .brand img{display:none !important;}
.sidebar.collapsed .brand .wordmark, .sidebar.collapsed .brand .sub{display:none;}
.sidebar.collapsed .navlink{justify-content:center; padding:10px 8px;}
.sidebar.collapsed .navlabel{display:none;}
.sidebar.collapsed .userbox{padding:12px 4px; text-align:center;}
.sidebar.collapsed .userbox img{display:none !important;}
.sidebar.collapsed .userbox .name, .sidebar.collapsed .userbox .role{display:none;}
.sidebar.collapsed .userbox-links{align-items:center !important;}
.sidebar-toggle.collapsed{left:52px;}
.sidebar .brand{padding:0 8px; margin-bottom:32px;}
.sidebar .brand img{height:32px; object-fit:contain; object-position:left; margin-bottom:8px;}
.sidebar .brand .wordmark{font-size:18px; font-weight:700; color:#fff; line-height:1.1;}
.sidebar .brand .sub{font-size:11px; color:#8FA0C4; margin-top:2px;}
.navlink{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; color:#C9D3E8; text-decoration:none; margin-bottom:4px;}
.navlink:hover{background:rgba(255,255,255,.06);}
.navlink.active{background:var(--amber); color:var(--navy);}
.userbox{padding:12px; border-radius:8px; background:var(--navy-light);}
.userbox .name{font-size:12px; font-weight:600; color:#fff;}
.userbox .role{font-size:11px; color:#8FA0C4;}
.userbox a{color:#8FA0C4; font-size:11px;}

.main{flex:1; padding:32px; overflow-y:auto; max-height:100vh;}
.card{background:var(--card); border:1px solid var(--paper-line); border-radius:12px; box-shadow:0 1px 3px rgba(20,33,61,.06);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-dark); margin-bottom:4px;}
.section-head h2{font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:700; color:var(--ink); margin:0;}

.btn-primary{background:var(--navy); color:#fff; font-weight:600; font-size:14px; padding:9px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; text-decoration:none;}
.btn-accent{background:var(--amber); color:var(--navy); font-weight:600; font-size:14px; padding:10px 16px; border-radius:8px; border:none; cursor:pointer;}
.btn-ghost{background:transparent; border:1px solid var(--paper-line); font-size:13px; padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600; color:var(--ink); text-decoration:none;}

input,select,textarea{width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--paper-line); background:#fff; font-size:14px; color:var(--ink); font-family:'Inter',sans-serif;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber); outline-offset:1px;}
label.field{display:block; margin-bottom:14px;}
label.field span{display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:6px;}

.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;}
.badge-dot{width:6px;height:6px;border-radius:50%;}

.ticket{position:relative; display:flex; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--paper-line); text-decoration:none; color:inherit; transition:box-shadow .15s;}
.ticket:hover{box-shadow:0 4px 14px rgba(20,33,61,.10);}
.stripe{width:8px; flex-shrink:0;}

.filterchip{padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--paper-line); background:#fff; cursor:pointer; text-decoration:none; color:var(--ink); display:inline-block;}

table{width:100%; font-size:14px; border-collapse:collapse;}
th{text-align:left; padding:12px 20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom:1px solid var(--paper-line);}
td{padding:12px 20px; border-bottom:1px solid var(--paper-line); vertical-align:top;}
.tag{font-size:11px; padding:2px 8px; border-radius:999px; background:var(--paper); color:var(--amber-dark); border:1px solid var(--paper-line);}
.stat-num{font-size:32px; font-weight:700; font-family:'Barlow Condensed',sans-serif; line-height:1;}

.alert{padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.alert-error{background:#D65F5F1A; color:var(--coral); border:1px solid #D65F5F55;}
.alert-success{background:#2E7D6E1A; color:var(--teal); border:1px solid #2E7D6E55;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy);}
.login-box{background:var(--paper); border-radius:16px; padding:36px; width:100%; max-width:380px;}

/* ============ RESPONSIVE / MOBIL ============ */
@media (max-width: 860px){
  .sidebar{
    position:fixed !important; top:0; left:0; bottom:0; height:100vh;
    z-index:30; width:250px !important; max-width:80vw;
    padding:24px 16px !important;
    transform:translateX(0); transition:transform .25s ease;
    box-shadow:6px 0 30px rgba(0,0,0,.35);
  }
  /* pe mobil "collapsed" = meniul iese complet din ecran, nu se restrânge la iconițe */
  .sidebar.collapsed{
    width:250px !important; padding:24px 16px !important;
    transform:translateX(-100%);
  }
  .sidebar.collapsed .brand img, .sidebar.collapsed .userbox img{ display:block !important; }
  .sidebar.collapsed .brand .wordmark, .sidebar.collapsed .brand .sub{ display:block !important; }
  .sidebar.collapsed .navlabel{ display:inline !important; }
  .sidebar.collapsed .navlink{ justify-content:flex-start !important; }
  .sidebar.collapsed .userbox .name, .sidebar.collapsed .userbox .role{ display:block !important; }

  .main{ padding:16px !important; max-width:100vw; overflow-x:hidden; }

  table{ font-size:12px; }
  th, td{ padding:8px 10px !important; white-space:nowrap; }
  .card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  .login-box{ padding:24px; max-width:92vw; }

  /* grid-uri inline (stat-carduri, layout-uri pe 2/3/4 coloane) — le adun pe ecrane mici */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"]{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 480px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  .section-head h2{ font-size:20px !important; }
  .stat-num{ font-size:26px !important; }
}