/* Dashboard look (inspired by mock) applied via global classes. */

/* Grid and spacing */
.dashboard-container{ max-width: 1280px; margin: 0 auto; padding: 16px 20px; }
.grid{ display: grid; gap: 16px; }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.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: 1200px){ .grid.cols-4{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 768px){ .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns: 1fr;} }

/* Cards/panels */
.stat-card, .panel-card, .quick-action{ background: #232A35; border: 1px solid #2F3744; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); color: #E9EDF2; }
.stat-card{ padding: 18px 20px; display:flex; align-items:center; justify-content: space-between; }
.stat-card .title{ font-size: 12.5px; letter-spacing: .2px; color:#B6C2D0; margin-bottom: 6px; font-weight: 600; }
.stat-card .value{ font-size: 26px; font-weight: 800; color:#E9EDF2; }
.stat-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid rgba(255,255,255,.1) }
.stat-icon.blue{ background: rgba(10,132,255,.12); color:#0A84FF; border-color: rgba(10,132,255,.35) }
.stat-icon.gold{ background: rgba(212,167,63,.12); color:#D4A73F; border-color: rgba(212,167,63,.35) }
.stat-icon.green{ background: rgba(54,201,113,.12); color:#36C971; border-color: rgba(54,201,113,.35) }

.panel-card{ padding: 16px 18px; }
.panel-card .panel-header{ margin-bottom: 10px; }
.panel-card .panel-title{ font-size: 14px; font-weight: 700; color:#E9EDF2; }
.panel-card .panel-sub{ font-size: 12px; color:#B6C2D0; }

/* Lists / legend */
.legend{ display:flex; gap:10px; align-items:center; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.blue{ background:#0A84FF; }
.dot.gold{ background:#D4A73F; }
.dot.grey{ background:#6B7C8C; }

/* Quick actions */
.quick-action{ padding: 14px 16px; display:flex; align-items:flex-start; gap: 10px; transition: all .15s ease; }
.quick-action:hover{ border-color:#0A84FF; box-shadow: 0 8px 26px rgba(10,132,255,.15); }
.quick-action .qa-icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: rgba(10,132,255,.12); color:#0A84FF; }
.quick-action .qa-title{ font-size: 13px; font-weight:700; color:#E9EDF2; }
.quick-action .qa-sub{ font-size: 12px; color:#B6C2D0; }

/* Apply only on dashboard view for safety */
body.view-dashboard .dashboard-container{ padding-top: 10px; }
body.view-dashboard .stat-card, body.view-dashboard .panel-card, body.view-dashboard .quick-action{ background:#232A35; }

/* Extended layout (dashboard-content) */
.dashboard-content{ padding: 24px 20px; }
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; margin-bottom: 20px; }
.stat-card{ background:#1e2533; border:1px solid #2F3744; border-radius:12px; padding:20px; display:flex; justify-content:space-between; align-items:flex-start; position:relative; transition:all .25s ease; }
.stat-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent-color, #0A84FF), transparent); opacity:.0; transition:opacity .25s ease; }
.stat-card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.stat-card:hover::before{ opacity:1; }
.stat-card.orange{ --accent-color:#d97706; }
.stat-card.green{ --accent-color:#36C971; }
.stat-card.gold{ --accent-color:#D4A73F; }
.stat-card.blue{ --accent-color:#0A84FF; }
.stat-info h3{ font-size: 13px; color:#B6C2D0; font-weight:600; margin-bottom:6px; }
.stat-value{ font-size:34px; font-weight:800; color:#E9EDF2; }
.stat-subtitle{ font-size:12px; color:#B6C2D0; }
.stat-icon{ width:44px; height:44px; border-radius:10px; background: rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; font-size:22px; }
.content-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel{ background:#1e2533; border:1px solid #2F3744; border-radius:12px; padding:22px; }
.panel-header{ margin-bottom:16px; }
.panel-header h3{ font-size:16px; font-weight:700; color:#E9EDF2; }
.metric-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.metric-row:last-child{ border-bottom:none; }
.metric-label{ font-size:13px; color:#B6C2D0; }
.metric-value{ font-size:18px; font-weight:700; color:#E9EDF2; }
.metric-value.zero{ color:#9aa7b3; }
.role-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; }
.role-label{ display:flex; align-items:center; gap:10px; font-size:14px; color:#B6C2D0; }
.role-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.role-dot.orange{ background:#d97706; }
.role-dot.gold{ background:#D4A73F; }
.role-dot.blue{ background:#0A84FF; }
.role-count{ font-size:18px; font-weight:700; color:#E9EDF2; }
.recent-user{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:8px; transition:all .2s ease; }
.recent-user:hover{ background: rgba(255,255,255,.03); }
.recent-avatar{ width:40px; height:40px; border-radius:50%; background:#d97706; display:flex; align-items:center; justify-content:center; font-weight:700; }
.recent-user-info h4{ font-size:14px; font-weight:600; color:#E9EDF2; margin-bottom:4px; }
.recent-user-info p{ font-size:12px; color:#B6C2D0; }
.user-badge{ margin-left:auto; padding:3px 10px; border-radius:4px; font-size:11px; font-weight:600; background: rgba(217,119,6,.15); color:#d97706; text-transform: lowercase; }
.status-dot{ width:8px; height:8px; border-radius:50%; margin-left:8px; }
.action-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; margin-top: 10px; }
.action-card{ background:linear-gradient(135deg, #1e2533 0%, #1a2130 100%); border:1px solid #2F3744; border-radius:12px; padding:22px; cursor:pointer; transition:all .25s ease; position:relative; overflow:hidden; }
.action-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.05) 100%); opacity:0; transition:opacity .25s ease; }
.action-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.action-card:hover::before{ opacity:1; }
.action-icon{ width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:12px; }
.action-content h4{ font-size:15px; font-weight:700; color:#E9EDF2; margin-bottom:6px; }
.action-content p{ font-size:13px; color:#B6C2D0; }

@media (max-width: 1024px){ .content-grid{ grid-template-columns: 1fr; } }

/* Chart container: consistent sizing across screens */
.chart-box{ width:100%; height: 220px; }
@media (max-width: 1024px){ .chart-box{ height: 200px; } }
@media (max-width: 768px){ .chart-box{ height: 160px; } }
.chart-box canvas{ width:100% !important; height:100% !important; display:block; }