/* ===================================================
   RetailPro Store Management — Main Stylesheet
   =================================================== */

:root {
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --primary-light: #e0e7ff;
  --secondary: #6b7280;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --bg: #f3f4f6;
  --card-bg: #ffffff;
  --sidebar-bg: #1e1b4b;
  --sidebar-text: #c7d2fe;
  --sidebar-active: #4f46e5;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --sidebar-width: 240px;
  --topbar-height: 65px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ==================== LAYOUT ==================== */
.app-wrapper { display:flex; min-height:100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  position: fixed;
  top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:100;
  transition: transform .3s ease;
  overflow-y: auto;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.topbar {
  height: var(--topbar-height);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px;
  position: sticky; top:0; z-index:50;
  box-shadow: var(--shadow);
}

.topbar-left { display:flex; flex-direction:column; gap:2px; }
.page-title { font-size:18px; font-weight:700; color:var(--text); }
.breadcrumb { font-size:12px; color:var(--text-muted); }

.topbar-right { display:flex; align-items:center; gap:16px; }

.content-area { padding:24px; flex:1; }

/* ==================== SIDEBAR ==================== */
.sidebar-header {
  padding: 20px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.logo { display:flex; align-items:center; gap:10px; color:#fff; font-size:18px; font-weight:700; }
.logo i { color: var(--primary-light); font-size:22px; }

.sidebar-toggle { background:none; border:none; color:var(--sidebar-text); cursor:pointer; font-size:18px; }

.sidebar-nav { flex:1; padding: 12px 0; overflow-y:auto; }
.nav-section { margin-bottom:8px; }
.nav-label {
  font-size:10px; font-weight:600; letter-spacing:1.2px;
  color:rgba(199,210,254,.5); text-transform:uppercase;
  padding: 12px 20px 4px;
}

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding: 10px 20px;
  color: var(--sidebar-text);
  text-decoration:none;
  transition: all .2s;
  border-radius:0;
  font-size:13.5px;
}

.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active { background:var(--primary); color:#fff; }
.nav-item i { width:18px; text-align:center; }

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:10px;
}

.user-info { display:flex; align-items:center; gap:10px; flex:1; overflow:hidden; }
.avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; flex-shrink:0;
}

.user-details { display:flex; flex-direction:column; overflow:hidden; }
.user-details strong { font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.role-badge {
  font-size:10px; padding:1px 6px; border-radius:10px; font-weight:600; width:fit-content;
}
.role-badge.admin { background:#4f46e5; color:#fff; }
.role-badge.staff { background:#059669; color:#fff; }

.logout-btn {
  color:rgba(199,210,254,.6); background:none; border:none;
  cursor:pointer; font-size:16px; padding:4px; text-decoration:none;
  transition:color .2s;
}
.logout-btn:hover { color:var(--danger); }

/* ==================== CARDS ==================== */
.card {
  background:var(--card-bg); border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid var(--border);
  margin-bottom:20px; overflow:hidden;
}

.card-header {
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-header h3 { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }

.card-body { padding:20px; }
.card-body.p-0 { padding:0; }
.card-footer { padding:12px 20px; border-top:1px solid var(--border); background:var(--bg); }

/* ==================== STATS GRID ==================== */
.stats-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px;
}

.stat-card {
  background:var(--card-bg); border-radius:var(--radius);
  padding:20px; display:flex; align-items:center; gap:16px;
  box-shadow:var(--shadow); border:1px solid var(--border);
  border-left: 4px solid;
}

.stat-card.blue  { border-left-color:var(--primary); }
.stat-card.green { border-left-color:var(--success); }
.stat-card.orange{ border-left-color:var(--warning); }
.stat-card.purple{ border-left-color:#8b5cf6; }

.stat-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.stat-card.blue   .stat-icon { background:var(--primary-light); color:var(--primary); }
.stat-card.green  .stat-icon { background:#d1fae5; color:var(--success); }
.stat-card.orange .stat-icon { background:#fef3c7; color:var(--warning); }
.stat-card.purple .stat-icon { background:#ede9fe; color:#8b5cf6; }

.stat-info { display:flex; flex-direction:column; gap:3px; }
.stat-value { font-size:22px; font-weight:700; color:var(--text); }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500; }
.stat-sub   { font-size:11px; color:var(--text-muted); }

/* ==================== DASHBOARD GRID ==================== */
.dashboard-grid { display:grid; grid-template-columns:1fr 380px; gap:20px; margin-bottom:20px; }

/* ==================== ALERTS ==================== */
.alert-list { display:flex; flex-direction:column; gap:8px; }
.alert-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px; border:1px solid;
}
.alert-item.warning { background:#fffbeb; border-color:#fde68a; }
.alert-item.critical{ background:#fef2f2; border-color:#fecaca; }
.alert-info { display:flex; flex-direction:column; gap:2px; }
.alert-info strong { font-size:13px; }
.alert-info small  { font-size:11px; color:var(--text-muted); }

.qty-badge { padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.qty-badge.out { background:var(--danger); color:#fff; }
.qty-badge.low { background:var(--warning); color:#fff; }
.qty-badge.ok  { background:var(--success); color:#fff; }

.alert-badge {
  position:relative; cursor:pointer;
  color:var(--warning); font-size:18px;
}
.alert-badge span {
  position:absolute; top:-6px; right:-6px;
  background:var(--danger); color:#fff;
  border-radius:50%; width:18px; height:18px;
  font-size:10px; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

.flash-message {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-radius:var(--radius);
  margin-bottom:16px; font-size:13.5px;
  animation: slideIn .3s ease;
}
.flash-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.flash-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.flash-warning { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
.flash-message button { margin-left:auto; background:none; border:none; cursor:pointer; font-size:18px; opacity:.6; }

@keyframes slideIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

/* ==================== TABLES ==================== */
.table-responsive { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:10px 16px; text-align:left; background:var(--bg); border-bottom:1px solid var(--border); }
.table td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:13.5px; }
.table tbody tr:last-child td { border-bottom:none; }
.table-hover tbody tr:hover { background:#f9fafb; }
.row-warning { background:#fffbeb !important; }
.row-danger  { background:#fef2f2 !important; }
.row-muted   { opacity:.6; }

.stock-badge { padding:3px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.stock-badge.ok  { background:#d1fae5; color:#065f46; }
.stock-badge.low { background:#fef3c7; color:#92400e; }
.stock-badge.out { background:#fee2e2; color:#991b1b; }

/* ==================== BUTTONS ==================== */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:7px; font-size:13.5px;
  font-weight:500; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:all .15s;
  white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-outline { background:#fff; border-color:var(--border); color:var(--text); }
.btn-outline:hover { background:var(--bg); }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-ghost  { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { background:var(--bg); }
.btn-full { width:100%; justify-content:center; }
.btn-lg { padding:12px 20px; font-size:15px; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 8px; font-size:11px; border-radius:5px; }

/* ==================== FORMS ==================== */
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.form-group label { font-size:13px; font-weight:500; color:var(--text); }
.form-group input,
.form-group select,
.form-group textarea {
  padding:9px 12px; border:1px solid var(--border); border-radius:7px;
  font-size:13.5px; font-family:inherit; background:#fff;
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
}
.form-group textarea { resize:vertical; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row .flex-2 { grid-column: span 2; }
.full-width { grid-column: 1/-1; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

.input-group { display:flex; }
.input-group input { border-radius:7px 0 0 7px; flex:1; }
.input-group button { border-radius:0 7px 7px 0; flex-shrink:0; }
.inline-input { display:flex; gap:6px; align-items:center; }
.inline-input input { width:80px; padding:4px 8px; font-size:12px; }

.alert { padding:12px 14px; border-radius:8px; margin-bottom:14px; }
.alert-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-warning { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }

/* ==================== TOOLBAR ==================== */
.toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; gap:12px; flex-wrap:wrap;
}
.toolbar-actions { display:flex; gap:8px; }
.search-form { display:flex; align-items:center; gap:8px; flex:1; flex-wrap:wrap; }
.search-input { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:7px; padding:0 12px; flex:1; min-width:200px; }
.search-input i { color:var(--text-muted); }
.search-input input { border:none; outline:none; padding:9px 0; font-size:13.5px; font-family:inherit; flex:1; }
.search-form select { padding:9px 12px; border:1px solid var(--border); border-radius:7px; font-size:13.5px; background:#fff; }

/* ==================== BADGES ==================== */
.badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }
.badge-cash   { background:#d1fae5; color:#065f46; }
.badge-card   { background:#dbeafe; color:#1e40af; }
.badge-upi    { background:#ede9fe; color:#5b21b6; }
.badge-wallet { background:#fef3c7; color:#92400e; }
.role-admin   { background:#ede9fe; color:#5b21b6; }
.role-staff   { background:#d1fae5; color:#065f46; }
.badge-warning{ background:#fef3c7; color:#92400e; }

.action-badge { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.action-auth  { background:#dbeafe; color:#1e40af; }
.action-sale  { background:#d1fae5; color:#065f46; }
.action-danger{ background:#fee2e2; color:#991b1b; }
.action-info  { background:#f3f4f6; color:#374151; }

.status-dot { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; }
.status-dot::before { content:''; width:7px; height:7px; border-radius:50%; }
.status-dot.active::before   { background:var(--success); }
.status-dot.inactive::before { background:var(--text-muted); }

/* ==================== POS LAYOUT ==================== */
.pos-layout { display:grid; grid-template-columns:1fr 380px; gap:20px; height:calc(100vh - var(--topbar-height) - 48px); }
.pos-products { display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.pos-cart { background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }

.pos-search { display:flex; gap:8px; }
.pos-search .search-input { flex:1; }

.category-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.cat-tab { padding:5px 12px; border-radius:20px; font-size:12px; cursor:pointer; border:1px solid var(--border); background:#fff; font-weight:500; transition:all .15s; }
.cat-tab:hover, .cat-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; overflow-y:auto; padding-bottom:10px; }
.product-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px; cursor:pointer; transition:all .15s; user-select:none; }
.product-card:hover { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); transform:translateY(-2px); }
.product-name { font-size:12.5px; font-weight:600; margin-bottom:4px; line-height:1.3; }
.product-sku  { font-size:10px; color:var(--text-muted); margin-bottom:4px; }
.product-price{ font-size:14px; font-weight:700; color:var(--primary); }
.product-stock{ font-size:10px; color:var(--success); margin-top:4px; }
.product-stock.low { color:var(--warning); }

.cart-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-header h3 { font-size:15px; font-weight:600; }
.cart-items { flex:1; overflow-y:auto; padding:10px; }
.cart-empty { text-align:center; padding:40px 20px; color:var(--text-muted); }
.cart-empty i { font-size:36px; margin-bottom:10px; display:block; opacity:.3; }

.cart-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; border:1px solid var(--border); margin-bottom:8px; background:#fff; }
.cart-item-info { flex:1; }
.cart-item-info strong { font-size:13px; display:block; }
.cart-item-info small  { font-size:11px; color:var(--text-muted); }
.cart-item-controls { display:flex; align-items:center; gap:6px; }
.qty-btn { width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.qty-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.qty-display { font-weight:700; min-width:20px; text-align:center; }
.item-total  { font-size:13px; font-weight:700; min-width:60px; text-align:right; }
.remove-btn  { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; }
.remove-btn:hover { color:var(--danger); }

.cart-summary { padding:12px 16px; border-top:1px solid var(--border); background:var(--bg); }
.summary-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; font-size:13px; }
.total-row { font-size:16px; font-weight:700; margin-top:6px; padding-top:8px; border-top:2px dashed var(--border); }

.payment-section { padding:12px 16px; border-top:1px solid var(--border); }
.payment-methods { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0; }
.pay-method { padding:8px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12px; font-weight:500; background:#fff; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:5px; }
.pay-method:hover, .pay-method.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.change-display { margin-top:8px; padding:8px 12px; background:var(--bg); border-radius:7px; font-size:13px; }

/* ==================== CCTV ==================== */
.cctv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:16px; margin-bottom:20px; }
.cctv-card { background:var(--card-bg); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
.cctv-card.inactive { opacity:.6; }
.cctv-header { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.cam-info { display:flex; flex-direction:column; gap:2px; }
.cam-status { font-size:10px; font-weight:700; letter-spacing:.5px; }
.cam-status.live   { color:var(--success); }
.cam-status.offline{ color:var(--text-muted); }
.cctv-feed { height:220px; background:#000; position:relative; display:flex; align-items:center; justify-content:center; }
.feed-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(255,255,255,.4); text-align:center; padding:20px; }
.feed-placeholder i { font-size:36px; margin-bottom:10px; }
.feed-placeholder p { font-size:13px; }
.feed-placeholder small { font-size:11px; margin-top:4px; word-break:break-all; }
.cctv-footer { padding:8px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); }

/* ==================== MODALS ==================== */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-content { background:#fff; border-radius:var(--radius); width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h4 { font-size:15px; font-weight:600; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); line-height:1; }
.modal-body { padding:20px; }

/* ==================== PAGINATION ==================== */
.pagination { display:flex; gap:4px; flex-wrap:wrap; }
.page-btn { padding:5px 11px; border:1px solid var(--border); border-radius:5px; text-decoration:none; color:var(--text); font-size:13px; transition:all .15s; }
.page-btn:hover, .page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ==================== USER LIST ==================== */
.user-avatar-row { display:flex; align-items:center; gap:8px; }
.avatar-sm { width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.cam-actions { display:flex; gap:6px; }

/* ==================== PERIOD TABS ==================== */
.period-tabs { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.period-tab { padding:8px 16px; text-decoration:none; color:var(--text-muted); font-size:13px; font-weight:500; background:#fff; border-right:1px solid var(--border); transition:all .15s; }
.period-tab:last-child { border-right:none; }
.period-tab:hover, .period-tab.active { background:var(--primary); color:#fff; }

/* ==================== MISC ==================== */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state i { font-size:40px; margin-bottom:12px; display:block; opacity:.3; }
.empty-state-large { padding:80px 40px; text-align:center; }
.empty-state-large i { margin-bottom:16px; display:block; opacity:.3; }
.empty-state-large h3 { font-size:18px; margin-bottom:8px; }
.empty-state-large p  { color:var(--text-muted); margin-bottom:6px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mb-3 { margin-bottom:12px; }
.py-4 { padding-top:16px; padding-bottom:16px; }
.text-center { text-align:center; }
.text-muted   { color:var(--text-muted); }
.text-green   { color:var(--success); }
.text-orange  { color:var(--warning); }
.inline-form  { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.legend { display:flex; flex-direction:column; gap:6px; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:12px; }
.legend-dot  { width:10px; height:10px; border-radius:50%; background:var(--primary); }
code { font-family:'Courier New', monospace; font-size:12px; background:var(--bg); padding:2px 6px; border-radius:4px; color:var(--primary); }
.actions { display:flex; gap:5px; }

/* ==================== LOGIN ==================== */
.login-body { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrapper { width:100%; max-width:400px; padding:20px; }
.login-card { background:#fff; border-radius:16px; padding:36px; box-shadow:0 25px 60px rgba(0,0,0,.4); }
.login-header { text-align:center; margin-bottom:28px; }
.login-logo { width:64px; height:64px; border-radius:16px; background:var(--primary); color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.login-header h1 { font-size:22px; font-weight:700; margin-bottom:4px; }
.login-header p  { color:var(--text-muted); font-size:13px; }
.login-form { display:flex; flex-direction:column; gap:12px; }
.toggle-password { padding:0 12px; background:var(--bg); border:none; cursor:pointer; color:var(--text-muted); }
.login-footer { text-align:center; margin-top:20px; color:var(--text-muted); line-height:1.8; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .pos-layout { grid-template-columns:1fr 340px; }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }
  .sidebar { transform:translateX(-240px); }
  .sidebar.open { transform:translateX(0); width:240px; }
  .main-content { margin-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .pos-layout { grid-template-columns:1fr; grid-template-rows:auto 500px; }
  .cctv-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
}