/* HRlume Admin v23 — premium internal workspace shell.
   This layer modernizes navigation and page composition without changing
   any operational flows owned by the existing modules. */

:root {
  --sidebar-width: 286px;
  --sidebar-collapsed-width: 88px;
  --sidebar-bg: #f0f2f8;
  --sidebar-bg-raised: rgba(255,255,255,.68);
  --sidebar-border: #dfe3ee;
  --sidebar-fg: #182036;
  --sidebar-muted: #626b84;
  --sidebar-subtle: #9299ae;
  --sidebar-hover: rgba(255,255,255,.78);
  --sidebar-icon-bg: rgba(255,255,255,.52);
}

:root[data-theme='dark'] {
  --sidebar-bg: #171a2a;
  --sidebar-bg-raised: rgba(255,255,255,.045);
  --sidebar-border: #2b3044;
  --sidebar-fg: #f2f3fb;
  --sidebar-muted: #a3aac2;
  --sidebar-subtle: #717a97;
  --sidebar-hover: rgba(255,255,255,.065);
  --sidebar-icon-bg: rgba(255,255,255,.035);
}

.shell {
  min-height: 100vh;
  background:
    radial-gradient(780px 460px at 94% -12%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 68%),
    var(--color-bg);
  transition: grid-template-columns var(--dur-base), background var(--dur-base);
}

.admin-workspace { min-width: 0; }
.admin-workspace__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 42px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  color: var(--color-fg-muted);
  font-size: .72rem;
  font-weight: var(--font-medium);
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  backdrop-filter: blur(18px);
}
.admin-workspace__status { display: inline-flex; align-items: center; gap: 8px; color: var(--color-fg); }
.admin-workspace__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-success) 11%, transparent);
}
.admin-workspace__controls { display: flex; align-items: center; gap: 9px; }
.admin-workspace__secure { margin-right: 8px; }
.admin-workspace__controls .theme-toggle,
.workspace-control {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-fg-muted);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: 0 3px 12px rgba(15,23,42,.035);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.admin-workspace__controls .theme-toggle:hover,
.workspace-control:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border)); background: var(--color-surface); transform: translateY(-1px); }
.workspace-lang-toggle { font-size: .67rem; font-weight: var(--font-bold); letter-spacing: .04em; }

.sidebar {
  padding: 18px 14px 14px;
  border-right-color: var(--sidebar-border);
  color: var(--sidebar-fg);
  background:
    radial-gradient(380px 300px at -8% -4%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 68%),
    radial-gradient(300px 260px at 110% 26%, color-mix(in srgb, var(--brand-blue) 6%, transparent), transparent 72%),
    var(--sidebar-bg);
  transition: width var(--dur-base), padding var(--dur-base), background var(--dur-base), border-color var(--dur-base);
}
.sidebar__brand {
  gap: 11px;
  min-height: 58px;
  margin: 0 3px 20px;
  padding: 8px;
  border: 1px solid var(--sidebar-border);
  border-radius: 15px;
  background: var(--sidebar-bg-raised);
  box-shadow: 0 8px 26px rgba(36,43,75,.045), inset 0 1px rgba(255,255,255,.36);
}
.sidebar__brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--sidebar-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--sidebar-bg-raised));
  box-shadow: inset 0 1px rgba(255,255,255,.32);
}
.sidebar__brand .brand-logo { width: 25px; height: 25px; border-radius: 7px; }
.sidebar__brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar__brand-copy strong { overflow: hidden; color: var(--sidebar-fg); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__brand-copy small { margin-top: 4px; color: var(--sidebar-subtle); font-size: .55rem; font-weight: var(--font-bold); letter-spacing: .15em; }

.sidebar__nav { gap: 17px; padding: 1px 0 12px; }
.sidebar__section { display: grid; gap: 4px; }
.sidebar__section-label {
  padding: 0 12px 6px;
  color: var(--sidebar-subtle);
  font-size: .56rem;
  font-weight: var(--font-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sidebar__link {
  gap: 11px;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 12px;
  color: var(--sidebar-muted);
}
.sidebar__link::before { display: none; }
.sidebar__link-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  color: var(--sidebar-muted);
  background: var(--sidebar-icon-bg);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.sidebar__link-icon svg { width: 16px; height: 16px; }
.sidebar__link:hover { color: var(--sidebar-fg); background: var(--sidebar-hover); }
.sidebar__link:hover .sidebar__link-icon { color: var(--sidebar-fg); background: var(--sidebar-bg-raised); }
.sidebar__link.is-active {
  color: var(--sidebar-fg);
  background: linear-gradient(100deg, color-mix(in srgb, var(--brand-blue) 10%, var(--sidebar-bg-raised)), color-mix(in srgb, var(--violet-600) 11%, var(--sidebar-bg-raised)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 17%, var(--sidebar-border)), 0 8px 24px rgba(45,38,95,.07);
}
.sidebar__link.is-active .sidebar__link-icon {
  color: #fff;
  border-color: rgba(157,138,255,.22);
  background: linear-gradient(135deg, rgba(49,92,244,.8), rgba(124,58,237,.8));
  box-shadow: 0 7px 16px rgba(78,54,206,.22);
}

.sidebar__foot { gap: 7px; border-top-color: var(--sidebar-border); }
.sidebar__foot .sidebar__link { color: var(--sidebar-muted); }
.sidebar__foot .sidebar__link:hover { color: var(--sidebar-fg); }
.sidebar__account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin-bottom: 3px;
  padding: 10px;
  border: 1px solid var(--sidebar-border);
  border-radius: 13px;
  background: var(--sidebar-bg-raised);
  /* Now a <button> (was a plain div) so it can open "Мій профіль" — reset
     the button defaults it would otherwise pick up. */
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sidebar__account:hover { background: color-mix(in srgb, var(--sidebar-bg-raised) 70%, var(--sidebar-fg) 8%); border-color: color-mix(in srgb, var(--sidebar-border) 60%, var(--sidebar-fg) 20%); }
.sidebar__account-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--violet-600));
  font-size: .78rem;
  font-weight: var(--font-bold);
  box-shadow: inset 0 1px rgba(255,255,255,.22);
}
.sidebar__account-copy { display: flex; flex-direction: column; min-width: 0; }
.sidebar__account-copy strong { overflow: hidden; color: var(--sidebar-fg); font-size: .72rem; font-weight: var(--font-semibold); text-overflow: ellipsis; white-space: nowrap; }
.sidebar__account-copy small { margin-top: 3px; color: var(--sidebar-subtle); font-size: .62rem; }
.sidebar__link--utility { color: var(--sidebar-muted); }
.sidebar__utility-icon { width: 17px; height: 17px; margin: 0 5px; }
.sidebar-collapse__icon { width: 17px; height: 17px; margin: 0 5px; transition: transform var(--dur-base); }
.sidebar__version { padding: 4px 10px 0; color: var(--sidebar-subtle); }

@media (min-width: 901px) {
  .shell.is-sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed-width); }
  .shell.is-sidebar-collapsed .sidebar { padding-inline: 12px; }
  .shell.is-sidebar-collapsed .sidebar__brand { justify-content: center; margin-inline: 0; padding-inline: 0; }
  .shell.is-sidebar-collapsed .sidebar__brand-copy,
  .shell.is-sidebar-collapsed .sidebar__section-label,
  .shell.is-sidebar-collapsed .sidebar__link > span:not(.sidebar__link-icon),
  .shell.is-sidebar-collapsed .sidebar__account-copy,
  .shell.is-sidebar-collapsed .sidebar__version { display: none; }
  .shell.is-sidebar-collapsed .sidebar__nav { gap: 12px; }
  .shell.is-sidebar-collapsed .sidebar__link { justify-content: center; width: 100%; padding-inline: 0; }
  .shell.is-sidebar-collapsed .sidebar__account { justify-content: center; padding-inline: 0; }
  .shell.is-sidebar-collapsed .sidebar-collapse__icon { transform: rotate(180deg); }
}

.content { max-width: 1540px; padding: 34px 42px 58px; }
.workspace-hero {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 158px;
  margin-bottom: 26px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background:
    radial-gradient(420px 180px at 100% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 74%),
    linear-gradient(115deg, var(--color-surface), color-mix(in srgb, var(--color-primary-soft) 30%, var(--color-surface)));
  box-shadow: var(--shadow-sm);
}
.workspace-hero::after {
  content: '';
  position: absolute;
  top: -108px;
  right: -82px;
  width: 245px;
  height: 245px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--color-primary) 3.5%, transparent);
  pointer-events: none;
}
.workspace-hero__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  border-radius: 16px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-surface));
  box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.workspace-hero__icon svg { width: 24px; height: 24px; }
.workspace-hero__copy { position: relative; z-index: 1; min-width: 0; }
.workspace-hero__eyebrow {
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: .61rem;
  font-weight: var(--font-bold);
  letter-spacing: .14em;
}
.workspace-hero h1 { margin: 0; font-size: clamp(1.65rem, 2.3vw, 2.05rem); letter-spacing: -.045em; }
.workspace-hero p { max-width: 690px; margin: 7px 0 0; color: var(--color-fg-muted); font-size: .86rem; line-height: 1.55; }
.workspace-hero__actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.workspace-hero__actions .audit-filter { min-width: 230px; background: var(--color-surface); }

/* Decorative/structural chrome (eyebrows, page titles, card labels,
   badges, nav, buttons) is not data — clicking it showed the browser's
   default text-selection I-beam cursor and highlighted it like an editable
   field, which reads as broken. Real data (.entity-card__value, table
   cells, error text, URLs) is untouched and stays selectable/copyable.
   .btn/button/.sidebar__link/.sidebar__account already set their own
   cursor:pointer elsewhere — only user-select needs adding here. */
.workspace-hero__eyebrow, .workspace-hero h1, .workspace-hero p,
.entity-card__label, .badge, .data-table th {
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.btn, button, .sidebar__link, .sidebar__account {
  user-select: none;
  -webkit-user-select: none;
}

.stat-cards { gap: 12px; }
.stat-card { border-radius: 17px; }
.dash-section { box-shadow: none; }
.table-wrap { background: var(--color-surface); box-shadow: 0 8px 30px rgba(15,23,42,.035); }
.data-table th { background: color-mix(in srgb, var(--color-surface-hover) 55%, var(--color-surface)); }
.security-panel { max-width: 680px; padding: 26px; }

:root[data-theme='dark'] .workspace-hero {
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(139,92,246,.13), transparent 74%),
    linear-gradient(115deg, var(--color-surface), color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface)));
}
:root[data-theme='dark'] .workspace-hero__icon { box-shadow: inset 0 1px rgba(255,255,255,.06); }
:root[data-theme='dark'] .table-wrap { box-shadow: 0 12px 34px rgba(0,0,0,.13); }
:root[data-theme='dark'] .sidebar__brand { box-shadow: 0 10px 28px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.035); }
:root[data-theme='dark'] .sidebar__brand-mark { box-shadow: inset 0 1px rgba(255,255,255,.055); }

@media (max-width: 1100px) {
  .admin-workspace__bar { padding-inline: 28px; }
  .content { padding-inline: 28px; }
  .workspace-hero { grid-template-columns: 50px minmax(0, 1fr); }
  .workspace-hero__actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 4px; }
}

@media (max-width: 900px) {
  .shell {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .admin-workspace {
    width: 100%;
    min-width: 0;
  }
  .mobile-topbar {
    width: 100%;
    min-height: 68px;
  }
  .admin-workspace__bar { display: none; }
  .sidebar-collapse { display: none; }
  .mobile-topbar .sidebar__brand { border: 0; background: transparent; }
  .mobile-topbar .sidebar__brand-mark { border-color: var(--color-border); background: var(--color-surface-hover); }
  .mobile-topbar .sidebar__brand-copy strong { color: var(--color-fg); }
  .mobile-topbar .sidebar__brand-copy small { color: var(--color-fg-subtle); }
  .content { padding: 26px 22px 42px; }
}

@media (max-width: 620px) {
  .mobile-topbar .sidebar__brand-copy small { display: none; }
  .workspace-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
    padding: 21px;
    border-radius: 18px;
  }
  .workspace-hero__icon { width: 44px; height: 44px; border-radius: 13px; }
  .workspace-hero__icon svg { width: 21px; height: 21px; }
  .workspace-hero h1 { font-size: 1.45rem; }
  .workspace-hero p { font-size: .8rem; }
  .workspace-hero__actions { display: grid; width: 100%; }
  .workspace-hero__actions .btn,
  .workspace-hero__actions .audit-filter,
  .workspace-hero__actions .content-head__actions { width: 100%; min-width: 0; }
  .workspace-hero__actions .content-head__actions { display: grid; }
  .content { padding: 20px 14px 34px; }
}

/* Android-релізи (public/js/modules/android-releases.js) */
.ar-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .ar-layout { grid-template-columns: 1fr; } }
.ar-upload-card { padding: var(--space-5); border-radius: var(--radius-lg); position: sticky; top: var(--space-5); }
.ar-upload-card__title { margin: 0 0 var(--space-4); font-size: 1rem; }
.ar-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ar-file-label {
  display: flex; align-items: center; gap: var(--space-2); position: relative;
  padding: var(--space-3); border: 1.5px dashed var(--color-border); border-radius: var(--radius-md);
  color: var(--color-fg-muted); font-size: var(--text-sm, .875rem); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ar-file-label:hover { border-color: var(--color-primary); color: var(--color-fg); }
.ar-file-label svg { width: 18px; height: 18px; flex-shrink: 0; }
.ar-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ar-channel-hint { margin: -6px 0 var(--space-3); font-size: 12px; color: var(--color-fg-muted); line-height: 1.5; }

.ar-list-col { display: flex; flex-direction: column; gap: var(--space-5); }
.ar-channel-group__head { margin-bottom: var(--space-2); }
.ar-release-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ar-release-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); transition: border-color .15s ease;
}
.ar-release-row:hover { border-color: var(--color-primary); }
.ar-release-row--draft { border-style: dashed; border-color: var(--color-warning); background: var(--color-warning-soft); }
.ar-release-row--draft .ar-release-row__version { color: var(--color-warning); }
.ar-release-row__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-release-row__version { font-weight: 700; }
.ar-release-row__version .badge { margin-left: var(--space-2); font-size: 10px; }
.ar-release-row__sub { font-size: 12px; color: var(--color-fg-muted); }
.ar-release-row__changelog { margin: var(--space-1) 0 0; font-size: 13px; color: var(--color-fg-muted); }
.ar-danger { color: var(--color-danger); }