/* =============================================================
   brand.css — Digital Print Studio M
   Global admin theme override. Loaded last — wins everything.

   Brand palette
   ─────────────────────────────────────────────────────────────
   Primary    #000000  black        CTAs, key UI, active states
   Primary+   #212121  near-black   hover, pressed
   Secondary  #555555  dark gray    secondary actions
   Success    #1a6b3c  forest green confirmed / active / done
   Danger     #c0392b  deep red     error / destructive
   Warning    #d4890a  amber        caution / pending
   Info       #444444  dark neutral informational
   Border     #dadada  light gray
   Bg         #f5f5f5  off-white    page background
   ============================================================= */

/* ── 0. CSS custom properties (Bootstrap 5 tokens) ──────── */
/* Overriding here cascades to every btn-*, bg-*, text-*,
   badge, alert, table-* and border-* utility automatically.  */

:root {
    /* Primary → black */
    --bs-primary:           #000000;
    --bs-primary-rgb:       0, 0, 0;

    /* Secondary → dark gray */
    --bs-secondary:         #555555;
    --bs-secondary-rgb:     85, 85, 85;

    /* Success → forest green */
    --bs-success:           #1a6b3c;
    --bs-success-rgb:       26, 107, 60;

    /* Danger → deep red */
    --bs-danger:            #c0392b;
    --bs-danger-rgb:        192, 57, 43;

    /* Warning → amber (readable, not neon yellow) */
    --bs-warning:           #d4890a;
    --bs-warning-rgb:       212, 137, 10;

    /* Info → neutral dark (cyan clashes with the brand) */
    --bs-info:              #444444;
    --bs-info-rgb:          68, 68, 68;

    /* Dark / Light */
    --bs-dark:              #000000;
    --bs-dark-rgb:          0, 0, 0;
    --bs-light:             #f5f5f5;
    --bs-light-rgb:         245, 245, 245;

    /* Body */
    --bs-body-font-family:  'Montserrat', sans-serif;
    --bs-body-color:        #333333;
    --bs-body-bg:           #f5f5f5;

    /* Links */
    --bs-link-color:        #000000;
    --bs-link-hover-color:  #333333;
}

/* Bootstrap 5 button component variables (scoped per variant) */

.btn-primary {
    --bs-btn-bg:                #000;
    --bs-btn-border-color:      #000;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #212121;
    --bs-btn-hover-border-color:#212121;
    --bs-btn-hover-color:       #fff;
    --bs-btn-active-bg:         #3f3f3f;
    --bs-btn-active-border-color:#3f3f3f;
    --bs-btn-focus-shadow-rgb:  0, 0, 0;
}

.btn-secondary {
    --bs-btn-bg:                #555;
    --bs-btn-border-color:      #555;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #3f3f3f;
    --bs-btn-hover-border-color:#3f3f3f;
    --bs-btn-hover-color:       #fff;
    --bs-btn-focus-shadow-rgb:  85, 85, 85;
}

.btn-success {
    --bs-btn-bg:                #1a6b3c;
    --bs-btn-border-color:      #1a6b3c;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #155430;
    --bs-btn-hover-border-color:#155430;
    --bs-btn-focus-shadow-rgb:  26, 107, 60;
}

.btn-danger {
    --bs-btn-bg:                #c0392b;
    --bs-btn-border-color:      #c0392b;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #a93226;
    --bs-btn-hover-border-color:#a93226;
    --bs-btn-focus-shadow-rgb:  192, 57, 43;
}

.btn-warning {
    --bs-btn-bg:                #d4890a;
    --bs-btn-border-color:      #d4890a;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #b87408;
    --bs-btn-hover-border-color:#b87408;
    --bs-btn-focus-shadow-rgb:  212, 137, 10;
}

.btn-info {
    --bs-btn-bg:                #444;
    --bs-btn-border-color:      #444;
    --bs-btn-color:             #fff;
    --bs-btn-hover-bg:          #333;
    --bs-btn-hover-border-color:#333;
    --bs-btn-focus-shadow-rgb:  68, 68, 68;
}

.btn-outline-primary {
    --bs-btn-color:             #000;
    --bs-btn-border-color:      #000;
    --bs-btn-hover-bg:          #000;
    --bs-btn-hover-border-color:#000;
    --bs-btn-hover-color:       #fff;
    --bs-btn-active-bg:         #212121;
    --bs-btn-focus-shadow-rgb:  0, 0, 0;
}

.btn-outline-secondary {
    --bs-btn-color:             #555;
    --bs-btn-border-color:      #dadada;
    --bs-btn-hover-bg:          #f5f5f5;
    --bs-btn-hover-border-color:#bbb;
    --bs-btn-hover-color:       #000;
}

/* ── 0b. Font ───────────────────────────────────────────── */

body,
.app-sidebar,
.main-header,
.card,
.form-control,
.btn,
table,
input,
select,
textarea {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── 1. Page background ─────────────────────────────────── */

/* Full-width content body — comfortable padding on both sides */
.content-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

body.main-body,
body.app {
    background-color: #f5f5f5 !important;
}

/* ── 2. Sidebar ─────────────────────────────────────────── */

/* Unified background — header and menu are the same colour. */
.app-sidebar {
    background: #2b2b2b !important;
    border-right: none !important;
    box-shadow: 2px 0 10px rgba(0,0,0,.3) !important;
    color: #c4c4c4 !important;          /* base for all inherit chains */
}

.main-sidebar-header {
    background: #2b2b2b !important;
    border-bottom: 1px solid #383838 !important;
}

/* ── 2a. Normal state ───────────────────────────────────── */

.side-menu__item {
    position: relative;
    color: #c4c4c4 !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.side-menu__label {
    color: #c4c4c4 !important;
}

.side-menu__icon {
    color: #888 !important;
    fill: #888 !important;
    transition: color 0.15s;
}

.angle {
    color: #666 !important;
}

/* ── 2b. Hover & active
   Using !important here to beat sidemenu.css's 3-class
   selectors (e.g. .side-menu .slide.active .side-menu__label)
   that still have higher specificity.                        */

.side-menu__item:hover,
.side-menu__item:focus,
.side-menu__item.active,
.slide.is-expanded > .side-menu__item {
    color: #fff !important;
    text-decoration: none;
    background: rgba(255,255,255,.07) !important;
}

/* Labels & icons inside hover/active items */
.side-menu__item:hover .side-menu__label,
.side-menu__item:focus .side-menu__label,
.side-menu__item.active .side-menu__label,
.slide.is-expanded > .side-menu__item .side-menu__label,
.side-menu .slide.active .side-menu__label,
.slide:hover .side-menu__label,
.slide.is-expanded .side-menu__label {
    color: #fff !important;
}

.side-menu__item:hover .side-menu__icon,
.side-menu__item:focus .side-menu__icon,
.side-menu__item.active .side-menu__icon,
.slide.is-expanded > .side-menu__item .side-menu__icon,
.side-menu .slide.active .side-menu__icon,
.slide:hover .side-menu__icon,
.slide.is-expanded .side-menu__icon {
    color: #fff !important;
    fill: #fff !important;
}

.side-menu__item:hover .angle,
.side-menu__item.active .angle,
.slide.is-expanded .angle,
.slide:hover .angle {
    color: #ccc !important;
}

/* Active left-bar indicator */
.app-sidebar .slide .side-menu__item.active::before {
    background: #fff !important;
    width: 3px !important;
}

/* ── 2c. Submenu ────────────────────────────────────────── */

.slide-menu {
    background: #2b2b2b !important;
    border-top: none !important;
}

.slide-item {
    color: #999 !important;
    font-size: 12.5px;
    font-weight: 400;
    padding-left: 52px;
    transition: color 0.15s, background 0.15s;
}

.slide-item:hover,
.slide-item:focus,
.slide-item.active {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
    text-decoration: none;
}

/* ── 2d. Sidebar overlay (mobile) ───────────────────────── */

.app-sidebar__overlay {
    background: rgba(0,0,0,.55);
}

/* ── 3. Top header bar ──────────────────────────────────── */

.main-header {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}

.main-header .fe,
.main-header .header-icons {
    color: #212121 !important;
}

/* ── 4. Cards ───────────────────────────────────────────── */

.card {
    border: 1px solid #e8e8e8 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background: #fff !important;
}

.card-header {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
    letter-spacing: 0.01em !important;
}

.card-body {
    padding: 20px !important;
}

/* ── 5. Buttons ─────────────────────────────────────────── */
/* CSS variables (section 0) handle BS5 components.
   Explicit fallbacks below cover BS4/template classes.       */

.btn {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    box-shadow: none !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

.btn:focus,
.btn:active:focus {
    box-shadow: none !important;
}

.btn-primary {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background-color: #212121 !important;
    border-color: #212121 !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: #555 !important;
    border-color: #555 !important;
    color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #3f3f3f !important;
    border-color: #3f3f3f !important;
    color: #fff !important;
}

.btn-success {
    background-color: #1a6b3c !important;
    border-color: #1a6b3c !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #155430 !important;
    border-color: #155430 !important;
}

.btn-danger {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #a93226 !important;
    border-color: #a93226 !important;
}

.btn-warning {
    background-color: #d4890a !important;
    border-color: #d4890a !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #b87408 !important;
    border-color: #b87408 !important;
}

.btn-info {
    background-color: #444 !important;
    border-color: #444 !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #333 !important;
    border-color: #333 !important;
}

.btn-outline-primary {
    color: #000 !important;
    border-color: #000 !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: #000 !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: #555 !important;
    border-color: #dadada !important;
    background-color: transparent !important;
}
.btn-outline-secondary:hover {
    background-color: #f5f5f5 !important;
    border-color: #bbb !important;
    color: #000 !important;
}

.btn-sm {
    padding: 4px 12px !important;
    font-size: 11px !important;
}

.btn-lg {
    font-size: 13px !important;
    padding: 10px 24px !important;
}

/* ── 6. Forms ───────────────────────────────────────────── */

.form-control {
    border: 1.5px solid #dadada !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    color: #000 !important;
    background-color: #fafafa !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #000 !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.form-label,
label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #444 !important;
    margin-bottom: 5px !important;
}

.select2-container--default .select2-selection--single {
    border: 1.5px solid #dadada !important;
    border-radius: 3px !important;
    height: 38px !important;
    background-color: #fafafa !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000 !important;
    line-height: 36px !important;
    font-size: 13px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #000 !important;
}

/* ── Select2 multi-select ───────────────────────────────── */

.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #dadada !important;
    border-radius: 3px !important;
    background-color: #fafafa !important;
    min-height: 38px !important;
    padding: 3px 6px !important;
    cursor: text !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #000 !important;
    outline: none !important;
}

/* Tags / chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #212121 !important;
    border: none !important;
    border-radius: 2px !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 6px 2px 4px !important;
    margin: 3px 4px 3px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* × remove button inside tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255,255,255,0.6) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1 !important;
    order: 2 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff !important;
    background: none !important;
}

/* Inline search input */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 3px 0 !important;
    padding: 0 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #aaa !important;
}

/* Dropdown panel */
.select2-dropdown {
    border: 1.5px solid #212121 !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
    font-family: 'Montserrat', sans-serif !important;
}

.select2-container--default .select2-results__option {
    font-size: 13px !important;
    padding: 8px 12px !important;
    color: #333 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #212121 !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #f0f0f0 !important;
    color: #888 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dadada !important;
    border-radius: 2px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #000 !important;
    outline: none !important;
}

/* ── 7. Tables ──────────────────────────────────────────── */

.table {
    font-size: 13px !important;
    color: #333 !important;
}

.table thead th {
    background-color: #212121 !important;
    color: #fff !important;
    border-color: #333 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    /*padding: 12px 16px !important;*/
}

.table tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s !important;
}

.table tbody tr:hover {
    background-color: #fafafa !important;
}

.table-bordered td,
.table-bordered th {
    border-color: #e8e8e8 !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #dadada !important;
    border-radius: 3px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid #dadada !important;
    border-radius: 3px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
}

/* ── 8. Badges & backgrounds ────────────────────────────── */

/* BS5 .badge uses bg-* utilities — covered by CSS vars above.
   BS4-style .badge-* explicit fallbacks:                     */

.badge-primary,  .bg-primary  { background-color: #000    !important; color: #fff !important; }
.badge-secondary,.bg-secondary{ background-color: #555    !important; color: #fff !important; }
.badge-success,  .bg-success  { background-color: #1a6b3c !important; color: #fff !important; }
.badge-danger,   .bg-danger   { background-color: #c0392b !important; color: #fff !important; }
.badge-warning,  .bg-warning  { background-color: #d4890a !important; color: #fff !important; }
.badge-info,     .bg-info     { background-color: #444    !important; color: #fff !important; }
.badge-dark,     .bg-dark     { background-color: #000    !important; color: #fff !important; }
.badge-light,    .bg-light    { background-color: #f5f5f5 !important; color: #333 !important; }

/* Text colour utilities */
.text-primary   { color: #000    !important; }
.text-secondary { color: #555    !important; }
.text-success   { color: #1a6b3c !important; }
.text-danger    { color: #c0392b !important; }
.text-warning   { color: #d4890a !important; }
.text-info      { color: #444    !important; }

/* Alert variants */
.alert-primary   { background-color: #f0f0f0 !important; border-color: #ccc    !important; color: #000    !important; }
.alert-secondary { background-color: #f3f3f3 !important; border-color: #ccc    !important; color: #333    !important; }
.alert-success   { background-color: #eaf5ee !important; border-color: #a8d5b5 !important; color: #1a6b3c !important; }
.alert-danger    { background-color: #fdf2f1 !important; border-color: #e8a39d !important; color: #c0392b !important; }
.alert-warning   { background-color: #fef8ec !important; border-color: #f0c96a !important; color: #9a6200 !important; }
.alert-info      { background-color: #f5f5f5 !important; border-color: #ccc    !important; color: #444    !important; }

/* ── 9. Page title / breadcrumb ─────────────────────────── */

.page-header {
    margin-bottom: 20px !important;
}

.page-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    letter-spacing: -0.01em !important;
}

/* ── 10. Footer ─────────────────────────────────────────── */

.main-footer {
    background: #fff !important;
    border-top: 1px solid #e8e8e8 !important;
    color: #555 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
}

.main-footer a {
    color: #555 !important;
    text-decoration: none !important;
}

.main-footer a:hover {
    color: #000 !important;
}

/* ── 11. Scrollbar ──────────────────────────────────────── */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* ── 12. Form wizard (jQuery Steps) ────────────────────── */
/* style.css defines its own wizard block with #2e3092 and
   #5393eb — these overrides beat it since brand.css loads last */

/* Step number circles */
.wizard > .steps a .number,
.wizard > .steps a:hover .number,
.wizard > .steps a:active .number {
    background-color: #dadada !important;
}

/* Current step circle + label */
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
    color: #000 !important;
}

.wizard > .steps .current a .number,
.wizard > .steps .current a:hover .number,
.wizard > .steps .current a:active .number {
    background-color: #000 !important;
}

/* Done step circle + label */
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
    color: #555 !important;
}

.wizard > .steps .done a .number,
.wizard > .steps .done a:hover .number,
.wizard > .steps .done a:active .number {
    background-color: #555 !important;
}

/* Action buttons — shared base styles */
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    color: #fff !important;
}

/* Previous button — secondary gray */
.wizard > .actions > ul > li:first-child a {
    background-color: #555 !important;
}

.wizard > .actions > ul > li:first-child a:hover {
    background-color: #3f3f3f !important;
}

/* Next / Send button — black */
.wizard > .actions > ul > li:last-child a {
    background-color: #000 !important;
}

.wizard > .actions > ul > li:last-child a:hover {
    background-color: #212121 !important;
}

/* Send / Finish button — jQuery Steps renders it as <button id="send-btn">,
   not <a>, so the .actions a rules above don't apply to it.
   style.css line ~84864 sets #send-btn { background-color: #e2651c } with
   ID specificity — override requires !important here.                       */
#send-btn,
.wizard > .actions button {
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 3px !important;
    padding: 9px 25px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

#send-btn:hover,
.wizard > .actions button:hover {
    background-color: #212121 !important;
}

/* Disabled (Previous on first step) */
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
    background-color: #e8e8e8 !important;
    color: #aaa !important;
}

/* Wizard container border */
.wizard {
    border-color: #e8e8e8 !important;
}

.wizard > .content {
    border-color: #e8e8e8 !important;
}

/* ── 13. Misc ──────────────────────────────────────────── */

/* Page / breadcrumb title (inline style removed from PHP) */
.content-title {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Plus-circle icons (inline style replaced with color:#000) */
.fa-plus-circle {
    color: #000 !important;
}
.fa-plus-circle:hover {
    color: #555 !important;
}

/* Remove residual blue from links in content area */
.app-content a:not(.btn):not(.side-menu__item):not(.slide-item) {
    color: #333;
}

.app-content a:not(.btn):not(.side-menu__item):not(.slide-item):hover {
    color: #000;
}

/* Loader */
#global-loader {
    background: #fff !important;
}