@font-face {
  font-family: 'NexaBold';
  src: url('Nexa-Bold.otf') format('opentype'); 
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'NexaLight';
  src: url('Nexa-Light.otf') format('opentype'); 
  font-weight: bold;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .responsive_table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.t2s {
    min-width: 800px;
  }
}
.print-only{display: none !important;}
@media print{.no-print, .no-print *{display: none !important;} .print-only{display: inline-block !important;}}
.centerAlign{text-align: center; }
.rightAlign{text-align: right; }
.leftAlign{text-align: left; }
.justifyAlign{text-align: justify; }
.textBold {font-weight: bold;}
.nexaBold {font-family: 'NexaBold', Arial, sans-serif !important;}
.nexaLight {font-family: 'NexaLight', Arial, sans-serif !important;}
.letterStyle {font-family: 'NexaLight', Arial, sans-serif !important;text-align: center;}
.order_image{object-fit: contain !important; max-width: 100%; width: auto !important; max-height: 3in; height: auto !important;}
.dSample{color: white;  padding:7px; border-radius: 10px 10px 0 0; background: black; display: flex !important; justify-content: center !important;}
.highlight-bt{border-top: 1px dashed !important;}
.bg-black{background-color: black; color: white;}
.b1s{border: 1px solid black;}
.b1sr{border: 1px solid black; border-radius: 10px !important;}
.b1scl{width: 20px !important;}
.b2s{border: 1px solid; width: 50 !important; height: 100px; vertical-align: bottom;}
.b3s{border: 1px solid; width: 20 !important; height: 100px; vertical-align: bottom;}
.t1s{width: 100%; border-collapse: collapse; font-size: 10pt;}
.t2s{width: 100%; border-collapse: collapse; font-size: 12pt;}
.t15s{width: 100%; border-collapse: collapse; font-size: 15pt;}
.input-padding-1{padding: 1px;}
.progress {position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;height: 10px;margin: 0;background-color: transparent;} /*Progress Bar */
.dropdown-item.active {background-color: #007bff;color: white;}
.urdu {font-family: 'Noto Nastaliq Urdu', 'Noto Nastaliq Urdu Draft', sans-serif !important; direction: rtl; unicode-bidi: embed; display: inline-block;}
.absent-row {background-color: #ffecec;font-weight: bold;}

/* Default to show screen view and hide print view */
.screen-view {
  display: table;
}

.print-view {
  display: none;
}

/* Media query for print */
@media print {
  .screen-view {
      display: none;
  }
  .print-view {
      display: table;
  }
}

/* Absolute Center Spinner */
.loadingNow {
    position: fixed;
    z-index: 9999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  /* Transparent Overlay */
  .loadingNow:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
  
    background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
  }
  
  /* :not(:required) hides these rules from IE9 and below */
  .loadingNow:not(:required) {
    /* hide "loadingNow..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
  }
  
  .loadingNow:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 150ms infinite linear;
    -moz-animation: spinner 150ms infinite linear;
    -ms-animation: spinner 150ms infinite linear;
    -o-animation: spinner 150ms infinite linear;
    animation: spinner 150ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
  }
  
  /* Animation */
  
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

/**** Select2 On Top **/
#update-modal.modal {
  overflow: visible !important;  /* Ensure the modal content can scroll */
}


.modal-body {
  max-height: calc(100vh - 150px); /* Adjust this value to suit your modal's header/footer height */
  overflow-y: auto;  /* Enable scrolling for the modal body content */
}

/* ── Nested sidebar treeview (Temp. Gatepass submenu) overlap fix ──────── */
/* AdminLTE clips nested nav-treeview inside another nav-treeview when the
   outer item wraps. Allow the inner menu to expand naturally. */
.nav-sidebar .nav-treeview .nav-item.has-treeview > .nav-treeview {
  overflow: visible !important;
}
.nav-sidebar .nav-item.has-treeview .nav-item.has-treeview {
  position: relative;
}
/* Suppress browser autocomplete dropdown on search inputs */
#searchInput:-webkit-autofill,
#sidebarSearch:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* ── Solid black 1px borders on report tables (non-DataTable) ──────────── */
/* Report pages use border="1" HTML attribute — browsers render this as thin
   grey. Override to solid black. Scoped to exclude DataTables (.dataTable). */
table[border="1"]:not(.dataTable),
table[border="1"]:not(.dataTable) th,
table[border="1"]:not(.dataTable) td {
  border: 1px solid #000 !important;
  border-collapse: collapse;
}

/* Plain .table-bordered tables that are NOT DataTables get black borders.
   DataTables adds .dataTable to their <table> — exclude them so they keep
   their default clean appearance. */
table.table-bordered:not(.dataTable),
table.table-bordered:not(.dataTable) > thead > tr > th,
table.table-bordered:not(.dataTable) > thead > tr > td,
table.table-bordered:not(.dataTable) > tbody > tr > th,
table.table-bordered:not(.dataTable) > tbody > tr > td,
table.table-bordered:not(.dataTable) > tfoot > tr > th,
table.table-bordered:not(.dataTable) > tfoot > tr > td {
  border: 1px solid #000 !important;
}

/* Explicitly restore DataTables default border so adminlte doesn't grey them */
table.dataTable.table-bordered,
table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > thead > tr > td,
table.dataTable.table-bordered > tbody > tr > th,
table.dataTable.table-bordered > tbody > tr > td,
table.dataTable.table-bordered > tfoot > tr > th,
table.dataTable.table-bordered > tfoot > tr > td {
  border: 1px solid #dee2e6 !important;
}

/* ── DataTables cell density — ONE knob for every DataTable ────────────────
   --eerp-dt-cell-pad-y is the top/bottom padding of every header, body and
   footer cell of every DataTable in the backend (Bootstrap's default is
   .75rem). Change this one value to make all tables looser or tighter;
   a single table can override it with `style="--eerp-dt-cell-pad-y:.75rem"`
   on its <table>. Left/right padding is left at Bootstrap's default. */
:root { --eerp-dt-cell-pad-y: .35rem; }
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  padding-top: var(--eerp-dt-cell-pad-y);
  padding-bottom: var(--eerp-dt-cell-pad-y);
}

/* Table / report buttons (T-0391): the group above a DataTable and beside a report's Print button; never printed */
.eerp-tbl-tools .btn { margin-right: .25rem; }
.eerp-tbl-tools .btn.disabled { cursor: not-allowed; opacity: .55; }
@media print { .eerp-tbl-tools, .eerp-tbl-tools-wrap { display: none !important; } }

/* Reminder / push notification toasts (showPushToast() in layouts/javascripts.php,
   loaded on every backend page — this styling must be global, not calendar-only) */
#calReminderToasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; min-width: 300px;
}
.cal-reminder-toast {
  background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.15);
  border-left: 4px solid #3b7ddd; overflow: hidden; animation: calReminderSlideIn .3s ease;
  cursor: pointer;
}
@keyframes calReminderSlideIn { from { transform: translateX(100px); opacity: 0; } to { transform: none; opacity: 1; } }
.cal-reminder-toast .toast-header {
  padding: 8px 12px; border-bottom: 1px solid #f0f2f5; display: flex;
  align-items: center; gap: 6px; background: transparent;
}
.cal-reminder-toast .toast-body { padding: 8px 12px; font-size: .8rem; cursor: pointer; }

/* Bulk Activity Return checkbox column (Handwork/Dye/Embroidery/Stitching
   pending tables — bulk-return-select-all header + bulk-return-check rows).
   bulkReturnColumnDefs() in functions.js already marks this DataTables
   column orderable:false/searchable:false so it stops injecting sort-arrow
   markup into the header cell. Rows/header now render each checkbox as an
   icheck-bootstrap box (div.icheck-primary > input + label, AdminLTE's own
   plugin already loaded app-wide) instead of a bare native checkbox --
   consistent styling with the rest of the app, and a much larger/more
   reliable 22x22 click target than the browser default. This rule just
   centers that box in the narrow (3%) column so it can't skew the table. */
.bulk-return-table > thead > tr > th:first-child,
.bulk-return-table > tbody > tr > td:first-child {
  text-align: center; vertical-align: middle;
}
.bulk-return-table .icheck-primary {
  margin: 0 !important; min-height: 22px;
}

/* ════════════════════════════════════════════════════════════════════════
   EERP PREMIUM FORM CONTROLS — checkboxes / radios / switches
   Documented in app/logic/ui-design-standards.md ("Form controls" section).
   This is the app-wide default control set, replacing plain icheck-bootstrap
   / Bootstrap custom-switch for NEW UI (old usages migrate opportunistically
   — see the doc's "pending migration" list; nothing here is retrofitted by
   this change). Pure CSS re-skins of native <input type="checkbox"/"radio">
   — no JS init call needed, same as icheck-bootstrap works today.

   Palette: reuses the app's existing tokens, never invents new colors.
     primary #2f5be0   success #28a745   danger #dc3545
     warning #ffc107   info    #17a2b8   secondary #6c757d
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --eerp-primary: #2f5be0;   --eerp-primary-soft: #cddcfc;
  --eerp-success: #28a745;   --eerp-success-soft: #bfe6c8;
  --eerp-danger:  #dc3545;   --eerp-danger-soft:  #f5c2c7;
  --eerp-warning: #ffc107;   --eerp-warning-soft: #ffe69c;
  --eerp-info:    #17a2b8;   --eerp-info-soft:    #b6e6ec;
  --eerp-secondary: #6c757d; --eerp-secondary-soft: #d3d6d9;
}

/* ── eerp-radio / eerp-check — shared default (image-2 "Checkbox"/"Radios") ──
   Markup:
   <div class="eerp-check eerp-check-primary">
     <input type="checkbox" id="foo"><label for="foo">Label</label>
   </div>
   <div class="eerp-radio eerp-radio-primary">
     <input type="radio" name="g" id="bar"><label for="bar">Label</label>
   </div>
*/
.eerp-check, .eerp-radio {
  display: inline-flex; align-items: center; gap: .5rem; position: relative;
  min-height: 22px; cursor: pointer;
}
.eerp-check input, .eerp-radio input {
  position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer;
}
.eerp-check label, .eerp-radio label {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; padding-left: 28px; cursor: pointer; font-size: .85rem; color: #495057;
  min-height: 20px; line-height: 20px; user-select: none;
}
.eerp-check label::before, .eerp-radio label::before {
  content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  border: 2px solid #ced4da; background: #fff; transition: all .15s ease-in-out;
  box-shadow: 0 1px 2px rgba(20,30,60,.04);
}
.eerp-check label::before { border-radius: 5px; }
.eerp-radio label::before { border-radius: 50%; }
.eerp-check label::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
  transition: transform .15s ease-in-out;
}
.eerp-radio label::after {
  content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; transform: scale(0);
  transition: transform .15s ease-in-out;
}
.eerp-check input:checked + label::before,
.eerp-radio input:checked + label::before { border-color: var(--eerp-primary); background: var(--eerp-primary); }
.eerp-check input:checked + label::after,
.eerp-radio input:checked + label::after { transform: rotate(45deg) scale(1); }
.eerp-radio input:checked + label::after { transform: scale(1); }
.eerp-check input:focus-visible + label::before,
.eerp-radio input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(47,91,224,.25); }
.eerp-check input:disabled + label,
.eerp-radio input:disabled + label { color: #adb5bd; cursor: not-allowed; }
.eerp-check input:disabled + label::before,
.eerp-radio input:disabled + label::before { background: #f4f5f9; border-color: #e9ebf1; }

/* Semantic color variants — swap --eerp-primary for the option's own meaning */
.eerp-check-success input:checked + label::before, .eerp-radio-success input:checked + label::before { border-color: var(--eerp-success); background: var(--eerp-success); }
.eerp-check-success input:focus-visible + label::before, .eerp-radio-success input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(40,167,69,.2); }
.eerp-check-danger input:checked + label::before, .eerp-radio-danger input:checked + label::before { border-color: var(--eerp-danger); background: var(--eerp-danger); }
.eerp-check-danger input:focus-visible + label::before, .eerp-radio-danger input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(220,53,69,.2); }
.eerp-check-warning input:checked + label::before, .eerp-radio-warning input:checked + label::before { border-color: var(--eerp-warning); background: var(--eerp-warning); }
.eerp-check-warning input:focus-visible + label::before, .eerp-radio-warning input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(255,193,7,.25); }
.eerp-check-info input:checked + label::before, .eerp-radio-info input:checked + label::before { border-color: var(--eerp-info); background: var(--eerp-info); }
.eerp-check-info input:focus-visible + label::before, .eerp-radio-info input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(23,162,184,.2); }
.eerp-check-secondary input:checked + label::before, .eerp-radio-secondary input:checked + label::before { border-color: var(--eerp-secondary); background: var(--eerp-secondary); }
.eerp-check-secondary input:focus-visible + label::before, .eerp-radio-secondary input:focus-visible + label::before { box-shadow: 0 0 0 3px rgba(108,117,125,.2); }

/* ── eerp-check-circle — image-2 "Checkbox Circled" (circular checkbox) ──── */
.eerp-check-circle label::before { border-radius: 50%; }

/* ── eerp-switch-ios — DEFAULT switch (screenshot 1, iOS-style) ──────────
   Markup (keeps Bootstrap's custom-control DOM shape — no JS/behavior change):
   <div class="custom-control custom-switch eerp-switch-ios">
     <input type="checkbox" class="custom-control-input" id="foo" role="switch">
     <label class="custom-control-label" for="foo">Label</label>
   </div>
*/
.eerp-switch-ios.custom-switch {
  padding-left: 3.1rem; min-height: 1.6rem;
}
.eerp-switch-ios.custom-switch .custom-control-label {
  padding-top: .1rem; font-size: .85rem; color: #495057; cursor: pointer;
}
.eerp-switch-ios.custom-switch .custom-control-label::before {
  left: -3.1rem; width: 2.6rem; height: 1.5rem; top: .05rem;
  border-radius: 1rem; background: #e9ebf1; border: none;
  box-shadow: inset 0 1px 2px rgba(20,30,60,.08);
  transition: background-color .2s ease-in-out;
}
.eerp-switch-ios.custom-switch .custom-control-label::after {
  left: calc(-3.1rem + 3px); top: .18rem; width: 1.24rem; height: 1.24rem;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.eerp-switch-ios.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--eerp-primary); box-shadow: none;
}
.eerp-switch-ios.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.1rem);
}
.eerp-switch-ios.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(47,91,224,.25);
}
.eerp-switch-ios.custom-switch .custom-control-input:disabled ~ .custom-control-label { color: #adb5bd; cursor: not-allowed; }
.eerp-switch-ios.custom-switch .custom-control-input:disabled ~ .custom-control-label::before { background: #f4f5f9; }
.eerp-switch-ios.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { background: var(--eerp-primary-soft); }
/* Semantic color variants for the ON state */
.eerp-switch-ios.eerp-switch-success .custom-control-input:checked ~ .custom-control-label::before { background: var(--eerp-success); }
.eerp-switch-ios.eerp-switch-danger .custom-control-input:checked ~ .custom-control-label::before { background: var(--eerp-danger); }
.eerp-switch-ios.eerp-switch-warning .custom-control-input:checked ~ .custom-control-label::before { background: var(--eerp-warning); }
.eerp-switch-ios.eerp-switch-info .custom-control-input:checked ~ .custom-control-label::before { background: var(--eerp-info); }

/* ── eerp-switch-gradient — optional flair variant (gradient pill + dot) ──
   Same markup shape as eerp-switch-ios. Reserved for decorative contexts
   (featured dashboard cards, marketing-style panels) — not the default. */
.eerp-switch-gradient.custom-switch {
  padding-left: 3.4rem; min-height: 1.7rem;
}
.eerp-switch-gradient.custom-switch .custom-control-label {
  padding-top: .15rem; font-size: .85rem; color: #495057; cursor: pointer;
}
.eerp-switch-gradient.custom-switch .custom-control-label::before {
  left: -3.4rem; width: 2.9rem; height: 1.6rem; top: 0;
  border-radius: 1.6rem; background: #e0e2e8; border: none;
  transition: background .3s ease;
}
.eerp-switch-gradient.custom-switch .custom-control-label::after {
  left: calc(-3.4rem + 4px); top: 4px; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: linear-gradient(135deg, #fdfdfd, #dedede);
  box-shadow: 0 3px 6px rgba(0,0,0,.28);
  transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.eerp-switch-gradient.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: linear-gradient(90deg, #f19af3, #f099b5);
}
.eerp-switch-gradient.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.3rem);
  background: linear-gradient(135deg, #ffffff, #fdfdfd);
}
.eerp-switch-gradient.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(240,150,190,.3);
}
.eerp-switch-gradient.custom-switch .custom-control-input:disabled ~ .custom-control-label { color: #adb5bd; cursor: not-allowed; }
.eerp-switch-gradient.custom-switch .custom-control-input:disabled ~ .custom-control-label::before { background: #eef0f4; }

/* ── eerp-check-tick-pop — high-emphasis single confirm checkbox ──────────
   Circular button, pops from off-color to on-color with a drawn tick mark.
   Use for a single standalone confirm action ("I agree", one-off approve),
   not for a list of many options — see decision table in the doc.
   Markup: <div class="eerp-check-tick-pop"><input type="checkbox" id="foo">
             <label for="foo"></label></div>  (label has no text; pair with
   a separate <span> if a caption is needed alongside it) */
.eerp-check-tick-pop { display: inline-flex; }
.eerp-check-tick-pop input { position: absolute; opacity: 0; width: 0; height: 0; }
.eerp-check-tick-pop label {
  --s: 34px;
  position: relative; display: block; width: var(--s); height: var(--s);
  margin: 0; background: var(--eerp-danger); border-radius: 50%; cursor: pointer;
  box-shadow: 0 4px 10px rgba(220,53,69,.35);
  transition: .2s ease background-color, .2s ease box-shadow, .2s ease transform;
  overflow: hidden;
}
.eerp-check-tick-pop label::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto;
  width: 68%; height: 68%; background: #fff; border-radius: 50%; transform: translateY(-50%);
  transition: .2s ease width, .2s ease height;
}
.eerp-check-tick-pop label:active { transform: scale(.92); }
.eerp-check-tick-pop .tick {
  position: absolute; top: 6%; left: 14%; width: 60%; height: 60%; transform: rotate(-40deg);
}
.eerp-check-tick-pop .tick::before, .eerp-check-tick-pop .tick::after {
  content: ""; position: absolute; background: #fff; border-radius: 2px; opacity: 0;
  transition: .2s ease transform, .2s ease opacity;
}
.eerp-check-tick-pop .tick::before { left: 0; bottom: 0; width: 4px; height: 42%; transform: translateY(-70%); }
.eerp-check-tick-pop .tick::after { left: 0; bottom: 0; width: 100%; height: 4px; transform: translateX(78%); }
.eerp-check-tick-pop input:checked + label { background: var(--eerp-success); box-shadow: 0 4px 10px rgba(40,167,69,.35); }
.eerp-check-tick-pop input:checked + label::before { width: 0; height: 0; }
.eerp-check-tick-pop input:checked + label .tick::before,
.eerp-check-tick-pop input:checked + label .tick::after { transform: translate(0); opacity: 1; }
.eerp-check-tick-pop input:focus-visible + label { box-shadow: 0 0 0 3px rgba(47,91,224,.25); }

/* ── eerp-check-strike — minimal circular checkbox, strike-through style ──
   Markup: <div class="eerp-check-strike"><input type="checkbox" id="foo">
            <label for="foo"><span class="eerp-check-strike-dot"></span>Label</label></div> */
.eerp-check-strike { display: inline-flex; align-items: center; }
.eerp-check-strike input { position: absolute; opacity: 0; width: 0; height: 0; }
.eerp-check-strike label { display: inline-flex; align-items: center; gap: .55rem; margin: 0; color: #333; cursor: pointer; font-size: .85rem; }
.eerp-check-strike-dot {
  display: inline-block; position: relative; width: 22px; height: 22px;
  border: 2px solid #333; border-radius: 50%; flex: none;
  transition: background-color .15s ease .1s, transform .3s cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
.eerp-check-strike-dot::before, .eerp-check-strike-dot::after {
  content: ""; position: absolute; height: 2px; border-radius: 2px; background: #333;
  transform-origin: 0 0; width: 0;
}
.eerp-check-strike-dot::before { top: 11px; left: 7px; transform: rotate(45deg); transition: width 50ms ease 50ms; }
.eerp-check-strike-dot::after { top: 14px; left: 8px; transform: rotate(305deg); transition: width 50ms ease; }
.eerp-check-strike input:checked + label .eerp-check-strike-dot { background: #333; transform: scale(1.2); }
.eerp-check-strike input:checked + label .eerp-check-strike-dot::before { width: 4px; background: #fff; transition: width 150ms ease 100ms; }
.eerp-check-strike input:checked + label .eerp-check-strike-dot::after { width: 8px; background: #fff; transition: width 150ms ease 100ms; }
.eerp-check-strike input:focus-visible + label .eerp-check-strike-dot { box-shadow: 0 0 0 3px rgba(47,91,224,.25); }

/* ── eerp-check-draw — animated outline SVG draw-check, square ────────────
   Markup: <div class="eerp-check-draw"><input type="checkbox" id="foo">
             <label for="foo"><svg viewBox="0,0,50,50"><path d="M5 30 L 20 45 L 45 5"></path></svg>
           </label></div> */
.eerp-check-draw input { position: absolute; opacity: 0; width: 0; height: 0; }
.eerp-check-draw label {
  --s: 28px;
  display: inline-block; width: var(--s); height: var(--s);
  border: 2px solid var(--eerp-primary); border-radius: 6px; margin: 0;
  cursor: pointer; transition: all .2s ease;
}
.eerp-check-draw label:active { transform: scale(1.05); border-radius: 10px; }
.eerp-check-draw label svg { pointer-events: none; padding: 5%; }
.eerp-check-draw label svg path {
  fill: none; stroke: var(--eerp-primary); stroke-width: 5px;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 101;
  transition: all 250ms cubic-bezier(1,0,.37,.91);
}
.eerp-check-draw input:checked + label svg path { stroke-dashoffset: 0; }
.eerp-check-draw input:focus-visible + label { box-shadow: 0 0 0 3px rgba(47,91,224,.25); }
/* Semantic color variants */
.eerp-check-draw.eerp-check-draw-success label { border-color: var(--eerp-success); }
.eerp-check-draw.eerp-check-draw-success label svg path { stroke: var(--eerp-success); }
.eerp-check-draw.eerp-check-draw-danger label { border-color: var(--eerp-danger); }
.eerp-check-draw.eerp-check-draw-danger label svg path { stroke: var(--eerp-danger); }
/* Full-width pages (T-0031, app/logic/ui-design-standards.md "Pages are always full width"):
   layouts/header.php already opens .content-wrapper (the sidebar offset). A page that
   opens a second one inside it doubled the offset and left a wide empty band on the
   left. Never nest it -- this guard neutralises any that slip through. */
.content-wrapper .content-wrapper { margin-left: 0 !important; min-height: 0 !important; transition: none; }

/* Navbar on phones (T-0076): which icons show is set by d-none/d-sm-* classes in
   navbar.php, never by position -- several items are ACL-conditional. */
@media (max-width: 575px) {
  .main-header .navbar-nav.ml-auto { flex-wrap: nowrap; min-width: 0; }
  .main-header .navbar-nav.ml-auto > .nav-item > .nav-link { padding-left: .5rem; padding-right: .5rem; }
}