:root{
  --ink:#1B1730;
  --ink-soft:#5B5675;
  --paper:#F6F5FB;
  --card:#FFFFFF;
  --line:#E6E3F2;
  --violet:#6C4FD6;
  --violet-dark:#5539B8;
  --amber:#E8963C;
  --green:#2E9E6A;
  --red:#D5473F;
  --radius:10px;
  font-size:15px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
a{color:var(--violet); text-decoration:none}
h1,h2,h3{margin:0 0 .4em; font-weight:650; letter-spacing:-.01em}

/* ---------- App Shell ---------- */
.app-shell{display:flex; min-height:100vh}
.sidebar{
  width:230px; background:#1B1730; color:#DAD5F0; flex-shrink:0;
  display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 22px}
.brand-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#8F6BF0,#6C4FD6); flex-shrink:0}
.brand-name{font-weight:700; color:#fff; font-size:15px}
.brand-org{font-size:11.5px; color:#9C93C4}
.nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto}
.nav-link{display:block; padding:9px 12px; border-radius:8px; color:#C7C0E6; font-size:13.6px; font-weight:500}
.nav-link:hover{background:#28224A; color:#fff}
.nav-link.active{background:var(--violet); color:#fff}
.sidebar-foot{border-top:1px solid #302A57; padding-top:14px; margin-top:10px}
.user-chip{display:flex; align-items:center; gap:9px; padding:4px 6px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0}
.u-name{font-size:13px; color:#fff; font-weight:600}
.u-role{font-size:11px; color:#9C93C4}
.logout-link{display:block; margin-top:10px; font-size:12.5px; color:#9C93C4; padding:0 6px}
.logout-link:hover{color:#fff}

.main{flex:1; min-width:0}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:19px}
.bell{position:relative; font-size:18px}
.badge{position:absolute; top:-6px; right:-10px; background:var(--red); color:#fff; font-size:10px; padding:1px 5px; border-radius:10px}
.content{padding:24px 28px 60px; max-width:1280px}

/* ---------- Flash ---------- */
.flash{padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13.5px; font-weight:500}
.flash-success{background:#E6F7EE; color:#1E7A4F}
.flash-error{background:#FBE9E8; color:#B8362D}
.flash-info{background:#EDEAFB; color:#4A3591}

/* ---------- Cards / tables ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px}
.grid{display:grid; gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr}}

/* ============================================================
   MOBILE / APP-LIKE RESPONSIVE LAYER
   Everything below only applies on small screens (<=760px).
   Desktop layout above is untouched.
   ============================================================ */
@media(max-width:760px){

  html{ -webkit-text-size-adjust:100%; }
  body{ padding-bottom:env(safe-area-inset-bottom); }

  /* ---- App shell: stack sidebar above content ---- */
  .app-shell{ flex-direction:column; min-height:100vh; }

  /* ---- Sidebar becomes a horizontally-scrolling top tab bar (app style) ---- */
  .sidebar{
    width:100%; height:auto; position:sticky; top:0; z-index:20;
    flex-direction:row; align-items:center; padding:10px 12px;
    gap:0; overflow:hidden;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .brand{ padding:0 10px 0 0; flex-shrink:0; }
  .brand-org{ display:none; } /* save space; company name still in topbar context */
  .nav{
    flex-direction:row; flex:1; overflow-x:auto; overflow-y:hidden;
    gap:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav-link{
    flex-shrink:0; white-space:nowrap; padding:8px 14px; font-size:13px;
    border-radius:20px; background:#28224A;
  }
  .nav-link.active{ background:var(--violet); }
  .sidebar-foot{ display:none; } /* user chip + logout move into Settings/topbar on mobile */

  /* ---- Topbar ---- */
  .topbar{
    padding:14px 16px; flex-wrap:wrap; row-gap:8px;
  }
  .topbar h1{ font-size:17px; }

  /* ---- Content ---- */
  .content{ padding:14px 14px 40px; max-width:100%; }
  .card{ padding:16px; border-radius:12px; }

  /* ---- Grids always single column on phones ---- */
  .grid, .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr !important; }
  /* Any inline-style grid (e.g. chat.php sidebar+pane) also stacks */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  .stat .num{ font-size:22px; }

  /* ---- Tables: bigger touch targets, comfortable scroll ---- */
  .table-wrap{ -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px; width:calc(100% + 32px); }
  table{ font-size:13px; }
  th, td{ padding:10px 8px; }
  td, th{ white-space:nowrap; }

  /* ---- Forms: prevent iOS auto-zoom (needs >=16px font) + bigger tap targets ---- */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=datetime-local], input[type=tel], select, textarea{
    font-size:16px; padding:12px 12px;
  }
  label{ font-size:13px; margin-bottom:6px; }
  .field{ margin-bottom:16px; }

  /* ---- Buttons: bigger tap area everywhere ---- */
  .btn{ padding:12px 18px; font-size:14.5px; min-height:44px; }
  .btn-sm{ padding:8px 12px; font-size:13px; min-height:38px; }
  .btn-row{ gap:8px; }
  /* Top-level action rows (page header "+Add" buttons, form submit rows) go full-width & stacked.
     Buttons inside table cells / small inline rows keep their natural size (flex-wrap handles overflow). */
  .flex-between{ flex-direction:column; align-items:stretch; gap:10px; }
  .flex-between > *{ width:100%; }
  .flex-between .btn-row{ width:100%; }
  .flex-between .btn-row > .btn, .flex-between .btn-row > form{ flex:1; min-width:120px; }
  .flex-between .btn-row > form > .btn{ width:100%; justify-content:center; }
  /* Small header rows inside cards (e.g. "Recent Leads ... View all") stay compact, not stacked */
  .card .flex-between{ flex-direction:row; align-items:center; }
  .card .flex-between > *{ width:auto; }
  td .btn-row, td form{ display:inline-flex; } /* keep table-cell buttons compact, not stretched */

  /* ---- Search/filter bars: stack cleanly ---- */
  form.btn-row input[type=text]{ flex:1 1 100%; }

  /* ---- Tabs: horizontal scroll instead of wrap ---- */
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .tab{ flex-shrink:0; }

  /* ---- Kanban board: swipeable, snap-scroll columns ---- */
  .board{ scroll-snap-type:x mandatory; margin:0 -14px; padding:0 14px 10px; }
  .board-col{ min-width:82vw; scroll-snap-align:start; }

  /* ---- Modals become bottom sheets (targets any position:fixed overlay used for add/edit dialogs) ---- */
  [style*="position:fixed"][style*="inset:0"]{
    align-items:flex-end !important;
  }
  [style*="position:fixed"][style*="inset:0"] > .card{
    width:100% !important; max-width:100% !important; max-height:88vh;
    overflow-y:auto; border-radius:18px 18px 0 0 !important;
    margin:0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    animation:sheetUp .22s ease-out;
  }
  @keyframes sheetUp{ from{ transform:translateY(24px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

  /* ---- Auth pages ---- */
  .auth-wrap{ padding:16px; align-items:center; }
  .auth-card{ padding:26px 22px; border-radius:14px; }

  /* ---- Recipe/doc print sheets ---- */
  .doc-sheet{ padding:18px; }

  /* ---- Misc spacing ---- */
  h1{ font-size:20px; } h2{ font-size:18px; } h3{ font-size:15.5px; }
  .btn-row > a.btn, .btn-row > a.btn-outline{ text-align:center; }
}

@media(max-width:420px){
  .board-col{ min-width:86vw; }
  .content{ padding:12px 12px 36px; }
  .card{ padding:14px; }
  .stat .num{ font-size:20px; }
}

@media(max-width:600px){.content{ padding:16px; }}

.stat{padding:18px}
.stat .num{font-size:26px; font-weight:700}
.stat .label{font-size:12.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em}

table{width:100%; border-collapse:collapse; font-size:13.6px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{color:var(--ink-soft); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em}
tr:hover td{background:#FAF9FE}
.table-wrap{overflow-x:auto}

/* ---------- Forms ---------- */
label{display:block; font-size:12.8px; font-weight:600; color:var(--ink-soft); margin:0 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],input[type=tel],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13.8px; font-family:inherit; background:#fff; color:var(--ink);
}
textarea{resize:vertical; min-height:80px}
.field{margin-bottom:14px}
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:8px; border:1px solid transparent;
  font-size:13.6px; font-weight:600; cursor:pointer; background:var(--violet); color:#fff;
}
.btn:hover{background:var(--violet-dark)}
.btn-outline{background:#fff; color:var(--violet); border-color:var(--violet)}
.btn-outline:hover{background:#F1EDFC}
.btn-danger{background:var(--red)}
.btn-danger:hover{background:#B8362D}
.btn-sm{padding:5px 10px; font-size:12.5px}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}

.badge-pill{display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700}
.pill-open{background:#EDEAFB;color:#4A3591}
.pill-won{background:#E6F7EE;color:#1E7A4F}
.pill-lost{background:#FBE9E8;color:#B8362D}
.pill-draft{background:#F0EFF6;color:#5B5675}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px}
.tab{padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent}
.tab.active{color:var(--violet); border-color:var(--violet)}

.muted{color:var(--ink-soft)}
.small{font-size:12.3px}
.mt{margin-top:16px}
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- Kanban board ---------- */
.board{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px}
.board-col{background:#EFEDF9; border-radius:12px; padding:12px; min-width:270px; flex-shrink:0}
.board-col-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:700; font-size:13px}
.board-card{background:#fff; border-radius:9px; padding:10px 12px; margin-bottom:9px; border:1px solid var(--line); font-size:13px}
.board-card .name{font-weight:600}
.board-card .meta{color:var(--ink-soft); font-size:11.5px; margin-top:2px}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#221C46,#3E2E82); padding:20px}
.auth-card{background:#fff; border-radius:16px; padding:36px 34px; width:100%; max-width:400px; box-shadow:0 20px 50px rgba(20,10,60,.35)}
.auth-card h1{font-size:20px; margin-bottom:2px}
.auth-sub{color:var(--ink-soft); font-size:13px; margin-bottom:22px}
.auth-foot{text-align:center; font-size:13px; margin-top:16px; color:var(--ink-soft)}

/* Print docs */
.doc-sheet{background:#fff; padding:34px; max-width:800px; margin:0 auto; border:1px solid var(--line); border-radius:8px}
@media print{.sidebar,.topbar,.no-print{display:none!important} .content{padding:0} .doc-sheet{border:none}}