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

:root{
  --navy:#0B1220; --navy-light:#141823; --pink:#FF0046; --pink-dark:#C4003A;
  --teal:#2E7D6E; --paper:#F7F5F6; --paper-line:#E6E8EE; --ink:#151923;
  --coral:#D65F5F; --muted:#5B6475; --card:#FFFFFF; --amber:#B45309;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink);}
.font-display{font-family:'Sora',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(11,18,32,.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 .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;}
.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(--pink); color:#fff;}
.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(11,18,32,.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(--pink-dark); margin-bottom:4px;}
.section-head h2{font-family:'Sora',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(--pink); color:#fff; 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; display:inline-block;}

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(--pink); 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:600; white-space:nowrap;}
.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(--navy); color:#fff; border-color:var(--navy);}

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(--pink-dark); border:1px solid var(--paper-line);}
.stat-num{font-size:32px; font-weight:700; font-family:'Sora',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;}
.alert-warn{background:#B453091A; color:var(--amber); border:1px solid #B4530955;}

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

.modal{display:none; position:fixed; inset:0; background:rgba(11,18,32,.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;}

/* Pipeline (Kanban) */
.pipeline-board{display:flex; gap:14px; overflow-x:auto; padding-bottom:12px;}
.pipeline-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);}
.pipeline-col-head{padding:12px 14px; border-bottom:1px solid var(--paper-line); font-size:12px; font-weight:700;}
.pipeline-col-body{padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px;}
.pipeline-card{background:var(--paper); border:1px solid var(--paper-line); border-radius:8px; padding:10px 12px; text-decoration:none; color:inherit; display:block;}
.pipeline-card:hover{box-shadow:0 2px 8px rgba(11,18,32,.10);}
.pipeline-card .pcname{font-size:13px; font-weight:700; margin-bottom:2px;}
.pipeline-card .pcmeta{font-size:11px; color:var(--muted);}

/* ============ 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 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; }

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