/* =====================================================================
   Salon Theme — Global visual layer inspired by Fresha / Booksy
   ---------------------------------------------------------------------
   This file does NOT touch any blade template markup. It re-skins the
   shared AdminLTE / Bootstrap 3 / DataTables / Select2 components that
   almost every legacy screen in the system already uses (box, table,
   btn, modal, form-control, pagination, tabs, calendar...). Because
   nearly every screen shares these same classes, this one file lifts
   the visual feel of the whole system at once, instead of needing to
   hand-edit every individual screen.

   Loaded last (after AdminLTE + Tailwind + rtl.css) in
   layouts/partials/css.blade.php so it wins the cascade.

   Colors reuse the existing --theme-700/800/900 CSS variables already
   set per-business (see css.blade.php) so this respects whatever brand
   color the business picked in Settings, instead of hardcoding a new
   one.
   ===================================================================== */

:root {
    /* Warm, low-glare neutrals (easier on the eyes over a long shift than the
       previous cool blue-gray palette) paired with a black & gold brand accent -
       an elegant, classic look for a men's barbershop while staying professional.
       Everything below still flows through --theme-700/800/900 (set per-business
       in css.blade.php), so this is purely the neutral/backdrop layer. */
    --salon-bg: #faf8f5;
    --salon-card-bg: #ffffff;
    --salon-border: #ece6dd;
    --salon-text: #26211c;
    --salon-text-muted: #7a7168;
    --salon-radius: 16px;
    --salon-radius-sm: 10px;
    --salon-shadow: 0 1px 3px rgba(41, 32, 20, 0.06), 0 1px 2px rgba(41, 32, 20, 0.04);
    --salon-shadow-hover: 0 6px 18px rgba(41, 32, 20, 0.10);

    --salon-success: #12b76a;
    --salon-success-bg: #e6f9f0;
    --salon-warning: #f79009;
    --salon-warning-bg: #fef3e2;
    --salon-danger: #f04438;
    --salon-danger-bg: #fdeceb;
    --salon-info: #0ea5e9;
    --salon-info-bg: #e6f6fd;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body {
    background-color: var(--salon-bg) !important;
}

/* Dashboard hero banner ONLY - a real barbershop photo behind the brand-color
   gradient (recreated with color-mix so it still follows whatever theme color
   the business picked) instead of a flat color block. Scoped to the
   `.salon-hero-photo` marker class (added only in home/index.blade.php) so
   this never touches the plain `.theme-header-bg` used for the thin top
   navbar on every other page (layouts/partials/header.blade.php) - a full
   photo there would look cropped/broken on a ~60px strip. */
.theme-header-bg.salon-hero-photo {
    background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--theme-800, #262626) 85%, transparent), color-mix(in srgb, var(--theme-900, #141414) 92%, transparent)),
        url('https://images.pexels.com/photos/32329615/pexels-photo-32329615/free-photo-of-professional-haircut-at-modern-barbershop.jpeg?h=800&w=1600&fit=crop');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

.content-header > h1,
.content-header > h1 > small {
    font-weight: 700;
    color: var(--salon-text);
}

/* ---------------------------------------------------------------------
   Cards ("box" is AdminLTE's card component - used on almost every
   legacy screen: lists, forms, filters, reports...)
   --------------------------------------------------------------------- */
.box {
    border-radius: var(--salon-radius);
    border: 1px solid var(--salon-border);
    box-shadow: var(--salon-shadow);
    transition: box-shadow .15s ease;
}

/* Only force the white card background when the box doesn't already carry
   an explicit AdminLTE bg-* color utility (e.g. box box-solid bg-orange in
   the POS payment modal / customer display screen) - otherwise this rule
   would silently override those intentional colored panels since .box and
   .bg-orange have equal CSS specificity and this file loads last. */
.box:not([class*="bg-"]) {
    background: var(--salon-card-bg);
}

.box:hover {
    box-shadow: var(--salon-shadow-hover);
}

.box.box-solid {
    border: 1px solid var(--salon-border);
}

.box-header {
    border-top-left-radius: var(--salon-radius);
    border-top-right-radius: var(--salon-radius);
    padding: 16px 18px 12px;
}

.box-header:not([class*="bg-"]) {
    background: transparent;
}

.box-header.with-border {
    border-bottom: 1px solid var(--salon-border);
}

.box-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--salon-text);
}

.box-body {
    padding: 16px 18px;
}

.box.box-primary,
.box.box-primary > .box-header {
    border-top: 3px solid var(--theme-700, #C9A227);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: none;
}

.btn-primary,
.btn-primary:focus {
    background-color: var(--theme-700, #C9A227);
    border-color: var(--theme-700, #C9A227);
}

.btn-primary:hover {
    background-color: var(--theme-800, #262626);
    border-color: var(--theme-800, #262626);
}

.btn-success { background-color: var(--salon-success); border-color: var(--salon-success); }
.btn-danger  { background-color: var(--salon-danger);  border-color: var(--salon-danger); }
.btn-warning { background-color: var(--salon-warning); border-color: var(--salon-warning); }
.btn-info    { background-color: var(--salon-info);    border-color: var(--salon-info); }

.btn-default {
    background-color: #fff;
    border-color: #d7dbe3;
    color: var(--salon-text);
}

.btn-default:hover {
    background-color: #f5f6fa;
}

.btn.btn-flat {
    border-radius: 10px;
}

/* Small reusable pill/badge classes for anything new we add (safe to
   use anywhere - plain CSS, no Tailwind build step required) */
.salon-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.salon-badge-success { background: var(--salon-success-bg); color: var(--salon-success); }
.salon-badge-warning { background: var(--salon-warning-bg); color: var(--salon-warning); }
.salon-badge-danger  { background: var(--salon-danger-bg);  color: var(--salon-danger); }
.salon-badge-info    { background: var(--salon-info-bg);    color: var(--salon-info); }
.salon-badge-neutral { background: #eef0f4; color: var(--salon-text-muted); }

.salon-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background-color: var(--theme-700, #C9A227);
    border-radius: 999px;
    padding: 8px 20px;
    height: 36px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.salon-btn-accent:hover,
.salon-btn-accent:focus {
    background-color: var(--theme-800, #262626);
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   Tables / DataTables (used by almost every list screen: contacts,
   products, sales, expenses, roles...)
   --------------------------------------------------------------------- */
.table > thead > tr > th {
    border-bottom: 1px solid var(--salon-border);
    color: var(--salon-text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--salon-border);
    vertical-align: middle;
    color: var(--salon-text);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--salon-border);
}

.table-hover > tbody > tr:hover {
    background-color: #fafbfc;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: 8px;
    border: 1px solid #d7dbe3;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--theme-700, #C9A227) !important;
    border-color: var(--theme-700, #C9A227) !important;
    color: #fff !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: .35;
}

/* ---------------------------------------------------------------------
   Forms / Select2
   --------------------------------------------------------------------- */
.form-control {
    border-radius: 10px;
    border: 1px solid #d7dbe3;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--theme-700, #C9A227);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-700, #C9A227) 15%, transparent);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px;
    border: 1px solid #d7dbe3;
    min-height: 34px;
}

/* ---------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------- */
.modal-content {
    border-radius: 18px;
    border: none;
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
}

.modal-header {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom: 1px solid var(--salon-border);
}

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

/* ---------------------------------------------------------------------
   Tabs / labels used across settings & report screens
   --------------------------------------------------------------------- */
.nav-tabs > li > a {
    border-radius: 10px 10px 0 0;
    font-weight: 600;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom: 3px solid var(--theme-700, #C9A227);
    color: var(--theme-700, #C9A227);
}

.label {
    border-radius: 999px;
    font-weight: 700;
    padding: .3em .7em;
}

/* ---------------------------------------------------------------------
   Booking calendar (FullCalendar) - status legend blocks + event tiles
   --------------------------------------------------------------------- */
.external-event {
    border-radius: 10px !important;
    font-weight: 700;
    padding: 8px !important;
    margin-bottom: 6px !important;
    cursor: grab;
}

.fc-event {
    border-radius: 8px !important;
    border: none !important;
    padding: 2px 4px !important;
}

.fc-day-grid-event {
    font-weight: 600;
}

.fc-toolbar .fc-button {
    border-radius: 8px !important;
    text-shadow: none !important;
    background-image: none !important;
    background-color: #fff !important;
    border: 1px solid #d7dbe3 !important;
    color: var(--salon-text) !important;
}

.fc-toolbar .fc-button.fc-state-active,
.fc-toolbar .fc-button:hover {
    background-color: var(--theme-700, #C9A227) !important;
    color: #fff !important;
    border-color: var(--theme-700, #C9A227) !important;
}

.fc-unthemed .fc-today {
    background: var(--salon-warning-bg) !important;
}

/* ---------------------------------------------------------------------
   Contacts/customers list - hide retail-only columns (business name,
   custom fields 1-10) that don't apply to a salon's individual walk-in
   customers. CSS-only (nth-child), so the underlying DataTable/export/
   search/column-index wiring in app.js is completely untouched - safer
   than removing columns from the table markup itself.
   --------------------------------------------------------------------- */
.salon-contacts-declutter th:nth-child(3),
.salon-contacts-declutter td:nth-child(3),
.salon-contacts-declutter th:nth-last-child(-n+10),
.salon-contacts-declutter td:nth-last-child(-n+10) {
    display: none;
}

/* Small stat pill row above the contacts table */
.salon-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.salon-stat-pill {
    flex: 1 1 160px;
    background: var(--salon-card-bg);
    border: 1px solid var(--salon-border);
    border-radius: var(--salon-radius-sm);
    box-shadow: var(--salon-shadow);
    padding: 12px 16px;
}
.salon-stat-pill .salon-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--salon-text);
    line-height: 1.2;
}
.salon-stat-pill .salon-stat-label {
    font-size: 12px;
    color: var(--salon-text-muted);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Chair / staff picker (POS screen) - click-to-open grid of colored chips
   instead of a plain <select> dropdown. Green = free, red = occupied/busy.
   --------------------------------------------------------------------- */
.salon-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--salon-text);
    cursor: pointer;
    transition: border-color .15s ease;
}
.salon-picker-btn:hover {
    border-color: var(--theme-700, #C9A227);
}
.salon-picker-btn i.fa-chevron-down {
    font-size: 10px;
    color: var(--salon-text-muted);
}
.salon-picker-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salon-picker-panel {
    position: absolute;
    z-index: 500;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--salon-card-bg);
    border: 1px solid var(--salon-border);
    border-radius: var(--salon-radius-sm);
    box-shadow: var(--salon-shadow-hover);
    padding: 12px;
    max-height: 260px;
    overflow-y: auto;
}

.salon-picker-legend {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--salon-text-muted);
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--salon-border);
}
.salon-picker-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.salon-chip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.salon-chip-dot-free { background: var(--salon-success); }
.salon-chip-dot-busy { background: var(--salon-danger); }

.salon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.salon-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    transition: transform .1s ease, box-shadow .1s ease;
}
.salon-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.salon-chip i {
    font-size: 15px;
}
.salon-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(41, 32, 20, 0.12);
}
.salon-chip-free {
    background: var(--salon-success-bg);
    color: var(--salon-success);
}
.salon-chip-busy {
    background: var(--salon-danger-bg);
    color: var(--salon-danger);
}
.salon-chip-selected {
    border-color: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}
.salon-chip-specialty {
    font-size: 9.5px;
    font-weight: 600;
    opacity: 0.75;
}

/* ===== POS service tile (product_list.blade.php) =====
   Services (enable_stock = 0) get a clean, colour-coded icon instead of a
   generic/mismatched stock photo, plus more breathing room than the tight
   retail-product tile so names/prices are easy to read at a glance. */
.salon-svc-tile {
    padding: 10px 8px !important;
}
.salon-svc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    flex-shrink: 0;
}
.salon-svc-icon i {
    font-size: 19px;
}
.salon-svc-icon-hair {
    background: #FDECD8;
    color: #92400E;
}
.salon-svc-icon-skin {
    background: #FCE7F0;
    color: #9D174D;
}
.salon-svc-icon-nails {
    background: #EDE9FE;
    color: #6D28D9;
}
.salon-svc-icon-care {
    background: #DCFCE7;
    color: #15803D;
}
.salon-svc-icon-packages {
    background: #E0E7FF;
    color: #4338CA;
}
.salon-svc-icon-default {
    background: #F3F1EC;
    color: #7A7168;
}
.salon-svc-name {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--salon-text, #26211c);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.salon-svc-duration {
    display: inline-block;
    font-size: 10px;
    color: var(--salon-text-muted, #7a7168);
    margin-top: 2px;
}
.salon-svc-price {
    font-size: 12.5px;
    font-weight: 700;
    color: #15803d;
    margin-top: 3px;
    display: block;
}

/* ===== POS screen — unified with the black & gold dashboard theme =====
   Only overrides colour (icons, badges, hover/focus rings) via existing
   IDs/classes already in header-pos.blade.php and pos_sidebar.blade.php -
   no markup or JS hooks touched, so nothing about how the screen behaves
   changes. Red stays red on return-sale/close-register (still means
   "careful, meaningful action") and gray stays gray on suspended-sales;
   every other icon/accent that was an unrelated rainbow colour (indigo,
   violet, green, amber) now uses the theme gold so the page reads as one
   consistent brand instead of a mix of random hues. */
#pos_header_more_options #recent-transactions svg,
#pos_header_more_options #register_details svg,
#pos_header_more_options #show_service_staff_availability svg,
#pos_header_more_options #service_staff_replacement svg,
#pos_header_more_options #btnCalculator svg,
#pos_header_more_options #full_screen svg,
#pos_header_more_options #customer_display_screen svg,
#pos_header_more_options a[href*="pos-sale"] svg,
.pos-header a[title] svg.icon-tabler-chevron-left {
    color: var(--theme-700) !important;
}
.pos-header .curr_datetime,
.pos-header div[class*="tw-bg-[#646EE4]"] {
    background-color: var(--theme-800) !important;
}
.pos-header div[class*="tw-bg-[#646EE4]"]:hover {
    background-color: var(--theme-900) !important;
}

/* Category / brand / featured filter chips - same gold accent instead of
   indigo/violet/amber, so the whole top filter row matches the theme. */
#product_category_div label:hover,
#product_brand_div label:hover,
#feature_product_div #show_featured_products:hover {
    background-color: color-mix(in srgb, var(--theme-700) 8%, white) !important;
    border-color: var(--theme-700) !important;
    box-shadow: none !important;
}
#product_category_div label svg,
#product_brand_div label svg,
#feature_product_div #show_featured_products svg {
    color: var(--theme-700) !important;
}
.pos-active-filter-badge,
.pos-count-badge {
    background-color: color-mix(in srgb, var(--theme-700) 10%, white) !important;
    border-color: color-mix(in srgb, var(--theme-700) 30%, white) !important;
    color: var(--theme-800) !important;
}
.pos-filter-chip-clear {
    color: var(--theme-700) !important;
}
.pos-drawer-panel .pos-card.cat:hover,
.pos-drawer-panel .pos-card.brand:hover,
.main-category-div.active .pos-card,
.product_category.active .pos-card,
.product_brand.active .pos-card {
    border-color: var(--theme-700) !important;
    color: var(--theme-800) !important;
}

/* Bottom action bar - secondary icon buttons (draft/quotation/credit sale/card)
   unified to gold; "recent transactions" pill and the multi-pay button use the
   charcoal shade instead of their old random purple/navy. Express cash (green)
   and cancel/suspend (red) are left untouched - those colours carry real
   meaning (go / stop) and changing them would make the screen less clear,
   not more. */
.pos-form-actions #pos-draft i,
.pos-form-actions #pos-quotation i,
.pos-form-actions button[data-pay_method="credit_sale"] i,
.pos-form-actions button[data-pay_method="card"] i {
    color: var(--theme-700) !important;
}
.pos-form-actions button[class*="tw-bg-[#646EE4]"],
.pos-form-actions button[class*="tw-bg-[#001F3E]"] {
    background-color: var(--theme-800) !important;
}
.pos-form-actions button[class*="tw-bg-[#646EE4]"]:hover,
.pos-form-actions button[class*="tw-bg-[#001F3E]"]:hover {
    background-color: var(--theme-900) !important;
}