/* ==========================================================================
   Hello Malnad Admin — base styles
   Shared across every page: reset, layout shell, cards, buttons, forms,
   tables, badges, toasts, modals. Page-specific tweaks live in their own
   css file (dashboard.css) or a <style> block on the page.
   ========================================================================== */

:root{
  --cream: #fff;
  --dark:#082C20;
  --dark-soft:#0F3A2B;
  --text:#12241C;
  --muted:#5B6B62;
  --border:#E3DCC8;
  --white:#FFFFFF;
  --accent:#C9812E;
  --accent-dark:#A8681E;
  --accent-light:#F3E4CE;
  --red:#C0463A;
  --red-bg:#FBE9E7;
  --ok:#2F7A4F;
  --ok-bg:#E4F3E9;
  --warn:#B98418;
  --warn-bg:#FBF0DC;
  --info:#2A6F97;
  --info-bg:#E3EEF5;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 8px rgba(8,44,32,.06);
  --shadow-md:0 10px 30px rgba(8,44,32,.10);

  --sidebar-w:250px;
  --topbar-h:68px;
}

*,*:before,*:after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:14px; }

.hidden{ display:none !important; }
.mt-0{ margin-top:0 !important; }

/* ---------- App shell ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--dark);
  color:#EAF1EC;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:40;
  transition:transform .2s ease;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:22px 20px;
}
.sidebar-brand .logo-mark{
  width:36px; height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), #E4A85A);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--dark); font-size:16px;
  flex-shrink:0;
}
.sidebar-brand .brand-text{ line-height:1.15; }
.sidebar-brand .brand-text strong{ display:block; font-size:15px; font-weight:800; color:#fff; }
.sidebar-brand .brand-text span{ font-size:11px; color:#9FB3A6; letter-spacing:.04em; text-transform:uppercase; }

.sidebar-nav{
  flex:1;
  overflow-y:auto;
  padding:14px 12px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar-nav::-webkit-scrollbar{ display:none; }
.sidebar-nav .nav-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7C9285;
  padding:14px 10px 6px;
}
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:#C9D6CD;
  font-size:14px;
  font-weight:600;
  margin-bottom:2px;
}
.sidebar-nav a .icon{
  width:18px; height:18px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background:var(--accent); color:var(--dark); }

.sidebar-footer{
  padding:14px 12px 18px;
}
.sidebar-footer .user-chip{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:var(--radius-sm);
}
.sidebar-footer .avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent-light); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; flex-shrink:0;
}
.sidebar-footer .user-meta{ line-height:1.2; min-width:0; }
.sidebar-footer .user-meta strong{ display:block; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer .user-meta span{ font-size:11px; color:#9FB3A6; text-transform:capitalize; }
.sidebar-footer .logout-btn{
  margin-top:10px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06); color:#EAF1EC;
  border:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:700; cursor:pointer;
}
.sidebar-footer .logout-btn:hover{ background:rgba(255,255,255,.12); }

.sidebar-toggle{
  display:none;
  position:fixed; top:14px; left:14px; z-index:50;
  width:40px; height:40px; border-radius:10px;
  background:var(--dark); color:#fff; border:none;
  align-items:center; justify-content:center; cursor:pointer;
}
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(8,44,32,.4); z-index:35;
}

/* Main column */
.main-col{
  margin-left:var(--sidebar-w);
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* Topbar */
.topbar{
  height:var(--topbar-h);
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  gap:16px;
  position:sticky;
  top:0;
  z-index:20;
}
.topbar-title h1{ font-size:19px; color:var(--text); }
.topbar-title p{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted);
}
.icon-btn:hover{ background:var(--cream); }

/* ---------- Notification bell ---------- */
.notif-wrap{ position:relative; }
.notif-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:#E24C4B; color:#fff;
  font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
}
.notif-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  width:300px; max-height:360px; overflow-y:auto;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  z-index:70;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.notif-dropdown::-webkit-scrollbar{ display:none; }
.notif-head{ padding:12px 16px; font-size:13px; font-weight:800; border-bottom:1px solid var(--border); }
.notif-list{ padding:6px; }
.notif-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:var(--radius-sm);
  font-size:13px; color:var(--text);
}
.notif-item:hover{ background:var(--cream); }
.notif-item b{ color:var(--accent-dark); }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:#E24C4B; flex-shrink:0; }
.notif-empty{ padding:20px 10px; text-align:center; font-size:13px; color:var(--muted); }

/* Content area */
.content{
  padding:24px;
  flex:1;
}
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.page-head h2{ font-size:22px; color:var(--text); }
.page-head p{ font-size:13.5px; color:var(--muted); margin-top:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--dark); color:#fff; }
.btn-primary:hover{ background:var(--dark-soft); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ background:var(--white); color:var(--text); border-color:var(--border); }
.btn-outline:hover{ background:var(--cream); }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-ghost:hover{ background:var(--cream); color:var(--text); }
.btn-danger{ background:var(--red-bg); color:var(--red); }
.btn-danger:hover{ background:#f6d3ce; }
.btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-block{ width:100%; }

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:20px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap;
}
.card-head h3{ font-size:15.5px; color:var(--text); }
.card-head p{ font-size:12.5px; color:var(--muted); margin-top:2px; }

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:20px;
}
.stat-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-sm);
}
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-card .stat-icon{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-light); color:var(--accent-dark);
}
.stat-card .stat-value{ font-size:26px; font-weight:800; margin-top:14px; color:var(--text); }
.stat-card .stat-label{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.stat-card .stat-delta{ font-size:11.5px; font-weight:700; margin-top:10px; display:inline-flex; align-items:center; gap:4px; }
.stat-delta.up{ color:var(--ok); }
.stat-delta.down{ color:var(--red); }

.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:12.5px; font-weight:700; color:var(--text);
  margin-bottom:6px;
}
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:5px; }

.perm-table{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.perm-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--border);
}
.perm-table th:not(:first-child), .perm-table td:not(:first-child){ text-align:center; width:110px; }
.perm-table td{ padding:8px; border-bottom:1px solid var(--border); font-size:13.5px; }
.perm-table tr:last-child td{ border-bottom:none; }
.perm-table input[type="checkbox"]{ width:16px; height:16px; cursor:pointer; }

/* ---------- Selection action toolbar (above the search box) ----------
   A row of action buttons that stays disabled/muted until exactly one
   row is checked in the table below, then lights up — same pattern as
   the AWS S3 console's Objects toolbar. Shared by every list page. */
.action-toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; margin-left:30px; margin-top:30px; }
.action-toolbar .btn:disabled{ background:var(--white); color:var(--muted); border-color:var(--border); opacity:1; }
.data-table .row-check-cell{ width:36px; }
.data-table input.row-check{ width:16px; height:16px; cursor:pointer; }
.input,.select,.textarea{
  width:100%;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--text);
  font-size:13.5px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(201,129,46,.15);
}
.textarea{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input{ width:16px; height:16px; accent-color:var(--accent); }
.upload-box{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-md);
  padding:26px 16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  background:var(--cream);
}
.upload-box:hover{ border-color:var(--accent); }
.upload-box .upload-icon{ margin-bottom:8px; display:flex; justify-content:center; }
.upload-box .upload-icon svg{ width:26px; height:26px; color:var(--muted); }
.thumb-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.thumb{
  width:78px; height:78px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); position:relative; background:var(--white);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .remove{
  position:absolute; top:3px; right:3px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(8,44,32,.75); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; border:none;
}

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table thead th{
  text-align:left; padding:12px 16px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table tbody td{
  padding:14px 16px; border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:middle;
}
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background:var(--cream); }
.cell-strong{ font-weight:700; }
.cell-muted{ color:var(--muted); font-size:12.5px; }
.row-actions{ display:flex; gap:6px; }
.table-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:16px 20px;
}
.search-box{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 12px; background:var(--cream); min-width:220px;
}
.search-box input{ border:none; background:transparent; outline:none; font-size:13px; width:100%; }
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filter-row select{ width:auto; padding:8px 10px; }
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty-state .icon{ margin-bottom:10px; display:flex; justify-content:center; }
.empty-state .icon svg{ width:38px; height:38px; color:var(--muted); }
.pagination{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }
.pagination .btn{ padding:6px 12px; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-info{ background:var(--info-bg); color:var(--info); }
.badge-red{ background:var(--red-bg); color:var(--red); }
.badge-muted{ background:var(--accent-light); color:var(--accent-dark); }

/* ---------- Avatars ---------- */
.avatar-sm{
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-light); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; flex-shrink:0;
}
.stars{ color:var(--accent); letter-spacing:1px; font-size:13px; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(8,44,32,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:60; padding:20px;
}
.modal{
  background:var(--white); border-radius:var(--radius-lg);
  width:100%; max-width:420px; box-shadow:var(--shadow-md);
  padding:22px;
  scrollbar-width:none;      /* Firefox — keep the scroll, hide the bar */
  -ms-overflow-style:none;   /* old Edge / IE */
}
.modal::-webkit-scrollbar{ display:none; }  /* Chrome / Safari / new Edge */
.modal h3{ font-size:16px; margin-bottom:8px; }
.modal p{ font-size:13.5px; color:var(--muted); line-height:1.5; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---------- Toast ---------- */
#toast-stack{
  position:fixed; top:18px; right:18px; z-index:80;
  display:flex; flex-direction:column; gap:10px;
}
.toast{
  min-width:240px; max-width:320px;
  background:var(--dark); color:#fff;
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600;
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:10px;
  animation:toast-in .18s ease;
}
.toast.success{ background:var(--dark); }
.toast.error{ background:var(--red); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Utilities ---------- */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; }
.gap-12{ gap:12px; }
.w-full{ width:100%; }
.text-muted{ color:var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .form-row,.form-row-3{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main-col{ margin-left:0; }
  .sidebar-toggle{ display:flex; }
  .sidebar-backdrop.open{ display:block; }
  .topbar{ padding-left:64px; }
}
@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr; }
  .content{ padding:16px; }
}