/* Product workspace: dense dark operating surface, familiar controls, no decorative dashboard theatrics. */
.license-admin-page {
  --admin-canvas: #080c13;
  --admin-surface: #111923;
  --admin-surface-raised: #151f2c;
  --admin-surface-muted: #0d141e;
  --admin-ink: #e8eef8;
  --admin-muted: #a6b4c7;
  --admin-faint: #748399;
  --admin-line: #2a384b;
  --admin-line-strong: #40516b;
  --admin-accent: #7c9cff;
  --admin-accent-deep: #aebfff;
  --admin-accent-soft: #1b2a4a;
  --admin-success: #53d8c7;
  --admin-success-soft: #123a35;
  --admin-warning: #f1b86a;
  --admin-warning-soft: #3b2a16;
  --admin-danger: #ff8b98;
  --admin-danger-soft: #3d2029;
  min-width: 320px;
  color: var(--admin-ink);
  background:
    radial-gradient(circle at 96% 0, rgba(67, 97, 185, .2), transparent 30rem),
    linear-gradient(90deg, rgba(128, 151, 188, .035) 1px, transparent 1px) 0 0 / 132px 132px,
    var(--admin-canvas);
  font-family: var(--font-body);
}
.license-admin-page button, .license-admin-page input, .license-admin-page select, .license-admin-page textarea { font: inherit; }
.license-admin-page button { cursor: pointer; }
.license-admin-page button:disabled { cursor: not-allowed; opacity: .5; }

.site-shell { width: min(1400px, calc(100% - 64px)); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--admin-line); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.logout-button { padding: 6px 9px; }
.admin-main { min-height: calc(100vh - 65px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--admin-ink); font-size: .92rem; font-weight: 760; letter-spacing: -.018em; }
.brand em { margin-left: 4px; padding-left: 12px; color: var(--admin-muted); font-size: .79rem; font-style: normal; font-weight: 650; border-left: 1px solid var(--admin-line-strong); }
.admin-seal { position: relative; display: grid; width: 22px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--admin-line-strong); border-radius: 50%; background: var(--admin-surface-raised); }
.admin-seal::before, .admin-seal::after { position: absolute; content: ""; }
.admin-seal::before { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--admin-accent); box-shadow: 0 0 0 3px rgba(124, 156, 255, .16); }
.admin-seal::after { width: 100%; height: 1px; background: var(--admin-success); transform: rotate(-38deg); }
.back-link { color: var(--admin-muted); font-size: .8rem; }
.back-link:hover { color: var(--admin-success); }

.login-screen { display: grid; min-height: calc(100vh - 65px); place-items: center; padding: clamp(30px, 7vw, 96px) 0; }
/* Both states begin hidden. The session bootstrap reveals exactly one state,
   avoiding a login-card flash when an existing secure session is restored. */
.login-screen[hidden], #workspace[hidden], .is-pending { display: none !important; }
.login-panel { width: min(100%, 460px); padding: clamp(22px, 4vw, 32px); border: 1px solid var(--admin-line); border-radius: 10px; background: var(--admin-surface); box-shadow: 0 20px 48px rgba(0, 0, 0, .28); }
.login-panel h1 { margin: 8px 0 12px; color: var(--admin-ink); font-size: clamp(1.5rem, 4vw, 1.9rem); letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.login-panel .intro { margin-bottom: 22px; }
.login-form { display: grid; gap: 14px; }
.login-form label { color: var(--admin-muted); font-size: .78rem; font-weight: 650; }
.login-form .button { width: 100%; margin-top: 4px; }
.hero { display: grid; grid-template-columns: minmax(0, .75fr) minmax(330px, .65fr); gap: 42px; align-items: end; padding: clamp(31px, 4vw, 54px) 0 25px; }
.eyebrow, .panel-kicker { margin: 0; color: var(--admin-success); font-size: .72rem; font-weight: 760; letter-spacing: .025em; }
.hero h1 { margin: 8px 0 0; color: var(--admin-ink); font-size: 2rem; font-weight: 760; letter-spacing: -.042em; line-height: 1.08; }
.intro { max-width: 62ch; margin: 0; color: var(--admin-muted); font-size: .89rem; line-height: 1.68; text-wrap: pretty; }

.notice { display: none; margin: 0 0 16px; padding: 10px 13px; font-size: .84rem; line-height: 1.5; border: 1px solid var(--admin-line); border-radius: 8px; }
.notice.is-visible { display: block; }
.notice.is-success { color: #a4f0e5; border-color: #31756b; background: var(--admin-success-soft); }
.notice.is-error { color: #ffb8c0; border-color: #7e3c48; background: var(--admin-danger-soft); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 0 18px; overflow: hidden; border: 1px solid var(--admin-line); border-radius: 10px; background: var(--admin-line); }
.stat-card { min-height: 86px; padding: 13px 16px; background: var(--admin-surface); }
.stat-card span { display: block; color: var(--admin-muted); font-size: .75rem; }
.stat-card strong { display: block; margin-top: 7px; color: var(--admin-ink); font-size: 1.52rem; line-height: 1; letter-spacing: -.035em; }

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.76fr) minmax(320px, .74fr); gap: 15px; padding-bottom: 38px; }
.panel { border: 1px solid var(--admin-line); border-radius: 10px; background: var(--admin-surface); box-shadow: 0 13px 30px rgba(0, 0, 0, .2); }
.licenses-panel { padding: 17px; }
.operations-panel { padding: 17px; align-self: start; }
.panel-heading { margin-bottom: 14px; }
.list-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.panel-heading h2, .section-heading h2, .detail h2 { margin: 7px 0 0; color: var(--admin-ink); font-size: 1.04rem; font-weight: 750; letter-spacing: -.02em; }
.panel-heading p:not(.panel-kicker) { max-width: 37ch; margin: 6px 0 0; color: var(--admin-muted); font-size: .77rem; line-height: 1.54; }
.list-heading > p { margin: 0; text-align: right; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 13px; padding: 11px; border: 1px solid var(--admin-line); border-radius: 8px; background: var(--admin-surface-muted); }
.filter-bar label, .form-grid label { display: block; color: var(--admin-muted); font-size: .74rem; font-weight: 650; }
.filter-bar label > span { display: block; }
.search-field { flex: 1 1 220px; min-width: 175px; }
.filter-actions { margin-left: auto; white-space: nowrap; }

input, select, textarea { width: 100%; margin-top: 5px; padding: 8px 9px; color: var(--admin-ink); outline: none; border: 1px solid var(--admin-line-strong); border-radius: 6px; background: var(--admin-canvas); transition: border-color 150ms ease, box-shadow 150ms ease; }
textarea { min-height: 116px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8292a7; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 3px rgba(124, 156, 255, .16); }

.button { padding: 8px 11px; color: #081018; font-size: .79rem; font-weight: 730; border: 1px solid var(--admin-success); border-radius: 6px; background: var(--admin-success); transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; }
.button:hover:not(:disabled) { border-color: #91eee3; background: #91eee3; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button-secondary { color: var(--admin-muted); border-color: var(--admin-line-strong); background: var(--admin-surface-raised); }
.button-secondary:hover:not(:disabled) { color: var(--admin-accent-deep); border-color: var(--admin-accent); background: var(--admin-accent-soft); }
.button-warning { color: #ffcd86; border-color: #8a6432; background: var(--admin-warning-soft); }
.button-warning:hover:not(:disabled) { color: #ffe0ac; border-color: #bd8844; background: #4b351a; }

.table-wrap { overflow: auto; border: 1px solid var(--admin-line); border-radius: 8px; background: var(--admin-surface); }
table { width: 100%; min-width: 790px; border-collapse: collapse; font-size: .8rem; }
th, td { padding: 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--admin-line); }
th { color: var(--admin-muted); font-size: .7rem; font-weight: 730; background: var(--admin-surface-muted); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 120ms ease; }
tbody tr:hover td { background: var(--admin-surface-raised); }
code { color: #b8c9ff; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .76rem; }
.badge { display: inline-block; padding: 4px 7px; font-size: .7rem; font-weight: 730; line-height: 1.2; white-space: nowrap; border-radius: 999px; }
.status-active { color: #89eee1; background: var(--admin-success-soft); }
.status-revoked { color: #ffb3bd; background: var(--admin-danger-soft); }
.status-bound { color: #b7c8ff; background: var(--admin-accent-soft); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--admin-muted); }
.pagination-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.page-info { color: var(--admin-faint); font-size: .76rem; white-space: nowrap; }
.page-jump { display: flex; align-items: center; gap: 5px; color: var(--admin-muted); font-size: .76rem; white-space: nowrap; }
.page-jump input { width: 4.8em; margin: 0; padding: 6px; text-align: center; }

.detail, .audit, .import-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--admin-line); }
.detail { scroll-margin-top: 20px; }
.detail h2 { margin: 0 0 13px; }
.detail dl { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px 13px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--admin-line); border-radius: 8px; background: var(--admin-surface-muted); }
.detail dt { color: var(--admin-muted); font-size: .75rem; }
.detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.detail ul { margin: 0; padding-left: 18px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.span-all { grid-column: 1 / -1; }
.checkbox-row { display: flex !important; align-items: center; gap: 8px; padding: 7px 0; }
.checkbox-row input { width: auto; margin: 0; accent-color: var(--admin-success); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; }
.section-note, .hint, .empty { color: var(--admin-muted); font-size: .76rem; line-height: 1.55; }
.audit-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.audit-item { padding: 8px 9px; color: var(--admin-ink); font-size: .76rem; line-height: 1.5; border: 1px solid var(--admin-line); border-radius: 6px; background: var(--admin-surface-muted); }
.audit-item b { color: var(--admin-accent-deep); }
.small { font-size: .73rem; }
.generated { max-height: 170px; margin: 12px 0 0; padding: 10px; overflow: auto; color: #b8c9ff; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .76rem; line-height: 1.6; white-space: pre-wrap; border: 1px solid #3f517b; border-radius: 7px; background: var(--admin-accent-soft); }
.loading, .empty { padding: 22px; text-align: center; }
#license-rows.is-loading { opacity: .58; transition: opacity .12s ease; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 13px; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .operations-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
  .operations-panel .import-section { margin-top: 0; padding-top: 0; padding-left: 21px; border-top: 0; border-left: 1px solid var(--admin-line); }
}
@media (max-width: 720px) {
  .site-shell { width: min(100% - 36px, 1400px); }
  .topbar { min-height: 60px; }
  .topbar-actions { gap: 9px; }
  .logout-button { padding: 6px 8px; }
  .login-screen { min-height: calc(100vh - 61px); }
  .brand em { display: none; }
  .hero { padding-top: 28px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .licenses-panel, .operations-panel { padding: 14px; }
  .list-heading { display: block; }
  .list-heading > p { margin-top: 8px; text-align: left; }
  .filter-actions { margin-left: 0; }
  .pagination { justify-content: flex-start; }
  .page-info { width: 100%; order: 4; }
  .operations-panel { grid-template-columns: 1fr; }
  .operations-panel .import-section { margin-top: 18px; padding-top: 17px; padding-left: 0; border-top: 1px solid var(--admin-line); border-left: 0; }
}
@media (max-width: 470px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 80px; padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-all { grid-column: auto; }
  .detail dl { grid-template-columns: 1fr; gap: 3px; }
  .detail dd { margin-bottom: 7px; }
}


/* Authenticated workspace refinement: the catalog is the instrument, not a
   decorative dashboard. Compress non-essential framing and give the table the
   stable spatial priority it needs for repeated operational use. */
@media (min-width: 1051px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); gap: 24px; padding: 28px 0 18px; }
  .hero h1 { font-size: 1.72rem; }
  .stats { margin-bottom: 14px; }
  .stat-card { min-height: 70px; padding: 11px 15px; }
  .stat-card strong { margin-top: 5px; font-size: 1.36rem; }
  .dashboard-layout { grid-template-columns: minmax(0, 1fr) 356px; gap: 14px; }
  .operations-panel { position: sticky; top: 16px; }
}

.licenses-panel { padding: 15px; }
.operations-panel { padding: 15px; }
.panel { box-shadow: none; }
.list-heading { align-items: baseline; margin-bottom: 11px; }
.list-heading > p { color: var(--admin-faint); }
.filter-bar { gap: 9px; padding: 9px; }
.search-field { flex-basis: 260px; }
.table-wrap { border-radius: 7px; }
th, td { padding: 9px 10px; }
th { position: sticky; top: 0; z-index: 1; }
tbody tr:hover td { background: #172334; }
.operations-panel .panel-heading { margin-bottom: 11px; }
.operations-panel .panel-heading h2 { font-size: .99rem; }
.operations-panel .panel-heading p:not(.panel-kicker) { max-width: none; }
.operations-panel .form-grid { gap: 9px; }
.operations-panel textarea { min-height: 100px; }
.operations-panel .import-section { margin-top: 15px; padding-top: 15px; }

@media (max-width: 720px) {
  .hero { padding-bottom: 18px; }
  .stats { margin-bottom: 14px; }
  .licenses-panel, .operations-panel { padding: 12px; }
  .filter-bar { padding: 9px; }
}