/* ===========================
   CaterCrew Home/Dashboard
   Complete CSS
   =========================== */

:root{
    --bg0:#0a0e27; --bg1:#1a1f3a; --card:rgba(255,255,255,.03);
    --border:#26324b; --accent:#00d4ff; --accent2:#00a8cc;
    --text:#ffffff; --muted:#a0aec0; --success:#1ecb84; --danger:#f56565;
}

/* Shell & Header */
.home-shell{
    min-height:100vh;
    padding:clamp(12px,2vw,24px);
    background:linear-gradient(135deg,var(--bg0),var(--bg1));
}

.home-header{
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid var(--border); border-radius:16px;
    padding:14px 16px; margin-bottom:12px;
    background:linear-gradient(135deg, rgba(0,212,255,.08), rgba(0,168,204,.05));
}

.header-left{display:flex; gap:12px; align-items:center;}
.h-title{color:var(--text); font-weight:700; letter-spacing:.2px;}
.h-sub{color:var(--muted); font-size:.9rem; margin-top:.15rem;}

/* Header primary button */
.btn-wrap-primary .rz-button{
    background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
    border:none !important; color:#0a0e27 !important;
    box-shadow:0 4px 16px rgba(0,212,255,.25) !important;
    border-radius:10px !important;
}

/* Toolbar (Search + Filters) */
.toolbar{
    position:sticky; top:8px; z-index:2;
    display:flex; flex-wrap:wrap; gap:12px; align-items:center;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:14px; padding:10px; margin-bottom:16px;
}
.toolbar .filters{display:flex; gap:12px; align-items:center; flex:1 0 100%;}
.filter-dd{flex:1 1 0;}
.filter-dd .rz-dropdown{width:100% !important;}

.toolbar .rz-inputtext,
.toolbar .rz-dropdown{
    background:rgba(255,255,255,.04) !important;
    border:1px solid var(--border) !important;
    color:var(--text) !important;
}
.toolbar .rz-inputtext::placeholder{color:var(--muted) !important;}
.toolbar .rz-dropdown .rz-placeholder,
.toolbar .rz-dropdown .rz-label{color:var(--muted) !important;}

/* Empty state */
.empty{
    border:1px dashed var(--border); color:var(--muted);
    border-radius:14px; padding:24px; text-align:center;
    display:grid; gap:6px; place-items:center;
}
.empty .rz-icon{font-size:2rem; color:var(--accent);}
.hint{font-size:.9rem; opacity:.9;}

/* Stats Grid */
/* Stats Grid */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
    gap:12px; margin-bottom:16px;
}
.stat-card{
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg, rgba(0,212,255,.08), rgba(0,168,204,.05));
    border:1px solid var(--border);
    border-radius:14px; padding:10px 12px;
    transition:transform .2s ease, box-shadow .2s ease;
    min-height: auto;
}
.stat-card:hover{transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,212,255,.15);}
.stat-icon{flex-shrink:0;}
.stat-icon .rz-icon{font-size:1.5rem !important;}
.stat-content{flex:1;}
.stat-value{font-size:1.5rem; font-weight:700; color:var(--text); line-height:1;}
.stat-label{font-size:.75rem; color:var(--muted); margin-top:2px;}
@media (max-width:768px){ .stats-grid{ grid-template-columns:repeat(2,1fr);} }
/* Establishment Grid */
.estab-grid{
    display:grid; gap:14px;
    grid-template-columns:repeat(auto-fill, minmax(290px,1fr));
}

/* Card base */
.estab-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease;
}
.estab-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.25); }

/* ============ New Layout ============ */
/* Cover → 3-column grid: avatar | info | vertical actions */
.cover.cover-grid{
    display:grid;
    grid-template-columns:56px 1fr 124px;
    gap:12px; align-items:start;
    padding:14px 14px 0;
}

/* Avatar + status pill underneath */
.avatar-stack{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.avatar{
    width:56px; height:56px; border-radius:50%; overflow:hidden;
    background:#151b3d; display:grid; place-items:center;
    font-weight:700; color:var(--text); border:1px solid var(--border);
    
}
.avatar img{ width:100%; height:100%; object-fit:cover; }

.status-below .rz-badge{
    border-radius:999px;
    font-size:.72rem; line-height:1; padding:10px 10px ; margin-left: 5px;
}
.status-published .rz-badge{ background:var(--success) !important; color:#0a0e27 !important; }
.status-unpublished .rz-badge{ background:var(--danger) !important;  color:#0a0e27 !important; }

/* Title/meta block */
.cover-info{ display:flex; align-items:flex-start; justify-content:space-between; min-width:0; }
.title-row{ display:flex; flex-direction:column; min-width:0; }
.title-row .name{ color:var(--text); font-weight:700; font-size:1.05rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title-row .meta{ color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Vertical actions (top-right) */
.actions-vert{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.w100{ width:100% !important; }
.br12{ border-radius:12px !important; }

/* Card body */
.body{ padding:12px 14px 14px; }
.stats{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.chip{ background:#2d3748; border-radius:999px; padding:4px 10px; font-size:.85rem; color:var(--text); }
.chip.soft{ background:rgba(255,255,255,.06); color:var(--muted); }

/* Optional legacy horizontal actions (unused now, kept for safety) */
.actions{ display:flex; gap:8px; width:100%; }
.action-manage, .action-view{ flex:1; }
.action-manage .rz-button, .action-view .rz-button{ width:100% !important; }

/* Responsive: collapse buttons under content on very narrow cards */
@media (max-width:360px){
    .cover.cover-grid{ grid-template-columns:56px 1fr; }
    .actions-vert{ grid-column:1 / -1; flex-direction:row; }
}

/* Utility (if Radzen primary button used elsewhere) */
.btn-wrap-primary .rz-button.rz-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:none; color:#0a0e27; box-shadow:0 4px 16px rgba(0,212,255,.25);
    border-radius:10px;
}
/* Nudge the Published/Unpublished pill a bit to the right */
.cover.cover-grid .status-below{
    align-self: flex-start;   /* override the column centering */
    margin-left:0px;         /* adjust this value to taste (e.g., 6–10px) */
}
/* Darken the three top-right action buttons a bit, keep base colors */
.estab-card .actions-vert .rz-button{
    filter: brightness(0.8) contrast(1.02);
}

.estab-card .actions-vert .rz-button:hover{
    filter: brightness(0.85) contrast(1.02);
}

.estab-card .actions-vert .rz-button:active{
    filter: brightness(0.75) contrast(1.05);
}
/* Tighten bottom spacing inside establishment cards */
.estab-card .body{
    padding: 8px 14px 8px;   /* was 12px 14px 14px */
}

/* Reduce space around the mini-stats row */
.estab-card .stats{
    margin: 6px 0 4px;       /* was 10px 0 12px */
}

/* Ensure the last element in the body doesn't add extra margin */
.estab-card .body > *:last-child{
    margin-bottom: 0 !important;
}

/* ================================
   Web-first Establishments List
   (row/table style for desktop)
   ================================ */

.estab-shell{
  min-height:100vh;
  padding:clamp(12px,2vw,24px);
  background:linear-gradient(135deg,var(--bg0),var(--bg1));
}

.toolbar-row{
  display:flex;
  gap:14px;
  align-items:center;
}

.toolbar-grow{ flex:1; }

.toolbar-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.85rem;
  white-space:nowrap;
}

.estab-table-scroll{ overflow:auto; }

.estab-table{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.estab-head,
.estab-row{
  display:grid;
  grid-template-columns: 2.4fr 1.2fr 1.2fr 1fr 1.2fr 1.2fr 280px;
  gap:14px;
  align-items:center;
  padding:12px 16px;
  min-width:1100px;
}

.col-actions{ text-align:right; }

.estab-head{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.55);
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.estab-row{
  border-top:1px solid rgba(255,255,255,.06);
  cursor:pointer;
}

.estab-row:hover{
  background:rgba(0,212,255,.06);
}

.cell{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cell.name{
  display:flex;
  align-items:center;
  gap:12px;
}

.avatar-sm{
  width:40px;
  height:40px;
  border-radius:14px;
  overflow:hidden;
  background:#151b3d;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  font-weight:900;
  color:var(--text);
}

.avatar-sm img{ width:100%; height:100%; object-fit:cover; }

.name-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.name-meta .n{ font-weight:900; color:var(--text); font-size:.98rem; }
.name-meta .s{ color:var(--muted); font-size:.78rem; }

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
}

.pill.pub{
  background:rgba(30,203,132,.18);
  color:var(--success);
  border-color:rgba(30,203,132,.35);
}

.pill.unpub{
  background:rgba(245,101,101,.16);
  color:var(--danger);
  border-color:rgba(245,101,101,.30);
}

.jobs-pill{ color:var(--muted); font-size:.78rem; }

.inbox-pills{ display:flex; gap:8px; align-items:center; }

.actions-inline{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.actions-inline .rz-button{
  border-radius:12px !important;
  padding:6px 10px !important;
}

.muted{ color:var(--muted); }