/* ==========================================================================
   Ali CRM — Light Theme, LEFT Sidebar + Clean Hierarchy (fixed grid rows)
   ========================================================================== */

:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8fafc;
  --text:#0f172a; --muted:#475569; --border:#e2e8f0; --ring:#93c5fd;
  --brand-50:#eff6ff; --brand-600:#2563eb; --brand-700:#1d4ed8;
  --ok:#16a34a; --warn:#f59e0b; --danger:#e11d48;
  --radius:12px; --radius-lg:16px; --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 6px 18px rgba(16,24,40,.08);
  --topbar-h:56px; --sidebar-w:280px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{
  height:var(--topbar-h); position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border);
}
.brand{font-weight:700; font-size:16px; letter-spacing:.2px}
.topbar-right{display:flex; align-items:center; gap:10px}
.hello{color:var(--muted); font-size:13px}
.btn-ghost{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; box-shadow:var(--shadow-sm)
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; background:var(--brand-600); color:#fff; border:1px solid var(--brand-600);
  text-decoration:none; box-shadow:var(--shadow-sm)
}
.btn-primary:hover{background:var(--brand-700)}

/* Layout */
.app{display:flex; align-items:flex-start; min-height:calc(100vh - var(--topbar-h))}
.content{flex:1 1 auto; padding:18px 20px; order:1}
.container{max-width:100%; margin:0; padding:0}

/* Sidebar (LEFT) — fixed width */
.sidebar{
  order:0; position:sticky; top:var(--topbar-h);
  width:var(--sidebar-w); min-width:var(--sidebar-w); max-width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  min-height:calc(100vh - var(--topbar-h));
  border-right:1px solid var(--border);
  background:#fff; padding:14px; box-shadow:none;
  overflow-y:auto; overflow-x:hidden;
}

/* Prevent label wrapping that pushes width */
.menu-group .group-toggle,
.menu .menu-item,
.menu-link{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* User card */
.userbox{
  display:flex; align-items:center; gap:10px; padding:10px;
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm);
  margin-bottom:12px;
}
.user-avatar{width:36px; height:36px; border-radius:50%; background:var(--brand-50);
  display:flex; align-items:center; justify-content:center; color:var(--brand-700); font-weight:700; border:1px solid var(--border)}
.user-meta .user-name{font-weight:600}
.user-meta .user-email{color:var(--muted); font-size:12px}

/* Menu (hierarchy) */
.menu{display:block}
.menu-item{
  display:block; padding:10px 12px; margin:4px 0;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
  text-decoration:none; box-shadow:var(--shadow-sm);
}
.menu-item:hover{background:var(--surface-2); text-decoration:none}
.menu-item.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.menu-item.danger:hover{filter:brightness(.97)}

.menu-group{margin:12px 0; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); overflow:hidden}
.menu-group .group-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px; background:#fff; border:0; cursor:pointer; font-weight:600; color:var(--text)
}
.menu-group .group-toggle .left{ display:flex; align-items:center; gap:10px }
.menu-group .group-toggle .ico{ opacity:.85 }

.menu-group .chevron{
  width:18px; height:18px; border:1px solid var(--border); border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--muted); background:#fff;
}
.menu-group .chevron::before{ content:"▾"; font-size:12px; line-height:1 }
.menu-group.open .chevron::before{ content:"▴" }

.submenu{display:none; padding:6px 6px 10px 6px; background:var(--surface-2); border-top:1px solid var(--border)}
.menu-group.open .submenu{display:block}

.menu-link{
  display:block; position:relative; margin:6px; padding:9px 12px 9px 36px;
  border-radius:10px; text-decoration:none; color:var(--text); border:1px solid transparent; background:#fff;
}
.menu-link::before{
  content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:999px; background:var(--border);
}
.menu-link:hover{background:#fff; border-color:var(--border)}
.menu-link.active{background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-600); font-weight:600}
.menu-link.active::before{background:var(--brand-600)}

/* Cards */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm)}
.card + .card{margin-top:16px}
.card > * + *{margin-top:16px}

/* Headings */
h1,h2,h3{margin:0 0 10px 0}
h1{font-size:22px} h2{font-size:18px} h3{font-size:16px}

/* Grid helpers */
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}

/* Tables */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)
}
.table thead th{
  background:var(--surface-2); color:var(--muted); font-weight:700; font-size:13px; text-align:left;
  letter-spacing:0; padding:12px 14px; border-bottom:1px solid var(--border);
}
.table td{ padding:12px 14px; border-bottom:1px solid var(--border) }
.table td,.table th{ vertical-align: middle; }  /* keep rows aligned */
.table tbody tr:hover{background:#fafafa}
.table tbody tr:last-child td{border-bottom:0}

/* Forms */
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 6px 0}
.form-row{margin-bottom:12px}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-600); box-shadow:0 0 0 4px var(--brand-50)}
textarea{resize:vertical}

/* Buttons */
button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--surface-2); color:var(--text);
  cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .02s ease;
}
button:hover{background:#eef2f7} button:active{transform:translateY(1px)}
button.primary{background:var(--brand-600); color:#fff; border-color:var(--brand-600)}
button.primary:hover{background:var(--brand-700)}
button.secondary{background:#fff}
button.danger{background:var(--danger); border-color:var(--danger); color:#fff}

/* Pills / tags / badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--muted);
  font-size:12px; text-decoration:none; box-shadow:var(--shadow-sm);
}
.badge:hover{background:var(--surface-2); color:var(--text)}
.kv{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.kv .tag{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:12px}

/* Notices */
.notice{padding:12px 14px; border-radius:12px; background:#f8fafc; border:1px solid var(--border); color:var(--muted)}

/* Footer */
.footer{margin-top:10px; padding:18px; text-align:center; color:var(--muted); border-top:1px solid var(--border); background:#fff}

/* Pagination */
.pager{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.pager .page{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:8px 10px;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); text-decoration:none; box-shadow:var(--shadow-sm);
}
.pager .page:hover{background:var(--surface-2)}
.pager .current{background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-600); font-weight:700}
.pager .disabled{opacity:.5; pointer-events:none}
.pager .ellipsis{color:var(--muted); padding:0 4px}

/* Mobile: slide-in sidebar from LEFT */
@media (max-width:1100px){
  .sidebar{
    position:fixed; left:0; top:var(--topbar-h);
    height:calc(100vh - var(--topbar-h));
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:8px 0 24px rgba(0,0,0,.08);
    z-index:50;
  }
  body.nav-open .sidebar{ transform:translateX(0) }
}

/* ---------- FILTER BAR ---------- */
.filter-form { display:flex; flex-direction:column; gap:10px; }
.filter-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-row input[type="text"]{ min-width:260px; }

.chips { display:flex; gap:8px; flex-wrap:nowrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  text-decoration:none; box-shadow: var(--shadow-sm);
}
.chip:hover{ background: var(--surface-2); }
.chip.active{ background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-600); font-weight:700; }

/* Filter & Reset buttons */
.btn-filter{
  background: var(--brand-600);
  color:#fff;
  border:1px solid var(--brand-600);
  border-radius:10px;
  padding:10px 14px;
  box-shadow: var(--shadow-sm);
}
.btn-filter:hover{ background: var(--brand-700); }
.btn-reset{
  background:#fff; color: var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; box-shadow: var(--shadow-sm);
}
.btn-reset:hover{ background: var(--surface-2); }

/* Date ranges on ONE line */
.date-row{ display:flex; gap:12px; flex-wrap:wrap; }
.date-group{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff;
  box-shadow: var(--shadow-sm); cursor:pointer;
}
.date-group label{ margin:0; font-weight:700; color:var(--muted); }
.date-group input[type="date"]{ width:160px; }
.date-group .sep{ color: var(--muted); user-select:none; }

/* ---------- TABLE CELL TIGHTENING (fix row jump) ---------- */
.cell-tight{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

/* Title: clamp to 2 lines so long titles don't inflate rows */
.cell-title a{
  color: var(--brand-700); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cell-title a:hover{ text-decoration:underline }

/* Flags: DO NOT flex the <td>; chips inline so rows stay even */
.cell-flags{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.cell-flags .tag{
  display:inline-block; margin-right:6px;
  padding:4px 8px; line-height:1.1; border-radius:999px;
}
.tag.good{ border-color:#c6f6d5; background:#ecfdf5; color:#047857; }
.tag.bad { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.tag.warn{ border-color:#fde68a; background:#fffbeb; color:#b45309; }

/* Notes preview + modal */
.cell-notes .note-preview{ display:inline-block; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal.hidden{ display:none; }
.hidden{ display:none !important; }

/* Child contract styling */
tbody tr[data-parent] {
  background-color: #f8f9fa;
  border-left: 3px solid #e9ecef;
  position: relative;
}

tbody tr[data-parent] td:first-child {
  padding-left: 30px;
  position: relative;
}

tbody tr[data-parent] td:first-child::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 1px;
  background-color: #dee2e6;
}

tbody tr[data-parent] td:first-child::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  width: 1px;
  height: 50%;
  background-color: #dee2e6;
}

tbody tr[data-parent]:last-child td:first-child::after {
  height: 25%;
}

/* Nested child contracts (grandchildren) - using class-based approach */
tbody tr.child-of-child {
  background-color: #f1f3f4;
  border-left-color: #d1d5db;
}

tbody tr.child-of-child td:first-child {
  padding-left: 50px;
}

tbody tr.child-of-child td:first-child::before {
  left: 35px;
  width: 15px;
}

tbody tr.child-of-child td:first-child::after {
  left: 35px;
}

/* Drill-down arrow cursor */
.collapsible {
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}

.collapsible:hover {
  transform: scale(1.1);
}

/* Filter buttons styling */
.filter-buttons {
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.filter-buttons .btn-filter,
.filter-buttons .btn-reset {
  margin-left: 8px;
}
.modal-card{ width:min(640px,92vw); background:#fff; color:var(--text); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow-md); }
.modal-body{ white-space:pre-wrap; line-height:1.55; max-height:60vh; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface-2); }
.modal-actions{ margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }

/* Pager area with size selector */
.pager-wrap{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:12px; flex-wrap:wrap; }
.pager-controls{ display:flex; align-items:center; gap:8px; }
.pager-controls label{ margin:0; }

/* Actions: tighter badges */
.actions .badge{ line-height:1; padding:6px 10px; }

/* --- HOTFIX: never let table cells become flex containers --- */
/* ---- Flags row-height fix ---- */
.table td, .table th { vertical-align: middle; }

/* Never flex the <td> itself */
td.cell-flags { display: table-cell !important; white-space: nowrap; }

/* Flex only the inner wrapper */
.flags-wrap {
  display: inline-flex;        /* inline so it behaves like content, not a block */
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact chips so they don't inflate the row */
.flags-wrap .tag {
  display: inline-block;
  padding: 4px 8px;
  line-height: 1.1;
  border-radius: 999px;
  margin-right: 0;  /* gap handles spacing */
}

/* Actions column: keep Edit/Delete on one line */
.table td.actions,
.table th.actions{
  white-space: nowrap;
  text-align: right;      /* or left if you prefer */
  min-width: 140px;       /* room for both buttons */
}

.table td.actions .badge{
  display: inline-flex;   /* buttons sit side-by-side */
  margin-right: 8px;
  line-height: 1;
  padding: 6px 10px;
}

.table td.actions .badge:last-child{
  margin-right: 0;
}

.searchbar input[name="q"]{
  margin-right: 12px !important;
}

/* Center content inside multi-select pills (Status/Type) */
.kv label.tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px; /* keep pill look */
}
/* Child rows: make them visually distinct under parent */
tr.is-child { background: #f9fbff; }
tr.is-child td { border-top: 1px solid var(--border); }
tr.is-child td:first-child {
  padding-left: 22px;                 /* indent */
  border-left: 3px solid var(--brand-50);
}

/* Collapsible caret spacing (parent & child) */
.collapsible { margin-right: 6px; }

/* Child rows distinct */
tr.is-child { background: #f9fbff; }
tr.is-child td { border-top: 1px solid var(--border); }
tr.is-child td:first-child { padding-left: 22px; border-left: 3px solid var(--brand-50); }
.collapsible { margin-right: 6px; }

/* Multi-select pills: centered + one line */
.kv label.tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;   /* prevent wrap */
}
.kv label.tag input { margin-right: 4px; }