/* ============================================================
   More'mio Wellness Boutique — app.css
   Light gold/silver admin & client panel. Bootstrap light mode base.
   Brand palette: gold (from #BFB3A0) + silver (from #C7C9CA). Both
   ramps are lightness-matched tier for tier so a gold↔silver gradient
   never drifts contrast — only the hue shifts along the gradient.
   ============================================================ */

:root {
    --gold-deep:  #684F27;
    --gold-dim:   #7B5F32;  /* accessible gold — text, links, solid fills */
    --gold:       #9F7738;  /* base — hover/active states, icons, decor */
    --gold-lt:    #C29347;  /* light accent — gradients, highlights only */
    --gold-pale:  #E6D6BC;  /* palest — decorative tints only, never text */
    --gold-line:  rgba(159,119,56,.28);
    --gold-glow:  rgba(159,119,56,.12);

    --mist-deep:  #3F4750;
    --mist-dim:   #4C5761;  /* accessible silver — text, links, solid fills */
    --mist:       #5C6B7A;  /* base — hover/active states, icons, decor */
    --mist-lt:    #768593;  /* light accent — gradients, highlights only */
    --mist-pale:  #CCD1D6;  /* palest — decorative tints only, never text */
    --mist-line:  rgba(92,107,122,.28);
    --mist-glow:  rgba(92,107,122,.12);

    --dark:       #F7F4EF;  /* page background */
    --dark-2:     #FFFFFF;  /* card / dropdown / modal surface */
    --dark-3:     #EFEAE1;  /* secondary panel (kanban columns) */
    --cream:      #2B2620;  /* primary ink */
    --cream-dim:  #5E666E;  /* muted ink (cool) */
    --on-accent:  #FFFFFF;  /* text on solid gold/mist/status fills */

    /* Decorative metal sheen — full brightness range, borders/dividers only. */
    --metal-gradient: linear-gradient(100deg, var(--gold-dim) 0%, var(--gold-lt) 30%, var(--mist-lt) 55%, var(--mist-dim) 78%, var(--gold-dim) 100%);
    /* Text-safe metal sheen — lightness-matched stops only, for gradient text. */
    --metal-gradient-text: linear-gradient(100deg, var(--gold-dim) 0%, var(--gold) 35%, var(--mist) 65%, var(--mist-dim) 100%);

    --ff-serif:   'Cormorant Garamond', Georgia, serif;
    --ff-sans:    'Lato', 'Helvetica Neue', Arial, sans-serif;
}

@keyframes metalShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ── Bootstrap light-mode colour overrides ──────────────── */
[data-bs-theme="light"] {
    --bs-body-bg:             var(--dark);
    --bs-body-color:          var(--cream);
    --bs-body-color-rgb:      43, 38, 32;
    --bs-primary:             var(--gold-dim);
    --bs-primary-rgb:         123, 95, 50;
    --bs-secondary-bg:        var(--dark-3);
    --bs-tertiary-bg:         var(--dark-2);
    --bs-border-color:        var(--gold-line);
    --bs-border-color-subtle: rgba(159,119,56,.12);
    --bs-card-bg:             var(--dark-2);
    --bs-card-border-color:   var(--gold-line);
    --bs-card-cap-bg:         rgba(159,119,56,.05);
    --bs-link-color:          var(--gold-dim);
    --bs-link-hover-color:    var(--gold-deep);
    --bs-input-bg:            rgba(43,38,32,.015);
    --bs-input-border-color:  var(--gold-line);
    --bs-dropdown-bg:         var(--dark-2);
    --bs-dropdown-border-color: var(--gold-line);
    --bs-dropdown-link-hover-bg: rgba(159,119,56,.08);
    --bs-dropdown-link-hover-color: var(--gold-deep);
    --bs-table-bg:            transparent;
    --bs-table-color:         var(--cream);
    --bs-table-border-color:  rgba(159,119,56,.18);
    --bs-table-striped-bg:    rgba(43,38,32,.025);
    --bs-table-hover-bg:      rgba(159,119,56,.05);
}

/* ── Typography ─────────────────────────────────────────── */
body {
    font-family: var(--ff-sans);
    font-weight: 300;
    background-color: var(--dark);
    color: var(--cream);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ff-serif);
    font-weight: 400;
    color: var(--gold-dim);
}

/* ── Navbar ─────────────────────────────────────────────── */
/* Conteúdo dentro de .container (não toca nas margens) e presença mais
   forte: barra alta, linha metálica dourado↔prateado a separá-la da página. */
.navbar.bg-light,
.navbar.navbar-light {
    position: relative;
    z-index: 1030;
    background-color: var(--dark-2) !important;
    box-shadow: 0 2px 14px rgba(43,38,32,.07);
    padding-top: .7rem;
    padding-bottom: .7rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.navbar.bg-light::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--metal-gradient);
    background-size: 200% auto;
    animation: metalShimmer 7s linear infinite;
    pointer-events: none;
}
.navbar-brand {
    font-family: var(--ff-serif);
    font-size: 1.25rem;
    letter-spacing: .08em;
    color: var(--gold-dim) !important;
}
.navbar-brand:hover { color: var(--gold-deep) !important; }
.mermaid-logo { color: var(--gold-dim); fill: currentColor; }
.navbar-light .navbar-nav .nav-link {
    color: var(--cream-dim);
    padding-left: .75rem;
    padding-right: .75rem;
    border-bottom: 2px solid transparent;
}
.navbar-light .navbar-nav .nav-link:hover  { color: var(--gold-dim); border-bottom-color: var(--gold-line); }
.navbar-light .navbar-nav .nav-link.active { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(123,95,50,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    border-color: var(--gold-line);
    background-color: var(--dark-2);
    box-shadow: 0 1px 3px rgba(43,38,32,.05);
    position: relative;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--metal-gradient);
    pointer-events: none;
}
.card-header {
    border-bottom: 1px solid var(--gold-line);
    background-color: rgba(159,119,56,.04);
    font-family: var(--ff-serif);
    letter-spacing: .03em;
    color: var(--gold-dim);
}
.card-soft { border: 0; box-shadow: 0 1px 3px rgba(43,38,32,.08); }

/* ── Form controls ───────────────────────────────────────── */
.form-control,
.form-select {
    background-color: rgba(43,38,32,.02) !important;
    border-color: rgba(159,119,56,.30) !important;
    color: var(--cream) !important;
    border-radius: 2px;
}
.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF !important;
    border-color: var(--gold-dim) !important;
    box-shadow: 0 0 0 3px rgba(159,119,56,.15) !important;
    color: var(--cream) !important;
}
.form-control::placeholder { color: rgba(94,102,110,.55); }
.form-label {
    color: var(--cream-dim);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.form-text  { color: var(--cream-dim); opacity: .8; }
.form-check-input:checked {
    background-color: var(--gold-dim);
    border-color: var(--gold-dim);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(159,119,56,.2); }
.form-switch .form-check-input:checked { background-color: var(--gold-dim); border-color: var(--gold-dim); }

input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: sepia(1) saturate(2.4) hue-rotate(2deg) brightness(.75);
    opacity: .8;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:              var(--gold-dim);
    --bs-btn-border-color:    var(--gold-dim);
    --bs-btn-color:           var(--on-accent);
    --bs-btn-hover-bg:        var(--gold-deep);
    --bs-btn-hover-border-color: var(--gold-deep);
    --bs-btn-hover-color:     var(--on-accent);
    --bs-btn-active-bg:       var(--gold-deep);
    --bs-btn-active-border-color: var(--gold-deep);
    --bs-btn-active-color:    var(--on-accent);
    --bs-btn-focus-shadow-rgb: 123, 95, 50;
    --bs-btn-disabled-bg:     var(--gold-lt);
    --bs-btn-disabled-border-color: var(--gold-lt);
    background-image: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 100%);
    font-family: var(--ff-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
}
.btn-outline-primary {
    --bs-btn-color:           var(--gold-dim);
    --bs-btn-border-color:    var(--gold-dim);
    --bs-btn-hover-bg:        var(--gold-dim);
    --bs-btn-hover-border-color: var(--gold-dim);
    --bs-btn-hover-color:     var(--on-accent);
    --bs-btn-active-bg:       var(--gold-deep);
    --bs-btn-active-border-color: var(--gold-deep);
    --bs-btn-active-color:    var(--on-accent);
    --bs-btn-focus-shadow-rgb: 123, 95, 50;
}
.btn-outline-secondary {
    --bs-btn-color:           var(--cream-dim);
    --bs-btn-border-color:    rgba(159,119,56,.35);
    --bs-btn-hover-bg:        rgba(159,119,56,.08);
    --bs-btn-hover-border-color: var(--gold-dim);
    --bs-btn-hover-color:     var(--gold-deep);
}
.btn-outline-light {
    --bs-btn-color:           var(--cream-dim);
    --bs-btn-border-color:    var(--gold-line);
    --bs-btn-hover-bg:        var(--gold-dim);
    --bs-btn-hover-border-color: var(--gold-dim);
    --bs-btn-hover-color:     var(--on-accent);
    --bs-btn-focus-shadow-rgb: 123, 95, 50;
}
.btn-outline-danger {
    --bs-btn-color:           #8F4D3F;
    --bs-btn-border-color:    rgba(143,77,63,.5);
    --bs-btn-hover-bg:        rgba(143,77,63,.12);
    --bs-btn-hover-border-color: #8F4D3F;
    --bs-btn-hover-color:     #723E32;
}

/* ── Tables ──────────────────────────────────────────────── */
.table th {
    color: var(--gold-dim);
    font-family: var(--ff-serif);
    font-weight: 400;
    letter-spacing: .06em;
    border-bottom-color: rgba(159,119,56,.35) !important;
}
.table td { vertical-align: middle; }
.table-actions form { display: inline; }

/* ── Badges ──────────────────────────────────────────────── */
.badge.text-bg-primary   { background-color: var(--gold-dim) !important; color: var(--on-accent) !important; }
.badge.text-bg-secondary { background-color: var(--dark-3) !important; color: var(--cream-dim) !important; border: 1px solid var(--gold-line); }
.badge.text-bg-info      { background-color: rgba(92,107,122,.14) !important; color: var(--mist-dim) !important; border: 1px solid var(--mist-line); }
.badge.text-bg-warning   { background-color: #816329 !important; color: #FFF6E4 !important; }
.badge.text-bg-success   { background-color: #5C6B4C !important; color: #F1F4EC !important; }
.badge.text-bg-danger    { background-color: rgba(143,77,63,.14) !important; color: #8F4D3F !important; border: 1px solid rgba(143,77,63,.4); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert-success {
    background-color: rgba(92,107,76,.12);
    border-color: rgba(92,107,76,.4);
    color: #5C6B4C;
}
.alert-danger {
    background-color: rgba(143,77,63,.12);
    border-color: rgba(143,77,63,.4);
    color: #8F4D3F;
}
.alert-info {
    background-color: rgba(92,107,122,.10);
    border-color: var(--mist-line);
    color: var(--mist-dim);
}
.alert-warning {
    background-color: rgba(129,99,41,.14);
    border-color: rgba(129,99,41,.4);
    color: #816329;
}

/* ── Dropdown ────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--dark-2);
    border-color: var(--gold-line);
    box-shadow: 0 10px 28px rgba(43,38,32,.12);
}
.dropdown-item { color: var(--cream-dim); }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(159,119,56,.08);
    color: var(--gold-deep);
}
.dropdown-divider { border-top-color: var(--gold-line); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-content {
    background-color: var(--dark-2);
    border: 1px solid var(--gold-line);
}
.modal-header {
    border-bottom: 1px solid var(--gold-line);
    font-family: var(--ff-serif);
}
.modal-footer { border-top: 1px solid var(--gold-line); }

/* ── Footer ──────────────────────────────────────────────── */
.border-top { border-top-color: var(--gold-line) !important; }
footer, .site-footer { color: var(--cream-dim); }

/* ── Misc ────────────────────────────────────────────────── */
.fs-7 { font-size: .85rem; }
hr    { border-color: var(--gold-line); opacity: 1; }

/* ── Kanban board (includes/widget_kanban.php) ──────────── */
.kanban-board {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    /* Altura medida em JS (widget_kanban.php); o calc() é só o arranque.
       As colunas rolam por dentro, não a página. */
    height: var(--kanban-height, calc(100vh - 260px));
}
.kanban-column {
    flex: 1 1 17rem;
    min-width: 15rem;
    height: 100%;
    min-height: 0;
    background: var(--dark-3);
    border: 1px solid var(--gold-line);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
}
.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .85rem;
    border-bottom: 3px solid var(--col-accent, var(--gold-dim));
    font-weight: 600;
    color: var(--gold-dim);
    font-family: var(--ff-serif);
    letter-spacing: .04em;
}
.kanban-column-body {
    flex: 1;
    min-height: 80px;
    padding: .65rem;
    overflow-y: auto;
}
.kanban-card {
    background: var(--dark-2);
    border-radius: .35rem;
    padding: .65rem .75rem;
    margin-bottom: .5rem;
    border: 1px solid var(--gold-line);
    border-left: 4px solid var(--col-accent, var(--gold-dim));
    box-shadow: 0 1px 2px rgba(43,38,32,.06);
    cursor: grab;
    transition: border-color .15s, background .15s;
}
.kanban-card:hover { background: var(--gold-glow); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.sortable-ghost { opacity: .35; }
.kanban-card.sortable-chosen { box-shadow: 0 4px 12px rgba(43,38,32,.18); }
.kanban-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .25rem;
}
.kanban-card-head > :last-child { flex: 0 0 auto; }
.kanban-card .meta { color: var(--cream-dim); font-size: .8rem; }
.kanban-card .actions { display: flex; gap: .25rem; }
/* Email já enviado a partir do cartão: visto sobre o botão. */
.kanban-card .notify-email { position: relative; }
.kanban-card .notify-email.is-sent {
    border-color: var(--bs-success);
    color: var(--bs-success);
}
.kanban-empty {
    text-align: center;
    font-size: .85rem;
    font-style: italic;
    color: var(--cream-dim);
    padding: 1rem .5rem;
    border: 2px dashed var(--gold-line);
    border-radius: .35rem;
}
/* Acende o quadro enquanto há um cartão na mão. */
.kanban-board.is-dragging .kanban-column-body {
    background: var(--gold-glow);
    outline: 2px dashed var(--gold-line);
    outline-offset: -4px;
    border-radius: .35rem;
}
.kanban-toasts { z-index: 1080; }
@media (max-width: 767.98px) {
    .kanban-column { min-width: 85vw; flex: 0 0 85vw; }
}
@media (prefers-reduced-motion: reduce) {
    .kanban-card { transition: none; }
}

/* ── Colour dot (service/room swatch) ───────────────────── */
.dot {
    display: inline-block;
    width: .65rem; height: .65rem;
    border-radius: 50%;
    background: var(--gold-dim);
    margin-right: .15rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Status chips ────────────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: .7rem; height: .7rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: .25rem;
}

/* ── Scrollbar (webkit) ─────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dark-3); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }