/*
 * Salon CRM overrides on top of Hope UI (public/assets/hope-ui).
 * Keep this file small: prefer Hope UI / Bootstrap utility classes in markup.
 * See docs/prd/04_UI_UX_Guidelines.md.
 */

/* ---------- Page header (Hope UI .iq-navbar-header) ---------- */
.iq-navbar-header.crm-page-header { height: 200px; }
.iq-navbar-header.crm-page-header h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.iq-navbar-header.crm-page-header .breadcrumb { margin-bottom: .25rem; --bs-breadcrumb-divider-color: rgba(255,255,255,.7); }
.iq-navbar-header.crm-page-header .breadcrumb a,
.iq-navbar-header.crm-page-header .breadcrumb-item.active { color: rgba(255,255,255,.85); }
/* Theme makes banner links white (color: inherit); give <button> actions the same look. */
.iq-navbar-header .btn-soft-light { color: #fff; }

/* Mobile: let long titles/subtitles grow; Hope UI handles the banner image + content offset. */
@media (max-width: 767.98px) {
    .iq-navbar-header.crm-page-header { height: auto; min-height: 200px; }
}

/* Content is pulled 3rem up over the banner (Hope UI .iq-banner + .content-inner). The banner is position:relative,
   so unpositioned content in that strip (tab bars such as the Settings tabs) sat under it and could not be clicked.
   Positioning the content puts it on top; its empty area lets clicks through to the banner (header buttons). */
.iq-banner + .content-inner { position: relative; pointer-events: none; }
.iq-banner + .content-inner > * { pointer-events: auto; }

/* ---------- Initials avatar ---------- */
.crm-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 50%; font-weight: 600; line-height: 1;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
}
/* <x-avatar> sizes itself inline (any size); these classes size hand-written .crm-avatar icon circles. */
.crm-avatar.avatar-32 { width: 32px; height: 32px; font-size: .75rem; }
.crm-avatar.avatar-36 { width: 36px; height: 36px; font-size: .8rem; }
.crm-avatar.avatar-40 { width: 40px; height: 40px; font-size: .85rem; }
.crm-avatar.avatar-50 { width: 50px; height: 50px; font-size: 1rem; }

/* ---------- Forms ---------- */
.form-label .required { color: var(--bs-danger); margin-left: 2px; }
.form-text { font-size: .8125rem; }

/* Select2 aligned with Hope UI .form-control */
.select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + 1rem + 2px); border-radius: var(--bs-border-radius); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--bs-primary); box-shadow: none; }
.is-invalid + .select2-container--bootstrap-5 .select2-selection { border-color: var(--bs-danger); }
/* .form-select-sm selects (crm.js adds select2--small): keep the compact height. */
.select2-container--bootstrap-5 .select2-selection.select2--small { min-height: calc(1.5em + .5rem + 2px); }

/* ---------- Bill items (bills/form): compact cells so qty, price and discount inputs keep a readable width ---------- */
.bill-items-table > :not(caption) > * > * { padding: .75rem .5rem; }
.bill-items-table > :not(caption) > * > :first-child { padding-left: 1.5rem; }
.bill-items-table > :not(caption) > * > :last-child { padding-right: 1.5rem; }
.bill-items-table td.bill-qty { min-width: 90px; width: 90px; }
.bill-items-table td.bill-price { min-width: 120px; width: 120px; }
.bill-items-table td.bill-discount { min-width: 170px; width: 170px; }
.bill-discount .form-select { flex: 0 0 64px; padding-left: .5rem; padding-right: 1.5rem; background-position: right .4rem center; }

/* ---------- Filters bar above tables ---------- */
.crm-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.crm-filters .form-group { margin-bottom: 0; min-width: 180px; }

/* ---------- DataTables ---------- */
.dataTables_processing.card { box-shadow: var(--bs-box-shadow-sm); }
table.dataTable td { vertical-align: middle; }
.list-user-action { display: flex; gap: .35rem; align-items: center; }

/* ---------- Empty state ---------- */
.crm-empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.crm-empty-state .crm-empty-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
}

/* ---------- Stat cards ---------- */
.crm-stat .crm-stat-icon {
    width: 48px; height: 48px; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Permission matrix (roles form) ---------- */
.crm-permission-group { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1rem; height: 100%; }

/* ---------- Sidebar brand (M10C: branch display names can be long) ---------- */
.sidebar .sidebar-header .logo-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Page loader (partials/loader.blade.php): replaces Hope UI's loader.gif ---------- */
.loader.simple-loader .loader-body.crm-loader {
    background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.crm-loader-mark { width: 170px; height: 68px; color: var(--bs-primary); overflow: visible; }
.crm-loader-blade { stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; transform-box: view-box; transform-origin: 30px 20px; }
.crm-loader-blade-a { animation: crm-snip-a .7s ease-in-out infinite alternate; }
.crm-loader-blade-b { animation: crm-snip-b .7s ease-in-out infinite alternate; }
.crm-loader-pivot { fill: currentColor; }
.crm-loader-cut {
    stroke: currentColor; stroke-opacity: .45; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5;
    animation: crm-cut-feed .7s linear infinite;
}
.crm-loader-name {
    color: var(--bs-secondary-color); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
    animation: crm-loader-pulse 1.4s ease-in-out infinite;
}
@keyframes crm-snip-a { to { transform: rotate(-21deg); } }
@keyframes crm-snip-b { to { transform: rotate(21deg); } }
@keyframes crm-cut-feed { to { stroke-dashoffset: 9; } }
@keyframes crm-loader-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .crm-loader-blade, .crm-loader-cut, .crm-loader-name { animation: none; }
}

/* Menu fills the height left under the header; Hope UI's fixed 92vh cut off the last items. */
.sidebar { display: flex; flex-direction: column; }
.sidebar .sidebar-header { flex-shrink: 0; }
.sidebar .sidebar-body.data-scrollbar { flex: 1 1 auto; min-height: 0; max-height: none; }
.sidebar .sidebar-list { padding-bottom: 1rem; }

/* ---------- Dark scheme (theme customizer, partials/customizer.blade.php) ----------
   Hope UI themes its own components through CSS variables; these vendor widgets hard-code white. */
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color); background-color: var(--bs-gray-900); border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--bs-body-color); }
[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--bs-emphasis-color); background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] .flatpickr-calendar { background: var(--bs-gray-900); box-shadow: var(--bs-box-shadow); }
[data-bs-theme=dark] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bs-gray-900); }
[data-bs-theme=dark] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--bs-gray-900); }
[data-bs-theme=dark] .flatpickr-months .flatpickr-month,
[data-bs-theme=dark] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme=dark] .flatpickr-months .flatpickr-prev-month,
[data-bs-theme=dark] .flatpickr-months .flatpickr-next-month,
[data-bs-theme=dark] span.flatpickr-weekday,
[data-bs-theme=dark] .flatpickr-day,
[data-bs-theme=dark] .flatpickr-time input,
[data-bs-theme=dark] .flatpickr-time .flatpickr-am-pm { color: var(--bs-body-color); fill: var(--bs-body-color); background: transparent; }
[data-bs-theme=dark] .flatpickr-day:hover,
[data-bs-theme=dark] .flatpickr-time input:hover,
[data-bs-theme=dark] .flatpickr-time .flatpickr-am-pm:hover { background: var(--bs-primary-bg-subtle); border-color: transparent; }
[data-bs-theme=dark] .flatpickr-day.selected { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
[data-bs-theme=dark] .flatpickr-day.flatpickr-disabled,
[data-bs-theme=dark] .flatpickr-day.prevMonthDay,
[data-bs-theme=dark] .flatpickr-day.nextMonthDay { color: var(--bs-tertiary-color); }
[data-bs-theme=dark] .flatpickr-time { border-top-color: var(--bs-border-color); }
[data-bs-theme=dark] .swal2-popup { background: var(--bs-gray-900); color: var(--bs-body-color); }
[data-bs-theme=dark] .swal2-title,
[data-bs-theme=dark] .swal2-html-container { color: var(--bs-emphasis-color); }