*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0f0f0f;--s1:#1a1a1a;--s2:#222;--s3:#2a2a2a;--s4:#333;
  --bd:rgba(255,255,255,0.07);--bd2:rgba(255,255,255,0.14);
  --t1:#f0f0f0;--t2:#888;--t3:#555;
  --or:#ff9933;--ordim:rgba(255,153,51,0.12);
  --gr:#22c55e;--grdim:rgba(34,197,94,0.12);
  --rd:#ef4444;--rddim:rgba(239,68,68,0.12);
  --bl:#3b82f6;--bldim:rgba(59,130,246,0.12);
  --yl:#eab308;
  --r:10px;--rl:14px;--rx:18px;
}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;}
input,select,textarea,button{font-family:inherit;font-size:14px;line-height:1.5;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}

/* ══ PAGE SYSTEM ══ */
.page{display:none;}
#pg-login.active{
  display:flex;
  min-height:100vh;
  width:100%;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:var(--bg);
}
#pg-app.active{
  display:flex;
  flex-direction:row;
  min-height:100vh;
}
#pg-dash.active,#pg-form.active,#pg-sett.active,#pg-leads.active,#pg-clients.active,#pg-tools.active,#pg-cashbook.active,#pg-team-page.active,#pg-tasks.active{display:block;}

/* ══ COMPONENTS ══ */
.card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--rl);padding:20px;margin-bottom:14px;}
.inp{display:block;width:100%;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r);color:var(--t1);outline:none;transition:border-color .2s;}
.inp:focus{border-color:var(--or);}
.inp::placeholder{color:var(--t3);}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
.ta{display:block;width:100%;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r);color:var(--t1);outline:none;resize:vertical;min-height:80px;line-height:1.6;}
.ta:focus{border-color:var(--or);}
.lbl{display:block;font-size:10px;font-weight:700;color:var(--t2);margin-bottom:5px;letter-spacing:.8px;text-transform:uppercase;}
.btn{padding:9px 18px;border-radius:var(--r);font-weight:700;font-size:13px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s;white-space:nowrap;text-decoration:none;}
.btn:hover{opacity:.82;}
.btn-or{background:var(--or);color:#000;}
.btn-out{background:transparent;color:var(--t1);border:1px solid var(--bd2);}
.btn-ghost{background:transparent;color:var(--t2);border:none;}
.btn-dk{background:var(--s2);color:var(--t1);border:1px solid var(--bd);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-lg{padding:12px 24px;font-size:15px;}
.row{display:flex;flex-wrap:wrap;gap:14px;}
.half{flex:1 1 calc(50% - 7px);min-width:140px;}
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{padding:9px 11px;text-align:left;font-weight:700;color:var(--t3);font-size:10px;letter-spacing:.7px;text-transform:uppercase;border-bottom:1px solid var(--bd);}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--bd);vertical-align:middle;}
.tbl tbody tr:hover td{background:var(--s2);}
.stat{background:var(--s1);border:1px solid var(--bd);border-radius:var(--rl);padding:16px 18px;}
.nb{padding:7px 13px;border-radius:7px;border:none;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s;background:transparent;color:var(--t2);}
.nb.on{background:var(--ordim);color:var(--or);}
.tab{padding:9px 15px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--t2);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;margin-bottom:-1px;}
.tab.on{border-bottom-color:var(--or);color:var(--or);}
.svc-tag{padding:6px 12px;border-radius:18px;border:1.5px solid var(--bd);background:transparent;color:var(--t2);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;}
.svc-tag.sel{border-color:var(--or);background:var(--ordim);color:var(--or);}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:900;padding:14px;display:none;overflow-y:auto;}
.modal{background:var(--s1);border:1px solid var(--bd2);border-radius:var(--rx);max-width:540px;width:100%;margin:20px auto;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden;}
.mhd{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;background:var(--s1);border-radius:var(--rx) var(--rx) 0 0;flex-shrink:0;}
.mbd{padding:18px;overflow-y:auto;flex:1;min-height:0;}
.rich{width:100%;min-height:140px;max-height:380px;overflow-y:auto;padding:9px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:0 0 var(--r) var(--r);color:var(--t1);outline:none;line-height:1.7;}
.rich:focus{border-color:var(--or);}
.rich h2,.rich h3{color:var(--t1);margin:6px 0 3px;font-weight:700;}
.rich ul,.rich ol{padding-left:18px;margin:4px 0;}
.rich li{margin:2px 0;color:var(--t1);}
.rich strong{font-weight:700;}
.tbar{display:flex;flex-wrap:wrap;gap:3px;padding:5px 7px;background:var(--s3);border:1px solid var(--bd);border-radius:var(--r) var(--r) 0 0;}
.tbar button{padding:3px 7px;background:var(--s2);border:1px solid var(--bd);border-radius:4px;color:var(--t2);cursor:pointer;font-size:11px;font-weight:700;}
.tbar button:hover{color:var(--t1);}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.au{animation:fadeup .25s ease both;}

/* ══ DESKTOP LAYOUT ══ */
#pg-dash{padding:16px;max-width:1400px;margin:0 auto;width:100%;}
#pg-leads{padding:14px 14px 40px;max-width:1200px;margin:0 auto;width:100%;}
#pg-clients{padding:14px 14px 40px;width:100%;}
#pg-leads.active{display:block;margin-top:0;padding-top:14px;}
#pg-form{padding:14px;max-width:800px;margin:0 auto;width:100%;padding-bottom:60px;}
#pg-sett{padding:14px;max-width:940px;margin:0 auto;width:100%;}

/* ══ MOBILE RESPONSIVE ══ */
@media(max-width:768px){
  #global-search{font-size:11px;padding:6px 10px;}
  #global-search::placeholder{font-size:10px;}
  #pg-dash,#pg-form,#pg-sett,#pg-clients,#pg-leads{padding:10px !important;}
  .stat{min-width:calc(50% - 5px);padding:12px 13px;}
  .stat .stat-val{font-size:17px !important;}
  #stats-row{gap:8px;}
  
  .card{padding:13px;}
  .half{flex:1 1 100%;min-width:unset;}
  .row{gap:10px;}
  .modal{max-width:calc(100vw - 16px);margin:10px auto;}
  .mbd{padding:13px;}
  .tab{padding:7px 10px;font-size:11px;}
  .tbl{font-size:11px;}
  .tbl th,.tbl td{padding:7px 8px;}
  .btn-lg{padding:11px 20px;font-size:14px;}
  #nav-nm{display:none;}
  .nb span.nb-txt{display:inline;}
  nav{padding:0 8px !important;gap:4px !important;}

  /* STATS: 2 boxes per line on mobile (dashboard, leads, clients) */
  #cl-stats,#stats-row,#lead-stats{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;}
  #cl-stats .stat,#stats-row .stat,#lead-stats .stat{min-width:unset !important;width:100% !important;padding:11px 10px !important;}
  #stats-row .stat .stat-val,#lead-stats .stat > div:nth-child(2){font-size:16px !important;}

  /* Client modal form: all grids stack to 1-2 columns */
  #client-modal .mbd [style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;}
  #client-modal .row > div[style*="grid-template-columns:80px"]{grid-template-columns:1fr 1fr !important;}

  /* Payment form stacks */
  #cl-payments-section [style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;}

  /* Client filter bar: full width items */
  #cl-srch{max-width:unset !important;flex:1 1 100% !important;}

  /* Tables scroll horizontally on mobile */
  #cl-table-wrap{-webkit-overflow-scrolling:touch;}

  /* View modal grids stack */
  #view-client-body [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}

  /* Action center stacks vertically */
  #action-center [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  #action-center [style*="border-right"]{border-right:none !important;border-bottom:1px solid var(--bd) !important;}

  /* Reports modal grids stack */
  #reports-body [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;}
  #reports-body [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}

  /* Client action buttons wrap nicely */
  #pg-clients [style*="display:flex"][style*="gap:7px"]{flex-wrap:wrap;}

  /* Bulk send bar wraps */
  #bulk-send-bar{flex-wrap:wrap;}

  /* Template textareas readable */
  #template-modal .ta{font-size:12px !important;}
}
@media(max-width:480px){
  #pg-login.active{padding:12px;}
  .stat{min-width:calc(50% - 4px);padding:10px 11px;}
  .stat .stat-val{font-size:15px !important;}
  #role-badge{display:none;}

  /* Proposal table: hide extra columns (but NOT client table) */
  #pg-dash .tbl td:nth-child(n+5),#pg-dash .tbl th:nth-child(n+5){display:none;}
  #pg-dash .tbl td:nth-child(4),#pg-dash .tbl th:nth-child(4){display:table-cell !important;}

  /* Client stats stay 2 per row */
  #cl-stats{grid-template-columns:1fr 1fr !important;}
  #cl-stats .stat .stat-val,#cl-stats div[style*="font-size:17px"]{font-size:15px !important;}

  /* Client table: keep scrollable, don't hide columns (data important) */
  #cl-table-wrap table{min-width:900px;}

  /* Modal tighter */
  .mbd{padding:11px !important;}
  .lbl{font-size:10px !important;}
  .inp{font-size:12px !important;padding:8px 10px !important;}
}
@media print{
  .np{display:none !important;}
  body{background:#fff !important;}
}


/* ═══════════════════════════════════════════
   SIDEBAR LAYOUT (left navigation)
   ═══════════════════════════════════════════ */
.sidebar{
  width:230px;
  min-width:230px;
  background:var(--s1);
  border-right:1px solid var(--bd);
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  padding:16px 12px;
  z-index:300;
  flex-shrink:0;
}
.sidebar-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 16px;
  border-bottom:1px solid var(--bd);
  margin-bottom:12px;
}
.sidebar-links{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
  overflow-y:auto;
}
.sidebar-links .nb{
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:11px 13px;
  background:transparent;
  border:none;
  border-radius:9px;
  color:var(--t2);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:all .15s;
}
.sidebar-links .nb:hover{
  background:var(--s2);
  color:var(--t1);
}
.sidebar-links .nb.on{
  background:var(--ordim);
  color:var(--or);
  font-weight:700;
}
.sidebar-links .nb .nb-txt{ flex:1; }
.sidebar-foot{
  border-top:1px solid var(--bd);
  padding-top:12px;
  margin-top:8px;
  flex-shrink:0;
}
.main-content{
  flex:1;
  min-width:0;
  padding:22px 26px;
  overflow-x:hidden;
  max-width:100%;
}

/* Mobile top bar + overlay - hidden on desktop */
.mobile-topbar{ display:none; }
.sidebar-overlay{ display:none; }

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE (below 900px)
   ═══════════════════════════════════════════ */
@media (max-width: 900px){
  #pg-app.active{ flex-direction:column; }

  /* Mobile top bar with hamburger */
  .mobile-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:54px;
    background:var(--s1);
    border-bottom:1px solid var(--bd);
    padding:0 14px;
    position:sticky;
    top:0;
    z-index:250;
    flex-shrink:0;
  }
  .hamburger{
    background:var(--s2);
    border:1px solid var(--bd);
    border-radius:8px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--t1);
    cursor:pointer;
  }

  /* Sidebar slides in from left */
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    height:100dvh;
    width:270px;
    min-width:270px;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.4);
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    padding-bottom:20px;
  }
  .sidebar.open{ transform:translateX(0); }

  .sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:299;
    opacity:0;
    pointer-events:none;
    transition:opacity .28s;
  }
  .sidebar-overlay.show{
    opacity:1;
    pointer-events:auto;
  }

  .main-content{ padding:14px; }

  /* Make tables scroll horizontally on mobile */
  .tbl{ font-size:11px; }

  /* Stack grids on mobile */
  .grid2{ grid-template-columns:1fr !important; }
}

/* Small phones */
@media (max-width: 480px){
  .main-content{ padding:10px; }
  .card{ padding:14px !important; }
}


/* SIDEBAR COLLAPSE BUTTON */
.sidebar-collapse-btn{
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:7px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--t2);
  cursor:pointer;
  flex-shrink:0;
  transition:all .15s;
}
.sidebar-collapse-btn:hover{ background:var(--s3); color:var(--or); }

/* COLLAPSED SIDEBAR (desktop only) */
@media (min-width: 901px){
  #pg-app.sidebar-collapsed .sidebar{
    width:66px;
    min-width:66px;
    padding:16px 8px;
  }
  #pg-app.sidebar-collapsed .sidebar-head{
    flex-direction:column;
    gap:8px;
    padding:6px 0 12px;
  }
  #pg-app.sidebar-collapsed #nav-brand,
  #pg-app.sidebar-collapsed #role-badge,
  #pg-app.sidebar-collapsed .nb-txt,
  #pg-app.sidebar-collapsed .sidebar-head > div[style*="flex:1"],
  #pg-app.sidebar-collapsed #nav-nm,
  #pg-app.sidebar-collapsed .sidebar-foot > div > div[style*="flex:1"]{
    display:none;
  }
  #pg-app.sidebar-collapsed .sidebar-links .nb{
    justify-content:center;
    padding:12px 0;
  }
  #pg-app.sidebar-collapsed .sidebar-collapse-btn{
    transform:rotate(180deg);
  }
  #pg-app.sidebar-collapsed .sidebar-foot{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  #pg-app.sidebar-collapsed .sidebar-foot > div:first-child{
    justify-content:center;
    padding:8px;
  }
  #pg-app.sidebar-collapsed .logout-btn{
    padding:10px 8px;
  }
  #pg-app.sidebar-collapsed .logout-txt{
    display:none;
  }
}


/* ═══ TOOLS PAGE RESPONSIVE ═══ */
#pg-tools .tab{
  font-size:12px;
  padding:9px 12px;
  white-space:nowrap;
}
.tool-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

@media (max-width: 640px){
  /* Tools tabs scroll horizontally instead of squishing */
  #pg-tools > div:nth-child(2){
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
  #pg-tools .tab{ flex-shrink:0; }

  /* QR two-column grid stacks to one column */
  .tool-grid2{ grid-template-columns:1fr !important; }

  /* Sample website + WhatsApp cards - make inner rows wrap nicely */
  #samples-list input, #wa-templates-list textarea{ font-size:12px; }

  /* Category header buttons wrap on small screens */
  #samples-list > div > div:first-child{
    flex-wrap:wrap;
  }
  #samples-list > div > div:first-child > div{
    width:100%;
    justify-content:flex-start;
  }

  /* QR output image fits screen */
  #qr-output img{ max-width:100%; height:auto !important; }
  #qr-output > div{ max-width:100%; }
}


/* ═══ PROPOSAL ACTIONS — sticky right on mobile so buttons always reachable ═══ */
@media (max-width: 900px){
  .prop-actions{
    position:sticky;
    right:0;
    background:var(--s1);
    box-shadow:-6px 0 12px rgba(0,0,0,.3);
    z-index:2;
  }
  /* Give a subtle divider */
  .prop-actions::before{
    content:'';
    position:absolute;
    left:0; top:0; bottom:0;
    width:1px;
    background:var(--bd);
  }
}

@media (max-width: 900px){
  .prop-actions button{
    padding:5px 7px !important;
    font-size:10px !important;
  }
  .prop-actions > div{
    gap:4px !important;
  }
}


/* ═══ PROPOSALS: table on desktop, cards on mobile ═══ */
.prop-cards{ display:none; }

@media (max-width: 768px){
  /* Hide the wide table, show cards instead */
  .prop-table-wrap{ display:none !important; }
  .prop-cards{ display:block; }
  .prop-card{
    background:var(--s1);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
  }
}


/* ═══ CLIENTS & LEADS: table on desktop, cards on mobile ═══ */
.cli-cards, .lead-cards{ display:none; }

@media (max-width: 768px){
  .cli-table-wrap, .lead-table-wrap{ display:none !important; }
  .cli-cards, .lead-cards{ display:block; }
  .cli-card, .lead-card{
    background:var(--s1);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
  }
}





/* ═══ SAMPLE WEBSITES — categories in 3-column grid ═══ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  align-items:start;
}
@media (max-width: 900px){
  .cat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .cat-grid{ grid-template-columns:1fr; }
}


/* ═══ SETTINGS PAGE — mobile responsive ═══ */
/* Settings tabs scroll horizontally on mobile instead of wrapping messily */
@media (max-width: 768px){
  .sett-tabs{
    display:flex !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    gap:2px;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  #pg-sett .tab{
    flex-shrink:0;
    white-space:nowrap;
    font-size:12px;
    padding:8px 11px;
  }
}

/* Employee: table on desktop, cards on mobile */
.emp-cards{ display:none; }
@media (max-width: 768px){
  .emp-table-wrap{ display:none !important; }
  .emp-cards{ display:block; }
  .emp-card{
    background:var(--s1);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
  }
}


/* ═══ STATS GRID — compact cards left to right ═══ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.stats-grid .stat{
  padding:14px 16px;
}
.stats-grid .stat-val{
  font-size:19px !important;
}
@media (max-width: 900px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .stats-grid .stat{ padding:12px; }
  .stats-grid .stat-val{ font-size:16px !important; }
}


/* ═══ CHART GRID — Monthly Revenue + Status side by side ═══ */
.chart-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
}
@media (max-width: 768px){
  .chart-grid{ grid-template-columns:1fr; }
}


/* ═══ SERVICES — table desktop, cards mobile ═══ */
.svc-cards{ display:none; }
@media (max-width: 768px){
  .svc-table-wrap{ display:none !important; }
  .svc-cards{ display:block; }
  .svc-card{
    background:var(--s1);
    border:1px solid var(--bd);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
  }
}


/* Proposal stats — 5 cards in one row */
.stats-grid-5{
  grid-template-columns:repeat(5, 1fr) !important;
}
@media (max-width: 900px){
  .stats-grid-5{ grid-template-columns:repeat(2, 1fr) !important; }
}


/* Notification panel mobile */
@media (max-width: 768px){
  #notif-panel{ top:56px !important; left:8px !important; right:8px !important; width:auto !important; }
}