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

:root{
  --charcoal:#2A2825; --charcoal-light:#37342F; --gold:#F2B705; --gold-deep:#B88900;
  --gold-soft:#F2B70522; --paper:#F7F4EE; --paper-line:#E7E1D2; --ink:#211F1B;
  --muted:#6E6858; --card:#FFFFFF; --teal:#1F7A5C; --red:#B3261E; --amber:#C77800;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink);}
.font-display{font-family:'Archivo',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.collapsed{left:4px;}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(20,18,12,.5); z-index:25;}
.sidebar-overlay.active{display:block;}
.sidebar{width:240px; flex-shrink:0; background:var(--charcoal); 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 .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 .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:28px; display:block; text-decoration:none;}
.sidebar .brand .mark{display:flex; align-items:center; gap:9px; margin-bottom:4px;}
.sidebar .brand .mark svg{flex:0 0 auto;}
.sidebar .brand .wordmark{font-family:'Archivo',sans-serif; font-size:18px; font-weight:900; color:#fff; line-height:1; letter-spacing:.01em;}
.sidebar .brand .wordmark span{color:var(--gold);}
.sidebar .brand .sub{font-size:10.5px; color:#B9B3A2; margin-top:4px; font-family:'IBM Plex Mono',monospace; letter-spacing:.02em;}
.navlink{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:#D8D3C6; text-decoration:none; margin-bottom:4px;}
.navlink:hover{background:rgba(255,255,255,.07);}
.navlink.active{background:var(--gold); color:#221C02;}
.userbox{padding:12px; border-radius:8px; background:var(--charcoal-light);}
.userbox .name{font-size:12px; font-weight:700; color:#fff;}
.userbox .role{font-size:11px; color:#B9B3A2; font-family:'IBM Plex Mono',monospace;}
.userbox a{color:#B9B3A2; 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(30,25,10,.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(--gold-deep); margin-bottom:4px;}
.section-head h2{font-family:'Archivo',sans-serif; font-size:25px; font-weight:800; color:var(--ink); margin:0;}

.btn-primary{background:var(--charcoal); color:#fff; font-weight:700; font-size:13.5px; 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(--gold); color:#221C02; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:8px; border:none; cursor:pointer;}
.btn-accent:hover{background:var(--gold-deep); color:#fff;}
.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; display:inline-block;}
.btn-danger{background:var(--red); color:#fff; font-weight:700; font-size:13px; padding:8px 14px; border-radius:8px; border:none; cursor:pointer;}

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(--gold); outline-offset:1px;}
input[readonly],textarea[readonly]{background:var(--paper); color:var(--muted); cursor:default;}
input[readonly]:focus,textarea[readonly]:focus{outline:none;}
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:700; white-space:nowrap; font-family:'IBM Plex Mono',monospace;}
.badge-dot{width:6px;height:6px;border-radius:50%;}

.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;}
.filterchip.active{background:var(--charcoal); color:#fff; border-color:var(--charcoal);}

table{width:100%; font-size:13.5px; border-collapse:collapse;}
th{text-align:left; padding:12px 18px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); border-bottom:1px solid var(--paper-line);}
td{padding:11px 18px; 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(--gold-deep); border:1px solid var(--paper-line); font-family:'IBM Plex Mono',monospace;}
.stat-num{font-size:32px; font-weight:800; font-family:'Archivo',sans-serif; line-height:1; font-variant-numeric:tabular-nums;}

.alert{padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.alert-error{background:#B3261E1A; color:var(--red); border:1px solid #B3261E55;}
.alert-success{background:#1F7A5C1A; color:var(--teal); border:1px solid #1F7A5C55;}
.alert-warn{background:#C778001A; color:var(--amber); border:1px solid #C7780055;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--charcoal); background-image:radial-gradient(circle at 20% 15%, #3d3a33 0%, var(--charcoal) 55%);}
.login-box{background:var(--paper); border-radius:16px; padding:36px; width:100%; max-width:380px; box-shadow:0 30px 70px rgba(0,0,0,.35);}

.modal{display:none; position:fixed; inset:0; background:rgba(30,25,10,.45); align-items:center; justify-content:center; padding:16px; z-index:50;}
.modal-card{background:#fff; border-radius:12px; max-width:460px; width:100%; padding:0;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--paper-line);}
.modal-body{padding:24px;}

/* Cote board (grid pe categorii, reinterpretare a unui Kanban) */
.cote-board{display:flex; gap:14px; overflow-x:auto; padding-bottom:12px;}
.cote-col{flex:0 0 260px; background:#fff; border:1px solid var(--paper-line); border-radius:12px; display:flex; flex-direction:column; max-height:calc(100vh - 220px);}
.cote-col-head{padding:12px 14px; border-bottom:1px solid var(--paper-line); font-size:12px; font-weight:700;}
.cote-col-body{padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px;}
.cote-card{background:var(--paper); border:1px solid var(--paper-line); border-radius:8px; padding:10px 12px;}

.qgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px;}
.qcard{background:#fff; border:1px solid var(--paper-line); border-radius:10px; padding:11px 13px;}
.qcard .qname{font-size:12.5px; font-weight:700; margin-bottom:7px; display:flex; justify-content:space-between; align-items:center;}
.qcard .qn{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--muted); font-weight:500;}
.qcard .qbar{height:5px; border-radius:999px; background:#EDE7D8; overflow:hidden;}
.qcard .qbar i{display:block; height:100%; border-radius:999px;}
.qcard.closed .qbar i{background:var(--red);}
.qcard.warn .qbar i{background:var(--amber);}
.qcard.open .qbar i{background:var(--teal);}
.qcard.closed .qname{color:var(--red);}
.qchip{font-size:9.5px; font-family:'IBM Plex Mono',monospace; padding:2px 7px; border-radius:999px; margin-top:6px; display:inline-block;}
.qcard.closed .qchip{background:#B3261E1A; color:var(--red);}
.qcard.warn .qchip{background:#C778001A; color:var(--amber);}
.qcard.open .qchip{background:#1F7A5C1A; color:var(--teal);}

.status-banner{border-radius:10px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.status-banner.open{background:#1F7A5C14; border:1.5px solid #1F7A5C55;}
.status-banner.closed{background:#B3261E14; border:1.5px solid #B3261E55;}
.status-banner .sb-title{font-family:'Archivo',sans-serif; font-weight:800; font-size:14.5px;}
.status-banner.open .sb-title{color:var(--teal);}
.status-banner.closed .sb-title{color:var(--red);}
.sb-count{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted);}

.pillrow{display:flex; gap:8px; flex-wrap:wrap;}
.pillbtn{padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; border:1.5px solid var(--paper-line); background:#fff; color:var(--ink); cursor:pointer;}
.pillbtn:hover{border-color:var(--gold-deep);}
.pillbtn-suggested{border-color:var(--gold-deep); background:var(--gold-soft); box-shadow:0 0 0 1px var(--gold-deep) inset;}

.autocomplete-wrap{position:relative;}
.autocomplete-dropdown{display:none; position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:20; max-height:230px; overflow-y:auto; border:1px solid var(--paper-line); border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12);}
.autocomplete-option{padding:8px 12px; cursor:pointer; font-size:14px;}
.autocomplete-option:hover, .autocomplete-option.active{background:var(--gold-soft);}
.autocomplete-empty{padding:8px 12px; font-size:13px; color:var(--muted); font-style:italic;}

/* ============ 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);
  }
  .sidebar.collapsed{
    width:250px !important; padding:24px 16px !important;
    transform:translateX(-100%);
  }
  .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; }

  [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; }
}