/* =========================================================================
   sbc-theme.css — single source of truth for SBC.Blazor styling
   Author:        MvN
   Organisation:  MXsoft
   --------------------------------------------------------------------------
   Replaces the previous layered approach (tokens + overrides + components +
   custom + jeroen) with one stylesheet. Loaded after AdminLTE/Bootstrap so
   cascade order wins.

   Brand: ictSolve purple #7200FF on light surfaces. Sidebar is solid dark
   #1F1F2B. Main content is a tinted off-white; cards sit on top in pure
   white so they read as elevated surfaces.

   Sections
     1. Tokens
     2. Base reset and typography
     3. Layout (sidebar, header, content)
     4. Bootstrap/AdminLTE re-skin (links, headings, buttons, navs)
     5. Components (cards, forms, tables, modals, toasts)
     6. Legacy SBC named classes (.btn-sbc family, .sbc-purple, table-sbc...)
     7. Utilities (visibility, layout helpers, semantic background swatches)
     8. Print
   ========================================================================= */


/* --- 1. Tokens ------------------------------------------------------- */

:root {
  /* Brand */
  --brand:                 #7200FF;
  --brand-hover:           #5B00CC;
  --brand-contrast:        #FFFFFF;
  --brand-10:              rgba(114, 0, 255, 0.10);
  --brand-20:              rgba(114, 0, 255, 0.20);
  --brand-40:              rgba(114, 0, 255, 0.40);
  --brand-light:           #B980FF;
  --brand-soft:            #F2E6FF;

  /* Surfaces */
  --surface-white:         #FFFFFF;
  --surface-wash:          #EFE6F7;  /* lavender-tinted off-white main content background */
  --surface-card-hover:    #FBF9FE;
  --sidebar:               #262234;  /* warm purple-tinted dark — easier on the eyes than cold near-black */

  /* Inks */
  --ink-strong:            #0A0A12;

  /* Borders */
  --line:                  rgba(0, 0, 0, 0.08);
  --line-strong:           rgba(0, 0, 0, 0.18);
  --line-dark:             rgba(255, 255, 255, 0.08);

  /* Semantic action colours */
  --semantic-success:      #16a34a;
  --semantic-success-hover:#15803d;
  --semantic-warning:      #d97706;
  --semantic-danger:       #dc2626;
  --semantic-danger-hover: #b91c1c;
  --semantic-info:         #2563eb;
  --semantic-info-hover:   #1d4ed8;

  /* Typography */
  --font-sans:             "Nunito", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --weight-regular:        400;
  --weight-semibold:       600;
  --weight-bold:           700;
  --lh-body:               1.55;
  --lh-heading:            1.15;
  --tracking-heading:      -0.01em;
  --tracking-eyebrow:      0.08em;

  /* Spacing */
  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-5:               1.5rem;
  --space-6:               2rem;

  /* Radii */
  --radius:                4px;
  --radius-card:           8px;
  --radius-pill:           999px;

  /* Shadows */
  --shadow-card:           0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card-elevated:  0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);

  /* Motion */
  --ease:                  cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:                160ms;
  --t-med:                 260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med:  0ms;
  }
}


/* --- 2. Base reset and typography ------------------------------------ */

body {
  height: 100vh !important;
  font-family: var(--font-sans);
  color: var(--ink-strong);
  background: var(--surface-wash);
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  color: var(--brand);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

a:hover,
a:focus {
  color: var(--brand-hover);
  text-decoration: underline;
}

label:not(.form-check-label):not(.custom-file-label) {
  font-weight: var(--weight-regular) !important;  /* over Bootstrap label bold */
}


/* --- 3. Layout: sidebar, header, content ----------------------------- */

/* Sidebar — solid dark, no gradient. !important + background-image:none
   defeats any stray legacy gradient that might still target .main-sidebar. */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: var(--sidebar) !important;
  background-image: none !important;
}

.main-sidebar .brand-link {
  background: var(--sidebar) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line-dark);
}

.main-sidebar .sidebar {
  background: var(--sidebar);
}

.main-sidebar .user-panel {
  border-bottom: 1px solid var(--line-dark);
}

.sidebar a {
  color: #FFFFFF !important;  /* over AdminLTE link colour */
  transition: background var(--t-fast) var(--ease);
}

.nav-sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Active sidebar/nav-pills item — solid brand purple */
.nav-sidebar .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--brand) !important;
  color: #FFFFFF !important;
}

.user-panel .info a {
  color: #FFFFFF !important;
}

/* Sidebar nav icons are hidden — text-only navigation per the latest pass. */
.nav-icon {
  display: none !important;
}

/* Top header bar — matches the warm purple-tinted sidebar so the chrome reads
   as one continuous dark frame around the lavender main surface. */
.main-header.navbar {
  background: var(--sidebar) !important;
  border-bottom: 1px solid var(--line-dark);
}

.main-header,
.main-header .nav-link,
.main-header .navbar-nav .nav-link,
.main-header a,
.main-header .navbar-text {
  color: #FFFFFF !important;
}

.main-header a:hover,
.main-header .nav-link:hover,
.main-header .navbar-nav .nav-link:hover {
  color: #FFFFFF !important;
  text-decoration: none;
}

/* Main content wrapper — off-white tint so white cards stand out */
.content-wrapper {
  background: var(--surface-wash) !important;
  min-height: 100vh !important;
  height: 100% !important;
}

.content-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
}


/* --- 4. Bootstrap/AdminLTE re-skin (links, buttons, utilities) ------- */

.text-primary {
  color: var(--brand) !important;
}

.btn {
  border-radius: var(--radius);
  font-weight: var(--weight-semibold);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-20);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 0 0 3px var(--brand-20) !important;
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}

.col {
  border-top: none !important;
}


/* --- 5. Components --------------------------------------------------- */

/* Cards — white surface on the off-white background */
.card,
.box {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--surface-white);
}

.card-header {
  background: var(--surface-white);
  border-bottom: 1px solid var(--line);
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.card-header .card-title,
.card-title {
  color: var(--brand);
  font-weight: var(--weight-bold);
}

/* Forms */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-strong);
  background: var(--surface-white);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-20);
  outline: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ink-strong);
  opacity: 0.45;
}

.form-label,
label {
  color: var(--ink-strong);
}

.input-group {
  padding-left: 0 !important;
}

.input-group-text {
  background-color: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}

.form-check-input {
  color: var(--brand) !important;
}

.form-group {
  margin-bottom: 0 !important;
}

/* Tables */
.table {
  color: var(--ink-strong);
  background: var(--surface-white);
}

.table thead th,
.table > thead > tr > th {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.table th {
  border-top: 0 !important;
}

.table tbody tr {
  transition: background var(--t-fast) var(--ease);
}

.table tbody tr:hover {
  background: var(--brand-10);
}

.table td {
  color: var(--ink-strong);
  border-top: 1px solid var(--line);
}

/* Modals */
.modal-content {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card-elevated);
}

.modal-header {
  border-bottom: 2px solid var(--brand);
  background: var(--surface-white);
}

.modal-header .modal-title,
.modal-header .close {
  color: var(--brand);
}

.modal-footer {
  border-top: 1px solid var(--line);
}

/* Blazored.Toast notifications */
.blazored-toast-container .blazored-toast {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-elevated);
  border: 1px solid var(--line);
  font-family: var(--font-sans);
}

.blazored-toast-container .blazored-toast-info {
  background: var(--surface-white);
  color: var(--ink-strong);
  border-left: 4px solid var(--brand);
}

.blazored-toast-container .blazored-toast-success {
  background: var(--surface-white);
  color: var(--ink-strong);
  border-left: 4px solid var(--semantic-success);
}

.blazored-toast-container .blazored-toast-warning {
  background: var(--surface-white);
  color: var(--ink-strong);
  border-left: 4px solid var(--semantic-warning);
}

.blazored-toast-container .blazored-toast-error {
  background: var(--surface-white);
  color: var(--ink-strong);
  border-left: 4px solid var(--semantic-danger);
}


/* --- 6. Legacy SBC named classes (modernized) ----------------------- */

/* Brand-coloured text */
.sbc-purple,
.sbc-purple:hover {
  color: var(--brand) !important;
}

.sbc-purple:hover {
  color: var(--brand-hover) !important;
}

/* Custom form inputs styled with brand colour */
.form-sbc:focus,
.form-sbc:hover {
  border-color: var(--brand) !important;
}

.form-control-custom {
  border-color: var(--brand) !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  color: var(--brand) !important;
}

.custom-input {
  border-radius: 0 !important;
}

/* Custom dropdown anchored right */
.custom-dropdown {
  left: inherit !important;
  right: 0 !important;
}

/* Solid action buttons — replace legacy purple/gray gradients */
.btn-sbc {
  color: var(--brand-contrast) !important;
  background: var(--brand) !important;
  border: none !important;
  padding: 6px 14px !important;
  margin-right: 3px;
  border-radius: var(--radius) !important;
}

.btn-sbc:hover,
.btn-sbc:focus {
  color: var(--brand-contrast) !important;
  background: var(--brand-hover) !important;
}

.btn-sbc-approve {
  color: var(--brand-contrast) !important;
  background: var(--semantic-success) !important;
  border: none !important;
  padding: 6px 14px !important;
  margin-right: 3px;
  border-radius: var(--radius) !important;
}

.btn-sbc-approve:hover,
.btn-sbc-approve:focus {
  background: var(--semantic-success-hover) !important;
}

.btn-sbc-delete {
  color: var(--brand-contrast) !important;
  background: var(--semantic-danger) !important;
  border: none !important;
  padding: 6px 14px !important;
  margin-right: 3px;
  border-radius: var(--radius) !important;
}

.btn-sbc-delete:hover,
.btn-sbc-delete:focus {
  background: var(--semantic-danger-hover) !important;
}

.btn-sbc-confirm {
  color: var(--brand-contrast) !important;
  background: var(--semantic-info) !important;
  border: none !important;
  padding: 6px 14px !important;
  margin-right: 3px;
  border-radius: var(--radius) !important;
}

.btn-sbc-confirm:hover,
.btn-sbc-confirm:focus {
  background: var(--semantic-info-hover) !important;
}

/* Borderless icon-style buttons */
.btn-sbc-nb {
  color: var(--brand);
  font-size: 24px !important;
  padding: 0 10px 0 0 !important;
  line-height: 1 !important;
  background: transparent;
  border: none;
}

.btn-sbc-nb:hover {
  color: var(--brand-hover);
}

.btn-sbc-nb-approve {
  color: var(--semantic-success) !important;
  background: transparent;
  border: none;
}

.btn-sbc-nb-approve:hover {
  color: var(--semantic-success-hover) !important;
}

.btn-sbc-nb-delete {
  color: var(--semantic-danger) !important;
  background: transparent;
  border: none;
}

.btn-sbc-nb-delete:hover {
  color: var(--semantic-danger-hover) !important;
}

.btn-sbc-nb-confirm {
  color: var(--semantic-info) !important;
  background: transparent;
  border: none;
}

.btn-sbc-nb-confirm:hover {
  color: var(--semantic-info-hover) !important;
}

.btn-delete {
  color: var(--semantic-danger) !important;
  font-size: 24px !important;
  padding: 0 !important;
  background: transparent;
  border: none;
}

/* Brand background utility (was a gradient) */
.bg-sbc,
.bg-sbc > a {
  color: var(--brand-contrast) !important;
}

.bg-sbc {
  background-color: var(--brand-light) !important;
}

/* Tables: tinted brand-soft variant */
.table-sbc,
.table-sbc > th,
.table-sbc > td {
  background-color: var(--brand-soft) !important;
}

.table-sbc tbody + tbody,
.table-sbc td,
.table-sbc th,
.table-sbc thead th {
  border-color: var(--brand-light) !important;
}

/* Clickable row hover with brand accent */
.custom-tr:hover {
  border-left: 3px solid var(--brand) !important;
  border-radius: 10px !important;
  background-color: var(--brand-10) !important;
  cursor: pointer;
}

.custom-tr td:hover {
  left: -3px !important;
}

.custom-td {
  padding: 0.75rem 0 0 0.75rem !important;
}

.table-less-padding td,
.table-less-padding th {
  padding: 0.25rem;
}

.month-table td,
.month-table th {
  padding: 2px !important;
}

.fs-productname {
  font-size: 1.5rem;
}

/* Checkbox component */
.checkbox .cr {
  cursor: pointer;
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: 0.25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin: 1px 15px 0 0;
}

.checkbox .cr .cr-icon {
  position: absolute;
  font-size: 0.8em;
  line-height: 0;
  top: 50%;
  left: 15%;
}

.checkbox label input[type="checkbox"] {
  display: none;
}

.checkbox label input[type="checkbox"] + .cr > .fa {
  opacity: 0;
}

.checkbox label input[type="checkbox"]:checked + .cr > .fa {
  opacity: 1;
  color: var(--brand-contrast);
}

.checkbox label input[type="checkbox"]:checked + .cr {
  opacity: 1;
  background-color: var(--brand) !important;
}

.checkbox label input[type="checkbox"]:disabled + .cr {
  opacity: 0.5;
}

.checkbox label:after {
  content: '';
  display: table;
  clear: both;
}

.legend-box {
  width: 25px;
  height: 25px;
  border: var(--line) 1px solid;
}

.tr-shade {
  align-content: center !important;
  align-items: center !important;
  margin: 20px 0;
  border-radius: 3px;
  box-shadow: 0 0 10px -4px rgba(102, 102, 102, 1);
}

.text-center-custom {
  text-align: center;
  line-height: 40px;
}


/* --- 7. Utilities ---------------------------------------------------- */

.pointer {
  cursor: pointer;
}

.no-border {
  border: none !important;
}

.center {
  margin: auto;
  width: 50%;
}

.widthSet {
  max-width: 500px;
}

/* Status colour swatches (used as background fills in calendars/legends) */
.blue   { background-color: #a7a7ff !important; }
.green  { background-color: #cce3c7 !important; }
.yellow { background-color: #fff1aa !important; }
.red    { background-color: #ffacb4 !important; }
.purple { background-color: #d4b1ff !important; }

/* Responsive table/row visibility */
.mobile-table { display: none; }
.mobile-row   { display: none; }

@media screen and (max-width: 991px) {
  .pc-table     { display: none; }
  .mobile-table { display: block; }
}

@media screen and (max-width: 576px) {
  .pc-row     { display: none; }
  .mobile-row { display: flex; }
}


/* --- 8. Print -------------------------------------------------------- */

@media print {
  .main-sidebar,
  .main-header,
  .content-header > .container-fluid > .row > .col-sm-6:last-child,
  .hide-on-print {
    display: none !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
    background: #FFFFFF !important;
  }

  body,
  .content-wrapper,
  .content-header {
    color: #000000 !important;
    background: #FFFFFF !important;
  }

  #printable-div {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
  }
}