/* ============================================================
   PRO WEB Admin — "Tenants redesign" design language
   (sitesdata/Tenants Dashboard Redesign). A pure restyle over
   Bootstrap 5 — no behavioral changes. Loaded after app.css.

   Shift from the old warm "soft" theme: cool light-gray shell,
   Pretendard type, flat bordered cards (no float), a single
   navy primary action, pill filter chips, hairline tables, and
   magenta monospace slugs.
   ============================================================ */
:root {
  --pw-primary: #16263F;        /* navy — the one primary action + brand */
  --pw-primary-deep: #1E3252;   /* primary hover */
  --pw-accent: #C9A227;         /* gold — focus ring, sidebar active bar */
  --pw-accent-ink: #14202F;
  --pw-ink: #1B2534;            /* body ink */
  --pw-ink-strong: #141F30;     /* headings */
  --pw-paper: #FFFFFF;
  --pw-tint: #F4F6F9;           /* cool app background */
  --pw-panel: #FBFCFD;          /* table head / inset panels */
  --pw-muted: #66738A;
  --pw-line: #E4E7EC;           /* card + control borders */
  --pw-line-soft: #ECEFF3;      /* row separators */
  --pw-control-line: #D5DAE1;   /* input borders */
  --pw-btn-line: #D8DEE6;       /* secondary button borders */
  --pw-slug: #AD3468;           /* monospace slug / code */
  --pw-radius-sm: 8px;
  --pw-radius: 12px;
  --pw-shadow-card: none;       /* the redesign is flat + bordered, not floating */
  --pw-font: 'Pretendard Variable', Pretendard, -apple-system, "Segoe UI", system-ui, Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --pw-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html, body {
  font-family: var(--pw-font);
  background: var(--pw-tint);
  color: var(--pw-ink);
  -webkit-font-smoothing: antialiased;
}

/* refined, lighter headings (the redesign drops the heavy 800 weight) */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -0.01em; color: var(--pw-ink-strong); }
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.2rem; }

a, .btn-link { color: var(--pw-primary); }
a:hover, .btn-link:hover { color: #B08A1E; }

code, .pw-slug { color: var(--pw-slug); font-family: var(--pw-mono); font-size: .82em; }

/* ---- buttons ---- */
.btn { border-radius: var(--pw-radius-sm); font-weight: 600; font-size: .875rem; }
.btn-sm { border-radius: var(--pw-radius-sm); font-size: .8rem; }
.btn-primary {
  background-color: var(--pw-primary); border-color: var(--pw-primary); color: #fff;
  --bs-btn-disabled-bg: var(--pw-primary);
  --bs-btn-disabled-border-color: var(--pw-primary);
  --bs-btn-disabled-color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--pw-primary-deep) !important; border-color: var(--pw-primary-deep) !important; color: #fff;
}
.btn-outline-primary {
  color: var(--pw-primary); border-color: var(--pw-primary);
  --bs-btn-disabled-color: var(--pw-primary);
  --bs-btn-disabled-border-color: var(--pw-primary);
}
.btn-outline-primary:hover { background-color: var(--pw-primary); border-color: var(--pw-primary); color: #fff; }

/* the redesign's neutral secondary: white face, hairline border, ink-slate text */
.btn-outline-secondary {
  color: #33415C; border-color: var(--pw-btn-line); background-color: var(--pw-paper);
  --bs-btn-hover-color: #33415C; --bs-btn-hover-bg: #F3F5F8; --bs-btn-hover-border-color: #C3CBD6;
  --bs-btn-active-color: #33415C; --bs-btn-active-bg: #EDEFF3; --bs-btn-active-border-color: #C3CBD6;
  --bs-btn-disabled-color: #8A96A8; --bs-btn-disabled-border-color: var(--pw-btn-line);
}
/* Publish / Create keep a calm "go-live" green that harmonises with the cool shell */
.btn-success {
  background-color: #1E7A54; border-color: #1E7A54;
  --bs-btn-disabled-bg: #1E7A54;
  --bs-btn-disabled-border-color: #1E7A54;
  --bs-btn-disabled-color: #fff;
}
.btn-success:hover, .btn-success:focus { background-color: #186445 !important; border-color: #186445 !important; }
.btn-outline-danger { --bs-btn-color: #B42318; --bs-btn-border-color: #EBC8C4; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pw-accent) 35%, transparent);
}

/* ---- forms ---- */
.form-control, .form-select, .input-group-text {
  border-radius: var(--pw-radius-sm); border-color: var(--pw-control-line);
  background-color: var(--pw-paper); color: var(--pw-ink);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--pw-accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pw-accent) 28%, transparent);
}
.form-check-input:checked { background-color: var(--pw-primary); border-color: var(--pw-primary); }
.form-label { font-weight: 600; font-size: .82rem; color: #4A5568; margin-bottom: .35rem; }
.form-text { color: var(--pw-muted); }
::placeholder { color: #A5AFBE; }

/* ---- cards: flat, hairline-bordered (not floating) ---- */
.card {
  border: 1px solid var(--pw-line); border-radius: var(--pw-radius); box-shadow: var(--pw-shadow-card);
  background: var(--pw-paper);
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--pw-line);
  font-weight: 700; border-top-left-radius: var(--pw-radius) !important; border-top-right-radius: var(--pw-radius) !important;
}
.card.bg-light { background: var(--pw-panel) !important; }

/* ---- tables: hairline rows, tinted uppercase head, soft hover ---- */
.table { --bs-table-hover-bg: #F8FAFC; --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6A7689; font-weight: 700; background: var(--pw-panel);
  border-top: 1px solid var(--pw-line-soft); border-bottom-color: var(--pw-line-soft); white-space: nowrap;
}
.table td { border-bottom-color: var(--pw-line-soft); color: var(--pw-ink); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table-active { --bs-table-bg-state: color-mix(in srgb, var(--pw-accent) 10%, transparent); }
/* a table dropped inside a card sheds its own outer line so the two don't double up */
.card > .table:last-child, .card .table:last-child tr:last-child td { border-bottom: 0; }

.list-group { border-radius: var(--pw-radius-sm); }
.list-group-item { border-color: var(--pw-line); }
.list-group-item.active { background-color: var(--pw-primary); border-color: var(--pw-primary); }

/* ---- badges / pills ---- */
.badge { border-radius: 999px; font-weight: 650; font-size: .72rem; padding: .35em .7em; letter-spacing: .01em; }
.text-bg-success { background-color: #E7F4EC !important; color: #16794C !important; }
.text-bg-warning { background-color: #FBF3DC !important; color: #93670B !important; }
.text-bg-secondary { background-color: #EEF1F5 !important; color: #4A5568 !important; }
.text-bg-danger { background-color: #FDECEA !important; color: #B42318 !important; }

.alert { border-radius: var(--pw-radius); border: 1px solid transparent; }
.alert-info { background: #EEF4FB; border-color: #D6E4F5; color: #1E3A5A; }
.alert-success { background: #E7F4EC; border-color: #C7E6D3; color: #16794C; }
.alert-warning { background: #FBF3DC; border-color: #EBD9A4; color: #7A5E10; }
.alert-danger { background: #FDECEA; border-color: #F3CBC6; color: #B42318; }

/* validation stays loud but on-palette */
.valid.modified:not([type=checkbox]) { outline: 1px solid #1E7A54; }
.invalid { outline: 1px solid #b3261e; }
.validation-message { color: #b3261e; }

/* media picker tiles are themed in MediaPathSelect.razor.css — its scoped
   [b-*] selectors outrank anything written here, so the palette lives there */