/* ==========================================================================
   Studio M — UI System
   Design system único dos painéis (Admin, Receção, Desenvolvedor).
   Ativo apenas em <body class="ui-app">, por isso o site público não muda.
   Carregar DEPOIS das folhas de estilo do template/páginas.
   Componentes: tokens · labels · inputs · selects (nativo + .ui-select) ·
   validação · checkboxes · botões · tabelas · status · avatares ·
   cards/modais · paginação · alertas · calendário.
   ========================================================================== */

:root {
    /* Brand */
    --ui-brand: #a37602;
    --ui-brand-600: #8a6402;
    --ui-brand-50: #fdf8ec;
    --ui-brand-100: #f7edd3;
    --ui-ring: 0 0 0 3px rgba(163, 118, 2, 0.18);

    /* Neutrals */
    --ui-bg: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-surface-2: #f9fafb;
    --ui-border: #e3e6ec;
    --ui-border-strong: #c9ced8;
    --ui-text: #1f2430;
    --ui-text-2: #4b5363;
    --ui-muted: #7a8293;
    --ui-placeholder: #a2a9b6;

    /* Semantic */
    --ui-success: #0f8a5f;  --ui-success-bg: #e9f8f1; --ui-success-bd: #c7ecdb;
    --ui-warning: #b45309;  --ui-warning-bg: #fff6e5; --ui-warning-bd: #fbe2b5;
    --ui-danger: #c0362c;   --ui-danger-bg: #fdeeed;  --ui-danger-bd: #f7cfcb;
    --ui-info: #4f46e5;     --ui-info-bg: #eef0ff;    --ui-info-bd: #d9dcfb;
    --ui-neutral: #5b6475;  --ui-neutral-bg: #f1f3f6; --ui-neutral-bd: #e1e5eb;
    --ui-danger-ring: 0 0 0 3px rgba(192, 54, 44, 0.15);

    /* Shape & depth */
    --ui-radius-sm: 8px;
    --ui-radius: 10px;
    --ui-radius-lg: 14px;
    --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05);
    --ui-shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);

    /* Controls */
    --ui-control-h: 42px;
    --ui-control-h-sm: 34px;
    --ui-font: 'Inter', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ui-ease: 0.18s ease;
}

/* --------------------------------------------------------------------------
   Token bridge — older pages define their own palette on :root
   (financial_dashboard.css → --financial-*, recepção dashboard → --cal-*).
   Redefining them on body maps every page onto the same design system.
   -------------------------------------------------------------------------- */
body.ui-app {
    --financial-primary: var(--ui-brand);
    --financial-secondary: var(--ui-brand);
    --financial-success: var(--ui-success);
    --financial-warning: #d97706;
    --financial-danger: var(--ui-danger);

    --cal-primary: var(--ui-brand);
    --cal-primary-dark: var(--ui-brand-600);
    --cal-primary-light: var(--ui-brand-50);
    --cal-today-bg: var(--ui-brand);
    --cal-today-fg: #ffffff;
    --cal-success: var(--ui-success);
    --cal-success-light: var(--ui-success-bg);
    --cal-warning: #d97706;
    --cal-warning-light: var(--ui-warning-bg);
    --cal-danger: var(--ui-danger);
    --cal-danger-light: var(--ui-danger-bg);
    --cal-info: var(--ui-info);
    --cal-info-light: var(--ui-info-bg);
    --cal-border: var(--ui-border);
    --cal-text: var(--ui-text);
    --cal-text-muted: var(--ui-muted);
    --cal-radius: var(--ui-radius);
    --cal-hover: #faf7ef;

    --sm-gold: var(--ui-brand);
}
/* --------------------------------------------------------------------------
   Labels & help text
   -------------------------------------------------------------------------- */
body.ui-app .form-label,
body.ui-app .col-form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ui-text-2);
    letter-spacing: 0.005em;
}

body.ui-app .form-label i,
body.ui-app .col-form-label i {
    color: var(--ui-muted);
}

body.ui-app .form-text {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--ui-muted);
}

/* Required marker: <label class="form-label is-required"> or label + [required] handled in JS */
body.ui-app .form-label.is-required::after {
    content: ' *';
    color: var(--ui-danger);
}

/* --------------------------------------------------------------------------
   Inputs, textareas, native selects
   -------------------------------------------------------------------------- */
body.ui-app .form-control,
body.ui-app .form-select,
body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), textarea, select):where(:not(.form-control):not(.form-select):not(.form-check-input):not(.ui-select__search):not(.ui-select__native)) {
    min-height: var(--ui-control-h);
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-text);
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease), background-color var(--ui-ease);
    -webkit-appearance: none;
    appearance: none;
}

body.ui-app .form-control,
body.ui-app .form-select {
    display: block;
    width: 100%;
}

/* Raw controls (no Bootstrap class): keep the footprint the page gave them */
body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), select):where(:not(.form-control):not(.form-select):not(.ui-select__search):not(.ui-select__native)) {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
body.ui-app textarea.form-control,
body.ui-app textarea:not(.form-control) {
    min-height: 96px;
    resize: vertical;
}

body.ui-app .form-control::placeholder,
body.ui-app input::placeholder,
body.ui-app textarea::placeholder {
    color: var(--ui-placeholder);
    font-weight: 400;
    opacity: 1;
}

/* Hover */
body.ui-app .form-control:hover:not(:disabled):not([readonly]):not(:focus),
body.ui-app .form-select:hover:not(:disabled):not(:focus),
body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), textarea, select):where(:not(.ui-select__search)):hover:not(:disabled):not([readonly]):not(:focus) {
    border-color: var(--ui-border-strong);
}

/* Focus */
body.ui-app .form-control:focus,
body.ui-app .form-select:focus,
body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), textarea, select):where(:not(.ui-select__search):not(.ui-select__native)):focus {
    outline: none;
    border-color: var(--ui-brand);
    box-shadow: var(--ui-ring);
    background-color: var(--ui-surface);
}

/* Filled (JS adds .is-filled) — subtle confirmation that the field has a value */
body.ui-app .form-control.is-filled:not(:focus):not(.is-invalid),
body.ui-app .form-select.is-filled:not(:focus):not(.is-invalid) {
    border-color: #d5cbb2;
}

/* Disabled / readonly */
body.ui-app .form-control:disabled,
body.ui-app .form-select:disabled,
body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), textarea, select):disabled {
    background-color: var(--ui-surface-2);
    color: var(--ui-muted);
    border-color: var(--ui-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

body.ui-app .form-control[readonly] {
    background-color: var(--ui-surface-2);
    color: var(--ui-text-2);
    box-shadow: none;
}

/* Native select chevron */
body.ui-app .form-select,
body.ui-app select:not(.form-select):not([multiple]):not([size]) {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237a8293' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px;
    cursor: pointer;
}

body.ui-app select[multiple],
body.ui-app select[size] {
    padding-right: 0.85rem;
    background-image: none;
}

/* Date / time pickers: integrated, branded indicator */
body.ui-app input[type="date"],
body.ui-app input[type="time"],
body.ui-app input[type="datetime-local"],
body.ui-app input[type="month"] {
    cursor: pointer;
}

body.ui-app input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 4px;
    margin-left: 0.25rem;
    border-radius: 6px;
    opacity: 0.55;
    transition: opacity var(--ui-ease), background-color var(--ui-ease);
}

body.ui-app input:hover::-webkit-calendar-picker-indicator,
body.ui-app input:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    background-color: var(--ui-brand-100);
}

body.ui-app input[type="date"]::-webkit-date-and-time-value,
body.ui-app input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
}

/* Search inputs get a magnifier when they don't already have an icon wrapper */
body.ui-app input[type="search"]:not(.ui-select__search) {
    padding-left: 2.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2a9b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.85rem center;
    background-size: 15px;
}

/* Sizes */
body.ui-app .form-control-sm,
body.ui-app .form-select-sm {
    min-height: var(--ui-control-h-sm);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.84rem;
    border-radius: var(--ui-radius-sm);
}

body.ui-app .form-control-lg,
body.ui-app .form-select-lg {
    min-height: 52px;
    font-size: 1rem;
}

/* Input groups */
body.ui-app .input-group > .form-control,
body.ui-app .input-group > .form-select,
body.ui-app .input-group > .ui-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

body.ui-app .input-group-text {
    min-height: var(--ui-control-h);
    padding: 0 0.85rem;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-muted);
    font-size: 0.88rem;
}

/* Validation */
body.ui-app .form-control.is-invalid,
body.ui-app .form-select.is-invalid,
body.ui-app .ui-select.is-invalid .ui-select__trigger,
body.ui-app .was-validated .form-control:invalid,
body.ui-app .was-validated .form-select:invalid {
    border-color: var(--ui-danger);
    background-color: #fffafa;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0362c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
}

body.ui-app .form-select.is-invalid {
    background-position: right 2.3rem center, right 0.85rem center;
}

body.ui-app .form-control.is-invalid:focus,
body.ui-app .form-select.is-invalid:focus,
body.ui-app .ui-select.is-invalid .ui-select__trigger:focus {
    box-shadow: var(--ui-danger-ring);
}

body.ui-app .form-control.is-valid,
body.ui-app .form-select.is-valid {
    border-color: var(--ui-success);
}

body.ui-app .invalid-feedback,
body.ui-app .ui-field-error {
    display: none;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ui-danger);
}

body.ui-app .ui-field-error {
    display: flex;
}

body.ui-app .ui-field-error::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0362c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.ui-app .is-invalid ~ .invalid-feedback,
body.ui-app .ui-select.is-invalid ~ .invalid-feedback,
body.ui-app .was-validated :invalid ~ .invalid-feedback {
    display: flex;
}

/* Checkboxes, radios, switches */
body.ui-app .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    border: 1.5px solid var(--ui-border-strong);
    background-color: var(--ui-surface);
    cursor: pointer;
    transition: background-color var(--ui-ease), border-color var(--ui-ease), box-shadow var(--ui-ease);
}

body.ui-app .form-check-input[type="checkbox"] {
    border-radius: 5px;
}

body.ui-app .form-check-input:checked {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
}

body.ui-app .form-check-input:focus {
    border-color: var(--ui-brand);
    box-shadow: var(--ui-ring);
}

body.ui-app .form-check-input:disabled {
    opacity: 0.5;
}

body.ui-app .form-switch .form-check-input {
    width: 2.25em;
    border-radius: 2em;
}

body.ui-app .form-check-label {
    color: var(--ui-text-2);
    font-size: 0.9rem;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Custom select (.ui-select) — built by js/ui_system.js on top of the native
   <select>, which stays in the DOM as the single source of truth.
   -------------------------------------------------------------------------- */
.ui-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.ui-select.is-inline {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

/* Native select: invisible but focusable, so HTML5 validation still works */
.ui-select > .ui-select__native {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ui-select__trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--ui-control-h);
    padding: 0.45rem 2.4rem 0.45rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ui-text);
    text-align: left;
    background: var(--ui-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%237a8293' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    cursor: pointer;
    transition: border-color var(--ui-ease), box-shadow var(--ui-ease), background-color var(--ui-ease);
}

.ui-select__trigger:hover {
    border-color: var(--ui-border-strong);
}

.ui-select__trigger:focus-visible,
.ui-select.is-open .ui-select__trigger {
    outline: none;
    border-color: var(--ui-brand);
    box-shadow: var(--ui-ring);
}

.ui-select.is-open .ui-select__trigger {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a37602' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10 4-4 4 4'/%3E%3C/svg%3E");
}

.ui-select.is-filled:not(.is-open):not(.is-invalid) .ui-select__trigger {
    border-color: #d5cbb2;
}

.ui-select.is-disabled .ui-select__trigger {
    background-color: var(--ui-surface-2);
    color: var(--ui-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.ui-select--sm .ui-select__trigger {
    min-height: var(--ui-control-h-sm);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.84rem;
    border-radius: var(--ui-radius-sm);
}

.ui-select__value {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.ui-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-select__value.is-placeholder .ui-select__label {
    color: var(--ui-placeholder);
    font-weight: 400;
}

/* Menu */
.ui-select__menu {
    position: fixed;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-height: 320px;
    padding: 0.35rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
    animation: ui-pop 0.14s ease-out;
}

.ui-select__menu[hidden] {
    display: none;
}

@keyframes ui-pop {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.ui-select__search-wrap {
    position: relative;
    padding: 0.15rem 0.15rem 0.4rem;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 0.3rem;
}

body.ui-app .ui-select__search,
.ui-select__search {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0.35rem 0.7rem 0.35rem 2rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ui-text);
    background: var(--ui-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2a9b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 0.65rem center / 14px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    outline: none;
    box-shadow: none;
}

.ui-select__search:focus {
    border-color: var(--ui-brand);
    background-color: var(--ui-surface);
}

.ui-select__options {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-select__group {
    padding: 0.55rem 0.6rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
}

.ui-select__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 38px;
    padding: 0.4rem 0.6rem;
    border-radius: var(--ui-radius-sm);
    font-size: 0.88rem;
    color: var(--ui-text);
    cursor: pointer;
    user-select: none;
}

.ui-select__option .ui-select__label {
    flex: 1;
    white-space: normal;
}

.ui-select__option.is-active {
    background: var(--ui-surface-2);
}

.ui-select__option.is-selected {
    background: var(--ui-brand-50);
    font-weight: 600;
}

.ui-select__option.is-selected::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a37602' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ui-select__option.is-disabled {
    color: var(--ui-placeholder);
    cursor: not-allowed;
}

.ui-select__empty {
    padding: 0.8rem 0.6rem;
    font-size: 0.84rem;
    color: var(--ui-muted);
    text-align: center;
}

.ui-select__meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--ui-muted);
}

/* Leading icon inside trigger/options (non status / non person selects) */
.ui-select__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--ui-muted);
    background: var(--ui-neutral-bg);
}

.ui-select--sm .ui-select__icon,
.ui-select--sm .ui-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.66rem;
}

/* --------------------------------------------------------------------------
   Page-built comboboxes (service search .svc-*, client autocomplete
   .client-suggestion*) — same look as .ui-select menus.
   -------------------------------------------------------------------------- */
body.ui-app .svc-panel,
body.ui-app .client-suggestions {
    margin-top: 6px;
    padding: 0.35rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
}

body.ui-app .svc-option,
body.ui-app .client-suggestion {
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    border-left: 0;
    border-radius: var(--ui-radius-sm);
    font-size: 0.88rem;
}

body.ui-app .svc-option.is-active,
body.ui-app .client-suggestion.is-active {
    background: var(--ui-surface-2);
}

body.ui-app .svc-option[aria-selected="true"],
body.ui-app .svc-option[aria-selected="true"].is-active {
    background: var(--ui-brand-50);
}

body.ui-app .svc-option-name,
body.ui-app .client-suggestion-name {
    color: var(--ui-text);
}

body.ui-app .svc-option-meta,
body.ui-app .client-suggestion-phone {
    font-size: 0.78rem;
    color: var(--ui-muted);
}

body.ui-app .svc-option-check,
body.ui-app .client-suggestion-new .client-suggestion-name {
    color: var(--ui-brand);
}

body.ui-app .combo-panel {
    margin-top: 6px;
    padding: 0.35rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
}

body.ui-app .combo-search {
    padding: 0.15rem 0.15rem 0.4rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--ui-border);
}

body.ui-app .combo-search-input {
    min-height: 36px;
    font-size: 0.85rem;
    background-color: var(--ui-surface-2);
}

body.ui-app .combo-option {
    border-radius: var(--ui-radius-sm);
    border-left: 0;
}

body.ui-app .combo-option:hover,
body.ui-app .combo-option.active {
    background: var(--ui-surface-2);
}

body.ui-app .combo-option[aria-selected="true"] {
    background: var(--ui-brand-50);
}

/* Numeric fields inside input groups keep a usable width next to buttons */
body.ui-app .input-group > input[type="number"].form-control {
    min-width: 64px;
}

/* DataTables empty state */
body.ui-app table.dataTable td.dataTables_empty,
body.ui-app .table td.dataTables_empty {
    padding: 2.25rem 1rem;
    background: var(--ui-surface) !important;
    color: var(--ui-muted);
    font-style: normal;
    text-align: center;
    box-shadow: none !important;
}

body.ui-app .client-suggestion .ui-avatar + .client-suggestion-name {
    flex: 1 1 auto;
}

body.ui-app .client-suggestion-new {
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    margin-bottom: 0.25rem;
}

body.ui-app .svc-combo.svc-invalid .svc-input {
    border-color: var(--ui-danger);
    box-shadow: var(--ui-danger-ring);
}

body.ui-app .svc-chevron {
    color: var(--ui-muted);
}

/* --------------------------------------------------------------------------
   Status (single identity used by badges, chips, selects, calendar)
   Usage: <span class="ui-status ui-status--pending">Pendente</span>
   Legacy .status-badge / .badge variants are mapped onto the same look.
   -------------------------------------------------------------------------- */
.ui-status,
body.ui-app .status-badge,
body.ui-app .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--ui-neutral-bd);
    background: var(--ui-neutral-bg) !important;
    color: var(--ui-neutral) !important;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}

.ui-status::before,
body.ui-app .status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* A chip that carries its own icon doesn't need the dot */
.ui-status:has(> i)::before {
    display: none;
}

/* Status icon slot (used inside selects) */
.ui-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 0.76rem;
    background: var(--ui-neutral-bg);
    color: var(--ui-neutral);
}

/* Variants — pending / confirmed / completed / cancelled (+ paid, active, inactive) */
.ui-status--pending, .ui-status-icon--pending,
body.ui-app .status-badge.pending, body.ui-app .status-badge.status-pending,
body.ui-app .badge.bg-warning {
    background: var(--ui-warning-bg) !important; color: var(--ui-warning) !important; border-color: var(--ui-warning-bd);
}

.ui-status--confirmed, .ui-status-icon--confirmed,
body.ui-app .status-badge.confirmed, body.ui-app .status-badge.status-confirmed,
body.ui-app .badge.bg-primary, body.ui-app .badge.bg-info {
    background: var(--ui-info-bg) !important; color: var(--ui-info) !important; border-color: var(--ui-info-bd);
}

.ui-status--completed, .ui-status-icon--completed,
.ui-status--paid, .ui-status-icon--paid,
.ui-status--active,
body.ui-app .status-badge.completed, body.ui-app .status-badge.status-completed,
body.ui-app .status-badge.paid, body.ui-app .status-badge.active,
body.ui-app .badge.bg-success {
    background: var(--ui-success-bg) !important; color: var(--ui-success) !important; border-color: var(--ui-success-bd);
}

.ui-status--cancelled, .ui-status-icon--cancelled,
body.ui-app .status-badge.cancelled, body.ui-app .status-badge.status-cancelled,
body.ui-app .badge.bg-danger {
    background: var(--ui-danger-bg) !important; color: var(--ui-danger) !important; border-color: var(--ui-danger-bd);
}

.ui-status--inactive,
body.ui-app .status-badge.inactive,
body.ui-app .badge.bg-secondary, body.ui-app .badge.bg-light {
    background: var(--ui-neutral-bg) !important; color: var(--ui-neutral) !important; border-color: var(--ui-neutral-bd);
}

body.ui-app .badge.bg-dark {
    background: #2b2f38 !important; color: #fff !important; border-color: #2b2f38;
}

.ui-status-icon--all {
    background: var(--ui-brand-50);
    color: var(--ui-brand);
}

/* --------------------------------------------------------------------------
   Avatars (professionals / clients)
   -------------------------------------------------------------------------- */
.ui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--ui-neutral);
    text-transform: uppercase;
    user-select: none;
}

.ui-avatar--md { width: 34px; height: 34px; font-size: 0.78rem; }
.ui-avatar[data-initials]::before { content: attr(data-initials); }
.ui-person { display: inline-flex; }
.ui-avatar--lg { width: 44px; height: 44px; font-size: 0.95rem; }

.ui-avatar--all {
    background: var(--ui-brand-50);
    color: var(--ui-brand);
    font-size: 0.75rem;
}

/* Muted, professional palette (index chosen from a hash of the name) */
.ui-avatar--c0 { background: #b08a3e; }
.ui-avatar--c1 { background: #6b7fd7; }
.ui-avatar--c2 { background: #3f9b86; }
.ui-avatar--c3 { background: #c4677a; }
.ui-avatar--c4 { background: #8a6fc4; }
.ui-avatar--c5 { background: #d0874a; }
.ui-avatar--c6 { background: #4a91b8; }
.ui-avatar--c7 { background: #7b8a4b; }

/* Person cell: avatar + name + secondary line */
.ui-person {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.ui-person__body {
    min-width: 0;
}

.ui-person__name {
    display: block;
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ui-person__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--ui-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* Remove the template's decorative frames (style.css ::before/::after) */
body.ui-app .btn-primary::before,
body.ui-app .btn-primary::after,
body.ui-app .btn-dark::before,
body.ui-app .btn-dark::after {
    content: none !important;
    display: none !important;
}

body.ui-app .btn:not(.btn-link):not(.btn-close):not(.navbar-toggler) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 1.05rem;
    min-height: var(--ui-control-h);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--ui-radius);
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
    transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease), box-shadow var(--ui-ease), transform var(--ui-ease);
}

body.ui-app .btn > i.me-1, body.ui-app .btn > i.me-2, body.ui-app .btn > i.me-3 {
    margin-right: 0 !important;
}

body.ui-app .btn:not(.btn-link):focus-visible {
    outline: none;
    box-shadow: var(--ui-ring);
}

body.ui-app .btn:disabled,
body.ui-app .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.ui-app .btn-sm:not(.btn-sm-square) {
    min-height: var(--ui-control-h-sm);
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border-radius: var(--ui-radius-sm);
}

body.ui-app .btn-lg:not(.btn-lg-square) {
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
}

body.ui-app .btn-sm-square { width: 34px; height: 34px; min-height: 34px; padding: 0 !important; }
body.ui-app .btn-square    { width: 40px; height: 40px; padding: 0 !important; }
body.ui-app .btn-lg-square { width: 46px; height: 46px; padding: 0 !important; }

body.ui-app .btn-primary {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}
body.ui-app .btn-primary:hover,
body.ui-app .btn-primary:active {
    background: var(--ui-brand-600);
    border-color: var(--ui-brand-600);
    color: #fff;
}

body.ui-app .btn-secondary,
body.ui-app .btn-light,
body.ui-app .btn-outline-secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text-2);
    box-shadow: var(--ui-shadow-xs);
}
body.ui-app .btn-secondary:hover,
body.ui-app .btn-light:hover,
body.ui-app .btn-outline-secondary:hover {
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

body.ui-app .btn-dark {
    background: #2b2f38;
    border-color: #2b2f38;
    color: #fff;
}
body.ui-app .btn-dark:hover { background: #1c1f26; border-color: #1c1f26; color: #fff; }

body.ui-app .btn-success { background: var(--ui-success-bg); border-color: var(--ui-success-bd); color: var(--ui-success); }
body.ui-app .btn-success:hover { background: var(--ui-success); border-color: var(--ui-success); color: #fff; }

body.ui-app .btn-danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
body.ui-app .btn-danger:hover { background: #a42c23; border-color: #a42c23; color: #fff; }

body.ui-app .btn-warning { background: var(--ui-warning-bg); border-color: var(--ui-warning-bd); color: var(--ui-warning); }
body.ui-app .btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }

body.ui-app .btn-info { background: var(--ui-info-bg); border-color: var(--ui-info-bd); color: var(--ui-info); }
body.ui-app .btn-info:hover { background: var(--ui-info); border-color: var(--ui-info); color: #fff; }

/* Outline = soft tinted buttons (secondary actions) */
body.ui-app .btn-outline-primary { background: var(--ui-surface); border-color: #e2d3ae; color: var(--ui-brand); }
body.ui-app .btn-outline-primary:hover { background: var(--ui-brand-50); border-color: var(--ui-brand); color: var(--ui-brand-600); }

body.ui-app .btn-outline-success { background: var(--ui-surface); border-color: var(--ui-success-bd); color: var(--ui-success); }
body.ui-app .btn-outline-success:hover { background: var(--ui-success-bg); border-color: var(--ui-success); color: var(--ui-success); }

body.ui-app .btn-outline-danger { background: var(--ui-surface); border-color: var(--ui-danger-bd); color: var(--ui-danger); }
body.ui-app .btn-outline-danger:hover { background: var(--ui-danger-bg); border-color: var(--ui-danger); color: var(--ui-danger); }

body.ui-app .btn-outline-warning { background: var(--ui-surface); border-color: var(--ui-warning-bd); color: var(--ui-warning); }
body.ui-app .btn-outline-warning:hover { background: var(--ui-warning-bg); border-color: var(--ui-warning); color: var(--ui-warning); }

body.ui-app .btn-outline-info { background: var(--ui-surface); border-color: var(--ui-info-bd); color: var(--ui-info); }
body.ui-app .btn-outline-info:hover { background: var(--ui-info-bg); border-color: var(--ui-info); color: var(--ui-info); }

body.ui-app .btn-outline-dark { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); }
body.ui-app .btn-outline-dark:hover { background: var(--ui-surface-2); color: var(--ui-text); }

/* Table/row action buttons used across pages */
body.ui-app .btn-edit,
body.ui-app .btn-delete {
    min-height: 34px !important;
    min-width: 34px;
    padding: 0.35rem 0.6rem !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text-2) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.ui-app .btn-edit:hover {
    background: var(--ui-brand-50) !important;
    border-color: #e2d3ae !important;
    color: var(--ui-brand) !important;
}
body.ui-app .btn-delete:hover {
    background: var(--ui-danger-bg) !important;
    border-color: var(--ui-danger-bd) !important;
    color: var(--ui-danger) !important;
}

/* Standalone ".ui-btn" for markup outside Bootstrap */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.55rem 1.05rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* Square icon action (view / edit / delete in listings) */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-ease), color var(--ui-ease), border-color var(--ui-ease);
}

.ui-icon-btn:hover {
    background: var(--ui-brand-50);
    border-color: #e2d3ae;
    color: var(--ui-brand);
}

.ui-icon-btn.is-danger:hover {
    background: var(--ui-danger-bg);
    border-color: var(--ui-danger-bd);
    color: var(--ui-danger);
}

.ui-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-ring);
}

/* --------------------------------------------------------------------------
   Tables & listings
   -------------------------------------------------------------------------- */
body.ui-app .table {
    margin-bottom: 0;
    color: var(--ui-text);
    border-collapse: separate;
    border-spacing: 0;
}

body.ui-app .table > :not(caption) > * > * {
    box-shadow: none;
}

body.ui-app .table thead th {
    padding: 0.8rem 1rem;
    background: var(--ui-surface-2) !important;
    color: var(--ui-muted) !important;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid var(--ui-border) !important;
    vertical-align: middle;
}

body.ui-app .table thead th i {
    color: var(--ui-placeholder);
}

body.ui-app .table tbody td {
    padding: 0.9rem 1rem;
    font-size: 0.875rem;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #eef0f3 !important;
    background: transparent;
}

body.ui-app .table tbody tr {
    border: 0;
    transform: none !important;
    transition: background-color 0.15s ease;
}

body.ui-app .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.ui-app .table-hover > tbody > tr:hover > *,
body.ui-app .table tbody tr:hover > td {
    background: #fcfaf5;
    --bs-table-accent-bg: transparent;
}

body.ui-app .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background: #fbfbfc;
}

body.ui-app .table-responsive {
    border-radius: inherit;
}

/* Lists */
body.ui-app .list-group-item {
    border-color: #eef0f3;
    padding: 0.85rem 1rem;
}

body.ui-app .list-group-item-action:hover {
    background: #fcfaf5;
}

body.ui-app .list-group-item.active {
    background: var(--ui-brand-50);
    border-color: #e2d3ae;
    color: var(--ui-text);
}

/* DataTables controls */
body.ui-app .dataTables_wrapper .dataTables_filter input,
body.ui-app .dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    min-height: 38px;
}

body.ui-app .dataTables_wrapper .dataTables_info {
    font-size: 0.82rem;
    color: var(--ui-muted);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
body.ui-app .pagination {
    gap: 0.25rem;
}

body.ui-app .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-text-2);
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--ui-surface);
}

body.ui-app .page-link:hover {
    border-color: var(--ui-brand) !important;
    color: var(--ui-brand);
    background: var(--ui-surface);
}

body.ui-app .page-link:focus {
    box-shadow: var(--ui-ring);
}

body.ui-app .page-item.active .page-link {
    background: var(--ui-brand);
    border-color: var(--ui-brand) !important;
    color: #fff;
}

body.ui-app .page-item.disabled .page-link {
    opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Cards, modals, alerts, tabs
   -------------------------------------------------------------------------- */
body.ui-app .card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    background: var(--ui-surface);
}

body.ui-app .card-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    padding: 1rem 1.25rem;
    font-weight: 700;
}

body.ui-app .card-header:first-child {
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

body.ui-app .card-footer {
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-border);
}

body.ui-app .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--ui-shadow-pop);
    overflow: hidden;
}

body.ui-app .modal-header {
    padding: 1.1rem 1.5rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
}

body.ui-app .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-text);
}

body.ui-app .modal-body {
    padding: 1.5rem;
}

body.ui-app .modal-footer {
    padding: 1rem 1.5rem;
    gap: 0.5rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-border);
    border-radius: 0;
}

body.ui-app .modal-footer > * {
    margin: 0;
}

body.ui-app .modal-backdrop.show {
    opacity: 0.4;
}

body.ui-app .alert {
    border-radius: var(--ui-radius);
    border-width: 1px;
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
}

body.ui-app .alert-success { background: var(--ui-success-bg); border-color: var(--ui-success-bd); color: #0b6646; }
body.ui-app .alert-danger  { background: var(--ui-danger-bg);  border-color: var(--ui-danger-bd);  color: #9d2b23; }
body.ui-app .alert-warning { background: var(--ui-warning-bg); border-color: var(--ui-warning-bd); color: #8f420a; }
body.ui-app .alert-info    { background: var(--ui-info-bg);    border-color: var(--ui-info-bd);    color: #3b34b0; }

body.ui-app .nav-tabs {
    border-bottom: 1px solid var(--ui-border);
    gap: 0.25rem;
}

body.ui-app .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ui-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
}

body.ui-app .nav-tabs .nav-link:hover {
    color: var(--ui-text);
}

body.ui-app .nav-tabs .nav-link.active {
    color: var(--ui-brand);
    background: transparent;
    border-bottom-color: var(--ui-brand);
}

body.ui-app .nav-pills .nav-link {
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-2);
    font-weight: 600;
}

body.ui-app .nav-pills .nav-link.active {
    background: var(--ui-brand);
    color: #fff;
}

body.ui-app .dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-pop);
    padding: 0.35rem;
}

body.ui-app .dropdown-item {
    border-radius: var(--ui-radius-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
}

body.ui-app .dropdown-item:active,
body.ui-app .dropdown-item.active {
    background: var(--ui-brand-50);
    color: var(--ui-text);
}

/* --------------------------------------------------------------------------
   Calendar (css/calendar.css markup, generated by js/calendar.js)
   -------------------------------------------------------------------------- */
body.ui-app .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

body.ui-app .calendar-header h5,
body.ui-app .calendar-header h4,
body.ui-app .calendar-header span {
    margin: 0;
    font-weight: 700;
    color: var(--ui-text);
}

body.ui-app .calendar-header .btn,
body.ui-app #prev-month,
body.ui-app #next-month {
    width: 36px;
    height: 36px;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-2);
}

body.ui-app .calendar-header .btn:hover,
body.ui-app #prev-month:hover,
body.ui-app #next-month:hover {
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    background: var(--ui-brand-50);
}

body.ui-app .calendar-grid {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}

body.ui-app .calendar-weekdays {
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-border);
}

body.ui-app .weekday {
    padding: 0.65rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-muted);
    text-align: center;
}

body.ui-app .calendar-days {
    gap: 4px;
    padding: 8px;
}

body.ui-app .calendar-day {
    position: relative;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ui-text);
    background: var(--ui-surface);
    transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease);
}

/* Available (bookable) days get a soft dot */
body.ui-app .calendar-day:not(.past):not(.inactive):not(.other-month)::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--ui-success);
    opacity: 0.7;
}

body.ui-app .calendar-day:hover:not(.past):not(.other-month):not(.inactive) {
    background: var(--ui-brand-50);
    border-color: #e2d3ae;
    color: var(--ui-brand-600);
}

body.ui-app .calendar-day.today {
    background: var(--ui-surface);
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    font-weight: 800;
}

body.ui-app .calendar-day.selected,
body.ui-app .calendar-day.selected:hover {
    background: var(--ui-brand) !important;
    border-color: var(--ui-brand) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(163, 118, 2, 0.3);
}

body.ui-app .calendar-day.selected::after {
    background: #fff;
}

body.ui-app .calendar-day.past,
body.ui-app .calendar-day.inactive {
    background: transparent;
    color: #c0c5cf;
    font-weight: 500;
    cursor: not-allowed;
}

body.ui-app .calendar-day.inactive:not(.past):not(.other-month) {
    text-decoration: line-through;
    text-decoration-color: #d9dde4;
}

body.ui-app .calendar-day.other-month {
    background: transparent;
    color: #d5d9e0;
}

/* Time slots */
body.ui-app .time-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 0.9rem;
}

body.ui-app .time-slot {
    padding: 0.6rem 0.4rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: var(--ui-shadow-xs);
    transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease);
}

body.ui-app .time-slot:hover:not(.disabled):not(.selected) {
    background: var(--ui-brand-50);
    border-color: #e2d3ae;
    color: var(--ui-brand-600);
}

body.ui-app .time-slot.selected {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(163, 118, 2, 0.3);
}

body.ui-app .time-slot.disabled {
    background: var(--ui-surface-2);
    color: #c0c5cf;
    text-decoration: line-through;
    box-shadow: none;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Agenda (calendário da Receção: dia / semana / mês / lista + mini calendário)
   Mesma linguagem do calendário de marcação: hoje = contorno dourado,
   selecionado = dourado sólido, eventos com a identidade de cada status.
   -------------------------------------------------------------------------- */

/* Toolbar */
body.ui-app .cal-toolbar {
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
}

body.ui-app .cal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ui-text);
    letter-spacing: -0.01em;
}

body.ui-app .cal-today-btn {
    padding: 0.45rem 0.9rem;
    line-height: 1.3;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: var(--ui-shadow-xs);
}

body.ui-app .cal-today-btn:hover {
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    background: var(--ui-brand-50);
}

body.ui-app .cal-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-2);
}

body.ui-app .cal-nav-btn:hover {
    background: var(--ui-brand-50);
    color: var(--ui-brand);
}

/* View switcher as a segmented control */
body.ui-app .view-btn-group {
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}

body.ui-app .view-btn {
    min-height: 32px;
    padding: 0 0.9rem;
    border: 0 !important;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

body.ui-app .view-btn:hover {
    color: var(--ui-text);
    background: transparent;
}

body.ui-app .view-btn.active {
    background: var(--ui-surface);
    color: var(--ui-brand);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--ui-border);
}

body.ui-app .countdown-badge {
    border-radius: 999px;
    border-color: var(--ui-border);
    background: var(--ui-surface-2);
    color: var(--ui-muted);
    font-variant-numeric: tabular-nums;
}

/* Filters bar + status legend */
body.ui-app .cal-filters {
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-border);
}

.ui-cal-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.ui-cal-status-legend .ui-status {
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
}

/* Mini calendar (sidebar) */
body.ui-app .mini-cal-header span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ui-text);
    text-transform: capitalize;
}

body.ui-app .mini-cal-header button {
    width: 30px;
    height: 30px;
    border-radius: var(--ui-radius-sm);
}

body.ui-app .mini-cal-header button:hover {
    background: var(--ui-brand-50);
    color: var(--ui-brand);
}

body.ui-app .mini-cal-grid {
    gap: 2px;
}

body.ui-app .mini-cal-grid .wd {
    color: var(--ui-placeholder);
    font-weight: 700;
}

body.ui-app .mini-cal-grid .day-cell {
    height: 30px;
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
    color: var(--ui-text);
    border: 1px solid transparent;
}

body.ui-app .mini-cal-grid .day-cell:hover {
    background: var(--ui-brand-50);
    color: var(--ui-brand-600);
}

body.ui-app .mini-cal-grid .day-cell.today-mini {
    background: var(--ui-surface);
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    font-weight: 800;
}

body.ui-app .mini-cal-grid .day-cell.selected-mini,
body.ui-app .mini-cal-grid .day-cell.today-mini.selected-mini {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(163, 118, 2, 0.28);
}

body.ui-app .mini-cal-grid .day-cell.other-month {
    color: #cfd4dc;
}

/* Day / week grids */
body.ui-app .time-gutter-slot {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ui-placeholder);
    font-variant-numeric: tabular-nums;
}

body.ui-app .hour-row {
    border-bottom-color: #eef0f3;
}

body.ui-app .hour-row.half-mark::after {
    border-top-color: #f3f4f6;
}

body.ui-app .current-time-line::before,
body.ui-app .current-time-line::after {
    background: var(--ui-danger);
}

body.ui-app .week-header-row {
    background: var(--ui-surface);
    box-shadow: 0 1px 0 var(--ui-border);
}

body.ui-app .week-header-row .day-hdr {
    padding: 0.6rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ui-muted);
}

body.ui-app .week-header-row .day-hdr .day-num {
    width: 34px;
    height: 34px;
    margin-top: 0.2rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ui-text);
}

body.ui-app .week-header-row .day-hdr.today-col .day-num {
    background: var(--ui-surface);
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    font-weight: 800;
}

body.ui-app .week-header-row .day-hdr.selected-col .day-num {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

body.ui-app .week-header-row .day-hdr.today-col {
    color: var(--ui-brand);
}

body.ui-app .week-col,
body.ui-app .week-header-row .day-hdr {
    border-left-color: #eef0f3;
}

/* Event blocks (day / week) */
body.ui-app .cal-event {
    padding: 0.35rem 0.55rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    box-shadow: var(--ui-shadow-xs);
}

body.ui-app .cal-event:hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-sm);
}

body.ui-app .cal-event .ev-time {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

body.ui-app .cal-event .ev-title {
    font-size: 0.78rem;
    font-weight: 700;
}

body.ui-app .cal-event .ev-sub {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Status identity (day/week blocks + month chips) */
body.ui-app .ev-pending,
body.ui-app .month-ev.ev-pending   { background: var(--ui-warning-bg); color: #8f420a; border-color: var(--ui-warning-bd); border-left-color: #d97706; }
body.ui-app .ev-confirmed,
body.ui-app .month-ev.ev-confirmed { background: var(--ui-info-bg);    color: #3b34b0; border-color: var(--ui-info-bd);    border-left-color: var(--ui-info); }
body.ui-app .ev-completed,
body.ui-app .month-ev.ev-completed { background: var(--ui-success-bg); color: #0b6646; border-color: var(--ui-success-bd); border-left-color: var(--ui-success); }
body.ui-app .ev-cancelled,
body.ui-app .month-ev.ev-cancelled { background: var(--ui-danger-bg);  color: #9d2b23; border-color: var(--ui-danger-bd);  border-left-color: var(--ui-danger); }

body.ui-app .ev-cancelled .ev-title,
body.ui-app .month-ev.ev-cancelled {
    text-decoration: line-through;
    text-decoration-color: rgba(157, 43, 35, 0.45);
}

/* Month view */
body.ui-app .month-header-row {
    background: var(--ui-surface-2);
    border-bottom: 1px solid var(--ui-border);
}

body.ui-app .month-header-row .mh-cell {
    font-size: 0.68rem;
    color: var(--ui-muted);
}

body.ui-app .month-cell {
    padding: 0.4rem;
    border-color: #eef0f3;
    background: var(--ui-surface);
}

body.ui-app .month-cell:hover {
    background: #fcfaf5;
}

body.ui-app .month-cell.today-cell {
    background: var(--ui-brand-50);
    box-shadow: inset 0 0 0 1px #ead9b0;
}

body.ui-app .month-cell.other-month-cell {
    background: #fbfbfc;
}

body.ui-app .month-cell .mc-num {
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ui-text);
}

/* hoje = contorno dourado · selecionado = dourado sólido (igual ao mini calendário e à semana) */
body.ui-app .month-cell.today-cell .mc-num {
    background: var(--ui-surface);
    border-color: var(--ui-brand);
    color: var(--ui-brand);
    font-weight: 800;
}

body.ui-app .month-cell.selected-month-cell .mc-num,
body.ui-app .month-cell.today-cell.selected-month-cell .mc-num {
    background: var(--ui-brand);
    border-color: var(--ui-brand);
    color: #fff;
}

body.ui-app .month-cell.other-month-cell .mc-num {
    color: #cfd4dc;
}

body.ui-app .month-ev {
    margin-bottom: 3px;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: 0.68rem;
    font-weight: 600;
}

body.ui-app .month-ev:hover {
    filter: none;
    box-shadow: var(--ui-shadow-xs);
}

body.ui-app .month-ev-more {
    color: var(--ui-brand);
    font-size: 0.68rem;
}

/* List view ("Todos") */
body.ui-app .list-date-label {
    color: var(--ui-muted);
    letter-spacing: 0.06em;
}

body.ui-app .list-event-row {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    margin-bottom: 0.5rem;
    box-shadow: var(--ui-shadow-xs);
}

body.ui-app .list-event-row:hover {
    background: #fcfaf5;
    border-color: #e2d3ae;
}

body.ui-app .list-event-time {
    font-weight: 700;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

body.ui-app .list-event-dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* Event detail modal */
body.ui-app .ev-modal-overlay {
    background: rgba(17, 20, 28, 0.4);
}

body.ui-app .ev-modal {
    border-radius: 16px;
    box-shadow: var(--ui-shadow-pop);
    overflow: hidden;
}

body.ui-app .ev-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-border);
}

body.ui-app .ev-modal-body {
    padding: 1.1rem 1.25rem;
}

body.ui-app .ev-modal-footer {
    padding: 0.85rem 1.25rem;
    background: var(--ui-surface-2);
    border-top: 1px solid var(--ui-border);
    gap: 0.5rem;
}

body.ui-app .ev-modal-footer .btn {
    min-height: 36px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--ui-radius-sm);
}

body.ui-app .ev-modal-header .ev-modal-close {
    border-radius: var(--ui-radius-sm);
}

body.ui-app .cal-empty {
    color: var(--ui-muted);
}

@media (max-width: 767.98px) {
    .ui-cal-status-legend {
        display: none;
    }

    body.ui-app .view-btn {
        flex: 1;
        padding: 0 0.35rem;
        min-height: 36px;
        font-size: 0.78rem;
    }
}

/* Calendar legend helper: <div class="ui-cal-legend"><span class="is-today">Hoje</span>…</div> */
.ui-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.76rem;
    color: var(--ui-muted);
}

.ui-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ui-cal-legend span::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.ui-cal-legend .is-selected::before { background: var(--ui-brand); border-color: var(--ui-brand); }
.ui-cal-legend .is-today::before { border-color: var(--ui-brand); border-width: 2px; }
.ui-cal-legend .is-available::before { background: var(--ui-success-bg); border-color: var(--ui-success-bd); }
.ui-cal-legend .is-unavailable::before { background: var(--ui-surface-2); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* 16px avoids iOS auto-zoom on focus */
    body.ui-app .form-control,
    body.ui-app .form-select,
    body.ui-app .ui-select__trigger,
    body.ui-app .ui-select__search,
    body.ui-app :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input:not([type]), textarea, select) {
        font-size: 16px;
    }

    .ui-select__menu {
        max-height: 60vh;
    }

    body.ui-app .calendar-days {
        gap: 3px;
        padding: 6px;
    }

    body.ui-app .calendar-day {
        min-height: 40px;
        font-size: 0.85rem;
    }

    body.ui-app .modal-body {
        padding: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-select__menu { animation: none; }
}