/* ============================================================================
   design-tokens.css — PROJECT-WIDE DESIGN TOKENS + REUSABLE UTILITY CLASSES
   ----------------------------------------------------------------------------
   Single source of truth for:
     • CSS custom-property tokens (--sl-primary, --sl-line, etc.)
     • Reusable utility classes shared across MANY pages:
         .btn-theme-1 / .text-theme-1
         .text-black-common / .text-gray-common
         .cust-profile-price-box
         .sl-btn / .sl-btn-primary / .sl-btn-outline / .sl-btn-ghost
         .sl-head-wrap / .sl-toolbar / .sl-actions
         .sl-search-wrap / .sl-filter-wrap

   Loaded ONCE from `_User_Layout.cshtml`, AFTER `site.min.css` (the legacy
   theme base) but BEFORE per-page CSS so page files can override safely.

   Duplicates of these rules in Sales.css, Customer.css, accounting.css,
   etc. are commented out with a "MOVED to design-tokens.css" marker.

   Phase 1 of the CSS cleanup. See cleanup plan in chat history.
   ============================================================================ */


/* ──────────────────────────────────────────────────────────────────────
   1. CSS DESIGN TOKENS  (was duplicated in Sales.css:1848)
   ────────────────────────────────────────────────────────────────────── */
:root {
  --sl-primary: #3FA92B;
  --sl-primary-600: #2e8b22;
  --sl-primary-50: #f4fbf3;
  --sl-primary-100: #ecfdf5;
  --sl-primary-200: #c6ebc0;
  --sl-text: #0F1014;
  --sl-text-2: #223049;
  --sl-muted: #7e8a9f;
  --sl-line: #e5e9f0;
  --sl-line-2: #f1f3f6;
  --sl-soft: #F8FAFC;
  --sl-danger: #dc2626;
  --sl-danger-50: #fee2e2;
  /* Gradients */
  --sl-grad-primary: linear-gradient(97.06deg, #76D164 -0.73%, #3FA92B 92.81%);
  --sl-grad-card: linear-gradient(135deg, #ffffff 0%, #fafbfd 100%);
  /* Radii / shadows */
  --sl-radius-sm: 8px;
  --sl-radius: 10px;
  --sl-radius-lg: 14px;
  --sl-shadow-card: 0 2px 10px rgba(15, 23, 42, .04);
  --sl-shadow-pop: 0 4px 12px rgba(63, 169, 43, .25);
}


/* ──────────────────────────────────────────────────────────────────────
   2. TEXT + BACKGROUND + BORDER UTILITIES
   ----------------------------------------------------------------------
   Selectors use `html body .foo` so the specificity (0,1,2) beats the
   single-class versions in site.min.css (0,1,0) WITHOUT needing
   `!important`. Page-family files that previously redeclared the same
   class with `!important` are now commented out — see /* === MOVED ===
   markers in accounting.css, employe.css, integration.css, reports.css,
   setting.css.
   ────────────────────────────────────────────────────────────────────── */

/* Theme green text */
html body .text-theme-1,
html body .text-green-common {
  color: var(--sl-primary);
}

/* Black ink */
html body .text-black-common {
  color: var(--sl-text);
}

/* Muted gray  (#898A8E is the project's canonical muted gray —
   slightly warmer than the --sl-muted token used for some chrome). */
html body .text-gray-common {
  color: #898A8E;
}

/* Danger red */
html body .text-danger-common {
  color: #E21D1D;
}

/* Background utilities */
html body .bg-green-common {
  background-color: var(--sl-primary);
}

html body .bg-light-danger-common {
  background-color: #FFEAEA;
}

/* Border utilities */
html body .border-green-common {
  border: 2px solid var(--sl-primary);
}

html body .border-gray-common {
  border: 1px solid #D3D6DB;
}
/* `.text-danger-border` is the corrected spelling; `.text-dnager-border`
   is the legacy typo kept as alias so existing markup still picks up
   the border. */
html body .text-danger-border,
html body .text-dnager-border {
  border: 1px solid #F6C8C8;
}

/* Gray backgrounds */
html body .bg-gray-common {
  background-color: #BABBC0;
}

html body .bg-gray-4-common {
  background-color: #F1F2F4;
}

/* Colored badge/pill helpers — used by status pills throughout the
   project (Sales status, payment status, shipment status, etc.) */
html body .bg-blue {
  background: #E2EDFF;
  color: #4485F4;
}

html body .bg-green {
  background: #DFF4DB;
  color: var(--sl-primary);
}

html body .bg-orange {
  background: #FCEDE5;
  color: #F48144;
}

html body .bg-purple {
  background: #F0E8FD;
  color: #000;
}

html body .bg-red {
  background: #FADDDD;
  color: #e74c3c;
}


/* ──────────────────────────────────────────────────────────────────────
   7. CARD SURFACE  (.card)
   Was duplicated as a base def in accounting.css, employe.css,
   integration.css, reports.css, setting.css, Customer.css. White
   surface with 1px slate border, soft radius, soft shadow. Specificity
   `html body .card` beats single-class versions in site.min.css.
   ────────────────────────────────────────────────────────────────────── */
html body .card {
  background: #ffffff;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-card);
  padding: 16px;
}


/* ──────────────────────────────────────────────────────────────────────
   8. NICE-SELECT TRIGGER  (.nice-select)
   Project-wide styling for the jquery-nice-select dropdown trigger.
   Was duplicated identically in 5 page-family files. The visible
   dropdown panel + animations are in Sales.css (.sl-filter-wrap)
   for now — they could move here later if the user wants.
   ────────────────────────────────────────────────────────────────────── */
html body .nice-select {
  -webkit-appearance: none;
  appearance: auto;
  width: 100%;
  height: 48px;
  padding: 10px 44px 10px 12px;
  border: 1px solid #D3D6DB;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 2px 3px 0 rgba(163, 170, 181, .25);
  color: var(--sl-text);
  font: 14px/22px system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  cursor: pointer;
}

  html body .nice-select:hover {
    border-color: var(--sl-primary);
  }

  html body .nice-select.open {
    border-color: var(--sl-primary);
    box-shadow: 0 0 0 3px rgba(63, 169, 43, .12);
  }


/* ──────────────────────────────────────────────────────────────────────
   3. PRIMARY BUTTON  (.btn-theme-1)  — used in headers, modals,
   stat-card actions, etc. Bootstrap `.btn` provides the base layout;
   we only override colors / shadow / hover.
   ────────────────────────────────────────────────────────────────────── */
.btn.btn-theme-1,
button.btn-theme-1,
a.btn-theme-1 {
  background: var(--sl-grad-primary) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--sl-primary) !important;
  border-radius: var(--sl-radius) !important;
  font-weight: 700 !important;
  box-shadow: var(--sl-shadow-pop) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

  .btn.btn-theme-1:hover,
  button.btn-theme-1:hover,
  a.btn-theme-1:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(63, 169, 43, .32) !important;
    filter: brightness(1.05) !important;
    color: #ffffff !important;
  }

  .btn.btn-theme-1:active,
  button.btn-theme-1:active,
  a.btn-theme-1:active {
    transform: translateY(0) !important;
  }


/* ──────────────────────────────────────────────────────────────────────
   4. KPI / SUMMARY CARD  (.cust-profile-price-box)  — used by
   /Customer/CustomerDetails, /Account/AccountTrans, /Vendor/VendorDetails,
   /Employee/EmployeeDetails, and any page showing a row of summary stats.
   (was duplicated in Sales.css:12734 + dashboard_sec.css + media.css)
   ────────────────────────────────────────────────────────────────────── */
html body .cust-profile-price-box {
  position: relative;
  background: var(--sl-grad-card) !important;
  border: 1.5px solid var(--sl-line) !important;
  border-left-width: 4px !important;
  border-radius: var(--sl-radius-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--sl-shadow-card) !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease !important;
  min-height: 100px;
  margin: 0 !important;
  overflow: hidden;
}

  html body .cust-profile-price-box::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(63, 169, 43, .08) 0%, transparent 70%);
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    z-index: 0;
  }

  html body .cust-profile-price-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
  }

  html body .cust-profile-price-box h5 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--sl-text) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
  }

  html body .cust-profile-price-box .text-gray-common {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--sl-muted) !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    margin-top: 4px !important;
    display: inline-block !important;
  }


/* ──────────────────────────────────────────────────────────────────────
   5. SALES-STYLE TOOLBAR  (.sl-head-wrap > .sl-toolbar)
   Used by /Sales, /Customer, /Vendor, /Purchase, /Account, /Inventory,
   /Users, /Reports, and many more list pages.
   (was duplicated in Sales.css:2069 + Customer.css)
   ────────────────────────────────────────────────────────────────────── */
.sl-head-wrap {
  background: #ffffff;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-lg);
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: var(--sl-shadow-card);
}

.sl-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
}

.sl-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 420px;
}

  .sl-search-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--sl-line);
    border-radius: var(--sl-radius);
    font-size: 13px;
    background: var(--sl-soft);
    transition: .15s;
    box-sizing: border-box;
  }

    .sl-search-wrap input:focus {
      outline: none;
      border-color: var(--sl-primary);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(63, 169, 43, .1);
    }

  .sl-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    stroke: var(--sl-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.sl-filter-wrap {
  flex: 0 0 180px;
  position: relative;
}

.sl-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .sl-toolbar {
    flex-wrap: wrap;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   6. SALES-STYLE BUTTONS  (.sl-btn / variants)
   (was duplicated in Sales.css:2315-2400)
   ────────────────────────────────────────────────────────────────────── */
.sl-btn {
  height: 46px;
  padding: 0 18px;
  border-radius: var(--sl-radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .15s;
  border: 1px solid transparent;
  text-decoration: none;
}

  .sl-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

/* New / Primary action — solid green gradient pill */
.sl-btn-primary {
  background: var(--sl-grad-primary);
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(63, 169, 43, .18);
}

  .sl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(63, 169, 43, .32);
    color: #fff;
    text-decoration: none;
  }

  .sl-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(63, 169, 43, .2);
  }

  .sl-btn-primary svg {
    stroke: #fff;
  }

/* Outline — soft mint surface, themed-green border, theme-green on hover */
.sl-btn-outline {
  background: var(--sl-primary-100);
  color: #2d7a1f;
  border: 1.5px solid var(--sl-primary-200);
}

  .sl-btn-outline:hover {
    background: var(--sl-primary);
    color: #fff;
    border-color: var(--sl-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(63, 169, 43, .25);
    text-decoration: none;
  }

    .sl-btn-outline:hover svg,
    .sl-btn-outline:hover svg * {
      stroke: #fff !important;
    }

  .sl-btn-outline:active {
    transform: translateY(0);
  }

  .sl-btn-outline svg,
  .sl-btn-outline svg path,
  .sl-btn-outline svg polyline,
  .sl-btn-outline svg line,
  .sl-btn-outline svg circle,
  .sl-btn-outline svg rect {
    stroke: #2d7a1f;
    transition: stroke .18s ease;
  }

/* Ghost — same as outline base, used for Export */
.sl-btn-ghost {
  background: var(--sl-primary-100);
  color: #2d7a1f;
  border: 1.5px solid var(--sl-primary-200);
}

  .sl-btn-ghost:hover {
    background: var(--sl-primary);
    color: #fff;
    border-color: var(--sl-primary);
    transform: translateY(-2px);
    text-decoration: none;
  }


/* ──────────────────────────────────────────────────────────────────────
   9. VALIDATION ERROR MESSAGE  (label.error)
   ----------------------------------------------------------------------
   jQuery Validate injects `<label class="error">...</label>` after the
   input it validates. Across the project this was rendered inconsistent-
   ly — some pages used `position: absolute; bottom: -20px` (looked OK if
   the parent was position:relative, broke otherwise), some pages had
   the label flow inline next to the input pushing it visually ABOVE the
   field on narrow viewports, others relied on the legacy theme default.

   This canonical rule forces the error label to be a clean BLOCK that
   sits BELOW the input with a small margin, regardless of what any
   other CSS tries to do. Page-specific files that need absolute
   positioning for a tight grid form can still override via higher
   specificity (e.g. `body:has(#form_Sales_Invoice) label.error { ... }`).
   ────────────────────────────────────────────────────────────────────── */
/* label.error message styling centralized in validation-canonical.css */

/* Hidden state (jQuery Validate uses `style="display: none"` once the
   field becomes valid) — collapse to zero so nothing layouts around it. */
/* label.error message styling centralized in validation-canonical.css */

/* === COMMENTED OUT — moved to validation-canonical.css === */
/* Was duplicating the validation border styling with a slightly
   different pink-tint background (#fff7f7) and a different red
   (#dc2626 vs #ef4444). All validation styling now lives in
   validation-canonical.css for single-source-of-truth. */
/*
html body .form-control.error,
html body input.error,
html body textarea.error {
  border-color: #dc2626;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}

  html body .form-control.error:focus,
  html body input.error:focus,
  html body textarea.error:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
  }
*/


/* ──────────────────────────────────────────────────────────────────────
   END design-tokens.css
   ────────────────────────────────────────────────────────────────────── */