/* ======================================================================
   sayara-dashboard.css — Sayara "Aurora Indigo" Super Dashboard Theme
   Targets THREE back-office panels:
     body.sy-panel--admin    → Skote template  (layouts.master)
     body.sy-panel--vendor   → User template   (layouts.user, vendor)
     body.sy-panel--customer → User template   (layouts.user, customer)

   Rules:
   - 100% ADDITIVE — loaded last, no global resets.
   - Every selector is prefixed with body.sy-panel or a panel variant.
   - Shared structural rules live under body.sy-panel.
   - Per-panel accent colour drives all interactive chrome via --sy-acc.
   - NO !important except a handful of unavoidable Skote specificity wins
     (commented inline).
   ====================================================================== */

@import url('sayara-tokens.css');
@import url('sayara-fonts.css');

/* ------------------------------------------------------------------ */
/* 1. PER-PANEL ACCENT TOKENS                                          */
/* ------------------------------------------------------------------ */

/* Admin  — deep indigo (authoritative / control-room) */
body.sy-panel--admin {
  --sy-acc:        #4F46E5;
  --sy-acc-hover:  #4338CA;
  --sy-acc-light:  #eef0fe;
  --sy-acc-muted:  rgba(79, 70, 229, .12);
  --sy-sidebar-from: #0B1020;
  --sy-sidebar-to:   #1a1550;
  --sy-sidebar-line: #4F46E5;
}

/* Vendor — cyan / teal (business / operations) */
body.sy-panel--vendor {
  --sy-acc:        #06B6D4;
  --sy-acc-hover:  #0894AD;
  --sy-acc-light:  #ecfeff;
  --sy-acc-muted:  rgba(6, 182, 212, .12);
  --sy-sidebar-from: #062a30;
  --sy-sidebar-to:   #083a43;
  --sy-sidebar-line: #06B6D4;
}

/* Customer — amber (friendly / consumer) */
body.sy-panel--customer {
  --sy-acc:        #F59E0B;
  --sy-acc-hover:  #D97706;
  --sy-acc-light:  #fffbeb;
  --sy-acc-muted:  rgba(245, 158, 11, .12);
  --sy-sidebar-from: #1c1400;
  --sy-sidebar-to:   #2d2000;
  --sy-sidebar-line: #F59E0B;
}

/* ------------------------------------------------------------------ */
/* 2. GLOBAL PAGE BACKGROUND & TYPOGRAPHY RESET (scoped)               */
/* ------------------------------------------------------------------ */

body.sy-panel {
  background-color: #F6F7FB;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0B1020;
}

/* ================================================================== */
/* ===  SECTION A : ADMIN PANEL (Skote / layouts.master)  === */
/* ================================================================== */

/* -- 2A. Topbar ---------------------------------------------------- */

body.sy-panel--admin #page-topbar {
  background: #ffffff;
  border-bottom: 1px solid #E6E8F0;
  box-shadow: 0 1px 8px rgba(11, 16, 32, .06);
}

body.sy-panel--admin .navbar-header {
  background: transparent;
}

body.sy-panel--admin .navbar-brand-box {
  background: var(--sy-sidebar-from);
}

/* Header action buttons */
body.sy-panel--admin .header-item {
  color: #6B7280;
  transition: color 150ms ease, background 150ms ease;
}
body.sy-panel--admin .header-item:hover {
  color: var(--sy-acc);
  background: var(--sy-acc-light);
  border-radius: 8px;
}

/* Admin name text in topbar */
body.sy-panel--admin #page-header-user-dropdown .fw-medium {
  color: #0B1020;
  font-family: "Inter", sans-serif;
}

/* View site / Clear cache pill-buttons in topbar */
body.sy-panel--admin .view-site .v-site {
  color: var(--sy-acc);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
}
body.sy-panel--admin .view-site .btn {
  border: 1px solid var(--sy-acc-muted);
  border-radius: 999px;
  padding: 4px 14px;
  transition: background 150ms ease;
}
body.sy-panel--admin .view-site .btn:hover {
  background: var(--sy-acc-muted);
}

/* Dropdown menus off topbar */
body.sy-panel--admin .dropdown-menu {
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(11, 16, 32, .14);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}
body.sy-panel--admin .dropdown-item:focus,
body.sy-panel--admin .dropdown-item:hover {
  background: var(--sy-acc-light);
  color: var(--sy-acc);
}

/* -- 2B. Sidebar --------------------------------------------------- */

body.sy-panel--admin .vertical-menu {
  background: linear-gradient(175deg, var(--sy-sidebar-from) 0%, var(--sy-sidebar-to) 100%);
  border-right: none;
  box-shadow: 2px 0 20px rgba(11, 16, 32, .18);
}

/* Logo brand box inside sidebar */
body.sy-panel--admin .vertical-menu .navbar-brand-box {
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Scrollable sidebar inner */
body.sy-panel--admin .sidebar-menu-scroll {
  background: transparent;
}

/* All sidebar links */
body.sy-panel--admin #sidebar-menu ul.metismenu li a {
  color: rgba(255, 255, 255, .72);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 450;
  border-radius: 10px;
  margin: 1px 8px;
  padding: 10px 14px;
  transition: background 150ms ease, color 150ms ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.sy-panel--admin #sidebar-menu ul.metismenu li a:hover {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

/* Sub-menu items */
body.sy-panel--admin #sidebar-menu ul.metismenu .sub-menu li a {
  color: rgba(255, 255, 255, .58);
  font-size: 0.8125rem;
  padding: 8px 14px 8px 34px;
  border-radius: 8px;
  margin: 1px 8px;
}
body.sy-panel--admin #sidebar-menu ul.metismenu .sub-menu li a:hover {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .9);
}

/* Active states — mm-active parent and the active link child */
body.sy-panel--admin #sidebar-menu ul.metismenu li.mm-active > a,
body.sy-panel--admin #sidebar-menu ul.metismenu li > a.mm-active {
  background: var(--sy-acc-muted);
  color: #ffffff;
  border-left: 3px solid var(--sy-sidebar-line);
  padding-left: 11px; /* compensate for border */
}

/* Active sub-menu link (wave-effect.active) */
body.sy-panel--admin #sidebar-menu ul.metismenu .sub-menu li a.active {
  color: #ffffff;
  background: rgba(79, 70, 229, .22);
  border-left: 2px solid var(--sy-sidebar-line);
  padding-left: 32px;
}

/* Sidebar icons (SVG <img> used) — keep the img behaviour, style the li */
body.sy-panel--admin #sidebar-menu ul.metismenu li a img {
  width: 18px;
  height: 18px;
  opacity: .75;
  filter: brightness(10);
  flex-shrink: 0;
}
body.sy-panel--admin #sidebar-menu ul.metismenu li a:hover img,
body.sy-panel--admin #sidebar-menu ul.metismenu li.mm-active > a img {
  opacity: 1;
}

/* Arrow chevrons */
body.sy-panel--admin #sidebar-menu ul.metismenu li a .has-arrow::after,
body.sy-panel--admin #sidebar-menu ul.metismenu li a.has-arrow::after {
  border-color: rgba(255, 255, 255, .5);
}

/* Logout li */
body.sy-panel--admin #sidebar-menu ul.metismenu li.logout-li a {
  color: rgba(255, 100, 100, .82);
}
body.sy-panel--admin #sidebar-menu ul.metismenu li.logout-li a:hover {
  background: rgba(239, 68, 68, .12);
  color: #ff6b6b;
}

/* -- 2C. Main content area ----------------------------------------- */

body.sy-panel--admin .main-content {
  background: #F6F7FB;
}
body.sy-panel--admin .page-content {
  padding: 24px;
  background: #F6F7FB;
}
body.sy-panel--admin .container-fluid {
  background: transparent;
}

/* -- 2D. Cards (generic) ------------------------------------------- */

body.sy-panel--admin .card {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
body.sy-panel--admin .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(16, 24, 40, .06),
              0 16px 32px -12px rgba(16, 24, 40, .14);
}
body.sy-panel--admin .card-body {
  padding: 20px 22px;
}
body.sy-panel--admin .card-title,
body.sy-panel--admin .card-header h5 {
  font-family: "Sora", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0B1020;
}

/* -- 2E. Dashboard stat cards (admin/dashboard.blade.php) ---------- */

/* Stat label ("Active Partners", "Total Customers", etc.) */
body.sy-panel--admin .card-body p.text-muted1 {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
  margin-bottom: 0;
}

/* Big stat number */
body.sy-panel--admin .dash-text h3 {
  font-family: "Sora", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--sy-acc);
  line-height: 1.15;
}

/* Chart wrapper panels */
body.sy-panel--admin .cus-bg {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
}

body.sy-panel--admin .cus-padding {
  padding: 20px;
}

body.sy-panel--admin .cus-border {
  /* left main col wrapper — no visual border needed, just spacing */
  padding: 0;
}

/* "Recently Joined Partners" / Suggestions side column */
body.sy-panel--admin .cus-bottom {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
}

/* Section headings */
body.sy-panel--admin .ad-head h4,
body.sy-panel--admin .recent-added,
body.sy-panel--admin h4.fw-bolder {
  font-family: "Sora", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0B1020;
}

/* Partner / suggestion rows */
body.sy-panel--admin .prof {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #F3F4F6;
}
body.sy-panel--admin .prof:last-of-type {
  border-bottom: none;
}

/* Avatar images in partner/suggestion list */
body.sy-panel--admin .part-img img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sy-acc-muted);
}

body.sy-panel--admin .part-name h5 {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0B1020;
  margin: 0;
}
body.sy-panel--admin .part-name .text-muted {
  font-size: 0.75rem;
  color: #6B7280;
}
body.sy-panel--admin .part-name a:hover h5 {
  color: var(--sy-acc);
}

/* "View All Cars" / "All Partners" link */
body.sy-panel--admin .v-cars {
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sy-acc);
  transition: opacity 150ms ease;
}
body.sy-panel--admin .v-cars:hover {
  opacity: .75;
}

/* Overview header row */
body.sy-panel--admin .cus-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* -- 2F. Tables ---------------------------------------------------- */

body.sy-panel--admin .table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}
body.sy-panel--admin .table thead th {
  background: #F9FAFB;
  color: #6B7280;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--sy-acc);
  padding: 10px 12px;
  white-space: nowrap;
}
body.sy-panel--admin .table tbody td {
  color: #0B1020;
  border-bottom: 1px solid #F3F4F6;
  padding: 10px 12px;
  vertical-align: middle;
}
body.sy-panel--admin .table tbody tr:hover td {
  background: #F6F7FB;
}
body.sy-panel--admin .table tbody tr:last-child td {
  border-bottom: none;
}

/* Overflow wrapper for dashboard car table */
body.sy-panel--admin .admin-table-overflow {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid #E6E8F0;
}

/* -- 2G. Buttons ---------------------------------------------------- */

body.sy-panel--admin .btn-primary {
  background: var(--sy-acc);
  border-color: var(--sy-acc);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 10px;
  padding: 8px 20px;
  transition: background 150ms ease, box-shadow 150ms ease;
}
body.sy-panel--admin .btn-primary:hover,
body.sy-panel--admin .btn-primary:focus {
  background: var(--sy-acc-hover);
  border-color: var(--sy-acc-hover);
  box-shadow: 0 0 0 3px var(--sy-acc-muted);
}

body.sy-panel--admin .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):not(.btn-link) {
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}

/* -- 2H. Form controls --------------------------------------------- */

body.sy-panel--admin .form-control,
body.sy-panel--admin .form-select {
  border: 1px solid #E6E8F0;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #0B1020;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.sy-panel--admin .form-control:focus,
body.sy-panel--admin .form-select:focus {
  border-color: var(--sy-acc);
  /* color-mix fallback then modern syntax */
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-acc) 22%, transparent);
  outline: none;
}

/* -- 2I. Badges / pills -------------------------------------------- */

body.sy-panel--admin .badge {
  font-family: "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: 3px 9px;
}

/* ================================================================== */
/* ===  SECTION B : VENDOR + CUSTOMER PANELS (layouts.user)  === */
/* ================================================================== */

/* Shared structural selectors under body.sy-panel cover both panels.
   The accent colour automatically differs via --sy-acc. */

/* -- 3A. Outer shell ----------------------------------------------- */

body.sy-panel .page {
  background: #F6F7FB;
}
body.sy-panel .page-main {
  background: #F6F7FB;
}
body.sy-panel .wrapper {
  background: #F6F7FB;
}

/* -- 3B. Top header bar (user panel) ------------------------------- */

body.sy-panel .header {
  background: #ffffff;
  border-bottom: 1px solid #E6E8F0;
  box-shadow: 0 1px 8px rgba(11, 16, 32, .06);
}

/* Navbar links */
body.sy-panel .header .navbar-nav .nav-link {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #0B1020;
  transition: color 150ms ease;
}
body.sy-panel .header .navbar-nav .nav-link.active,
body.sy-panel .header .navbar-nav .nav-link:hover {
  color: var(--sy-acc);
}

/* Account icon / user avatar */
body.sy-panel .header .user-img img {
  border-radius: 50%;
  border: 2px solid var(--sy-acc-muted);
}

/* Dropdown menus in user header */
body.sy-panel .header .dropdown-menu,
body.sy-panel .header .dropdownmenu-wrapper {
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  box-shadow: 0 8px 24px -8px rgba(11, 16, 32, .14);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  background: #ffffff;
}
body.sy-panel .header .dropdown-item:hover {
  background: var(--sy-acc-light);
  color: var(--sy-acc);
}

/* Login / signup button in user header */
body.sy-panel .header .mybtn1 {
  background: var(--sy-acc);
  color: #ffffff;
  border-radius: 999px;
  padding: 8px 22px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 150ms ease;
  text-decoration: none;
  display: inline-block;
}
body.sy-panel .header .mybtn1:hover {
  background: var(--sy-acc-hover);
  color: #ffffff;
}

/* -- 3C. Sidebar (nav#sidebar.nav-sidebar) ------------------------- */

body.sy-panel nav#sidebar.nav-sidebar {
  background: linear-gradient(175deg, var(--sy-sidebar-from) 0%, var(--sy-sidebar-to) 100%);
  border-right: none;
  box-shadow: 2px 0 20px rgba(11, 16, 32, .18);
  min-height: 100vh;
}

/* Sidebar nav items */
body.sy-panel .nav-sidebar ul.components li a {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 450;
  color: rgba(255, 255, 255, .72);
  border-radius: 10px;
  margin: 2px 8px;
  padding: 10px 14px;
  transition: background 150ms ease, color 150ms ease;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
body.sy-panel .nav-sidebar ul.components li a:hover {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

/* Active sidebar item */
body.sy-panel .nav-sidebar ul.components li a.active,
body.sy-panel .nav-sidebar ul.components li a.wave-effect.active {
  background: var(--sy-acc-muted);
  color: #ffffff;
  border-left: 3px solid var(--sy-sidebar-line);
  padding-left: 11px;
  font-weight: 600;
}

/* Sidebar icons */
body.sy-panel .nav-sidebar ul.components li a i {
  width: 18px;
  text-align: center;
  color: rgba(255, 255, 255, .6);
  flex-shrink: 0;
  transition: color 150ms ease;
}
body.sy-panel .nav-sidebar ul.components li a:hover i,
body.sy-panel .nav-sidebar ul.components li a.active i {
  color: #ffffff;
}

/* Logout link in sidebar */
body.sy-panel .nav-sidebar ul.components li:last-child a {
  color: rgba(255, 120, 120, .82);
}
body.sy-panel .nav-sidebar ul.components li:last-child a:hover {
  background: rgba(239, 68, 68, .12);
  color: #ff8080;
}
body.sy-panel .nav-sidebar ul.components li:last-child a i {
  color: rgba(255, 120, 120, .7);
}

/* -- 3D. Content area (user panel) --------------------------------- */

body.sy-panel .content-area {
  background: #F6F7FB;
  padding: 24px;
}

/* -- 3E. Vendor dashboard stat cards (.mycard) ---------------------- */

body.sy-panel .row-cards-one .mycard {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
  transition: transform 160ms ease, box-shadow 160ms ease;
  overflow: hidden;
  position: relative;
}
body.sy-panel .row-cards-one .mycard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(16, 24, 40, .06),
              0 16px 32px -12px rgba(16, 24, 40, .14);
}

/* Stat card accent stripe (top border) */
body.sy-panel .row-cards-one .mycard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sy-acc);
  border-radius: 16px 16px 0 0;
}

/* Override the existing bg1/bg2/bg4 solid-color backgrounds with
   the new design — keep a faint accent tint instead of full colour.
   !important needed here to override the hardcoded hex in admin/css/style.css */
body.sy-panel .row-cards-one .mycard.bg1,
body.sy-panel .row-cards-one .mycard.bg2,
body.sy-panel .row-cards-one .mycard.bg3,
body.sy-panel .row-cards-one .mycard.bg4,
body.sy-panel .row-cards-one .mycard.bg5,
body.sy-panel .row-cards-one .mycard.bg6 {
  background: #ffffff !important; /* override hardcoded bg colours in style.css */
}

body.sy-panel .row-cards-one .mycard .left .title {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
  margin-bottom: 4px;
}

body.sy-panel .row-cards-one .mycard .left .number {
  font-family: "Sora", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--sy-acc);
  line-height: 1.15;
  display: block;
  margin-bottom: 8px;
}

body.sy-panel .row-cards-one .mycard .left .link {
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sy-acc);
  text-decoration: none;
  transition: opacity 150ms ease;
}
body.sy-panel .row-cards-one .mycard .left .link:hover {
  opacity: .72;
}

/* Icon circle in stat card right column */
body.sy-panel .row-cards-one .mycard .right .icon {
  background: var(--sy-acc-muted);
  color: var(--sy-acc);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* -- 3F. User panel generic cards ---------------------------------- */

body.sy-panel .card {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
}
body.sy-panel .card-header {
  background: #F9FAFB;
  border-bottom: 1px solid #E6E8F0;
  border-radius: 16px 16px 0 0;
  font-family: "Sora", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0B1020;
  padding: 14px 20px;
}
body.sy-panel .card-body {
  padding: 20px;
}

/* -- 3G. Tables (user panel) --------------------------------------- */

body.sy-panel .table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}
body.sy-panel .table thead th {
  background: #F9FAFB;
  color: #6B7280;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--sy-acc);
  padding: 10px 12px;
  white-space: nowrap;
}
body.sy-panel .table tbody td {
  color: #0B1020;
  border-bottom: 1px solid #F3F4F6;
  padding: 10px 12px;
  vertical-align: middle;
}
body.sy-panel .table tbody tr:hover td {
  background: #F6F7FB;
}
body.sy-panel .table tbody tr:last-child td {
  border-bottom: none;
}

/* Scrollable table wrapper on small screens */
body.sy-panel .table-responsive,
body.sy-panel .dashboard-home-table {
  border-radius: 12px;
  border: 1px solid #E6E8F0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -- 3H. Form controls (user panel) -------------------------------- */

body.sy-panel .form-control,
body.sy-panel .form-select,
body.sy-panel input[type="text"],
body.sy-panel input[type="email"],
body.sy-panel input[type="password"],
body.sy-panel input[type="number"],
body.sy-panel textarea,
body.sy-panel select {
  border: 1px solid #E6E8F0;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #0B1020;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.sy-panel .form-control:focus,
body.sy-panel .form-select:focus,
body.sy-panel input[type="text"]:focus,
body.sy-panel input[type="email"]:focus,
body.sy-panel input[type="password"]:focus,
body.sy-panel input[type="number"]:focus,
body.sy-panel textarea:focus,
body.sy-panel select:focus {
  border-color: var(--sy-acc);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); /* solid fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-acc) 22%, transparent);
  outline: none;
}

/* -- 3I. Buttons (user panel) -------------------------------------- */

/* Primary action (theme-btn) */
body.sy-panel .theme-btn,
body.sy-panel .btn.mybtn1,
body.sy-panel button[type="submit"].btn-primary,
body.sy-panel .btn-primary {
  background: var(--sy-acc);
  border: none;
  border-color: var(--sy-acc);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 9px 24px;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
  text-decoration: none;
  display: inline-block;
}
body.sy-panel .theme-btn:hover,
body.sy-panel .btn.mybtn1:hover,
body.sy-panel button[type="submit"].btn-primary:hover,
body.sy-panel .btn-primary:hover {
  background: var(--sy-acc-hover);
  border-color: var(--sy-acc-hover);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--sy-acc-muted);
}

/* Generic .btn radius normalisation */
body.sy-panel .btn {
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}

/* Outline variant */
body.sy-panel .btn-outline-primary {
  border-color: var(--sy-acc);
  color: var(--sy-acc);
  background: transparent;
  border-radius: 10px;
}
body.sy-panel .btn-outline-primary:hover {
  background: var(--sy-acc);
  color: #ffffff;
}

/* Edit action link inside tables */
body.sy-panel .action-list a.edit {
  background: var(--sy-acc-light);
  color: var(--sy-acc);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease;
}
body.sy-panel .action-list a.edit:hover {
  background: var(--sy-acc);
  color: #ffffff;
}

/* -- 3J. Badges (user panel) --------------------------------------- */

body.sy-panel .badge,
body.sy-panel span.badge {
  font-family: "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 999px;
  padding: 3px 9px;
}
body.sy-panel .badge-success {
  background: #d1fae5;
  color: #065f46;
}
body.sy-panel .badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

/* -- 3K. Profile page (user/typeuser/profile.blade.php) ------------ */

body.sy-panel .user-prof-sec2 {
  background: #ffffff;
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
              0 8px 24px -12px rgba(16, 24, 40, .10);
}

body.sy-panel .user-prof-title1 h3,
body.sy-panel .gj_pf_hd {
  font-family: "Sora", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0B1020;
}

body.sy-panel .user-prof-detail1 {
  border-bottom: 1px solid #F3F4F6;
  padding: 10px 0;
}
body.sy-panel .user-prof-detail1 > p:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
  margin-bottom: 2px;
}
body.sy-panel .user-prof-detail1 > p:last-child {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0B1020;
  margin: 0;
}

/* Profile image */
body.sy-panel .user-image img {
  border-radius: 50%;
  border: 3px solid var(--sy-acc);
}

/* Edit button on profile */
body.sy-panel .user-edit-btn a {
  display: inline-block;
  background: var(--sy-acc);
  color: #ffffff;
  border-radius: 999px;
  padding: 7px 22px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease;
}
body.sy-panel .user-edit-btn a:hover {
  background: var(--sy-acc-hover);
  color: #ffffff;
}

/* -- 3L. Alert banners --------------------------------------------- */

body.sy-panel .alert {
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  border-left: 4px solid currentColor;
}
body.sy-panel .alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #F59E0B;
}

/* -- 3M. Footer (user panel) --------------------------------------- */

body.sy-panel footer.footer {
  background: #F6F7FB;
  border-top: 1px solid #E6E8F0;
  color: #6B7280;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
}
body.sy-panel footer.footer .title {
  font-family: "Sora", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0B1020;
}
body.sy-panel footer.footer .copy-bg {
  background: #0B1020;
  color: rgba(255, 255, 255, .6);
}

/* ================================================================== */
/* 4. SHARED FOCUS-VISIBLE ACCESSIBILITY RING                          */
/* ================================================================== */

body.sy-panel a:focus-visible,
body.sy-panel button:focus-visible,
body.sy-panel input:focus-visible,
body.sy-panel select:focus-visible,
body.sy-panel textarea:focus-visible {
  outline: 2px solid var(--sy-acc);
  outline-offset: 2px;
}

/* ================================================================== */
/* 5. PAGINATION (shared)                                              */
/* ================================================================== */

body.sy-panel .pagination .page-link {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #0B1020;
  border: 1px solid #E6E8F0;
  border-radius: 8px;
  margin: 0 2px;
  transition: background 150ms ease, color 150ms ease;
}
body.sy-panel .pagination .page-link:hover {
  background: var(--sy-acc-light);
  color: var(--sy-acc);
  border-color: var(--sy-acc-muted);
}
body.sy-panel .pagination .page-item.active .page-link {
  background: var(--sy-acc);
  border-color: var(--sy-acc);
  color: #ffffff;
}

/* ================================================================== */
/* 6. RESPONSIVE ADJUSTMENTS                                           */
/* ================================================================== */

/* Stat cards stack gracefully on mobile */
@media (max-width: 575.98px) {
  body.sy-panel .row-cards-one .mycard {
    margin-bottom: 12px;
  }
  body.sy-panel--admin .page-content {
    padding: 12px;
  }
  body.sy-panel .content-area {
    padding: 12px;
  }
  body.sy-panel--admin .dash-text h3,
  body.sy-panel .row-cards-one .mycard .left .number {
    font-size: 1.5rem;
  }
  /* Tables scroll horizontally on XS */
  body.sy-panel .table-responsive,
  body.sy-panel .admin-table-overflow {
    overflow-x: auto;
  }
}

/* At medium breakpoint the admin sidebar uses Skote's built-in
   collapse mechanics. We only restyle, not override layout: */
@media (max-width: 991.98px) {
  body.sy-panel--admin #page-topbar {
    /* Ensure topbar sits above sidebar overlay */
    z-index: 1002;
  }
  /* When sidebar is in mini mode Skote adds body-class; keep dark bg */
  body.sy-panel--admin.sidebar-enable .vertical-menu,
  body.sy-panel--admin.vertical-collapsed .vertical-menu {
    background: linear-gradient(175deg, var(--sy-sidebar-from) 0%, var(--sy-sidebar-to) 100%);
  }
}

/* ================================================================== */
/* 7. REDUCED-MOTION GUARD                                             */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.sy-panel .card,
  body.sy-panel .row-cards-one .mycard,
  body.sy-panel--admin .card {
    transition: none;
  }
  body.sy-panel .card:hover,
  body.sy-panel .row-cards-one .mycard:hover,
  body.sy-panel--admin .card:hover {
    transform: none;
  }
}

/* ======================================================================
   SECTION C — FRONT-LAYOUT DASHBOARDS  (Vendor / Customer panels)
   These panels render inside layouts.front (Sayara front shell) and pull in
   the layouts.frontside side-menu. They are scoped under body.sy-fdash--*
   (added by layouts.front only on dashboard routes), so every rule below is
   inert on normal front pages and on the admin/user panels.
       vendor   → CYAN  accent  (business / operations)
       customer → AMBER accent  (friendly / consumer)
   ====================================================================== */

/* Hero keeps the left ~40% solid indigo so the white title stays readable,
   then transitions to the panel accent across the right half. */
body.sy-fdash            { --sy-acc:#4F46E5; --sy-acc-hover:#4338CA; --sy-acc-soft:rgba(79,70,229,.12); --sy-hero:linear-gradient(120deg,#4F46E5 0%,#6366F1 100%); }
body.sy-fdash--vendor    { --sy-acc:#06B6D4; --sy-acc-hover:#0894AD; --sy-acc-soft:rgba(6,182,212,.14); --sy-hero:linear-gradient(120deg,#4F46E5 0%,#4F46E5 38%,#06B6D4 100%); }
body.sy-fdash--customer  { --sy-acc:#F59E0B; --sy-acc-hover:#D97706; --sy-acc-soft:rgba(245,158,11,.16); --sy-hero:linear-gradient(120deg,#4F46E5 0%,#4F46E5 40%,#F59E0B 100%); }

/* --- Breadcrumb hero band (was the legacy #5C4CC9 purple) --------------- */
/* !important: legacy style.css sets a hard background on the section, and the
   inner .boxcar-title-three carries a navbar.png overlay that hides it — so we
   paint the gradient on both layers for a clean full-width hero. */
body.sy-fdash .cars-section-thirteen { background: var(--sy-hero) !important; }
body.sy-fdash .cars-section-thirteen .boxcar-title-three {
  background-image: var(--sy-hero) !important;
  background-color: transparent !important;
}

/* --- Side-menu card ---------------------------------------------------- */
body.sy-fdash .user-prof-sec1 {
  border: 1px solid #E6E8F0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 30px -18px rgba(16,24,40,.22);
}
body.sy-fdash .user-prof-img img { border: 3px solid var(--sy-acc); }

/* --- Side-menu items --------------------------------------------------- */
body.sy-fdash .setting-list ul li a {
  border-radius: 10px;
  transition: background .16s ease, color .16s ease;
}
body.sy-fdash .setting-list ul li a:hover {
  background: var(--sy-acc-soft);
  color: var(--sy-acc-hover);
}
body.sy-fdash .setting-list ul li.active > a,
body.sy-fdash .setting-list ul li > a.active {
  background: var(--sy-acc);
  color: #fff;
  position: relative;
}
body.sy-fdash .setting-list ul li.active > a::before,
body.sy-fdash .setting-list ul li > a.active::before {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: #fff; opacity: .85;
}
/* dark SVG icons → white when the row is active */
body.sy-fdash .setting-list ul li.active > a img,
body.sy-fdash .setting-list ul li > a.active img { filter: brightness(0) invert(1); }

/* --- Content panels ---------------------------------------------------- */
body.sy-fdash .user-prof-sec2,
body.sy-fdash .user-prof-detail1 { border-radius: 14px; }
body.sy-fdash .user-prof-title1 h3,
body.sy-fdash .user-prof-sec2 h3 { font-family: "Sora", system-ui, sans-serif; }

/* --- Buttons inside the dashboard content ------------------------------ */
body.sy-fdash .user-prof-section .theme-btn,
body.sy-fdash .user-prof-section .btn-primary,
body.sy-fdash .user-prof-section button.theme-btn {
  background: var(--sy-acc);
  border-color: var(--sy-acc);
}
body.sy-fdash .user-prof-section .theme-btn:hover,
body.sy-fdash .user-prof-section .btn-primary:hover,
body.sy-fdash .user-prof-section button.theme-btn:hover {
  background: var(--sy-acc-hover);
  border-color: var(--sy-acc-hover);
  color: #fff;
}

/* --- Form focus accent inside the dashboard ---------------------------- */
body.sy-fdash .user-prof-section .form-control:focus,
body.sy-fdash .user-prof-section textarea:focus,
body.sy-fdash .user-prof-section select:focus {
  border-color: var(--sy-acc) !important;
  box-shadow: 0 0 0 4px var(--sy-acc-soft) !important;
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.sy-fdash .setting-list ul li a { transition: none; }
}

/* --- Vendor dashboard stat band ---------------------------------------- */
body.sy-fdash .sy-statband { margin: 0 0 26px; }
body.sy-fdash .sy-statband__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
body.sy-fdash .sy-statband__head h2 {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700; font-size: 1.4rem; color: #0B1020; margin: 0;
}
body.sy-fdash .sy-statband__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sy-acc); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: 10px;
  transition: background .16s ease, transform .16s ease;
}
body.sy-fdash .sy-statband__cta:hover { background: var(--sy-acc-hover); transform: translateY(-1px); color: #fff; }

body.sy-fdash .sy-statgrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(5, 1fr);
}
body.sy-fdash .sy-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 18px 16px; text-decoration: none;
  background: #fff; border: 1px solid #E6E8F0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 30px -20px rgba(16,24,40,.22);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.sy-fdash a.sy-stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sy-acc) 45%, #E6E8F0);
  box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 18px 40px -22px rgba(16,24,40,.3);
}
body.sy-fdash .sy-stat__ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 6px;
  background: var(--sy-acc-soft); color: var(--sy-acc); font-size: 1.05rem;
}
body.sy-fdash .sy-stat__num {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700; font-size: 1.9rem; line-height: 1.05; color: #0B1020;
}
body.sy-fdash .sy-stat__lbl {
  font-size: .82rem; font-weight: 500; color: #6B7280;
  text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 1199.98px) { body.sy-fdash .sy-statgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px)  { body.sy-fdash .sy-statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419.98px)  { body.sy-fdash .sy-statgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  body.sy-fdash .sy-stat, body.sy-fdash .sy-statband__cta { transition: none; }
  body.sy-fdash a.sy-stat:hover, body.sy-fdash .sy-statband__cta:hover { transform: none; }
}