/* ESD Glow on the laundry-pos theme: the brand's lotus pink accent, the sectioned icon rail and the salon screens. */

:root {
    /* ESD Glow brand (ESD POS Core brand/README.md): lotus accent on the graphite tile. */
    --primary: #C93F8A;
    --primary-rgb: 201, 63, 138;
    --primary-hover: #A93273;
    --primary-700: #D56CA5;
    --primary-500: #E08FBB;
    --primary-300: #EDB9D5;
    --primary-100: #F8E3EE;
    --primary-transparent: #FCEFF6;
    --primary-gradient: linear-gradient(270deg, #FF8AC8 0%, #C93F8A 100%);
    --glow-graphite: #1B1F25;
    --glow-accent-dark: #FF8AC8;
}

:root[data-bs-theme=dark] {
    --primary: #FF8AC8;
    --primary-rgb: 255, 138, 200;
    --primary-hover: #FFA3D4;
    --primary-100: #2E1222;
    --primary-300: #4A1D36;
    --primary-transparent: #2A1220;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-control:focus, .form-select:focus { border-color: var(--primary-300); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15); }
:focus-visible { outline-color: var(--primary); }

/* Sidebar rail with section menus */
.sidebar.sidebar .sidebar-nav .nav-link {
    width: 52px;
    height: auto;
    min-height: 44px;
    margin-bottom: 14px;
    gap: 2px;
}

.glow-rail-label {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.glow-rail-menu {
    min-width: 240px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1060;
}

.glow-rail-menu .dropdown-item.active,
.glow-rail-menu .dropdown-item:active {
    background-color: var(--primary);
    color: #fff;
}

.logo-small img { width: 34px; height: 34px; }
.navbar-header .logo img { height: 36px; width: auto; }

.glow-page-header h4 { font-size: 20px; }

.glow-auth .login-userheading h3 { margin-bottom: 4px; }
.glow-auth .login-userheading h4 { font-size: 15px; font-weight: 400; margin-bottom: 24px; }

.glow-auth-panel {
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12), transparent 45%), linear-gradient(160deg, var(--glow-graphite) 0%, #3A2030 55%, #C93F8A 100%);
}

/* Calendar: one column per stylist or room, 15-minute rows */
.glow-calendar {
    --glow-slot: 22px;
    display: grid;
    grid-template-columns: 56px repeat(var(--glow-cols), minmax(150px, 1fr));
    overflow-x: auto;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--white, #fff);
}

.glow-calendar-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--light, #f8f8f8);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 8px;
    font-weight: 600;
    font-size: 13px;
    min-height: 48px;
}

.glow-calendar-times,
.glow-calendar-col {
    position: relative;
    height: calc(var(--glow-rows) * var(--glow-slot));
}

.glow-calendar-col {
    border-left: 1px solid var(--border-color, #e5e7eb);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--glow-slot) * 4 - 1px), var(--border-color, #eee) calc(var(--glow-slot) * 4 - 1px), var(--border-color, #eee) calc(var(--glow-slot) * 4));
}

.glow-calendar-off {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .03) 6px, rgba(0, 0, 0, .06) 6px, rgba(0, 0, 0, .06) 12px);
    pointer-events: none;
}

.glow-calendar-hour {
    position: absolute;
    right: 6px;
    font-size: 11px;
    color: var(--light-500, #6b7280);
    transform: translateY(-50%);
}

.glow-event {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    color: #fff;
    background: var(--primary);
    border-left: 4px solid rgba(0, 0, 0, .18);
    text-decoration: none;
    z-index: 1;
}

.glow-event:hover { color: #fff; filter: brightness(1.05); z-index: 3; }
.glow-event small { opacity: .9; display: block; }
.glow-event.is-requested { background: #8E7CC3; }
.glow-event.is-confirmed { background: var(--primary); }
.glow-event.is-booked { background: #D56CA5; }
.glow-event.is-arrived { background: #F2B544; color: #1B1F25; }
.glow-event.is-in_service { background: #2E8B57; }
.glow-event.is-completed { background: #6B7280; }
.glow-event.is-no_show,
.glow-event.is-cancelled { background: #9CA3AF; text-decoration: line-through; }
.glow-event.needs-attention { box-shadow: 0 0 0 2px #DC2626; }

.glow-week td { vertical-align: top; min-width: 140px; }
.glow-week .glow-chip { display: block; border-radius: 6px; padding: 4px 6px; margin-bottom: 4px; font-size: 12px; color: #fff; background: var(--primary); text-decoration: none; }
.glow-week .glow-chip.is-completed { background: #6B7280; }
.glow-week .glow-chip.is-requested { background: #8E7CC3; }
.glow-week .glow-chip.is-arrived { background: #F2B544; color: #1B1F25; }

.glow-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

.glow-line {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.glow-line .form-label { font-size: 12px; margin-bottom: 2px; }

.glow-queue-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--primary-transparent);
    color: var(--primary);
}

.glow-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Public booking page */
.glow-book-hero { background: linear-gradient(160deg, var(--glow-graphite) 0%, #3A2030 55%, #C93F8A 100%); color: #fff; }
.glow-slot-btn { min-width: 76px; }
.glow-slot-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

@media (max-width: 575.98px) {
    .glow-calendar { --glow-slot: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .glow-event { transition: none; }
}