/* ============================================================
   POUSO Painel — owner dashboard. Loads after pouso.css and
   reuses its tokens (paper/sand/ink/pine, Sentient + Switzer).
   All admin selectors are namespaced under .p- / body.painel.
   ============================================================ */

:root {
  --bad: #B4533A;
  --bad-wash: #F7E9E3;
  --warn: #8A6D2F;
  --warn-wash: #F6EFDC;
  --ok-wash: #E7F0EA;
  --ok-ink: #2F6B4A;
  --gold: #C0A468;
}

body.painel {
  background: var(--paper);
  font-size: 15px;
}

body.painel [hidden] { display: none !important; }

/* ============ login ============ */
.p-login {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: minmax(360px, 520px) 1fr;
  background: var(--paper);
}
.p-login__form {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 6vw, 72px);
}
.p-login__logo { margin-bottom: 34px; }
.p-login__logo .logo__mark { font-family: var(--f-display); font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; }
.p-login__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); font-weight: 600; margin-bottom: 10px; }
.p-login__t { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.15; margin-bottom: 8px; }
.p-login__d { color: var(--ink-2); margin-bottom: 30px; max-width: 36ch; }
.p-login .p-field { margin-bottom: 14px; }
.p-login__btn { width: 100%; margin-top: 6px; }
.p-login__note { margin-top: 22px; font-size: 12.5px; color: var(--mist); }
.p-login__media { position: relative; overflow: hidden; }
.p-login__media img { width: 100%; height: 100%; object-fit: cover; }
.p-login__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(35,32,27,.05), rgba(35,32,27,.42));
}
.p-login__cap {
  position: absolute; left: 28px; bottom: 24px; right: 28px; z-index: 2;
  color: #fff; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.4;
  text-shadow: 0 2px 18px rgba(20,16,10,.45);
}

/* ============ shell ============ */
.p-app { display: grid; grid-template-columns: 252px 1fr; min-height: 100svh; }

.p-side {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 20px 14px 16px;
  z-index: 55;
}
.p-logo { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.p-logo .logo__mark { font-family: var(--f-display); font-weight: 700; font-size: 1.32rem; letter-spacing: .02em; }
.p-logo .logo__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); align-self: center; }
.p-side__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); font-weight: 600; }

.p-side__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.p-side__nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--ink-2); font-weight: 500; font-size: 14.5px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.p-side__nav a svg { flex: 0 0 auto; opacity: .8; }
.p-side__nav a:hover { background: var(--sand); color: var(--ink); }
.p-side__nav a.is-active { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.p-side__nav a .p-navn { margin-left: auto; font-size: 11.5px; color: var(--mist); font-weight: 600; }

.p-side__foot { border-top: 1px solid var(--line-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.p-side__site { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.p-side__site:hover { color: var(--accent); }
.p-lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; width: fit-content; }
.p-lang button { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; color: var(--mist); }
.p-lang button.is-active { background: var(--ink); color: var(--paper); }
.p-host { display: flex; align-items: center; gap: 10px; }
.p-host__av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em; flex: 0 0 auto;
}
.p-host b { display: block; font-size: 13.5px; line-height: 1.2; }
.p-host i { font-style: normal; font-size: 12px; color: var(--mist); }

.p-main { min-width: 0; display: flex; flex-direction: column; }
.p-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(18px, 3vw, 36px);
  background: rgba(251, 249, 245, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.p-burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); align-items: center; justify-content: center; background: var(--card); }
.p-topbar__t { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-topbar__r { display: flex; align-items: center; gap: 10px; }
.p-search {
  width: min(240px, 30vw); padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13.5px;
}
.p-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.p-logout { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; }
.p-logout:hover { color: var(--bad); background: var(--bad-wash); }

.p-content { padding: clamp(18px, 3vw, 34px); max-width: 1240px; width: 100%; margin: 0 auto; flex: 1; }

/* ============ cards / grid ============ */
.p-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.p-grid--kpi { grid-template-columns: repeat(4, 1fr); }
.p-grid--2 { grid-template-columns: 2fr 1fr; }
.p-grid--3 { grid-template-columns: repeat(3, 1fr); }
.p-grid--half { grid-template-columns: 1fr 1fr; }

.p-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 18px 20px; min-width: 0;
}
.p-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.p-card__t { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.p-card__s { font-size: 12px; color: var(--mist); }
.p-card--flat { box-shadow: none; }

.p-kpi { display: flex; flex-direction: column; gap: 6px; }
.p-kpi__l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.p-kpi__v { font-family: var(--f-display); font-size: 1.85rem; font-weight: 500; line-height: 1.05; }
.p-kpi__d { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; flex-wrap: wrap; }
.p-kpi__d b { font-weight: 600; white-space: nowrap; }
.p-kpi__d.is-up { color: var(--ok-ink); }
.p-kpi__d.is-down { color: var(--bad); }
.p-kpi__d span.vs { color: var(--mist); font-weight: 500; }

/* ============ lists / tables ============ */
.p-list { display: flex; flex-direction: column; }
.p-list__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.p-list__row:last-child { border-bottom: 0; }
.p-list__main { flex: 1; min-width: 0; }
.p-list__main b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-list__main span { font-size: 12px; color: var(--mist); }
.p-list__r { text-align: right; font-weight: 600; white-space: nowrap; }
.p-list__date {
  flex: 0 0 auto; width: 44px; text-align: center; line-height: 1.05;
  border-right: 2px solid var(--accent); padding-right: 10px;
}
.p-list__date b { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.p-list__date span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }

.p-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.p-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
.p-table th {
  text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist); font-weight: 600; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: linear-gradient(var(--card), var(--paper)); white-space: nowrap;
}
.p-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.p-table tr:last-child td { border-bottom: 0; }
.p-table tbody tr.is-click { cursor: pointer; }
.p-table tbody tr.is-click:hover { background: rgba(241, 235, 224, .45); }
.p-table .is-b { font-weight: 600; }
.p-table .is-ref { font-weight: 600; color: var(--accent); white-space: nowrap; }
.p-table .is-mut { color: var(--mist); font-size: 12.5px; white-space: nowrap; }
.p-table .is-num { text-align: right; white-space: nowrap; }
.p-table .is-r { text-align: right; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill--ok { background: var(--ok-wash); color: var(--ok-ink); }
.pill--warn { background: var(--warn-wash); color: var(--warn); }
.pill--mut { background: var(--sand); color: var(--ink-2); }
.pill--bad { background: var(--bad-wash); color: var(--bad); }
.pill--accent { background: var(--accent); color: #fff; }
.pill--new { background: var(--ink); color: var(--paper); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* filter chips */
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p-chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: all .15s var(--ease);
}
.p-chip:hover { border-color: var(--mist); color: var(--ink); }
.p-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.p-chip i { font-style: normal; opacity: .55; font-size: 12px; margin-left: 4px; }

/* ============ buttons / forms ============ */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.p-btn:hover { background: var(--accent-deep); }
.p-btn:active { transform: scale(.985); }
.p-btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.p-btn--ghost:hover { background: var(--sand); }
.p-btn--danger { background: var(--bad-wash); color: var(--bad); }
.p-btn--danger:hover { background: #F1DDD4; }
.p-btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.p-btn--wide { width: 100%; }
.p-btn[disabled] { opacity: .55; cursor: default; }

.p-field { display: flex; flex-direction: column; gap: 6px; }
.p-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.p-input, .p-select, .p-textarea {
  width: 100%; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 14px; color: var(--ink);
}
.p-textarea { resize: vertical; min-height: 70px; }
.p-input:focus, .p-select:focus, .p-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.p-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.p-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.p-switch input { position: absolute; opacity: 0; pointer-events: none; }
.p-switch .p-switch__tr {
  width: 38px; height: 22px; border-radius: 999px; background: var(--line);
  transition: background .18s var(--ease); flex: 0 0 auto; position: relative;
}
.p-switch .p-switch__tr::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(30,26,20,.25);
  transition: transform .18s var(--ease);
}
.p-switch input:checked + .p-switch__tr { background: var(--accent); }
.p-switch input:checked + .p-switch__tr::after { transform: translateX(16px); }
.p-switch__l { font-size: 14px; font-weight: 500; }

/* misc */
.p-note { font-size: 12px; color: var(--mist); }
.p-empty { padding: 34px 10px; text-align: center; color: var(--mist); font-size: 13.5px; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.p-head h2 { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.p-count { font-size: 13px; color: var(--mist); }
.p-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sand); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: 0 0 auto;
}
.p-thumb { width: 44px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.p-prog { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.p-prog i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.p-prog.is-gold i { background: var(--gold); }

/* stay grid */
.p-stays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.p-stay { display: flex; gap: 14px; align-items: center; }
.p-stay img { width: 92px; height: 70px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.p-stay__b { flex: 1; min-width: 0; }
.p-stay__b b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.02rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-stay__b span { font-size: 12.5px; color: var(--mist); display: block; margin-bottom: 6px; }
.p-stay__stats { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.p-stay__stats b { font-weight: 600; color: var(--ink); }

/* ============ drawer / modal / toast ============ */
.p-overlay {
  position: fixed; inset: 0; z-index: 58;
  background: rgba(35, 32, 27, .42);
  opacity: 0; transition: opacity .25s var(--ease);
}
.p-overlay.is-open { opacity: 1; }

.p-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(460px, 100%);
  background: var(--card); box-shadow: var(--shadow-pop);
  transform: translateX(105%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
}
.p-drawer.is-open { transform: translateX(0); }
.p-drawer__h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
}
.p-drawer__h b { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.p-x { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--mist); }
.p-x:hover { background: var(--sand); color: var(--ink); }
.p-drawer__b { padding: 20px 22px 30px; overflow-y: auto; flex: 1; }
.p-drawer__f { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; }
.p-drawer__f .p-btn { flex: 1; }

.p-sec { margin-bottom: 20px; }
.p-sec__l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); font-weight: 600; margin-bottom: 9px; }
.p-kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line-soft); }
.p-kv:last-child { border-bottom: 0; }
.p-kv span { color: var(--mist); }
.p-kv b { font-weight: 600; text-align: right; }
.p-kv--total { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 4px; padding-top: 11px; font-size: 15px; }
.p-kv--total b { font-family: var(--f-display); font-size: 1.15rem; }

.p-gcard { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.p-gcard .p-avatar { width: 38px; height: 38px; font-size: 13px; }
.p-gcard b { display: block; font-size: 14px; }
.p-gcard span { font-size: 12.5px; color: var(--mist); display: block; word-break: break-all; }

.p-tl { list-style: none; }
.p-tl li { position: relative; padding: 0 0 16px 22px; font-size: 13px; }
.p-tl li::before {
  content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.p-tl li.is-off::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-wash); }
.p-tl li::after { content: ''; position: absolute; left: 7.5px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.p-tl li:last-child::after { display: none; }
.p-tl b { display: block; font-weight: 600; }
.p-tl span { color: var(--mist); font-size: 12px; }

.p-modalwrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 18px; }
.p-modal {
  width: min(480px, 100%); max-height: calc(100svh - 40px); overflow-y: auto;
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow-pop);
  padding: 22px 24px;
  transform: translateY(14px) scale(.98); opacity: 0; transition: all .25s var(--ease);
}
.p-modal.is-open { transform: none; opacity: 1; }
.p-modal__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.p-modal__h b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.p-modal .p-field { margin-bottom: 13px; }

.p-toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(10px); transition: all .25s var(--ease);
  pointer-events: none; max-width: min(360px, calc(100vw - 44px));
}
.p-toast.is-on { opacity: 1; transform: none; }

/* ============ calendar manager ============ */
.p-cal { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.p-cal__inner { min-width: max-content; }
.p-cal__row { display: grid; align-items: stretch; }
.p-cal__row--head { position: sticky; left: 0; }
.p-cal__cell { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.p-cal__stay {
  position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--card);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
  min-width: 210px; max-width: 210px; font-size: 13px;
}
.p-cal__stay img { width: 34px; height: 26px; border-radius: 6px; object-fit: cover; }
.p-cal__stay b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.p-cal__stay span { font-size: 11px; color: var(--mist); }
.p-cal__hd {
  min-width: 34px; padding: 7px 0 6px; text-align: center;
  font-size: 10px; color: var(--mist); background: linear-gradient(var(--card), var(--paper));
  border-bottom: 1px solid var(--line);
}
.p-cal__hd b { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.p-cal__hd.is-we b { color: var(--accent); }
.p-cal__d { min-width: 34px; height: 34px; }
.p-cal__d button {
  width: 100%; height: 100%; display: block; position: relative;
  transition: filter .12s;
}
.p-cal__d button:hover { filter: brightness(.92); }
.p-cal__d .st-free { position: absolute; inset: 4px; border-radius: 5px; background: var(--paper); border: 1px solid var(--line-soft); }
.p-cal__d .st-past { position: absolute; inset: 4px; border-radius: 5px; background: var(--sand); opacity: .45; }
.p-cal__d .st-booked { position: absolute; inset: 3px; border-radius: 6px; background: var(--accent); }
.p-cal__d .st-blocked { position: absolute; inset: 4px; border-radius: 5px; background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 3px, #E4DBC9 3px, #E4DBC9 6px); }
.p-cal__d .st-user { position: absolute; inset: 4px; border-radius: 5px; background: repeating-linear-gradient(45deg, var(--bad-wash), var(--bad-wash) 3px, #EED3C7 3px, #EED3C7 6px); border: 1px solid #E8CBBE; }
.p-cal__d button[data-pick="1"] { cursor: pointer; }
.p-cal__legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.p-cal__legend i { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }

/* ============ charts ============ */
.pc-svg { display: block; }
.pc-tick { font-size: 10.5px; fill: var(--mist); font-family: var(--f-ui); }
.pc-empty { padding: 40px 0; text-align: center; color: var(--mist); font-size: 13px; }
.pc-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: var(--paper); border-radius: 9px;
  padding: 7px 11px; font-size: 12px; line-height: 1.35;
  box-shadow: var(--shadow-pop); white-space: nowrap;
}
.pc-tip b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(251,249,245,.65); font-weight: 600; }
.pc-donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pc-donut-t { font-family: var(--f-display); font-size: 26px; fill: var(--ink); font-weight: 500; }
.pc-donut-s { font-size: 10.5px; fill: var(--mist); }
.pc-legend { list-style: none; display: flex; flex-direction: column; gap: 9px; min-width: 150px; }
.pc-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.pc-legend__l { flex: 1; color: var(--ink-2); }
.pc-legend__v { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pc-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* range tabs */
.p-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--card); }
.p-tabs button { padding: 6px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mist); }
.p-tabs button.is-on { background: var(--ink); color: var(--paper); }

/* mail preview */
.p-mail { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; font-size: 13.5px; }
.p-mail__h { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--line); color: var(--mist); font-size: 12.5px; }
.p-mail b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; display: block; margin-bottom: 6px; }

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .p-grid--kpi { grid-template-columns: 1fr 1fr; }
  .p-grid--2, .p-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .p-app { grid-template-columns: 1fr; }
  .p-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px;
    transform: translateX(-102%); transition: transform .28s var(--ease);
    box-shadow: var(--shadow-pop);
    z-index: 59; /* above .p-overlay (58) so the scrim never dims/blocks the open menu */
  }
  .p-side.is-open { transform: translateX(0); }
  .p-burger { display: inline-flex; }
  .p-search { width: 150px; }
  .p-login { grid-template-columns: 1fr; }
  .p-login__media { display: none; }
  .p-stays { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .p-grid--kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-grid--half { grid-template-columns: 1fr; }
  .p-kpi__v { font-size: 1.5rem; }
  .p-content { padding: 14px 14px 24px; }
  .p-topbar { padding: 12px 14px; }
  .p-logout { display: none; }
  .p-search { display: none; }
  .p-row { grid-template-columns: 1fr; }
  .p-stay img { width: 72px; height: 56px; }
  .p-drawer { width: 100%; }
  .p-toast { right: 12px; left: 12px; }
}