/*
 * pcm-datepicker — the app's own calendar popup.
 *
 * Exists because <input type="date"> draws its popup as browser chrome: no
 * CSS reaches inside it, so weekends, holidays and the client's epoch week
 * could never be shown there (client, 2026-08-24).
 *
 * The four day kinds are told apart by more than colour — weight, background
 * and an underline — so they survive a monochrome print and colour blindness.
 * Everything is expressed in Bootstrap's theme variables so the popup follows
 * light/dark with the rest of the app.
 */

.pcm-dp {
    position: absolute;
    z-index: 1080;                 /* over Bootstrap modals (1055) */
    min-width: 19rem;
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    font-size: .82rem;
    user-select: none;
}

.pcm-dp[hidden] { display: none; }

/* ---- header ---------------------------------------------------------- */
.pcm-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .1rem .2rem .45rem;
}

.pcm-dp-title { font-weight: 600; display: inline-flex; gap: .25rem; }

/* Month + year as dropdowns — the year no longer takes an arrow-click per
   month to reach (client, 26 Ago). Styled to read like the old title until
   hovered. */
.pcm-dp-pick {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    border-radius: .3rem;
    padding: .05rem .1rem;
    cursor: pointer;
}
.pcm-dp-pick:hover,
.pcm-dp-pick:focus-visible { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.pcm-dp-pick option { color: var(--bs-body-color); background: var(--bs-body-bg); }

.pcm-dp-nav {
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    border-radius: .3rem;
    line-height: 1;
    padding: .15rem .45rem;
    cursor: pointer;
}

.pcm-dp-nav:hover,
.pcm-dp-nav:focus-visible { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }

/* ---- grid ------------------------------------------------------------ */
.pcm-dp-grid { border-collapse: collapse; width: 100%; }

.pcm-dp-grid th {
    font-weight: 600;
    font-size: .7rem;
    text-align: center;
    padding: .2rem 0;
    color: var(--bs-secondary-color);
}

.pcm-dp-grid td { padding: 1px; }

/* The week column — epoch week, or the Orders screen's YWW.D. */
.pcm-dp-wk {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .68rem;
    text-align: right;
    padding-right: .45rem !important;
    color: var(--pcm-accent);
    border-right: 1px solid var(--bs-border-color);
    white-space: nowrap;
}

/* ---- the day cells --------------------------------------------------- */
.pcm-dp-day {
    width: 2.15rem;
    height: 1.9rem;
    border: 1px solid transparent;
    border-radius: .3rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pcm-dp-day:hover { background: var(--bs-tertiary-bg); }
.pcm-dp-day:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }

/* Days spilling in from the neighbouring months. */
.pcm-dp-out { color: var(--bs-secondary-color); opacity: .5; }

/* Weekend — greyed and lighter, the way the client's own sheet reads. */
.pcm-dp-we {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: 300;
}

/* Public holiday — the strongest mark, plus an underline so it is not
   colour alone. Title carries the holiday's name. */
.pcm-dp-hol {
    background: rgba(220, 38, 38, .13);
    color: #b91c1c;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* A day the company itself marked (CALENDAR): shutdown, reduced capacity. */
.pcm-dp-mark {
    background: rgba(245, 158, 11, .16);
    color: #b45309;
    font-weight: 600;
}

/* ...and one the planner treats as non-working. */
.pcm-dp-mark-off {
    background: rgba(245, 158, 11, .28);
    color: #92400e;
    font-weight: 700;
    font-style: italic;
}

/* Today: outlined, never filled — the fill means "selected". */
.pcm-dp-today { border-color: #6366f1; }

.pcm-dp-sel,
.pcm-dp-sel:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* ---- footer ---------------------------------------------------------- */
.pcm-dp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .45rem;
    margin-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
}

.pcm-dp-link {
    border: 0;
    background: transparent;
    color: #6366f1;
    padding: 0 .15rem;
    cursor: pointer;
}

.pcm-dp-link:hover { text-decoration: underline; }

.pcm-dp-legend {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    color: var(--bs-secondary-color);
}

.pcm-dp-key {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: .15rem;
    margin-left: .35rem;
    margin-right: .1rem;
}

.pcm-dp-key-we  { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); }
.pcm-dp-key-hol { background: rgba(220, 38, 38, .45); }
.pcm-dp-offline { margin-left: .4rem; font-style: italic; }

/* The upgraded input keeps room for the caret the native control had. */
.pcm-dp-input { cursor: pointer; font-variant-numeric: tabular-nums; }

/* The calendar date, derived from the week typed above it. */
.pcm-dp-date { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.1; color: var(--bs-secondary-color); min-height: .8em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcm-dp-input.pcm-dp-bad { border-color: var(--bs-danger) !important; }
@media print { .pcm-dp-date { color: #000; } }

/* Dark theme — the tints need more punch on a dark ground. */
[data-bs-theme="dark"] .pcm-dp-hol      { background: rgba(248, 113, 113, .22); color: #fca5a5; }
[data-bs-theme="dark"] .pcm-dp-mark     { background: rgba(251, 191, 36, .20); color: #fcd34d; }
[data-bs-theme="dark"] .pcm-dp-mark-off { background: rgba(251, 191, 36, .32); color: #fde68a; }
/* A coluna da semana nao precisa de override: --pcm-accent ja muda com o tema. */

@media print { .pcm-dp { display: none !important; } }