/* Hide hamburger by default (desktop) */
.hamburger{ display:none }


:root{
  --bg:#0b0d10;
  --panel:#12161b;
  --muted:#2a2f36;
  --text:#e8eef5;
  --text-muted:#9fb0c0;
  --primary:#5b9bff;
  --accent:#77e0a0;
  --danger:#ff6b6b;
  --warning:#ffcf5b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:12px;
  --gap:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:linear-gradient(180deg,#0b0d10,#0c1117); color:var(--text); font:15px/1.45 var(--font) }

a{color:var(--primary); text-decoration:none}
a:hover{opacity:.9}

.header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(11,13,16,.8); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06) }
.logo{ width:28px; height:28px; border-radius:8px; background:conic-gradient(from 210deg,var(--primary),var(--accent)); box-shadow:var(--shadow) }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.header .actions{ display:flex; gap:8px }

.sidebar{ position:fixed; top:58px; bottom:0; left:0; width:220px; padding:14px; overflow:auto; background:linear-gradient(180deg,#0b0f14,#0c1218); border-right:1px solid rgba(255,255,255,.06) }
.sidebar a{ display:block; padding:10px 12px; color:var(--text-muted); border-radius:10px }
.sidebar a.active,.sidebar a:hover{ background:rgba(255,255,255,.06); color:var(--text) }

.main{ margin-left:236px; padding:20px; min-height:calc(100vh - 58px) }
.container{ max-width:1200px; margin:0 auto }

.card{ background:linear-gradient(180deg,#11151b,#0f1318); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
.grid{ display:grid; gap:var(--gap) }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }

h1{ font-size:22px; margin:0 0 12px }
h2{ font-size:18px; margin:0 0 10px; color:#dfe9f5 }
.label{ display:block; font-weight:600; margin-bottom:6px; color:#d7e1ea }
.input,select,textarea{ width:100%; padding:12px; border-radius:10px; border:1px solid var(--muted); background:#0f1318; color:var(--text) }
.input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary) }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:none; border-radius:10px; cursor:pointer; font-weight:700; box-shadow:var(--shadow); background:var(--primary); color:#001225 }
.btn.secondary{ background:var(--muted); color:var(--text) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--muted) }
.btn.danger{ background:var(--danger); color:#120000 }

.table{ width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; box-shadow:var(--shadow) }
.table th,.table td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left }
.table thead th{ background:#0d1117; color:#cfe1ff }

.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:var(--muted); color:var(--text-muted); font-size:12px }

.center{ min-height:100vh; display:grid; place-items:center }
.login-box{ width:100%; max-width:380px }

/* Kanban */
.kanban{ display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:var(--gap) }
.kanban-column{ background:linear-gradient(180deg,#11151b,#0f1318); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; min-height:320px }
.kanban-column h3{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px }
.kanban-list{ display:flex; flex-direction:column; gap:10px; min-height:200px }
.op-card{ background:#0f141a; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px; cursor:grab }
.op-card:active{ cursor:grabbing }
.op-title{ font-weight:800 }
.op-meta{ display:flex; gap:8px; color:var(--text-muted); font-size:12px }

/* Planning */
.planning{ display:grid; grid-template-columns:220px 1fr; gap:var(--gap) }
.agent{ padding:12px; border-radius:10px; background:#0f141a; border:1px solid rgba(255,255,255,.06) }
.calendar{ background:#0f141a; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px }
.calendar-grid{ display:grid; grid-template-columns:80px repeat(5,1fr); grid-auto-rows:64px; gap:1px; background:rgba(255,255,255,.06); border-radius:8px; overflow:hidden }
.cell{ background:#0c1015; padding:6px; font-size:12px; color:#8ea1b5 }
.cell.header{ background:#0d1218; font-weight:700; color:#cfe1ff }
.event{ background:linear-gradient(180deg,#5b9bff,#6ec8ff); color:#00122a; border-radius:8px; padding:6px 8px; font-weight:700; box-shadow:var(--shadow) }

.toast{ position:fixed; bottom:18px; right:18px; background:#12161b; border:1px solid rgba(255,255,255,.08); padding:12px 14px; border-radius:10px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.2s }
.toast.show{ opacity:1; transform:translateY(0) }


/* === Responsive Enhancements (non-breaking) === */
img, video { max-width: 100%; height: auto; }

/* Containers breathe on small screens */
@media (max-width: 1200px){
  .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kanban{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
}

@media (max-width: 992px){
  /* Sidebar becomes horizontal strip */

  /* Make nav items horizontal in the compact sidebar */
  .sidebar nav{ display:flex; align-items:center; gap:8px; }
  .sidebar a{ display:inline-flex; align-items:center; }

  main{ margin-left: 0 !important; }
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
  .kanban{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
  .planning{ grid-template-columns: 1fr; }
  .calendar-grid{ grid-template-columns: 60px repeat(7, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .kanban{ grid-template-columns: 1fr; }
  .calendar-grid{ grid-template-columns: 40px repeat(7, minmax(0,1fr)); }
  /* Make tables scroll instead of overflowing */
  table{ display:block; width:100%; overflow-x:auto; white-space:nowrap; }
  /* Stack any row/column utilities */
  .row{ display:block !important; }
  [class*="col-"]{ width:100% !important; }
  /* Make form controls fluid */
  input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea, .btn, button{
    width:100%;
    max-width:100%;
  }
  /* Shorten brand text to save space */
  .brand .name, .header .brand span{ display:none; }
}

/* Improve tap targets */
@media (hover:none){
  .btn, button, a.button{ min-height: 44px; }
}


/* === Mobile off-canvas sidebar (V3) === */
@media (max-width: 992px){
  .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    cursor:pointer;
    font-weight:600;
  }
  .hamburger span{ font-size:18px; line-height:1; }
  .header .brand{ gap:8px }
  .header .brand .logo{ margin-right:2px }

  /* Sidebar hidden by default off-canvas */
  .sidebar{
    position: fixed;
    top:58px;
    bottom:0;
    left:0;
    width:236px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;
    overflow-y: auto;
    border-right:1px solid rgba(255,255,255,.06);
  }
  body.nav-open .sidebar{ transform: translateX(0); }

  /* Page content should not be pushed */
  main{ margin-left:0 !important; }

  /* Overlay behind the menu */
  .nav-overlay{
    position: fixed;
    inset:0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(1px);
    opacity:0;
    visibility:hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 55;
  }
  body.nav-open .nav-overlay{ opacity:1; visibility:visible; }
}


/* Stack nav items vertically on mobile */
@media (max-width: 992px){
  .sidebar nav{ display:block; padding:8px; }
  .sidebar a{ display:block; padding:12px 14px; }
  .sidebar a + a{ margin-top:4px; }
}


/* === Page-specific responsive polish === */

/* Accounts list: make cards breathe and grid adapt nicely */
@media (max-width: 992px){
  .accounts-list{ display:grid; grid-template-columns: 1fr; gap: var(--gap); }
  .account-card{ padding:14px; }
  .account-card .meta{ display:flex; gap:8px; flex-wrap:wrap; }
}

/* Tickets & Invoices: tables scroll smoothly and cells are comfy */
@media (max-width: 992px){
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; border-radius:8px; }
  table.compact{ font-size:.95rem; }
  table.compact th, table.compact td{ padding:10px 12px; }
  .filters .btn{ width:100%; }
  .filters{ display:grid; gap:10px; }
}

/* Planning: stack columns and let the calendar scroll horizontally */
@media (max-width: 992px){
  .planning{ display:grid; grid-template-columns: 1fr; gap: var(--gap); }
  .calendar-grid{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .calendar-grid .cell{ min-width: 110px; } /* give slots a min width so it stays readable */
}

/* Tiny screens */
@media (max-width: 640px){
  .panel{ padding:14px; }
  h1{ font-size:1.25rem; }
  h2{ font-size:1.1rem; }
}


/* Generic mobile refinements for forms & toolbars */
@media (max-width: 992px){
  .card{ flex-wrap: wrap; }
  .card .input{ flex:1 1 200px; width:100%; max-width:100%; }
  .card .btn{ width:100%; }
  .container{ padding-left: 8px; padding-right: 8px; }
  .table.card{ border-radius: 10px; }
}


/* Planning mobile: ensure events are not clipped and remain readable */
@media (max-width: 992px){
  .calendar-grid{ overflow: auto !important; } /* cancel base overflow:hidden */
  .cell{ min-height: 48px; }
  .event{ white-space: normal; min-height: 36px; }
}


/* Conversation feed (ticket-detail) */
.feed{ display:flex; flex-direction:column; gap:12px }
.feed-item{ display:flex; gap:10px; align-items:flex-start }
.feed .avatar{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(180deg,#5b9bff,#6ec8ff); color:#001225; font-weight:800;
  box-shadow: var(--shadow);
}
.feed .bubble{ flex:1; background:#0f141a; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px }
.feed .bubble-head{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap }
.feed .bubble-head .time{ color:var(--text-muted); font-size:12px }
.feed .bubble .attachments a{ font-size:14px }
.service.badge{ background:#2a2f36; color:#cfe1ff }
@media (max-width: 640px){
  .feed .bubble{ padding:10px }
}