/* ============================================================================
   Salum Hardware — custom theme overrides
   ----------------------------------------------------------------------------
   Two things live here:
     1. RED brand theme (topbar, buttons, links, active menu, form controls).
     2. A bigger brand logo + a form-field alignment safety net.

   TO REVERT TO THE STOCK UBOLD THEME:
     remove the <link ... salum-custom.css> tag from
       - resources/views/dashboard-layout/app.blade.php
       - resources/views/dashboard-layout/pos.blade.php
       - resources/views/sign-in.blade.php
   Nothing else references this file.
   ============================================================================ */

:root,
[data-skin] {
    --salum-red: #c62828;
    --salum-red-dark: #a81f1f;
    --salum-red-rgb: 198, 40, 40;

    /* Bootstrap-native primary (badges, list-groups, some plugins) */
    --bs-primary: #c62828;
    --bs-primary-rgb: 198, 40, 40;
    --bs-link-color: #c62828;
    --bs-link-hover-color: #a81f1f;
    --bs-link-color-rgb: 198, 40, 40;

    /* UBold theme token — reaches charts, subtle backgrounds, focus rings */
    --theme-primary: #c62828;
    --theme-primary-rgb: 198, 40, 40;
    --theme-chart-primary: #c62828;
    --theme-chart-primary-rgb: 198, 40, 40;
}

/* ---- Primary buttons ---------------------------------------------------- */
.btn-primary {
    --theme-btn-bg: #c62828;
    --theme-btn-border-color: #c62828;
    --theme-btn-hover-bg: #a81f1f;
    --theme-btn-hover-border-color: #a81f1f;
    --theme-btn-active-bg: #a81f1f;
    --theme-btn-active-border-color: #a81f1f;
    --theme-btn-disabled-bg: #c62828;
    --theme-btn-disabled-border-color: #c62828;
    --theme-btn-focus-shadow-rgb: 198, 40, 40;
}

.btn-outline-primary {
    --theme-btn-color: #c62828;
    --theme-btn-border-color: #c62828;
    --theme-btn-hover-bg: #c62828;
    --theme-btn-hover-border-color: #c62828;
    --theme-btn-active-bg: #c62828;
    --theme-btn-active-border-color: #c62828;
}

.btn-soft-primary {
    --theme-btn-color: #c62828;
    --theme-btn-bg: rgba(198, 40, 40, 0.12);
    --theme-btn-border-color: transparent;
    --theme-btn-hover-color: #fff;
    --theme-btn-hover-bg: #c62828;
    --theme-btn-active-bg: #c62828;
    --theme-btn-active-color: #fff;
}

/* ---- Utility colour classes ------------------------------------------------ */
.text-primary { color: #c62828 !important; }
.bg-primary { background-color: #c62828 !important; }
.border-primary { border-color: #c62828 !important; }
.link-primary { color: #c62828 !important; }
.badge.bg-primary,
.badge.text-bg-primary { background-color: #c62828 !important; }
.bg-primary-subtle { background-color: rgba(198, 40, 40, 0.12) !important; }
.text-primary-emphasis { color: #a81f1f !important; }

/* ---- Sidenav hover + active: full-width tinted background --------------- */
.sidenav-menu .side-nav-link {
    border-radius: 6px;
    margin-inline: 6px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.sidenav-menu .side-nav-link:hover,
.sidenav-menu .side-nav-link.active,
.sidenav-menu .side-nav-item.active > .side-nav-link,
.sidenav-menu .menuitem-active > .side-nav-link {
    background-color: rgba(198, 40, 40, 0.10) !important;
    color: #c62828 !important;
}
.sidenav-menu .side-nav-link.active,
.sidenav-menu .side-nav-item.active > .side-nav-link {
    font-weight: 600;
    box-shadow: inset 3px 0 0 #c62828;
}
.sidenav-menu .side-nav-link:hover .menu-icon,
.sidenav-menu .side-nav-link:hover .menu-text,
.sidenav-menu .side-nav-link.active .menu-icon,
.sidenav-menu .side-nav-link.active .menu-text { color: #c62828 !important; }

/* nav-pills used by Company Setup / Chart of Accounts sub-nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: #c62828 !important; }

/* ---- Forms ------------------------------------------------------------------ */
.form-check-input:checked {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
}
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: #e07a7a !important;
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.15) !important;
}
.form-switch .form-check-input:checked { background-color: #c62828 !important; }

/* ---- Pagination ----------------------------------------------------------- */
.page-item.active .page-link,
.pagination .active > .page-link {
    background-color: #c62828 !important;
    border-color: #c62828 !important;
}
.page-link { color: #c62828; }

/* ---- Progress / spinners ------------------------------------------------- */
.progress-bar { background-color: #c62828; }
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #c62828 !important; }

/* ---- Topbar goes red --------------------------------------------------------- */
.app-topbar {
    background: #c62828 !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15) !important;
}
.app-topbar .topbar-link,
.app-topbar .topbar-link-icon,
.app-topbar .btn-icon,
.app-topbar .sidenav-toggle-button,
.app-topbar .topnav-toggle-button,
.app-topbar .app-search-icon,
.app-topbar .nav-user h5,
.app-topbar .nav-user i {
    color: #ffffff !important;
}
.app-topbar .btn-default,
.app-topbar .sidenav-toggle-button {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: transparent !important;
}
.app-topbar .topbar-search {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}
.app-topbar .topbar-search::placeholder { color: rgba(255, 255, 255, 0.75) !important; }

/* POS launcher pill in the topbar — white on red so the icon reads clearly */
.app-topbar .pos-launch {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    height: 36px;
    background: #ffffff;
    color: #c62828 !important;
    border-radius: 8px;
    padding: 0 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.app-topbar .pos-launch i,
.app-topbar .pos-launch svg { color: #c62828 !important; width: 18px; height: 18px; }
.app-topbar .pos-launch:hover { background: #ffe9e9; color: #a81f1f !important; }
/* the dropdown wrapper must not stretch to the full 70px topbar height */
.app-topbar .dropdown.d-flex { height: 36px; align-self: center; }

/* ---- Sidebar brand cell matches the red topbar ------------------------------- */
.sidenav-menu > .logo,
.sidenav-menu > a.logo,
.sidenav-menu > h3.logo {
    background-color: #c62828 !important;
    color: #ffffff !important;
}
.sidenav-menu > a.logo img { filter: brightness(0) invert(1); }

/* ---- Bigger brand logo -------------------------------------------------------- */
.logo-topbar .logo-lg img,
.logo-topbar .logo-light img,
.logo-topbar .logo-dark img {
    height: 40px !important;
    width: auto !important;
    max-width: 190px;
    object-fit: contain;
}

/* The topbar is red now — a dark logo would disappear, so knock it to white. */
.app-topbar .logo-topbar img {
    filter: brightness(0) invert(1);
}

/* When a company logo is uploaded, it replaces the name text entirely and
   sits centered in the red brand cell. */
.sidenav-menu > a.logo.logo-has-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    min-height: 64px;
}

/* Open fiscal year badge in the topbar */
.app-topbar .topbar-fy {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.app-topbar .topbar-fy i,
.app-topbar .topbar-fy svg { width: 14px; height: 14px; }

/* ---- Select2 (searchable dropdowns) --------------------------------------- */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    border-color: #ced4da;
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.75rem;
    padding-right: 2rem;
    color: #212529;
    line-height: normal;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 6px; }
.form-select-sm ~ .select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.8125rem;
}
.select2-container--open .select2-selection--single { border-color: #e07a7a; }
.select2-dropdown { border-color: #ced4da; z-index: 1065; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background-color: #c62828 !important; color: #fff; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #e07a7a;
    outline: 0;
}
/* dark mode */
:root[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--theme-input-bg, #2b2e33);
    border-color: var(--theme-border-color, #3d4046);
}
:root[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e5e7eb; }
:root[data-bs-theme="dark"] .select2-dropdown { background-color: #2b2e33; border-color: #3d4046; }
:root[data-bs-theme="dark"] .select2-container--default .select2-results__option { color: #e5e7eb; }

/* ---- Greeting header — branded hero background, same in light + dark ------
   Used by resources/views/dashboard-layout/greeting-header.blade.php on the
   dashboard and every navigation hub page. A solid brand gradient reads well
   regardless of theme, so it needs no separate dark-mode override. ---------- */
.greeting-header {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, var(--salum-red, #c62828) 0%, var(--salum-red-dark, #a81f1f) 100%);
    box-shadow: 0 6px 18px rgba(198, 40, 40, 0.25);
}
.greeting-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/user-bg-pattern.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.14;
    pointer-events: none;
}
.greeting-header .card-body { position: relative; z-index: 1; }
.greeting-header h5 { color: #fff !important; }
.greeting-header .text-muted { color: rgba(255, 255, 255, 0.82) !important; }
.greeting-header #greeting-clock { color: #fff !important; }
.greeting-header .avatar-md {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

/* ============================================================================
   Form field alignment. A small script in the layout (see app.blade.php) rewrites
   every POST create/edit form's field wrappers to `col-12 col-md-6`, so the grid
   is uniform regardless of what column classes the blade used. These rules just
   tidy the inputs and the "align-items-end" checkbox cells.
   ============================================================================ */
.card form .row > [class*="col-"] > .form-control,
.card form .row > [class*="col-"] > .form-select,
.card form .row > [class*="col-"] > .input-group,
.card form .row > [class*="col-"] > textarea.form-control {
    width: 100%;
}
.card form .row .form-label {
    display: block;
    margin-bottom: 0.25rem;
}
/* Checkbox cells that used d-flex align-items-end line up with the inputs beside them */
.card-body > form[method="POST" i] > .form-check,
.card-body > form[method="POST" i] .d-flex.align-items-end > .form-check {
    padding-top: 1.9rem;
}