/* E-cut — Brand refresh & global responsive safety net
   Loaded AFTER Bootstrap and the page-specific stylesheet on every layout,
   so it can safely override tokens without duplicating each stylesheet. */

:root {
    /* Warm, African-inspired palette (terracotta / gold / deep charcoal)
       replacing the previous plain Bootstrap blue for a more distinctive,
       on-brand look across every role's layout. */
    --ecut-primary:      #b3541e;   /* terracotta */
    --ecut-primary-dark: #7a3b12;   /* deep terracotta / brand ink */
    --ecut-accent:       #e0a02c;   /* warm gold */
    --ecut-accent-2:     #2f8f7a;   /* teal — secondary accent for success/positive */
    --ecut-bg:           #f7f5f2;   /* warm off-white background */
    --ecut-ink:          #2a2320;   /* near-black warm text color */

    /* Keep Bootstrap's own variable names in sync so existing .btn-primary,
       .bg-primary, form focus rings, etc. pick up the new palette without
       every template needing to be rewritten class-by-class. */
    --bs-primary: var(--ecut-primary);
    --bs-primary-rgb: 179, 84, 30;
}

/* ---------- Global responsive safety net ---------- */
/* Prevents any single wide element (a table, a long code string, an
   un-wrapped map, an iframe) from pushing the whole page into horizontal
   scroll — the most common cause of "page is shifted/cut off" on mobile. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
* { box-sizing: border-box; }

img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

table { max-width: 100%; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

pre, code { white-space: pre-wrap; word-break: break-word; }

/* Full-bleed, fluid content containers — pages should occupy the full
   available width and reflow smoothly rather than having a fixed max-width
   that leaves dead space or, worse, causes clipping on narrow screens. */
.container, .container-fluid,
.admin-main, .client-main, .hd-main {
    width: 100%;
}

/* Leaflet / Google map containers: always fluid width, fixed sane height. */
#salonMap, .leaflet-container, .gmap-container {
    width: 100% !important;
    max-width: 100%;
}

/* ---------- Brand touch-ups (kept minimal & additive) ---------- */
a { color: var(--ecut-primary); }
a:hover { color: var(--ecut-primary-dark); }

.btn-primary {
    background-color: var(--ecut-primary);
    border-color: var(--ecut-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ecut-primary-dark);
    border-color: var(--ecut-primary-dark);
}
.btn-outline-primary {
    color: var(--ecut-primary);
    border-color: var(--ecut-primary);
}
.btn-outline-primary:hover {
    background-color: var(--ecut-primary);
    border-color: var(--ecut-primary);
}

.text-primary { color: var(--ecut-primary) !important; }
.bg-primary   { background-color: var(--ecut-primary) !important; }

.badge.bg-success { background-color: var(--ecut-accent-2) !important; }

.form-control:focus, .form-select:focus {
    border-color: var(--ecut-primary);
    box-shadow: 0 0 0 .2rem rgba(179, 84, 30, .15);
}

/* Sidebars / topbars that used a flat dark or blue previously now share the
   same brand-ink gradient for visual consistency across admin, hairdresser
   and client shells. */
.admin-sidebar, .hd-sidebar, .navbar.bg-dark {
    background: linear-gradient(180deg, var(--ecut-primary-dark), #3d2410) !important;
}
.client-topbar {
    background: linear-gradient(135deg, var(--ecut-primary), var(--ecut-primary-dark)) !important;
}

/* ---------- Notification bell ---------- */
.ecut-notif-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; color: inherit; font-size: 1.15rem;
    background: rgba(0,0,0,.04);
    transition: background .15s;
}
.ecut-notif-bell:hover { background: rgba(0,0,0,.08); }
.navbar .ecut-notif-bell { background: rgba(255,255,255,.12); color: #fff; }
.navbar .ecut-notif-bell:hover { background: rgba(255,255,255,.22); }

/* The "bulle numérotée" — numbered bubble badge */
.ecut-notif-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px;
    background: #dc3545; color: #fff;
    font-size: .65rem; font-weight: 700; line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

@keyframes ecutNotifRing {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(5deg); }
}
.ecut-notif-ring { animation: ecutNotifRing .6s ease-in-out; }

.ecut-notif-panel {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 340px; max-width: 90vw; max-height: 70vh; overflow-y: auto;
    background: #fff; border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    z-index: 1080;
}
.ecut-notif-panel.show { display: block; }
.ecut-notif-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem; border-bottom: 1px solid #eee; font-weight: 700;
}
.ecut-notif-item {
    display: block; padding: .65rem 1rem; border-bottom: 1px solid #f3f3f3;
    text-decoration: none; color: inherit;
}
.ecut-notif-item:hover { background: #f9f7f5; }
.ecut-notif-item.unread { background: #fff7ee; border-left: 3px solid var(--ecut-accent); }
.ecut-notif-wrap { position: relative; }

@media (max-width: 480px) {
    h1 { font-size: 1.4rem; }
    .fs-4 { font-size: 1.15rem !important; }
    .ecut-notif-panel { width: 92vw; right: -8px; }
}