/* =====================================================================
   Playful dashboard theme (v1.0.101) - STYLE ONLY.
   Soft lavender sidebar with white rounded cards, colourful icon tiles,
   rounded font, pastel page background. No layout, markup or data changes.
   To go back to the previous look, remove the theme-playful.css <link>
   from includes/header.php and login.php.
   ===================================================================== */
:root {
  --brand: #1cb0f6;
  --brand-rgb: 28, 176, 246;
  --brand-dark: #1899d6;
  --brand-light: #ddf4ff;
  --surface: #f5f7f1;
  --border: #e6e9de;
  --border-soft: #ecefe4;
  --radius: 16px;
  --radius-lg: 22px;
  --font-sans: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t-blue: linear-gradient(135deg, #4cc3ff, #1cb0f6);
  --t-green: linear-gradient(135deg, #86dc2c, #58cc02);
  --t-orange: linear-gradient(135deg, #ffb340, #ff9600);
  --t-yellow: linear-gradient(135deg, #ffd84a, #ffc800);
  --t-purple: linear-gradient(135deg, #dc9bff, #b66cf2);
  --t-pink: linear-gradient(135deg, #ff9bd8, #ff6fc0);
  --t-red: linear-gradient(135deg, #ff7a7a, #ff4b4b);
  --t-teal: linear-gradient(135deg, #3fd9c4, #14b8a6);
  --t-slate: linear-gradient(135deg, #475569, #1e293b);
  --card-shadow: 0 6px 18px rgba(30, 41, 59, .08), 0 1px 3px rgba(30, 41, 59, .05);
}
body { font-weight: 600; }

/* ---------- Sidebar ---------- */
.app-sidebar { background: #dfe6fc; border-right: 0; }
.app-sidebar .sidebar-brand {
  background: #fff; margin: .75rem .75rem 0; border: 1px solid var(--border-soft);
  border-radius: 20px; min-height: 64px; padding: .75rem .9rem; box-shadow: var(--card-shadow);
}
.app-sidebar .sidebar-brand-icon { background: var(--t-blue); border-radius: 14px; box-shadow: 0 3px 0 #1480b8; }
.app-sidebar .sidebar-brand-text { font-weight: 800; }
.app-sidebar .sidebar-nav { padding: .75rem; }
.app-sidebar .sidebar-nav > ul.nav {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 22px;
  padding: .55rem; box-shadow: var(--card-shadow);
}
.app-sidebar .sidebar-nav .nav-item { margin-bottom: 4px; }
.app-sidebar .sidebar-nav .nav-link {
  border: 2px solid transparent; border-radius: 16px; padding: .5rem .6rem;
  font-size: .92rem; font-weight: 800; color: var(--ink-800);
}
.app-sidebar .sidebar-nav .nav-link:hover,
.app-sidebar .sidebar-nav .nav-link:focus { background: #f2f5ff; color: var(--ink-900); }

/* Coloured icon tiles (top-level items) */
.app-sidebar .sidebar-nav .nav-item > .nav-link > i:first-child {
  width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; color: #fff !important; font-size: 1.05rem; background: var(--t-blue);
  box-shadow: 0 2px 6px rgba(30, 41, 59, .15);
}
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(1) > .nav-link > i:first-child { background: var(--t-blue); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(2) > .nav-link > i:first-child { background: var(--t-teal); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(3) > .nav-link > i:first-child { background: var(--t-pink); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(4) > .nav-link > i:first-child { background: var(--t-green); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(5) > .nav-link > i:first-child { background: var(--t-orange); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(6) > .nav-link > i:first-child { background: var(--t-purple); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(7) > .nav-link > i:first-child { background: var(--t-yellow); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(8) > .nav-link > i:first-child { background: var(--t-red); }
.app-sidebar .sidebar-nav > ul.nav > li:nth-child(9) > .nav-link > i:first-child { background: var(--t-slate); }

/* Active / open parent: blue outline. Active page link: solid blue pill. */
.app-sidebar .sidebar-nav .nav-item > .nav-link.active,
.app-sidebar .sidebar-nav .submenu-toggle:not(.collapsed) {
  background: #fff; border-color: var(--brand); color: var(--ink-900);
}
.app-sidebar .sidebar-nav .submenu-toggle .submenu-caret { font-size: .75rem; color: var(--ink-400); }

/* Sub menu: grey pills, no icons */
.app-sidebar .sidebar-submenu { border-left: 0; margin: 4px 0 6px .9rem; padding: 0 0 0 .4rem; }
.app-sidebar .sidebar-submenu > li { margin-bottom: 4px; }
.app-sidebar .sidebar-submenu .nav-link {
  background: #f3f4f6; border-radius: 14px; padding: .5rem .8rem; font-size: .85rem; font-weight: 700; color: var(--ink-700);
}
.app-sidebar .sidebar-submenu .nav-link i:first-child { display: none; }
.app-sidebar .sidebar-submenu .nav-link:hover { background: #e7eefc; }
.app-sidebar .sidebar-submenu .nav-link.active { background: var(--brand); color: #fff; border-color: var(--brand-dark); }
.app-sidebar .sidebar-divider { margin: .3rem 0; }

/* ---------- Top bar ---------- */
.app-topbar { background: rgba(245, 247, 241, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 0; box-shadow: none; }
.app-topbar .sidebar-toggle-btn,
.app-topbar .btn-outline-secondary,
.app-topbar .btn-outline-primary {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; color: var(--ink-700);
  box-shadow: 0 2px 6px rgba(30, 41, 59, .06); font-weight: 700;
}
.app-topbar .btn-outline-primary { color: var(--brand-dark); border-color: #b9e6fd; }
.app-topbar a.text-dark {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: .35rem .8rem;
  font-weight: 700; box-shadow: 0 2px 6px rgba(30, 41, 59, .06);
}

/* ---------- Cards, panels, forms, buttons ---------- */
.card, .dashboard-panel {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 22px; box-shadow: var(--card-shadow);
}
.card-header { border-top-left-radius: 22px !important; border-top-right-radius: 22px !important; font-weight: 800; }
.btn { border-radius: 14px; font-weight: 700; }
.btn-primary { --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; }
.btn-outline-primary { color: var(--brand-dark); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.form-control, .form-select { border-radius: 14px; }
.badge { border-radius: 999px; font-weight: 800; }
.table thead th { font-weight: 800; }
.nav-tabs .nav-link, .nav-pills .nav-link { font-weight: 800; }

/* ---------- Dashboard ---------- */
.dashboard-title { font-weight: 900; letter-spacing: -.02em; }
.dashboard-eyebrow { color: var(--brand-dark); font-weight: 900; }
.dashboard-kpi {
  border: 1px solid var(--border-soft) !important; border-radius: 22px; background: #fff !important;
  box-shadow: var(--card-shadow); padding: 1.1rem 1.2rem;
}
.dashboard-kpi::after { display: none; }
.dashboard-kpi-icon { width: 44px; height: 44px; border-radius: 14px; box-shadow: 0 2px 6px rgba(30, 41, 59, .15); }
.dashboard-kpi-icon i { font-size: 1.2rem; }
.dashboard-kpi-sales .dashboard-kpi-icon { background: var(--t-blue); }
.dashboard-kpi-outstanding .dashboard-kpi-icon { background: var(--t-orange); }
.dashboard-kpi-expenses .dashboard-kpi-icon { background: var(--t-pink); }
.dashboard-kpi-profit .dashboard-kpi-icon { background: var(--t-green); }
.dashboard-kpi-loss .dashboard-kpi-icon { background: var(--t-red); }
.dashboard-kpi-label { font-size: .7rem; font-weight: 900; letter-spacing: .06em; color: #98a1ad; }
.dashboard-kpi-value { font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; }
.dashboard-kpi-meta { font-weight: 800; }
.dashboard-panel-header h5 { font-weight: 900; }
.dashboard-panel-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--t-green); color: #fff; font-size: 1.05rem;
  box-shadow: 0 2px 6px rgba(30, 41, 59, .15);
}
.dashboard-panel-header .dashboard-panel-icon { margin-right: .5rem; }
.sales-main-number, .dashboard-subpanel, .dashboard-mini-stats, .summary-grid a { border-radius: 16px; }
.summary-grid a:nth-child(6n+1) i { color: #1cb0f6; } .summary-grid a:nth-child(6n+2) i { color: #ff9600; }
.summary-grid a:nth-child(6n+3) i { color: #58cc02; } .summary-grid a:nth-child(6n+4) i { color: #b66cf2; }
.summary-grid a:nth-child(6n+5) i { color: #ff6fc0; } .summary-grid a:nth-child(6n) i { color: #14b8a6; }
.recent-icon { border-radius: 12px; }
.dashboard-action-light { border-radius: 14px; }
.dashboard-progress, .category-progress { border-radius: 999px; background: #eef1e8; }

/* Activity-calendar tiles: same rounded, colourful look */
.dashcal-tile { border-radius: 22px; box-shadow: var(--card-shadow); border-color: var(--border-soft); border-left-width: 1px !important; }
.dashcal-tile-icon { width: 40px; height: 40px; border-radius: 13px; color: #fff !important; box-shadow: 0 2px 6px rgba(30, 41, 59, .15); }
.dashcal-tile.tone-red .dashcal-tile-icon { background: var(--t-red); }
.dashcal-tile.tone-amber .dashcal-tile-icon { background: var(--t-orange); }
.dashcal-tile.tone-blue .dashcal-tile-icon { background: var(--t-blue); }
.dashcal-tile.tone-violet .dashcal-tile-icon { background: var(--t-purple); }
.dashcal-tile.tone-green .dashcal-tile-icon { background: var(--t-green); }
.dashcal-tile.tone-slate .dashcal-tile-icon { background: var(--t-slate); }
.dashcal-tile-label { font-weight: 800; }
.dashcal-tile-value { font-weight: 900; }

/* Other pages' gradient stat cards use the same palette */
.stat-card.bg-primary { background: var(--t-blue) !important; }
.stat-card.bg-info { background: var(--t-teal) !important; }
.stat-card.bg-success { background: var(--t-green) !important; }
.stat-card.bg-danger { background: var(--t-red) !important; }
.stat-card.bg-warning { background: var(--t-orange) !important; }
.stat-card.bg-purple { background: var(--t-purple) !important; }

/* Login */
.login-wrapper { background: linear-gradient(160deg, #dfe6fc, #f5f7f1); }
.login-card { border-radius: 24px; }