/* ==========================================================================
   SELENA THEME (Pink) — Complete AdminJS Override System
   Scoped to [data-theme="selena"] (set by theme-init.js)
   
   Design Philosophy:
   - Soft, elegant, feminine — NOT harsh magenta
   - Gradient-based with warm pink tones
   - White/near-white cards with subtle pink tinting
   - High readability with warm text tones
   
   Color Palette:
   - Primary: #E8497F (warm rose)
   - Accent: #FF6B9D (soft coral-pink)
   - Background: #FFF8FA → #FFE8F0 gradient
   - Cards: #FFFFFF with pink shadow
   - Text: #3D1F2E (deep plum)
   - Muted: #9E6B82 (dusty rose)
   - Borders: #F3C6D8 (blush)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT & BODY — Gradient base
   -------------------------------------------------------------------------- */

[data-theme="selena"] {
  color-scheme: light;
  /* ── Surfaces ── */
  --ims-card-bg: #ffffff;
  --ims-surface-bg: #FFF5F8;
  --ims-surface-elevated: #ffffff;
  --ims-modal-bg: #ffffff;
  --ims-hover-bg: #FFF0F5;
  --ims-input-bg: #ffffff;
  --ims-input-disabled-bg: #FFF5F8;
  --ims-filter-bg: #FFF5F8;
  --ims-code-bg: #FFF5F8;

  /* ── Text ── */
  --ims-text: #3D1F2E;
  --ims-text-secondary: #5C2D42;
  --ims-text-muted: #9E6B82;
  --ims-text-on-accent: #ffffff;
  --ims-text-heading: #2E1520;

  /* ── Borders ── */
  --ims-border: #F3C6D8;
  --ims-border-light: #FCE4EC;
  --ims-border-strong: #E8A0BA;

  /* ── Shadows ── */
  --ims-shadow-card: 0 1px 3px rgba(232, 73, 127, 0.06), 0 1px 2px rgba(232, 73, 127, 0.04);
  --ims-shadow-card-hover: 0 4px 12px rgba(232, 73, 127, 0.12);
  --ims-shadow-modal: 0 20px 60px rgba(232, 73, 127, 0.15);
  --ims-shadow-dropdown: 0 4px 12px rgba(232, 73, 127, 0.12);

  /* ── Accent / Semantic ── */
  --ims-accent: #E8497F;
  --ims-accent-hover: #D73B6F;
  --ims-success: #2E7D32;
  --ims-warning: #E65100;
  --ims-danger: #C62828;
  --ims-info: #E8497F;

  /* ── KPI ── */
  --ims-kpi-green-bg: #E8F5E9;
  --ims-kpi-yellow-bg: #FFF3E0;
  --ims-kpi-red-bg: #FFEBEE;
  --ims-kpi-blue-bg: #FCE4EC;
  --ims-kpi-purple-bg: #F3E5F5;

  /* ── Zone ── */
  --ims-zone-selected-bg: #FCE4EC;
  --ims-zone-unselected-bg: #FFF5F8;
  --ims-zone-warning-bg: #FFF3E0;
  --ims-zone-hover-bg: #FFF0F5;

  /* ── Table rows ── */
  --ims-row-alt-bg: #FFF8FA;
  --ims-row-hover-bg: #FFF0F5;

  /* ── Icon ── */
  --ims-icon-secondary: #9E6B82;
}

[data-theme="selena"] body,
[data-theme="selena"] #app {
  background: linear-gradient(160deg, #FFF8FA 0%, #FFF0F5 40%, #FFE8F0 100%) !important;
  color: #3D1F2E;
}

[data-theme="selena"] [data-css="app"] {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   2. LAYOUT CONTAINERS
   -------------------------------------------------------------------------- */

/* Sidebar — soft pink gradient */
[data-theme="selena"] [data-css="sidebar"] {
  background: linear-gradient(180deg, #FFF5F8 0%, #FFF0F5 60%, #FFE8F0 100%) !important;
  border-right: 1px solid #F3C6D8;
}

/* Sidebar nav links — pink-tinted paint-in */
[data-theme="selena"] [data-css="sidebar"] a[href] {
  border-color: rgba(232, 73, 127, 0.12) !important;
  background-image: linear-gradient(to left, transparent 50%, rgba(232, 73, 127, 0.05) 50%) !important;
}

[data-theme="selena"] [data-css="sidebar"] a[href]:hover {
  border-color: rgba(232, 73, 127, 0.35) !important;
  background-position: 0 0 !important;
  box-shadow: 0 2px 8px rgba(232, 73, 127, 0.1) !important;
}

[data-theme="selena"] [data-css="sidebar"] a[href][class*="selected"],
[data-theme="selena"] [data-css="sidebar"] a[href][aria-current="page"] {
  border-color: rgba(232, 73, 127, 0.45) !important;
  background-image: linear-gradient(to right, rgba(232, 73, 127, 0.08), rgba(255, 107, 157, 0.04)) !important;
  background-size: 100% 100% !important;
  border-left: 3px solid #E8497F !important;
}

/* Sidebar section labels */
[data-theme="selena"] [data-css="sidebar"] [data-css="sidebar-pages"] > nav > section > label,
[data-theme="selena"] [data-css="sidebar"] [data-css="sidebar-resources"] > nav > section > label {
  color: #9E6B82 !important;
}

/* Category labels — harmonized pink tones */
[data-theme="selena"] [data-category="inventory"] nav > section > label { color: #E8497F !important; border-bottom-color: rgba(232, 73, 127, 0.2) !important; }
[data-theme="selena"] [data-category="inventory"] a[href] { border-color: rgba(232, 73, 127, 0.2) !important; background-image: linear-gradient(to left, transparent 50%, rgba(232, 73, 127, 0.04) 50%) !important; }
[data-theme="selena"] [data-category="sales"] nav > section > label { color: #AD1457 !important; border-bottom-color: rgba(173, 20, 87, 0.2) !important; }
[data-theme="selena"] [data-category="sales"] a[href] { border-color: rgba(173, 20, 87, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(173, 20, 87, 0.04) 50%) !important; }
[data-theme="selena"] [data-category="orders"] nav > section > label { color: #C2185B !important; border-bottom-color: rgba(194, 24, 91, 0.2) !important; }
[data-theme="selena"] [data-category="orders"] a[href] { border-color: rgba(194, 24, 91, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(194, 24, 91, 0.04) 50%) !important; }
[data-theme="selena"] [data-category="admin"] nav > section > label { color: #880E4F !important; border-bottom-color: rgba(136, 14, 79, 0.2) !important; }
[data-theme="selena"] [data-category="admin"] a[href] { border-color: rgba(136, 14, 79, 0.15) !important; background-image: linear-gradient(to left, transparent 50%, rgba(136, 14, 79, 0.04) 50%) !important; }

/* Filter drawer */
[data-theme="selena"] [data-css="filter-drawer"],
[data-theme="selena"] [class*="FilterDrawer"] {
  background: #FFF5F8 !important;
  border-left: 1px solid #F3C6D8;
}

/* --------------------------------------------------------------------------
   3. CARDS & BOXES
   -------------------------------------------------------------------------- */

[data-theme="selena"] [variant="card"],
[data-theme="selena"] [variant="white"],
[data-theme="selena"] [variant="container"] {
  background: #FFFFFF;
  border: 1px solid #F3C6D8;
  box-shadow: 0 2px 8px rgba(232, 73, 127, 0.05);
}

[data-theme="selena"] [variant="grey"] {
  background: #FFF8FA;
  border: 1px solid #F3C6D8;
}

/* --------------------------------------------------------------------------
   4. TABLES
   -------------------------------------------------------------------------- */

[data-theme="selena"] table {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="selena"] table th {
  background: #FFF0F5 !important;
  color: #5C2D42 !important;
  border-bottom: 2px solid #F3C6D8;
  font-weight: 600;
}

[data-theme="selena"] table td {
  color: #3D1F2E;
  border-bottom: 1px solid #FCE4EC;
}

[data-theme="selena"] table tr:hover td {
  background: #FFF8FA !important;
}

/* Table container */
[data-theme="selena"] [class*="TableWrapper"],
[data-theme="selena"] [class*="RecordsTable"] {
  border: 1px solid #F3C6D8;
  border-radius: 8px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */

[data-theme="selena"] input,
[data-theme="selena"] select,
[data-theme="selena"] textarea {
  background: #FFFFFF;
  border-color: #F3C6D8 !important;
  color: #3D1F2E;
}

[data-theme="selena"] input:focus,
[data-theme="selena"] select:focus,
[data-theme="selena"] textarea:focus {
  border-color: #E8497F !important;
  box-shadow: 0 0 0 3px rgba(232, 73, 127, 0.1) !important;
  outline: none;
}

[data-theme="selena"] input::placeholder,
[data-theme="selena"] textarea::placeholder {
  color: #9E6B82;
}

/* Labels */
[data-theme="selena"] label {
  color: #5C2D42 !important;
}

/* React-Select */
[data-theme="selena"] [class*="-control"] {
  border-color: #F3C6D8 !important;
  background: #FFFFFF !important;
}

[data-theme="selena"] [class*="-menu"] {
  background: #FFFFFF !important;
  border: 1px solid #F3C6D8 !important;
  box-shadow: 0 8px 24px rgba(232, 73, 127, 0.1) !important;
}

[data-theme="selena"] [class*="-option"]:hover,
[data-theme="selena"] [class*="-option--is-focused"] {
  background: #FFF5F8 !important;
}

[data-theme="selena"] [class*="-option--is-selected"] {
  background: rgba(232, 73, 127, 0.1) !important;
  color: #E8497F !important;
}

[data-theme="selena"] [class*="-multiValue"] {
  background: #FFF0F5 !important;
  border: 1px solid #F3C6D8;
  border-radius: 12px;
}

[data-theme="selena"] [class*="-multiValue__label"] {
  color: #E8497F !important;
}

/* --------------------------------------------------------------------------
   6. BUTTONS — Gradient system
   -------------------------------------------------------------------------- */

/* Primary buttons — signature gradient */
[data-theme="selena"] button[class*="primary"],
[data-theme="selena"] a[class*="primary"],
[data-theme="selena"] [data-testid*="action-header"] button[class*="Primary"],
[data-theme="selena"] button[variant="primary"] {
  background: linear-gradient(135deg, #E8497F 0%, #FF6B9D 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232, 73, 127, 0.2);
  transition: all 0.2s ease;
}

[data-theme="selena"] button[class*="primary"]:hover,
[data-theme="selena"] a[class*="primary"]:hover,
[data-theme="selena"] button[variant="primary"]:hover {
  background: linear-gradient(135deg, #D63A6E 0%, #E8497F 100%) !important;
  box-shadow: 0 4px 16px rgba(232, 73, 127, 0.3) !important;
  transform: translateY(-1px);
}

/* Secondary buttons */
[data-theme="selena"] button[class*="default"],
[data-theme="selena"] button[variant="default"],
[data-theme="selena"] button:not([class*="primary"]):not([class*="danger"]):not([class*="success"]) {
  border-color: #F3C6D8 !important;
  color: #E8497F !important;
  background: #FFFFFF !important;
}

[data-theme="selena"] button[class*="default"]:hover,
[data-theme="selena"] button[variant="default"]:hover {
  background: #FFF5F8 !important;
  border-color: #E8497F !important;
}

/* Danger buttons */
[data-theme="selena"] button[class*="danger"],
[data-theme="selena"] button[variant="danger"] {
  background: #FFF0F0 !important;
  color: #C62828 !important;
  border-color: #FFCDD2 !important;
}

/* --------------------------------------------------------------------------
   7. OVERLAYS — Modals, Drawers
   -------------------------------------------------------------------------- */

[data-theme="selena"] [class*="Modal"],
[data-theme="selena"] [role="dialog"],
[data-theme="selena"] [class*="DrawerContent"] {
  background: #FFFFFF !important;
  border: 1px solid #F3C6D8;
  box-shadow: 0 16px 48px rgba(232, 73, 127, 0.12);
}

[data-theme="selena"] [class*="ModalOverlay"],
[data-theme="selena"] [class*="Overlay"] {
  background: rgba(61, 31, 46, 0.4) !important;
}

/* Dropdown menus */
[data-theme="selena"] [class*="DropDown"],
[data-theme="selena"] [class*="dropdown"],
[data-theme="selena"] ul[role="listbox"] {
  background: #FFFFFF !important;
  border: 1px solid #F3C6D8 !important;
  box-shadow: 0 8px 24px rgba(232, 73, 127, 0.08);
}

[data-theme="selena"] [class*="DropDown"] li:hover,
[data-theme="selena"] li[role="option"]:hover {
  background: #FFF5F8 !important;
}

/* --------------------------------------------------------------------------
   8. NAVIGATION
   -------------------------------------------------------------------------- */

/* Tabs */
[data-theme="selena"] [class*="Tab"][aria-selected="true"],
[data-theme="selena"] [role="tab"][aria-selected="true"] {
  border-bottom-color: #E8497F !important;
  color: #E8497F !important;
}

[data-theme="selena"] [class*="Tab"],
[data-theme="selena"] [role="tab"] {
  color: #9E6B82;
}

/* Breadcrumbs */
[data-theme="selena"] [class*="Breadcrumbs"] a,
[data-theme="selena"] [class*="breadcrumb"] a {
  color: #E8497F;
}

/* Pagination */
[data-theme="selena"] [class*="Pagination"] button {
  border-color: #F3C6D8 !important;
  color: #5C2D42 !important;
}

[data-theme="selena"] [class*="Pagination"] button:hover {
  background: #FFF5F8 !important;
  border-color: #E8497F !important;
}

/* Links */
[data-theme="selena"] a:not([class*="sidebar"]):not([class*="nav"]) {
  color: #E8497F;
}

/* --------------------------------------------------------------------------
   9. BADGES
   -------------------------------------------------------------------------- */

[data-theme="selena"] [class*="Badge"][class*="success"],
[data-theme="selena"] [class*="badge-success"] {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
  border: 1px solid #A5D6A7 !important;
}

[data-theme="selena"] [class*="Badge"][class*="error"],
[data-theme="selena"] [class*="Badge"][class*="danger"],
[data-theme="selena"] [class*="badge-error"] {
  background: #FFEBEE !important;
  color: #C62828 !important;
  border: 1px solid #EF9A9A !important;
}

[data-theme="selena"] [class*="Badge"][class*="info"],
[data-theme="selena"] [class*="badge-info"] {
  background: #FCE4EC !important;
  color: #AD1457 !important;
  border: 1px solid #F48FB1 !important;
}

[data-theme="selena"] [class*="Badge"][class*="warning"],
[data-theme="selena"] [class*="badge-warning"] {
  background: #FFF3E0 !important;
  color: #E65100 !important;
  border: 1px solid #FFCC80 !important;
}

[data-theme="selena"] [class*="Badge"][class*="default"],
[data-theme="selena"] [class*="badge-default"] {
  background: #FFF0F5 !important;
  color: #5C2D42 !important;
  border: 1px solid #F3C6D8 !important;
}

/* --------------------------------------------------------------------------
   10. DASHBOARD — Transparent backgrounds
   -------------------------------------------------------------------------- */

[data-theme="selena"] .dashboard-manager,
[data-theme="selena"] .dashboard-sales,
[data-theme="selena"] .dashboard-warehouse,
[data-theme="selena"] .dashboard-finance,
[data-theme="selena"] .dashboard-auditor,
[data-theme="selena"] .dashboard-super-admin,
[data-theme="selena"] .dashboard-admin {
  background: transparent !important;
}

[data-theme="selena"] [data-css="default-dashboard"] {
  background: transparent !important;
}

/* Dashboard cards — white with pink accent */
[data-theme="selena"] [class*="dashboard-"] [class*="card"] {
  background: #FFFFFF !important;
  border: 1px solid #F3C6D8 !important;
  box-shadow: 0 2px 8px rgba(232, 73, 127, 0.06) !important;
}

[data-theme="selena"] [class*="dashboard-"] [class*="card"]:hover {
  box-shadow: 0 6px 20px rgba(232, 73, 127, 0.12) !important;
  border-color: #E8497F !important;
}

/* Sales cards keep light pink gradients */
[data-theme="selena"] .dashboard-sales .card-success { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important; color: #2E7D32 !important; }
[data-theme="selena"] .dashboard-sales .card-info { background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%) !important; color: #AD1457 !important; }
[data-theme="selena"] .dashboard-sales .card-warning { background: linear-gradient(135deg, #FFF3E0 0%, #FFCC80 100%) !important; color: #E65100 !important; }
[data-theme="selena"] .dashboard-sales .card-primary { background: linear-gradient(135deg, #FCE4EC 0%, #F48FB1 100%) !important; color: #880E4F !important; }

/* Sales action buttons — pink gradient */
[data-theme="selena"] .dashboard-sales .sales-action-btn {
  background: linear-gradient(135deg, #E8497F 0%, #FF6B9D 100%) !important;
  color: #fff !important;
}

/* Warehouse cards */
[data-theme="selena"] .dashboard-warehouse .warehouse-action-btn {
  background: #FFFFFF !important;
  border: 1px solid #F3C6D8 !important;
}

[data-theme="selena"] .dashboard-warehouse .warehouse-action-btn:hover {
  border-color: #E8497F !important;
  box-shadow: 0 8px 24px rgba(232, 73, 127, 0.12) !important;
}

/* Finance dashboard */
[data-theme="selena"] .dashboard-finance .finance-positive {
  background: linear-gradient(to right, #FFFFFF 0%, #E8F5E9 100%) !important;
  border-left-color: #4CAF50 !important;
}

[data-theme="selena"] .dashboard-finance .finance-negative {
  background: linear-gradient(to right, #FFFFFF 0%, #FFEBEE 100%) !important;
  border-left-color: #E8497F !important;
}

/* Auditor */
[data-theme="selena"] .dashboard-auditor .audit-stat {
  background: #FFFFFF !important;
  border-left-color: #E8497F !important;
}

/* --------------------------------------------------------------------------
   11. THIRD-PARTY
   -------------------------------------------------------------------------- */

/* Date picker */
[data-theme="selena"] .react-datepicker,
[data-theme="selena"] .adminjs_DatePicker .react-datepicker {
  background: #FFFFFF !important;
  border-color: #F3C6D8 !important;
}

[data-theme="selena"] .react-datepicker__header {
  background: #FFF5F8 !important;
  border-bottom-color: #F3C6D8 !important;
}

[data-theme="selena"] .react-datepicker__day:hover {
  background: #FCE4EC !important;
}

[data-theme="selena"] .react-datepicker__day--selected {
  background: #E8497F !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   12. MISCELLANEOUS
   -------------------------------------------------------------------------- */

/* Headings */
[data-theme="selena"] h1, [data-theme="selena"] h2,
[data-theme="selena"] h3, [data-theme="selena"] h4,
[data-theme="selena"] h5, [data-theme="selena"] h6 {
  color: #3D1F2E !important;
}

/* Horizontal rules */
[data-theme="selena"] hr,
[data-theme="selena"] [class*="Separator"] {
  border-color: #F3C6D8 !important;
}

/* Scrollbar styling */
[data-theme="selena"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="selena"] ::-webkit-scrollbar-track {
  background: #FFF8FA;
}

[data-theme="selena"] ::-webkit-scrollbar-thumb {
  background: #F3C6D8;
  border-radius: 4px;
}

[data-theme="selena"] ::-webkit-scrollbar-thumb:hover {
  background: #E8497F;
}

/* Login page */
[data-theme="selena"] [data-css="login"] {
  background: linear-gradient(160deg, #FFF8FA 0%, #FFF0F5 40%, #FCE4EC 100%) !important;
}

/* Notification toasts */
[data-theme="selena"] [class*="MessageBox"],
[data-theme="selena"] [class*="Notification"] {
  background: #FFFFFF !important;
  border-color: #F3C6D8 !important;
}