/* ============================================================
КАІ · Архів — стилі адмін-панелі (/admin/*)
Залежить від /css/kai.build.css + /css/cabinet.css (для cab-* і svc-*).
Адмінка має темний sidebar для візуального відмежування від кабінету.
============================================================ */
body.adm {
background: var(--mist);
min-height: 100vh;
}
/* ---------- SHELL ---------- */
.adm-shell {
display: grid;
grid-template-columns: 264px 1fr;
min-height: 100vh;
}
.adm-sidebar {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
background: #0A1628;
color: rgba(255,255,255,0.78);
display: flex;
flex-direction: column;
overflow-y: auto;
z-index: 50;
}
.adm-sidebar-brand {
padding: var(--s-5);
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
gap: var(--s-3);
}
.adm-sidebar-brand-logo {
height: 28px;
width: auto;
max-width: 160px;
flex-shrink: 0;
object-fit: contain;
display: block;
}
.adm-sidebar-brand-text {
margin-left: auto;
}
.adm-sidebar-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.1;
}
.adm-sidebar-brand-text strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.01em;
color: var(--paper);
}
.adm-sidebar-brand-text small {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--beam);
}
.adm-nav {
padding: var(--s-3);
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
}
.adm-nav-group {
padding: var(--s-4) var(--s-3) var(--s-2);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.adm-nav-item {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 9px var(--s-3);
border-radius: var(--r-2);
font-size: 13.5px;
font-weight: 500;
color: rgba(255,255,255,0.7);
transition: background 160ms ease, color 160ms ease;
}
.adm-nav-item:hover { background: rgba(255,255,255,0.06); color: var(--paper); }
.adm-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255,255,255,0.5); }
.adm-nav-item:hover svg { color: var(--paper); }
.adm-nav-item.is-active {
background: var(--paper);
color: var(--ink);
}
.adm-nav-item.is-active svg { color: var(--sky); }
.adm-nav-badge {
margin-left: auto;
background: var(--sky);
color: var(--paper);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.adm-nav-badge.urgent { background: var(--danger); }
/* BEM-style alias of .urgent — «Техпідтримка» unread badge. */
.adm-nav-badge--danger { background: var(--danger, #ef4444); }
.adm-nav-badge.warn { background: var(--beam); color: var(--ink); }
.adm-nav-item.is-active .adm-nav-badge { background: var(--ink); color: var(--paper); }
.adm-sidebar-user {
padding: var(--s-4);
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
gap: var(--s-3);
}
.adm-sidebar-user-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--beam) 0%, #E0A100 100%);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 500;
font-size: 14px;
flex-shrink: 0;
}
.adm-sidebar-user-info { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1; }
.adm-sidebar-user-info strong { font-size: 13px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-sidebar-user-info small {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--beam);
}
.adm-sidebar-user-logout {
margin-left: auto;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-1);
color: rgba(255,255,255,0.6);
transition: background 160ms ease, color 160ms ease;
}
.adm-sidebar-user-logout:hover { background: rgba(255,255,255,0.08); color: var(--paper); }
/* ---------- MAIN ---------- */
.adm-main { display: flex; flex-direction: column; min-width: 0; }
/* Topbar theming vars — default light; override under
prefers-color-scheme:dark below so the sticky header matches the
permanently-dark sidebar instead of looking like a bright band. */
body.adm {
--adm-topbar-bg: rgba(255,255,255,0.92);
--adm-topbar-border: var(--hair);
--adm-topbar-fg: var(--slate);
--adm-topbar-link-fg: var(--stone);
--adm-topbar-link-hover-fg: var(--sky);
--adm-topbar-burger-bg: var(--mist);
--adm-topbar-burger-fg: var(--ink);
}
@media (prefers-color-scheme: dark) {
body.adm {
--adm-topbar-bg: rgba(10,22,40,0.92); /* --ink w/ alpha */
--adm-topbar-border: rgba(255,255,255,0.08);
--adm-topbar-fg: rgba(255,255,255,0.7);
--adm-topbar-link-fg: rgba(255,255,255,0.85);
--adm-topbar-link-hover-fg: #7fa8ff; /* --sky lightened */
--adm-topbar-burger-bg: rgba(255,255,255,0.06);
--adm-topbar-burger-fg: var(--paper);
}
}
.adm-topbar {
position: sticky;
top: 0;
z-index: 40;
height: 64px;
display: flex;
align-items: center;
gap: var(--s-4);
padding: 0 clamp(16px, 3vw, 32px);
background: var(--adm-topbar-bg);
backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid var(--adm-topbar-border);
}
.adm-topbar-burger {
display: none;
width: 40px; height: 40px;
border-radius: var(--r-2);
background: var(--adm-topbar-burger-bg);
align-items: center;
justify-content: center;
color: var(--adm-topbar-burger-fg);
}
.adm-breadcrumbs {
display: flex;
gap: var(--s-2);
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--adm-topbar-fg);
}
.adm-breadcrumbs a { color: var(--adm-topbar-link-fg); transition: color 160ms ease; }
.adm-breadcrumbs a:hover { color: var(--adm-topbar-link-hover-fg); }
.adm-crumb-link { color: var(--adm-topbar-link-fg); transition: color 160ms ease; text-decoration: none; }
.adm-crumb-link:hover { color: var(--adm-topbar-link-hover-fg); text-decoration: underline; }
.adm-crumb-sep { margin: 0 var(--s-1); color: var(--adm-topbar-fg); }
.adm-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.adm-topbar-search {
position: relative;
width: 320px;
}
.adm-topbar-search input {
width: 100%;
padding: 8px 12px 8px 36px;
background: var(--mist);
border: 1px solid transparent;
border-radius: var(--r-2);
font-size: 13.5px;
transition: background 160ms ease, border-color 160ms ease;
}
.adm-topbar-search input:focus {
background: var(--paper);
border-color: var(--sky);
outline: 2px solid rgba(43,108,255,0.18);
}
.adm-topbar-search svg {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
color: var(--slate);
}
.adm-icon-btn {
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-2);
color: var(--stone);
background: transparent;
position: relative;
}
.adm-icon-btn:hover { background: var(--mist); color: var(--ink); }
.adm-icon-btn .dot {
position: absolute;
top: 8px; right: 9px;
width: 8px; height: 8px;
background: var(--danger);
border: 2px solid var(--paper);
border-radius: 50%;
}
/* ---------- CONTENT ---------- */
.adm-content {
padding: clamp(20px, 3vw, 36px);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--s-6);
}
.adm-page-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-5);
flex-wrap: wrap;
}
.adm-page-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.6vw, 30px);
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.15;
}
.adm-page-sub {
margin-top: 4px;
font-size: 13.5px;
color: var(--stone);
}
.adm-page-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
/* ---------- KPI ---------- */
.adm-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--s-3);
}
.adm-kpi {
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
padding: var(--s-4);
position: relative;
transition: border-color 200ms ease, transform 300ms var(--ease);
}
.adm-kpi:hover { border-color: var(--ink); transform: translateY(-2px); }
.adm-kpi-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 6px;
}
.adm-kpi-num {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
letter-spacing: -0.025em;
line-height: 1;
color: var(--ink);
}
.adm-kpi-foot {
margin-top: 8px;
font-size: 11.5px;
color: var(--stone);
display: flex;
align-items: center;
gap: 6px;
}
.adm-kpi-foot.up { color: var(--success); }
.adm-kpi-foot.danger { color: var(--danger); }
.adm-kpi-foot.warn { color: #92400E; }
.adm-kpi-foot a { color: var(--sky); font-weight: 600; }
.adm-kpi-strip {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: var(--r-2) var(--r-2) 0 0;
}
.adm-kpi-strip.sky { background: var(--sky); }
.adm-kpi-strip.beam { background: var(--beam); }
.adm-kpi-strip.success { background: var(--success); }
.adm-kpi-strip.danger { background: var(--danger); }
.adm-kpi-strip.ink { background: var(--ink); }
.adm-kpi-strip.violet { background: #8B5CF6; }
/* ---------- QUICK FILTER STRIP ---------- */
.adm-filter-strip {
display: inline-flex;
padding: 4px;
background: var(--mist);
border-radius: 999px;
gap: 2px;
}
.adm-filter-strip button {
padding: 7px 14px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--stone);
transition: all 160ms ease;
background: transparent;
cursor: pointer;
}
.adm-filter-strip button.is-active {
background: var(--paper);
color: var(--ink);
box-shadow: 0 1px 3px rgba(10,22,40,0.1);
}
/* ---------- CARDS / SECTIONS ---------- */
.adm-card {
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
padding: var(--s-5);
}
.adm-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-4);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--hair);
flex-wrap: wrap;
}
.adm-card-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
}
.adm-card-actions { display: flex; gap: var(--s-2); align-items: center; }
.adm-card-link {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sky);
}
.adm-card-link:hover { color: var(--sky-deep); }
/* ---------- TABLES ---------- */
.adm-table-wrap {
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
overflow: hidden;
}
.adm-table-toolbar {
display: flex;
gap: var(--s-3);
padding: var(--s-4);
border-bottom: 1px solid var(--hair);
flex-wrap: wrap;
align-items: center;
}
.adm-table-bulk-actions {
display: flex;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
background: #FFFBEB;
border-bottom: 1px solid var(--hair);
align-items: center;
font-size: 12.5px;
color: var(--ink);
flex-wrap: wrap;
}
.adm-table-bulk-actions strong { color: var(--ink); font-weight: 600; }
.adm-table-bulk-actions button {
background: var(--paper);
border: 1px solid var(--hair);
padding: 6px 12px;
border-radius: var(--r-2);
font-size: 12.5px;
color: var(--ink);
cursor: pointer;
font-weight: 500;
}
.adm-table-bulk-actions button:hover { border-color: var(--ink); }
.adm-table-bulk-actions button.danger { color: var(--danger); }
.adm-filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--mist);
border: 1px solid transparent;
border-radius: 999px;
font-size: 12px;
color: var(--stone);
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.adm-filter:hover { background: var(--paper); border-color: var(--hair); color: var(--ink); }
.adm-filter.is-active { background: var(--ink); color: var(--paper); }
.adm-filter.is-danger { background: #FEE2E2; color: #991B1B; }
.adm-filter.is-warn { background: var(--beam-soft); color: #92400E; }
.adm-table-scroll { overflow-x: auto; }
.adm-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.adm-table thead th {
text-align: left;
padding: 10px var(--s-4);
background: var(--mist);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
border-bottom: 1px solid var(--hair);
white-space: nowrap;
}
.adm-table thead th.sortable { cursor: pointer; }
.adm-table thead th.sortable::after { content: " ↕"; opacity: 0.4; }
.adm-table thead th.checkbox-col { width: 36px; padding-right: 0; }
.adm-table tbody tr { border-bottom: 1px solid var(--hair); transition: background 140ms ease; }
.adm-table tbody tr:last-child { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--mist); }
.adm-table tbody tr.is-overdue { background: linear-gradient(90deg, rgba(254,226,226,0.4) 0%, transparent 60%); }
.adm-table tbody tr.is-overdue:hover { background: linear-gradient(90deg, rgba(254,226,226,0.7) 0%, var(--mist) 60%); }
.adm-table tbody td {
padding: 12px var(--s-4);
color: var(--ink);
vertical-align: middle;
}
.adm-table tbody td.muted { color: var(--stone); }
.adm-table tbody td.actions { text-align: right; white-space: nowrap; }
.adm-table tbody td.actions a { color: var(--sky); font-weight: 600; }
.adm-table tbody td.actions a:hover { color: var(--sky-deep); }
.adm-table .req-id {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--sky-deep);
white-space: nowrap;
display: inline-block;
}
/* Prevent hyphen/space-breaks in mono-styled cells (RNOKPP, phones, txn IDs)
and in right-aligned numeric/amount cells. */
.adm-table tbody td[style*="font-mono"],
.adm-table tbody td [style*="font-mono"],
.adm-table tbody td[style*="text-align:right"],
.adm-table tbody td[style*="text-align: right"] {
white-space: nowrap;
}
.adm-table tbody td.actions { min-width: 110px; }
.adm-table .person {
display: flex; flex-direction: column; gap: 1px; line-height: 1.2;
background: transparent; border: 0; padding: 0; align-items: flex-start;
}
.adm-table .person strong { font-size: 13px; color: var(--ink); white-space: nowrap; }
.adm-table .person small { font-size: 11.5px; color: var(--stone); font-family: var(--font-mono); }
.adm-table .overdue-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
background: #FEE2E2;
color: #991B1B;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.adm-table-foot {
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--hair);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
font-size: 12px;
color: var(--stone);
flex-wrap: wrap;
}
/* ---------- STATUSES ---------- */
.adm-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.adm-status::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
.adm-status.draft { background: #F1F5F9; color: #475569; }
.adm-status.submitted { background: var(--sky-soft); color: var(--sky-deep); }
.adm-status.signed { background: #EDE9FE; color: #5B21B6; }
.adm-status.registered { background: var(--sky-soft); color: var(--sky-deep); }
.adm-status.new { background: #DBEAFE; color: #1E40AF; }
.adm-status.in-progress { background: var(--beam-soft); color: #92400E; }
.adm-status.payment-due { background: #FEE2E2; color: #991B1B; }
.adm-status.paid { background: #DCFCE7; color: #166534; }
.adm-status.doc-preparing{ background: #FEF3C7; color: #92400E; }
.adm-status.wait-signature{ background: #FCE7F3; color: #9D174D; }
.adm-status.ready { background: #DBEAFE; color: #1E40AF; }
.adm-status.in-delivery { background: #E0E7FF; color: #3730A3; }
.adm-status.delivered { background: #D1FAE5; color: #047857; }
.adm-status.completed { background: var(--ink); color: var(--paper); }
.adm-status.rejected { background: #FCA5A5; color: #7F1D1D; }
.adm-status.warning { background: #FEF3C7; color: #92400E; }
/* колонка «Дії»: складаємо посилання вертикально, щоб умістити «Редагувати» + «Кімнати» */
.adm-actions-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* Compact priority dot */
.adm-priority {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
}
.adm-priority.high { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.adm-priority.normal { background: var(--slate); }
/* Role / actor badges */
.adm-role-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
background: var(--mist);
color: var(--stone);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.adm-role-tag.super { background: var(--ink); color: var(--paper); }
.adm-role-tag.admin { background: #EDE9FE; color: #5B21B6; }
.adm-role-tag.archivist { background: var(--beam-soft); color: #6B4900; }
.adm-role-tag.archive-mgr { background: #FCE7F3; color: #9D174D; }
.adm-role-tag.delivery-mgr { background: #E0E7FF; color: #3730A3; }
.adm-role-tag.accountant { background: #DCFCE7; color: #166534; }
.adm-role-tag.viewer { background: #F1F5F9; color: #475569; }
/* ---------- DETAIL CARD GRID ---------- */
.adm-detail {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--s-5);
}
.adm-detail-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.adm-detail-side { display: flex; flex-direction: column; gap: var(--s-4); }
.adm-summary-card {
background: linear-gradient(135deg, var(--ink) 0%, #14213D 100%);
color: var(--paper);
border-radius: var(--r-3);
padding: var(--s-5);
position: relative;
overflow: hidden;
}
.adm-summary-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255,184,0,0.18), transparent 60%);
pointer-events: none;
}
.adm-summary-card > * { position: relative; }
.adm-summary-card .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 8px;
}
.adm-summary-card .num {
font-family: var(--font-display);
font-weight: 500;
font-size: 30px;
letter-spacing: -0.02em;
line-height: 1;
}
.adm-dl {
display: grid;
grid-template-columns: 180px 1fr;
gap: 10px 16px;
font-size: 13.5px;
}
.adm-dl dt { color: var(--stone); }
.adm-dl dd { color: var(--ink); font-weight: 500; }
.adm-dl dd code { font-family: var(--font-mono); font-size: 12.5px; color: var(--sky-deep); background: var(--mist); padding: 1px 6px; border-radius: 4px; }
/* ---------- TIMELINE (server-side timeline with old/new status) ---------- */
/* Timeline pixel-perfect alignment:
--tl-dot: dot diameter
--tl-dot-x: dot's left position within container's content area
--tl-line-x: line's left position (centred on the dot)
*/
.adm-timeline {
position: relative;
padding-left: var(--s-7);
--tl-dot: 22px;
--tl-dot-x: 5px; /* dot left within container content area */
--tl-line-x: calc(var(--tl-dot-x) + var(--tl-dot) / 2 - 1px); /* dot centre minus half the 2px line */
}
.adm-timeline::before {
content: "";
position: absolute;
left: var(--tl-line-x); top: 6px; bottom: 6px;
width: 2px;
background: var(--hair);
}
.adm-timeline-item { position: relative; padding-bottom: var(--s-5); }
.adm-timeline-item:last-child { padding-bottom: 0; }
.adm-timeline-dot {
position: absolute;
left: calc(-1 * var(--s-7) + var(--tl-dot-x));
top: 2px;
width: var(--tl-dot); height: var(--tl-dot);
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--hair);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--stone);
}
.adm-timeline-dot svg { width: 11px; height: 11px; }
.adm-timeline-dot.sky { background: var(--sky); border-color: var(--sky); color: var(--paper); }
.adm-timeline-dot.beam { background: var(--beam); border-color: var(--beam); color: var(--ink); }
.adm-timeline-dot.success { background: var(--success); border-color: var(--success); color: var(--paper); }
.adm-timeline-dot.danger { background: var(--danger); border-color: var(--danger); color: var(--paper); }
.adm-timeline-dot.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.adm-timeline-head {
display: flex;
gap: var(--s-2);
align-items: center;
flex-wrap: wrap;
margin-bottom: 2px;
}
.adm-timeline-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.adm-timeline-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--slate);
}
.adm-timeline-actor {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
}
.adm-timeline-text {
font-size: 13px;
color: var(--stone);
line-height: 1.5;
}
.adm-timeline-transition {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--stone);
}
.adm-timeline-transition .arr { color: var(--slate); }
/* ---------- ACTIONS PANEL ---------- */
.adm-actions-panel {
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
padding: var(--s-4);
}
.adm-actions-group {
margin-bottom: var(--s-3);
}
.adm-actions-group:last-child { margin-bottom: 0; }
.adm-actions-group h4 {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
margin-bottom: 8px;
}
.adm-action-btn {
display: flex;
align-items: center;
gap: var(--s-3);
width: 100%;
padding: 9px 12px;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
font-size: 13px;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
margin-bottom: 6px;
transition: border-color 160ms ease, background 160ms ease;
}
.adm-action-btn:hover { border-color: var(--ink); background: var(--mist); }
.adm-action-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.adm-action-btn.primary:hover { background: var(--sky-deep); }
.adm-action-btn.danger { color: var(--danger); }
.adm-action-btn.danger:hover { border-color: var(--danger); background: #FEF2F2; }
.adm-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.adm-action-btn.disabled { opacity: 0.5; pointer-events: none; }
/* ---------- INTERNAL COMMENTS ---------- */
.adm-comment {
display: flex;
gap: var(--s-3);
padding: var(--s-3) 0;
border-bottom: 1px solid var(--hair);
}
.adm-comment:last-child { border-bottom: 0; }
.adm-comment-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--mist);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 500;
font-size: 11px;
flex-shrink: 0;
}
.adm-comment-body { flex: 1; min-width: 0; }
.adm-comment-head {
display: flex;
align-items: center;
gap: var(--s-2);
margin-bottom: 4px;
flex-wrap: wrap;
}
.adm-comment-head strong { font-size: 13.5px; color: var(--ink); }
.adm-comment-head time { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
.adm-comment-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.adm-comment-input {
width: 100%;
padding: var(--s-3);
border: 1px solid var(--hair);
border-radius: var(--r-2);
font-size: 13.5px;
font-family: inherit;
resize: vertical;
margin-top: var(--s-3);
}
/* ---------- AUDIT LOG / ACTIVITY ---------- */
.adm-log-row {
display: grid;
grid-template-columns: 140px 120px 1fr 110px;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--hair);
font-size: 13px;
align-items: center;
}
.adm-log-row:last-child { border-bottom: 0; }
.adm-log-row:hover { background: var(--mist); }
.adm-log-row time { font-family: var(--font-mono); font-size: 11.5px; color: var(--stone); }
.adm-log-action {
font-family: var(--font-mono);
font-size: 11px;
color: var(--sky-deep);
font-weight: 600;
letter-spacing: 0.04em;
}
.adm-log-detail { font-size: 13px; color: var(--ink); }
.adm-log-detail strong { font-weight: 600; }
.adm-log-detail small { display: block; font-size: 11px; color: var(--stone); margin-top: 2px; }
.adm-log-ip { font-family: var(--font-mono); font-size: 11px; color: var(--slate); text-align: right; }
/* ---------- FORMS ---------- */
.adm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.adm-form-grid.full { grid-template-columns: 1fr; }
.adm-field { display: flex; flex-direction: column; gap: 6px; }
.adm-field.col-span { grid-column: 1 / -1; }
.adm-field label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.adm-field label .req { color: var(--danger); margin-left: 2px; }
.adm-field input, .adm-field select, .adm-field textarea {
padding: 9px 12px;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
font-size: 13.5px;
color: var(--ink);
font-family: inherit;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus {
outline: 0;
border-color: var(--sky);
box-shadow: 0 0 0 4px rgba(43,108,255,0.16);
}
.adm-field-hint { font-size: 11.5px; color: var(--stone); }
/* ---------- PERMISSIONS MATRIX ---------- */
.adm-perm-matrix {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.adm-perm-matrix th {
text-align: left;
padding: 10px var(--s-3);
background: var(--mist);
border-bottom: 1px solid var(--hair);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--stone);
vertical-align: bottom;
}
.adm-perm-matrix thead th.rotated {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
vertical-align: bottom;
text-align: left;
padding: 0.75rem 0.35rem;
min-height: 12rem;
height: auto;
line-height: 1.15;
font-weight: 600;
font-size: 0.85rem;
}
.adm-perm-matrix thead th.rotated > span {
display: inline-block;
}
.adm-perm-matrix thead th:first-child {
vertical-align: bottom;
text-align: left;
}
.adm-perm-matrix td {
padding: 8px var(--s-3);
border-bottom: 1px solid var(--hair);
vertical-align: middle;
}
.adm-perm-matrix tbody tr:hover { background: var(--mist); }
.adm-perm-matrix .perm-name {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink);
font-weight: 500;
}
.adm-perm-matrix .perm-desc { font-size: 11px; color: var(--stone); }
.adm-perm-matrix td.allow { text-align: center; color: var(--success); font-size: 16px; }
.adm-perm-matrix td.deny { text-align: center; color: var(--hair-2); font-size: 14px; }
.adm-perm-matrix__role-col { width: 44px; max-width: 44px; min-width: 44px; padding: 4px 2px; }
/* ---------- RESPONSIVE ---------- */
.adm-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(10,22,40,0.5);
z-index: 45;
}
.adm-backdrop.is-open { display: block; }
/* Dashboard two-column layout (urgent + occupancy) */
.adm-dash-two {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--s-5);
}
@media (max-width: 1100px) {
.adm-detail { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.adm-shell { grid-template-columns: 1fr; }
.adm-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
transform: translateX(-100%);
transition: transform 280ms var(--ease);
box-shadow: 0 0 40px rgba(10,22,40,0.4);
}
.adm-sidebar.is-open { transform: translateX(0); }
.adm-topbar-burger { display: inline-flex; }
.adm-topbar-search { display: none; }
.adm-form-grid { grid-template-columns: 1fr; }
.adm-dl { grid-template-columns: 1fr; gap: 2px 0; }
.adm-dl dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.adm-log-row { grid-template-columns: 1fr; gap: 4px; padding: var(--s-3); }
.adm-log-ip { text-align: left; }
}
@media (max-width: 760px) {
/* Dashboard / reports two-column blocks collapse to single full-width column */
.adm-dash-two { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
.adm-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.adm-kpi-num { font-size: 22px; }
.adm-content { padding: var(--s-4); gap: var(--s-4); }
.adm-page-title { font-size: 22px; }
.adm-perm-matrix { font-size: 11px; }
}
/* ============================================================
ALERTS · used across auth + dorm forms + admin layout
============================================================ */
.adm-alert {
padding: var(--s-3) var(--s-4);
border-radius: var(--r-2);
border: 1px solid var(--hair);
background: var(--mist);
color: var(--ink);
font-size: 14px;
line-height: 1.5;
}
.adm-alert + .adm-alert { margin-top: var(--s-3); }
.adm-alert ul { padding-left: var(--s-4); }
.adm-alert ul li + li { margin-top: 4px; }
.adm-alert strong { font-weight: 600; }
.adm-alert--info { background: var(--sky-soft); border-color: color-mix(in srgb, var(--sky) 24%, transparent); color: var(--sky-deep); }
.adm-alert--success { background: color-mix(in srgb, var(--success) 12%, var(--paper)); border-color: color-mix(in srgb, var(--success) 34%, transparent); color: #065f46; }
.adm-alert--warn { background: var(--beam-soft); border-color: color-mix(in srgb, var(--beam) 38%, transparent); color: #7a4a00; }
.adm-alert--danger { background: color-mix(in srgb, var(--danger) 10%, var(--paper)); border-color: color-mix(in srgb, var(--danger) 34%, transparent); color: #7f1d1d; }
/* ============================================================
AUTH · /login, /login/verify, /login/blocked
Standalone centered card, no sidebar chrome.
============================================================ */
body.adm--auth {
background: var(--mist);
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-4);
}
.adm-auth-wrap {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.adm-auth-card {
padding: var(--s-6) var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-4);
box-shadow: 0 10px 32px -18px rgba(10, 22, 40, 0.28), 0 1px 2px rgba(10, 22, 40, 0.04);
}
.adm-auth-brand {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--hair);
margin-bottom: var(--s-2);
}
.adm-auth-brand strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--ink);
}
.adm-auth-brand small {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--stone);
}
.adm--auth .adm-page-title {
font-size: 24px;
letter-spacing: -0.01em;
}
.adm-auth-card > form { display: flex; flex-direction: column; gap: var(--s-4); }
.adm-auth-card > form > details { color: var(--stone); font-size: 13px; }
.adm-auth-card > form > details > summary {
cursor: pointer;
padding: 6px 0;
font-weight: 500;
color: var(--sky-deep);
}
.adm-auth-card > form > details[open] > summary { margin-bottom: var(--s-2); }
.adm-btn--block { width: 100%; justify-content: center; }
.adm-auth-foot {
margin-top: var(--s-2);
text-align: center;
font-size: 13.5px;
}
@media (max-width: 480px) {
body.adm--auth { padding: var(--s-3); }
.adm-auth-card { padding: var(--s-5); }
.adm--auth .adm-page-title { font-size: 20px; }
}
/* ============================================================
EMPLOYEE ANALYTICS · /admin/employee-analytics/*
Self-contained block — does not override existing .adm-* rules.
============================================================ */
/* ---------- Filter bar (advanced filters above page) ---------- */
.eanal-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--s-3);
padding: var(--s-4);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
box-shadow: 0 1px 2px rgba(10,22,40,0.04);
}
.eanal-filter-field { display: flex; flex-direction: column; gap: 4px; }
.eanal-filter-field label {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
}
.eanal-filter-field select,
.eanal-filter-field input[type="search"] {
appearance: none;
width: 100%;
padding: 9px 12px;
border: 1px solid var(--hair);
border-radius: var(--r-1);
background: var(--paper);
font-family: var(--font-sans);
font-size: 13.5px;
color: var(--ink);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.eanal-filter-field select:focus,
.eanal-filter-field input[type="search"]:focus {
outline: none;
border-color: var(--sky);
box-shadow: 0 0 0 3px rgba(43,108,255,0.15);
}
.eanal-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.eanal-actions button,
.eanal-actions a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--hair);
border-radius: var(--r-1);
background: var(--paper);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease;
}
.eanal-actions button:hover,
.eanal-actions a:hover { border-color: var(--ink); background: var(--mist); }
.eanal-actions .is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.eanal-actions .is-primary:hover { background: var(--ink-90); border-color: var(--ink-90); }
/* ---------- KPI grid extension (more compact + tone classes) ---------- */
.eanal-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-3);
}
.eanal-kpi {
position: relative;
padding: 14px 16px 14px 18px;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
overflow: hidden;
transition: transform 160ms var(--ease), border-color 160ms ease, box-shadow 160ms ease;
}
.eanal-kpi:hover {
transform: translateY(-2px);
border-color: var(--ink);
box-shadow: 0 8px 24px -12px rgba(10,22,40,0.15);
}
.eanal-kpi::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--sky);
}
.eanal-kpi.tone-sky::before { background: var(--sky); }
.eanal-kpi.tone-beam::before { background: var(--beam); }
.eanal-kpi.tone-success::before { background: var(--success); }
.eanal-kpi.tone-danger::before { background: var(--danger); }
.eanal-kpi.tone-violet::before { background: #8B5CF6; }
.eanal-kpi.tone-ink::before { background: var(--ink); }
.eanal-kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 8px;
}
.eanal-kpi-label {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
}
.eanal-kpi-help {
width: 14px; height: 14px;
border-radius: 999px;
background: var(--mist);
color: var(--stone);
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
border: 1px solid var(--hair);
}
.eanal-kpi-num {
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
}
.eanal-kpi-foot {
margin-top: 6px;
font-size: 11.5px;
color: var(--stone);
display: inline-flex;
align-items: center;
gap: 4px;
}
.eanal-kpi-foot.up { color: var(--success); }
.eanal-kpi-foot.down { color: var(--danger); }
.eanal-kpi-foot.warn { color: #92400E; }
.eanal-kpi-foot.flat { color: var(--stone); }
/* ---------- Chart grid + cards ---------- */
.eanal-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--s-4);
}
.eanal-col-12 { grid-column: span 12; }
.eanal-col-8 { grid-column: span 8; }
.eanal-col-6 { grid-column: span 6; }
.eanal-col-4 { grid-column: span 4; }
.eanal-card {
padding: var(--s-5);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
box-shadow: 0 1px 2px rgba(10,22,40,0.03);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.eanal-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
.eanal-card-head h2,
.eanal-card-head h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--ink);
}
.eanal-card-head .eanal-card-sub {
margin-top: 4px;
font-size: 12px;
color: var(--stone);
}
.eanal-card-actions {
display: inline-flex;
gap: 6px;
align-items: center;
}
.eanal-card-link {
font-size: 12.5px;
font-weight: 600;
color: var(--sky);
}
.eanal-card-link:hover { color: var(--sky-deep); }
/* ---------- Chart canvas wrapper ---------- */
.eanal-chart-wrap {
position: relative;
width: 100%;
min-height: 260px;
}
.eanal-chart-wrap.tall { min-height: 340px; }
.eanal-chart-wrap.short { min-height: 200px; }
.eanal-chart-wrap canvas { display: block; }
/* ---------- Loading skeleton ---------- */
.eanal-skel {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent, rgba(10,22,40,0.04), transparent),
var(--mist);
background-size: 200% 100%, 100% 100%;
background-position: -100% 0, 0 0;
border-radius: var(--r-2);
animation: eanal-skel 1.4s linear infinite;
}
@keyframes eanal-skel {
to { background-position: 200% 0, 0 0; }
}
/* ---------- Empty / error states ---------- */
.eanal-empty,
.eanal-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--s-6) var(--s-4);
text-align: center;
color: var(--stone);
font-size: 13px;
border: 1px dashed var(--hair);
border-radius: var(--r-2);
background: var(--mist);
}
.eanal-empty strong,
.eanal-error strong {
color: var(--ink);
font-size: 14px;
}
.eanal-error { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
/* ---------- Bar list (employee comparison rows) ---------- */
.eanal-barlist {
display: flex;
flex-direction: column;
gap: 10px;
}
.eanal-barlist-row {
display: grid;
grid-template-columns: 170px 1fr 60px;
align-items: center;
gap: var(--s-3);
font-size: 13px;
}
.eanal-barlist-name {
font-weight: 600;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.eanal-barlist-track {
position: relative;
height: 22px;
background: var(--mist);
border-radius: var(--r-1);
overflow: hidden;
}
.eanal-barlist-fill {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, var(--sky), var(--sky-deep));
border-radius: var(--r-1);
transition: width 320ms var(--ease);
}
.eanal-barlist-fill.is-warn { background: linear-gradient(90deg, var(--beam), #B45309); }
.eanal-barlist-fill.is-danger { background: linear-gradient(90deg, var(--danger), #7F1D1D); }
.eanal-barlist-fill.is-success { background: linear-gradient(90deg, var(--success), #047857); }
.eanal-barlist-label-in {
position: absolute;
left: 10px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
color: var(--paper);
mix-blend-mode: difference;
filter: invert(1);
}
.eanal-barlist-num {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
text-align: right;
color: var(--ink);
}
/* ---------- Stacked workload bar ---------- */
.eanal-stack-row {
display: grid;
grid-template-columns: 170px 1fr 80px;
gap: var(--s-3);
align-items: center;
font-size: 13px;
}
.eanal-stack-track {
display: flex;
height: 18px;
background: var(--mist);
border-radius: var(--r-1);
overflow: hidden;
}
.eanal-stack-seg { height: 100%; }
.eanal-stack-seg[data-tone="new"] { background: #DBEAFE; }
.eanal-stack-seg[data-tone="in_progress"] { background: var(--beam-soft); }
.eanal-stack-seg[data-tone="doc_preparing"] { background: #FEF3C7; }
.eanal-stack-seg[data-tone="wait_signature"] { background: #FCE7F3; }
.eanal-stack-seg[data-tone="payment_due"] { background: #FEE2E2; }
.eanal-stack-seg[data-tone="ready"] { background: #BFDBFE; }
.eanal-stack-seg[data-tone="delivery"] { background: #E0F2FE; }
.eanal-stack-seg[data-tone="overdue"] { background: var(--danger); }
.eanal-legend {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
font-size: 12px;
color: var(--stone);
margin-top: var(--s-2);
}
.eanal-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.eanal-legend i {
display: inline-block;
width: 12px; height: 12px;
border-radius: 3px;
background: var(--mist);
}
/* ---------- Two-pane (table + horizontal bar) ---------- */
.eanal-twopane {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s-4);
}
.eanal-twopane > div { min-width: 0; }
.eanal-mini-table-wrap {
max-width: 100%;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Allow eanal-card grid items to shrink so embedded tables don't overflow */
.eanal-card { min-width: 0; }
#eanal-sla { min-width: 0; }
.eanal-mini-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
@media (max-width: 560px) {
.eanal-mini-table { font-size: 12px; }
.eanal-mini-table thead th { padding: 6px 8px; font-size: 9.5px; }
.eanal-mini-table tbody td { padding: 8px 8px; }
}
.eanal-mini-table thead th {
text-align: left;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
padding: 8px var(--s-3);
border-bottom: 1px solid var(--hair);
background: var(--mist);
position: sticky;
top: 0;
}
.eanal-mini-table tbody td {
padding: 10px var(--s-3);
border-bottom: 1px solid var(--hair);
color: var(--ink);
vertical-align: middle;
}
.eanal-mini-table tbody tr:hover td { background: var(--mist); }
.eanal-mini-table tbody td.num {
font-family: var(--font-mono);
font-weight: 600;
text-align: right;
white-space: nowrap;
}
/* ---------- Employee table (full) ---------- */
.eanal-emp-wrap {
position: relative;
border: 1px solid var(--hair);
border-radius: var(--r-3);
overflow: hidden;
}
.eanal-emp-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
align-items: center;
justify-content: space-between;
padding: var(--s-3) var(--s-4);
background: var(--paper);
border-bottom: 1px solid var(--hair);
}
.eanal-emp-search {
position: relative;
flex: 1 1 240px;
max-width: 360px;
}
.eanal-emp-search input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid var(--hair);
border-radius: var(--r-1);
font-size: 13px;
background: var(--mist);
}
.eanal-emp-search input:focus { outline: none; border-color: var(--sky); background: var(--paper); box-shadow: 0 0 0 3px rgba(43,108,255,0.15); }
.eanal-emp-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--stone);
}
.eanal-emp-table-scroll {
overflow: auto;
max-height: 640px;
}
.eanal-emp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: var(--paper);
}
.eanal-emp-table thead th {
position: sticky;
top: 0;
z-index: 2;
text-align: left;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
padding: 12px var(--s-3);
background: var(--mist);
border-bottom: 1px solid var(--hair);
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.eanal-emp-table thead th .sort-arrow { opacity: 0.4; margin-left: 4px; }
.eanal-emp-table thead th.is-sorted .sort-arrow { opacity: 1; color: var(--sky); }
.eanal-emp-table thead th.no-sort { cursor: default; }
.eanal-emp-table thead th.no-sort .sort-arrow { display: none; }
.eanal-emp-table tbody td {
padding: 12px var(--s-3);
border-bottom: 1px solid var(--hair);
vertical-align: middle;
}
.eanal-emp-table tbody tr:last-child td { border-bottom: 0; }
.eanal-emp-table tbody tr:hover td { background: var(--mist); }
.eanal-emp-table tbody tr.is-warn td { background: linear-gradient(90deg, rgba(255,184,0,0.08) 0%, transparent 60%); }
.eanal-emp-table tbody tr.is-danger td { background: linear-gradient(90deg, rgba(239,68,68,0.10) 0%, transparent 60%); }
.eanal-emp-person {
display: inline-flex;
align-items: center;
gap: 10px;
}
.eanal-emp-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: linear-gradient(135deg, var(--sky), var(--sky-deep));
color: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 11.5px;
font-family: var(--font-mono);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.eanal-emp-avatar[data-role="archive_mgr"] { background: linear-gradient(135deg, #8B5CF6, #5B21B6); }
.eanal-emp-avatar[data-role="accountant"] { background: linear-gradient(135deg, var(--success), #047857); }
.eanal-emp-avatar[data-role="delivery"] { background: linear-gradient(135deg, var(--beam), #B45309); color: var(--ink); }
.eanal-emp-avatar[data-role="admin"] { background: linear-gradient(135deg, var(--ink), #1E40AF); }
.eanal-emp-namebox strong {
display: block;
color: var(--ink);
font-weight: 600;
font-size: 13.5px;
white-space: nowrap;
}
.eanal-emp-namebox small {
display: block;
color: var(--stone);
font-family: var(--font-mono);
font-size: 11px;
}
.eanal-emp-num {
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
white-space: nowrap;
}
.eanal-emp-num.is-warn { color: #92400E; }
.eanal-emp-num.is-danger { color: var(--danger); }
.eanal-emp-num.is-success { color: var(--success); }
.eanal-emp-num.muted { color: var(--stone); font-weight: 400; }
.eanal-sla-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
background: #DCFCE7;
color: #166534;
}
.eanal-sla-pill.is-warn { background: var(--beam-soft); color: #92400E; }
.eanal-sla-pill.is-danger { background: #FEE2E2; color: #991B1B; }
/* ---------- Employee profile page ---------- */
.eanal-profile-head {
display: flex;
align-items: flex-start;
gap: var(--s-5);
padding: var(--s-5);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-3);
margin-bottom: var(--s-4);
}
.eanal-profile-avatar {
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, var(--sky), var(--sky-deep));
color: var(--paper);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 26px;
font-family: var(--font-display);
letter-spacing: -0.02em;
flex-shrink: 0;
}
.eanal-profile-meta {
display: flex;
flex-direction: column;
gap: 6px;
}
.eanal-profile-meta h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
.eanal-profile-meta .meta-row {
font-size: 13px;
color: var(--stone);
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.eanal-profile-meta .meta-row code {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
}
/* ---------- Timeline-lite for employee profile ---------- */
.eanal-events { display: flex; flex-direction: column; gap: var(--s-3); }
.eanal-event {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: var(--s-3);
align-items: flex-start;
padding: 12px;
border: 1px solid var(--hair);
border-radius: var(--r-2);
background: var(--paper);
transition: border-color 140ms ease;
}
.eanal-event:hover { border-color: var(--sky); }
.eanal-event-dot {
width: 28px; height: 28px;
border-radius: 999px;
background: var(--mist);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sky-deep);
flex-shrink: 0;
}
.eanal-event-dot svg { width: 14px; height: 14px; }
.eanal-event-body strong { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.eanal-event-body .target { font-family: var(--font-mono); color: var(--sky); font-weight: 600; font-size: 12.5px; }
.eanal-event-time { font-family: var(--font-mono); font-size: 11px; color: var(--stone); white-space: nowrap; }
/* ---------- Role tag colours we didn't already have ---------- */
.adm-role-tag.archivist { background: #DBEAFE; color: #1E40AF; }
.adm-role-tag.archive-mgr { background: #EDE9FE; color: #5B21B6; }
.adm-role-tag.accountant { background: #DCFCE7; color: #166534; }
.adm-role-tag.delivery-mgr { background: var(--beam-soft); color: #92400E; }
.adm-role-tag.admin { background: #E0E7FF; color: #1E3A8A; }
.adm-role-tag.super { background: var(--ink); color: var(--paper); }
/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
.eanal-col-8, .eanal-col-6, .eanal-col-4 { grid-column: span 12; }
.eanal-col-4.shrink-md { grid-column: span 6; }
.eanal-twopane { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.eanal-col-4.shrink-md { grid-column: span 12; }
.eanal-barlist-row { grid-template-columns: 130px 1fr 50px; gap: var(--s-2); font-size: 12.5px; }
.eanal-stack-row { grid-template-columns: 130px 1fr 60px; gap: var(--s-2); font-size: 12.5px; }
.eanal-profile-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}
@media (max-width: 560px) {
.eanal-grid { gap: var(--s-3); }
.eanal-card { padding: var(--s-4); }
.eanal-chart-wrap, .eanal-chart-wrap.tall, .eanal-chart-wrap.short { min-height: 220px; }
.eanal-emp-table { font-size: 12px; }
.eanal-emp-table thead th, .eanal-emp-table tbody td { padding: 10px 8px; }
.eanal-barlist-row { grid-template-columns: 100px 1fr 44px; font-size: 12px; }
.eanal-stack-row { grid-template-columns: 100px 1fr 50px; font-size: 12px; }
}
/* ---------- Print ---------- */
@media print {
.adm-sidebar, .adm-topbar, .adm-backdrop, .eanal-actions, .eanal-emp-toolbar { display: none !important; }
.adm-shell { grid-template-columns: 1fr !important; }
.adm-content { padding: 0 !important; }
.eanal-card, .eanal-kpi { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border-color: #ccc !important; }
body { background: #fff !important; }
}
/* ================================================================
KANBAN BOARD — Jira-style request board
Used on /admin/archive-requests/board.html
================================================================ */
/* ---------- View toggle (Table ↔ Board) ---------- */
.adm-view-toggle {
display: inline-flex;
padding: 3px;
background: var(--mist);
border: 1px solid var(--hair);
border-radius: var(--r-2);
gap: 2px;
}
.adm-view-toggle a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
color: var(--stone);
border-radius: 7px;
transition: background 160ms ease, color 160ms ease;
}
.adm-view-toggle a svg { width: 13px; height: 13px; }
.adm-view-toggle a:hover { color: var(--ink); }
.adm-view-toggle a.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(10,22,40,0.06); }
/* ---------- Board head: filters + group selectors ---------- */
.adm-board-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
}
.adm-board-head-group {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--stone);
}
.adm-board-head-group strong {
color: var(--ink);
font-weight: 600;
font-size: 12px;
}
.adm-board-head-sep { width: 1px; height: 22px; background: var(--hair); }
.adm-board-head-spacer { flex: 1; }
.adm-board-avatars {
display: inline-flex;
align-items: center;
}
.adm-board-avatars .av {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--paper);
background: var(--mist-2);
margin-left: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: transform 140ms ease;
}
.adm-board-avatars .av:first-child { margin-left: 0; }
.adm-board-avatars .av:hover { transform: translateY(-2px); }
.adm-board-avatars .av.is-active { box-shadow: 0 0 0 2px var(--sky); }
.adm-board-avatars .av.more { background: var(--ink); color: var(--paper); font-size: 9.5px; }
.adm-board-avatars .av[data-color="sky"] { background: #DBEAFE; color: #1E3A8A; }
.adm-board-avatars .av[data-color="rose"] { background: #FCE7F3; color: #9D174D; }
.adm-board-avatars .av[data-color="amber"] { background: #FEF3C7; color: #92400E; }
.adm-board-avatars .av[data-color="violet"]{ background: #EDE9FE; color: #5B21B6; }
.adm-board-avatars .av[data-color="emerald"]{ background: #D1FAE5; color: #047857; }
.adm-board-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
font-size: 12px;
font-weight: 600;
color: var(--stone);
background: var(--mist);
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.adm-board-chip:hover { background: var(--mist-2); color: var(--ink); }
.adm-board-chip.is-active { background: var(--ink); color: var(--paper); }
.adm-board-chip svg { width: 12px; height: 12px; }
/* ---------- Board scroller ---------- */
.adm-board-scroll {
margin: 0 calc(-1 * clamp(20px, 3vw, 36px));
padding: 0 clamp(20px, 3vw, 36px) var(--s-4);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.adm-board-scroll::-webkit-scrollbar { height: 10px; }
.adm-board-scroll::-webkit-scrollbar-track { background: transparent; }
.adm-board-scroll::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; }
.adm-board-scroll::-webkit-scrollbar-thumb:hover { background: var(--hair-2); }
.adm-board {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 288px;
gap: var(--s-3);
align-items: stretch;
min-height: 60vh;
}
/* ---------- Column ---------- */
.adm-board-col {
display: flex;
flex-direction: column;
background: var(--mist);
border-radius: var(--r-2);
border: 1px solid transparent;
scroll-snap-align: start;
transition: border-color 160ms ease, background 160ms ease;
min-width: 0;
}
.adm-board-col:hover { border-color: var(--hair); }
.adm-board-col.is-dropzone { background: var(--sky-soft); border-color: var(--sky); border-style: dashed; }
.adm-board-col-head {
display: flex;
align-items: center;
gap: var(--s-2);
padding: 12px 14px 10px;
border-bottom: 1px solid transparent;
position: relative;
}
.adm-board-col-head::before {
content: "";
position: absolute;
top: 0; left: 14px; right: 14px;
height: 3px;
border-radius: 0 0 3px 3px;
background: var(--slate);
}
.adm-board-col[data-status="new"] .adm-board-col-head::before { background: #2563EB; }
.adm-board-col[data-status="registered"] .adm-board-col-head::before { background: var(--sky); }
.adm-board-col[data-status="in-progress"] .adm-board-col-head::before { background: var(--beam); }
.adm-board-col[data-status="wait-signature"] .adm-board-col-head::before { background: #EC4899; }
.adm-board-col[data-status="ready"] .adm-board-col-head::before { background: #8B5CF6; }
.adm-board-col[data-status="in-delivery"] .adm-board-col-head::before { background: #6366F1; }
.adm-board-col[data-status="completed"] .adm-board-col-head::before { background: var(--success); }
.adm-board-col[data-status="rejected"] .adm-board-col-head::before { background: var(--danger); }
.adm-board-col-title {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
.adm-board-col-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--stone);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: 999px;
}
.adm-board-col-wip {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
margin-left: auto;
}
.adm-board-col-wip.warn { color: var(--danger); font-weight: 600; }
.adm-board-col-menu {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--slate);
border-radius: 4px;
}
.adm-board-col-menu:hover { color: var(--ink); background: var(--paper); }
.adm-board-col-add {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 8px;
padding: 8px;
background: transparent;
border: 1px dashed var(--hair-2);
border-radius: var(--r-1);
font-size: 11.5px;
font-weight: 600;
color: var(--slate);
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.adm-board-col-add:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.adm-board-col-add svg { width: 12px; height: 12px; }
.adm-board-col-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 8px 8px;
overflow-y: auto;
max-height: calc(100vh - 320px);
}
.adm-board-col-body::-webkit-scrollbar { width: 6px; }
.adm-board-col-body::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; }
/* ---------- Card ---------- */
.adm-board-card {
display: block;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
padding: 10px 12px 12px;
cursor: grab;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
position: relative;
}
.adm-board-card:hover {
border-color: var(--ink);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(10,22,40,0.06);
}
.adm-board-card:active { cursor: grabbing; }
.adm-board-card.is-dragging { opacity: 0.5; transform: rotate(2deg); }
.adm-board-card-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.adm-board-card-tag {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 7px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 3px;
color: var(--ink);
background: var(--mist-2);
}
.adm-board-card-tag.t-spravka { background: #DBEAFE; color: #1E3A8A; }
.adm-board-card-tag.t-kopia { background: #FCE7F3; color: #9D174D; }
.adm-board-card-tag.t-vytyag { background: #EDE9FE; color: #5B21B6; }
.adm-board-card-tag.t-original { background: #FEF3C7; color: #92400E; }
.adm-board-card-tag.t-dublikat { background: #E0E7FF; color: #3730A3; }
.adm-board-card-title {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.adm-board-card-title .req-id {
display: block;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
color: var(--stone);
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.adm-board-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
font-size: 11px;
color: var(--stone);
}
.adm-board-card-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.adm-board-card-meta-item svg { width: 11px; height: 11px; color: var(--slate); }
.adm-board-card-meta-item.due { color: var(--stone); }
.adm-board-card-meta-item.due.warn { color: #92400E; font-weight: 600; }
.adm-board-card-meta-item.due.danger { color: var(--danger); font-weight: 600; }
.adm-board-card-meta-item.due.danger svg { color: var(--danger); }
.adm-board-card-progress {
height: 4px;
background: var(--mist-2);
border-radius: 999px;
overflow: hidden;
margin-bottom: 8px;
}
.adm-board-card-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--sky), var(--beam));
border-radius: 999px;
}
.adm-board-card-progress-bar.danger { background: var(--danger); }
.adm-board-card-progress-bar.success { background: var(--success); }
.adm-board-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.adm-board-card-foot-left {
display: inline-flex;
align-items: center;
gap: 6px;
}
.adm-board-card-foot-icon {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
color: var(--slate);
}
.adm-board-card-foot-icon svg { width: 11px; height: 11px; }
.adm-board-card-foot-icon.flag-high { color: var(--danger); }
.adm-board-card-foot-icon.flag-medium { color: #92400E; }
.adm-board-card-assignee {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--mist-2);
color: var(--ink);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
}
.adm-board-card-assignee[data-color="sky"] { background: #DBEAFE; color: #1E3A8A; }
.adm-board-card-assignee[data-color="rose"] { background: #FCE7F3; color: #9D174D; }
.adm-board-card-assignee[data-color="amber"] { background: #FEF3C7; color: #92400E; }
.adm-board-card-assignee[data-color="violet"] { background: #EDE9FE; color: #5B21B6; }
.adm-board-card-assignee[data-color="emerald"] { background: #D1FAE5; color: #047857; }
.adm-board-card-assignee.unassigned {
background: var(--paper);
border: 1.5px dashed var(--hair-2);
color: var(--slate);
}
.adm-board-card-ribbon {
position: absolute;
top: -1px;
left: 12px;
width: 3px;
height: 26px;
border-radius: 0 0 3px 3px;
}
.adm-board-card.prio-high .adm-board-card-ribbon { background: var(--danger); }
.adm-board-card.prio-medium .adm-board-card-ribbon { background: var(--beam); }
.adm-board-card.prio-low .adm-board-card-ribbon { background: var(--slate); }
.adm-board-card.is-overdue { border-color: rgba(239,68,68,0.4); }
.adm-board-card.is-overdue::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: var(--r-2);
box-shadow: inset 0 0 0 1px rgba(239,68,68,0.18);
}
/* Paid certificate highlight — distinguishes cards with completed payment */
.adm-board-card.is-paid {
background:
linear-gradient(180deg, rgba(16,185,129,0.055) 0%, rgba(16,185,129,0) 60%),
var(--paper);
border-color: rgba(16,185,129,0.35);
}
.adm-board-card.is-paid:hover { border-color: var(--success); }
.adm-board-card.is-paid::before {
content: "";
position: absolute;
right: -1px;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 3px 0 0 3px;
background: var(--success);
}
.adm-board-card.is-paid.compact::before { top: 8px; bottom: 8px; }
/* Payment badge — used inside .adm-board-card-meta */
.adm-board-card-pay {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 7px;
height: 17px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 3px;
white-space: nowrap;
}
.adm-board-card-pay svg { width: 10px; height: 10px; }
.adm-board-card-pay.is-paid { color: #065F46; background: #D1FAE5; }
.adm-board-card-pay.is-await { color: #991B1B; background: #FEE2E2; }
/* compact card variant (used in completed columns) */
.adm-board-card.compact { padding: 8px 10px; }
.adm-board-card.compact .adm-board-card-title { font-size: 12px; margin-bottom: 6px; }
.adm-board-card.compact .adm-board-card-progress { display: none; }
/* Empty column hint */
.adm-board-col-empty {
text-align: center;
padding: 24px 12px;
color: var(--slate);
font-size: 11.5px;
font-style: italic;
}
/* Swim-lanes (optional grouping mode) */
.adm-board-swimlane {
display: flex;
align-items: center;
gap: 8px;
padding: 10px var(--s-3);
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
margin-bottom: var(--s-3);
}
.adm-board-swimlane-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.adm-board-swimlane-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--stone); }
.adm-board-swimlane-toggle { margin-left: auto; color: var(--slate); }
/* Paid-only filter: hide cards that are not marked as paid */
.adm-board.is-filtered-paid .adm-board-card:not(.is-paid) { display: none; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.adm-board { grid-auto-columns: 270px; }
.adm-board-head { padding: var(--s-3); gap: var(--s-2); }
.adm-board-head-sep { display: none; }
}
@media (max-width: 760px) {
/* Board head groups should wrap their chips/buttons instead of overflowing */
.adm-board-head { flex-direction: column; align-items: stretch; }
.adm-board-head-spacer { display: none; }
.adm-board-head-group { flex-wrap: wrap; width: 100%; }
.adm-board-head-group strong { flex-basis: 100%; margin-bottom: 2px; }
.adm-board-head-group select.adm-filter { flex: 1; min-width: 0; }
.adm-board-chip { flex-shrink: 0; }
}
@media (max-width: 560px) {
.adm-board { grid-auto-columns: 84vw; }
.adm-board-col-body { max-height: none; }
}
/* ============================================================ */
/* UX improvements (issues #3–#22) */
/* ============================================================ */
/* Screen-reader-only utility */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* #3: Custom tooltip via data-tooltip on status badges */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: #1E2533;
color: #fff;
font-size: 11px;
font-family: var(--font-sans, system-ui);
font-weight: 500;
padding: 5px 9px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 100;
box-shadow: 0 4px 12px rgba(10,22,40,0.18);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }
/* #4: Priority flag in table # column */
.adm-priority-flag {
display: none;
color: #F59E0B;
font-size: 12px;
margin-left: 4px;
line-height: 1;
vertical-align: middle;
}
tr.has-priority .adm-priority-flag { display: inline-block; }
/* #5: Page-size selector in table footer */
.adm-table-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
.adm-page-size {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--stone);
}
.adm-select-sm {
padding: 3px 8px;
border-radius: 4px;
border: 1px solid var(--hair);
background: var(--paper);
font-size: 13px;
color: var(--ink);
cursor: pointer;
}
.adm-select-sm:hover { border-color: var(--hair-2); }
/* Unified pagination — used by resources/views/vendor/pagination/kai.blade.php.
* Matches the cabinet-side .cab-pagination look so custom Blade tables (rooms,
* residents, admins, audit) render identically to the design reference. */
.cab-pagination { display: inline-flex; gap: 4px; }
.cab-pagination a,
.cab-pagination span {
min-width: 32px;
height: 32px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
color: var(--stone);
padding: 0 8px;
text-decoration: none;
border: 1px solid transparent;
}
.cab-pagination a:hover { background: var(--mist); color: var(--ink); }
.cab-pagination .is-current { background: var(--ink); color: var(--paper); }
.cab-pagination .is-disabled { opacity: 0.45; cursor: default; }
/* #6: Clickable KPI cards */
a.adm-kpi {
text-decoration: none;
color: inherit;
display: block;
cursor: pointer;
}
a.adm-kpi:hover {
box-shadow: 0 4px 16px rgba(10,22,40,0.10);
transform: translateY(-1px);
transition: box-shadow 160ms ease, transform 160ms ease;
}
/* #8: Quick-view side panel */
.adm-quickview {
position: fixed;
right: 0; top: 0; bottom: 0;
width: min(440px, 92vw);
background: var(--paper);
box-shadow: -4px 0 24px rgba(10,22,40,0.18);
z-index: 200;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.25s ease;
}
.adm-quickview:not([hidden]) { transform: translateX(0); }
.adm-quickview[hidden] { display: none; }
.adm-quickview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--hair);
}
.adm-quickview-title {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink);
}
.adm-quickview-body {
flex: 1;
overflow-y: auto;
padding: 20px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
.adm-quickview-body dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; margin: 0; }
.adm-quickview-body dt { color: var(--stone); font-size: 11.5px; }
.adm-quickview-body dd { margin: 0; font-weight: 500; }
.adm-quickview-loading { color: var(--stone); font-style: italic; }
.adm-quickview-footer {
padding: 14px 20px;
border-top: 1px solid var(--hair);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.adm-backdrop[data-quickview] {
position: fixed;
inset: 0;
background: rgba(10,22,40,0.32);
z-index: 199;
}
/* #13: Sidebar nav group separators + label styling */
.adm-nav-group {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
color: rgba(255,255,255,0.38);
padding: 0 16px;
margin: 14px 0 6px;
text-transform: uppercase;
}
.adm-nav .adm-nav-group + .adm-nav-item {
/* no top spacing — the group label already provides it */
}
.adm-nav .adm-nav-group:not(:first-child) {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
}
/* #15: Inline meta under status badge */
.adm-status-meta {
display: block;
font-size: 11px;
color: var(--slate);
margin-top: 3px;
font-family: var(--font-mono);
}
/* #16: Confirm dialog */
.adm-confirm-dialog {
border: 1px solid var(--hair);
border-radius: var(--r-2);
padding: 20px 24px;
max-width: 420px;
box-shadow: 0 16px 48px rgba(10,22,40,0.22);
font-family: inherit;
}
.adm-confirm-dialog::backdrop { background: rgba(10,22,40,0.42); }
.adm-confirm-msg {
font-size: 14px;
color: var(--ink);
margin: 0 0 16px;
line-height: 1.5;
}
.adm-confirm-msg strong { color: var(--ink); }
.adm-confirm-hint {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--stone);
}
.adm-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.adm-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: var(--r-1);
border: 1px solid var(--hair);
background: var(--paper);
color: var(--ink);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.adm-btn:hover { border-color: var(--ink); }
.adm-btn--ghost { background: transparent; border-color: transparent; color: var(--stone); }
.adm-btn--ghost:hover { color: var(--ink); border-color: var(--hair); background: var(--mist); }
.adm-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.adm-btn--primary:hover { background: #000; border-color: #000; }
.adm-btn--outline { background: var(--paper); border-color: var(--hair-2); }
.adm-btn--danger { background: var(--danger); color: var(--paper); border-color: var(--danger); }
.adm-btn--danger:hover { background: #B91C1C; border-color: #B91C1C; }
/* #18: Empty state for filtered tables */
.adm-empty-state {
text-align: center;
padding: 56px 24px;
color: var(--stone);
}
.adm-empty-icon {
font-size: 32px;
display: block;
margin-bottom: 12px;
opacity: 0.7;
}
.adm-empty-title {
font-weight: 600;
font-size: 15px;
color: var(--ink);
margin: 0 0 4px;
}
.adm-empty-sub {
font-size: 13px;
margin: 0;
color: var(--stone);
}
.adm-link {
background: none;
border: 0;
padding: 0;
color: var(--sky);
cursor: pointer;
text-decoration: underline;
font: inherit;
}
.adm-link:hover { color: var(--sky-deep); }
/* #19: Document template label + machine ID */
.adm-template-label {
display: block;
font-weight: 500;
font-size: 13.5px;
color: var(--ink);
line-height: 1.35;
}
.adm-template-id {
display: block;
font-size: 11px;
color: var(--slate);
font-family: var(--font-mono);
margin-top: 2px;
}
/* #20: Empty state in chart wrappers */
.adm-chart-empty {
height: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
color: var(--stone);
text-align: center;
}
.adm-chart-empty .adm-empty-icon { opacity: 0.55; }
/* #21: Bulk actions bar — when hidden via [hidden] */
.adm-table-bulk-actions[hidden] { display: none; }
.adm-table-bulk-actions .bulk-count {
display: inline-block;
min-width: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: 11px;
text-align: center;
margin-right: 4px;
}
/* #22: Reset filters + active filter count */
.adm-filter-reset {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--r-1);
background: transparent;
border: 1px solid var(--hair);
color: var(--stone);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.adm-filter-reset:hover { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,0.05); }
.adm-filter-reset[hidden] { display: none; }
.adm-filter-count {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.adm-filter-count[hidden] { display: none; }
/* Employee analytics shortcut card on Reports page */
.adm-report-shortcut {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--mist);
border: 1px solid var(--hair);
border-radius: var(--r-2);
color: var(--ink);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: border-color 160ms ease, background 160ms ease;
}
.adm-report-shortcut:hover { border-color: var(--ink); background: var(--paper); }
.adm-report-shortcut svg { width: 14px; height: 14px; }
/* =========================================================================
UI audit fixes — 2026-06-19
Cross-breakpoint pass: 360 / 768 / 1280 / 1440.
Why: visual audit showed admin tables overflowing at mobile widths, the
deliveries table truncating headers at 1440px, the period-strip pushing
the page wider than the viewport at 360px, and the analytics filter grid
forcing too many columns on tablet/mobile. Fixes are scoped to .adm-*
so cabinet/site stay untouched.
========================================================================= */
/* Allow the table-wrap to contain wide tables instead of pushing the page
sideways; the inner .adm-table-scroll is the only place scrolling happens. */
.adm-table-wrap { max-width: 100%; min-width: 0; }
.adm-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-color: var(--hair) transparent;
}
.adm-table-scroll::-webkit-scrollbar { height: 8px; }
.adm-table-scroll::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 4px; }
.adm-table-scroll::-webkit-scrollbar-track { background: transparent; }
/* Deliveries (and similar) were truncating column headers like "ДОСТАВЛЕНО"
to "ДОСТАВЛЕН" because thead th had white-space:nowrap. Letting them wrap
lets the table render at the container width without losing content. */
.adm-table thead th { white-space: normal; line-height: 1.25; }
/* Period strip (admin-employee-analytics index page) overflowed the 360px
viewport because it was display:inline-flex with no wrapping. */
.adm-filter-strip { display: flex; flex-wrap: wrap; max-width: 100%; }
/* Sidebar status cards on archive-request sample page were compressing
stat rows; give them line height to breathe. */
.adm-detail-side > *,
.adm-detail-side li,
.adm-detail-side dt,
.adm-detail-side dd { line-height: 1.55; }
/* Employee analytics — collapse filter grid earlier than auto-fit would. */
@media (max-width: 960px) {
.eanal-filters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.eanal-filters { grid-template-columns: 1fr; }
.eanal-actions { flex-wrap: wrap; gap: 8px; }
.eanal-actions button,
.eanal-actions a { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
}
/* ---------- Mobile (≤640px): compact admin tables --------------------- */
@media (max-width: 640px) {
.adm-table { font-size: 12px; }
.adm-table thead th { padding: 8px 8px; font-size: 9.5px; }
.adm-table tbody td { padding: 9px 8px; vertical-align: top; }
.adm-table tbody td.actions { min-width: 0; }
.adm-table tbody td.actions a { font-size: 12px; white-space: nowrap; }
.adm-table .req-id { font-size: 11px; }
.adm-table .person strong { font-size: 12px; }
.adm-table .person small { font-size: 10.5px; }
.adm-status { white-space: nowrap; font-size: 9.5px; padding: 2px 6px; }
/* Toolbars wrap; search input may have inline min-width that would force overflow. */
.adm-table-toolbar {
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
}
.adm-table-toolbar > * { min-width: 0; }
.adm-table-toolbar input[type="search"],
.adm-table-toolbar input[type="text"] { width: 100%; min-width: 0; }
.adm-table-toolbar select { flex: 1 1 calc(50% - 8px); min-width: 0; }
/* Documents-page search wrapper — override any inline min-width. */
.adm-toolbar-search { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; }
/* Filter strip + advanced filter row should stack one column when very narrow. */
.adm-filter-strip { gap: 4px; padding: 4px; }
.adm-filter-strip button { padding: 6px 10px; font-size: 10.5px; }
}
/* ---------- Tablet (641–960px): still compress padding a bit ---------- */
@media (max-width: 960px) and (min-width: 641px) {
.adm-table thead th { padding: 8px 10px; font-size: 10px; }
.adm-table tbody td { padding: 10px; }
}
/* ============================================================
* Admin directory (/admin/admins) + Audit log (/admin/audit)
* ============================================================ */
/* --- Modal --- */
.adm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.adm-modal[hidden] { display: none; }
.adm-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.45); }
.adm-modal__panel {
position: relative;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: var(--r-2);
box-shadow: 0 12px 32px rgba(10, 22, 40, 0.18);
width: 100%;
max-width: 520px;
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.adm-modal__panel--wide { max-width: 720px; }
.adm-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hair); }
.adm-modal__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.adm-modal__close {
border: 0; background: transparent; font-size: 22px; line-height: 1;
cursor: pointer; color: var(--stone); padding: 4px 8px; border-radius: var(--r-1);
}
.adm-modal__close:hover { background: var(--mist); color: var(--ink); }
.adm-modal__body { padding: var(--s-4); overflow: auto; }
.adm-modal__foot {
display: flex; gap: var(--s-2); justify-content: flex-end;
padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hair); background: var(--mist);
}
body.adm-modal-open { overflow: hidden; }
/* --- Search dropdown --- */
.adm-search { position: relative; }
.adm-search-dropdown {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-2);
box-shadow: 0 6px 20px rgba(10, 22, 40, 0.12);
max-height: 260px; overflow-y: auto;
}
.adm-search-dropdown[hidden] { display: none; }
.adm-search-dropdown__item {
display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
width: 100%; text-align: left;
padding: 8px 12px; border: 0; background: var(--paper); cursor: pointer;
border-bottom: 1px solid var(--hair); align-items: center;
}
.adm-search-dropdown__item:last-child { border-bottom: 0; }
.adm-search-dropdown__item:hover { background: var(--mist); }
.adm-search-dropdown__item strong { font-size: 13px; color: var(--ink); }
.adm-search-dropdown__item small { grid-column: 1; font-size: 11px; color: var(--stone); }
.adm-search-dropdown__item code { grid-column: 1; font-size: 10.5px; color: var(--slate); font-family: var(--font-mono); }
.adm-search-dropdown__item .adm-role-tag { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
.adm-search-dropdown__empty { padding: 12px; color: var(--stone); font-size: 12.5px; text-align: center; }
.adm-search-picked {
margin-top: 6px; padding: 8px 12px; background: var(--mist);
border: 1px solid var(--hair); border-radius: var(--r-1);
display: grid; grid-template-columns: 1fr; gap: 2px;
}
.adm-search-picked[hidden] { display: none; }
.adm-search-picked strong { font-size: 13px; color: var(--ink); }
.adm-search-picked small { font-size: 11px; color: var(--stone); }
.adm-search-picked code { font-size: 10.5px; color: var(--slate); font-family: var(--font-mono); }
/* --- Admins page --- */
.adm-kpi-grid--admins { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.adm-badge-self { font-size: 11px; color: var(--stone); margin-left: 6px; }
.adm-row--self { background: var(--mist); }
.adm-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); }
.adm-inline-form { display: inline; }
.adm-toolbar-form { display: inline-flex; align-items: center; gap: 6px; }
.adm-toolbar-spacer { flex: 1; }
.adm-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-3); }
.adm-form-label { font-size: 12px; color: var(--stone); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-input {
width: 100%; padding: 8px 12px; border: 1px solid var(--hair);
border-radius: var(--r-1); background: var(--paper); font-size: 13px; color: var(--ink);
}
.adm-input:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.adm-input--sm { width: auto; padding: 6px 10px; font-size: 12px; }
.adm-input--search { padding-left: 30px; background-position: 10px center; background-repeat: no-repeat; }
.adm-btn--sm { padding: 5px 10px; font-size: 12px; }
.adm-filter--select { border: 1px solid var(--hair); background: var(--paper); }
.adm-hint-card {
padding: var(--s-4); background: var(--mist); border: 1px solid var(--hair);
border-radius: var(--r-2); font-size: 13px; color: var(--stone);
display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-3);
}
.adm-hint-card svg { color: var(--sky); flex-shrink: 0; margin-top: 1px; }
/* --- Audit page --- */
.adm-audit-filters { padding: var(--s-4); margin-bottom: var(--s-3); }
.adm-audit-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.adm-audit-filter-label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--stone);
}
.adm-audit-filter-searchbox { position: relative; width: 220px; }
.adm-audit-feed { padding: 0; }
.adm-log-row {
display: grid; grid-template-columns: 130px 180px 1fr 90px;
gap: var(--s-3); align-items: center;
padding: 12px var(--s-4); border-bottom: 1px solid var(--hair);
cursor: pointer;
}
.adm-log-row--sensitive { background: #FFFBEB; }
.adm-log-row:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.adm-log-action { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate); }
.adm-log-action--sensitive { color: #92400E; font-weight: 600; }
.adm-pagination-wrap { padding: var(--s-3) var(--s-4); }
.adm-audit-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 4px 0; font-size: 13px; }
.adm-audit-row__label { color: var(--stone); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.adm-audit-row__value { color: var(--ink); word-break: break-word; }
.adm-audit-json { margin-top: var(--s-3); }
.adm-audit-json__pre {
margin: 4px 0 0 0; padding: 10px; background: var(--mist); border: 1px solid var(--hair);
border-radius: var(--r-1); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink);
white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto;
}
/* Inline audit-row details (accordion — replaces the old details modal) */
.adm-audit-details {
background: var(--surface-alt, #f8fafc);
border-left: 3px solid var(--sky, #0ea5e9);
}
.adm-audit-details__dl {
display: grid;
grid-template-columns: 12rem 1fr;
gap: 0.35rem 1rem;
margin: 0;
padding: 1rem 1.5rem;
font-size: 0.85rem;
}
.adm-audit-details__dl dt { font-weight: 600; color: var(--slate, #64748b); }
.adm-audit-details__dl dd { margin: 0; word-break: break-word; }
.adm-audit-details__dl pre {
margin: 0;
padding: 0.5rem;
background: var(--surface, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 0.25rem;
overflow: auto;
max-height: 20rem;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.8rem;
}
.adm-audit-details__status { margin: 0; padding: 1rem 1.5rem; color: var(--stone, #64748b); font-size: 0.85rem; }
.adm-audit-details__status--error { color: #B91C1C; }
.adm-caret {
display: inline-block;
transition: transform 160ms ease;
color: var(--slate, #94a3b8);
margin-right: 0.5rem;
}
[aria-expanded="true"] .adm-caret { transform: rotate(90deg); }
@media (max-width: 720px) {
.adm-audit-details__dl { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.adm-log-row { grid-template-columns: 1fr; gap: 4px; padding: var(--s-3); }
.adm-audit-filter-searchbox { width: 100%; }
}
/* ---------- Roles: permission matrix head actions ---------- */
.adm-card-head-actions {
display: flex;
gap: var(--s-2);
align-items: center;
}
.adm-matrix-status {
font-size: 12px;
color: var(--stone);
}
.adm-matrix-status.is-error {
color: var(--danger, #b42318);
}
/* ---------- RESPONSIVE IMPROVEMENTS — Dormitories, Rooms, Applications, Audit ---------- */
/* Helper class for horizontal scroll tables (replaces inline overflow-x) */
.adm-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Toolbar wrapping at 760px for Dormitories, Rooms, Applications filters */
@media (max-width: 760px) {
.adm-table-toolbar {
display: flex !important;
flex-direction: column;
gap: var(--s-2);
flex-wrap: wrap;
grid-template-columns: unset !important;
}
.adm-table-toolbar > * {
flex-basis: auto;
}
.adm-table-toolbar > .adm-toolbar-search,
.adm-table-toolbar > form {
flex-basis: 100%;
width: 100%;
}
.adm-table-toolbar > select,
.adm-table-toolbar > input[type="date"],
.adm-table-toolbar > label,
.adm-table-toolbar > div {
flex: 1 1 auto;
min-width: 100px;
}
.adm-table-toolbar > span[style*="flex: 1"] {
display: none;
}
}
/* Tables hide secondary columns at 640px */
@media (max-width: 640px) {
/* Compact table font and padding */
.adm-table { font-size: 12px; }
.adm-table thead th { padding: 8px var(--s-3); font-size: 9px; }
.adm-table tbody td { padding: 10px var(--s-3); }
/* Table actions stay visible but compact */
.adm-table .actions { min-width: auto; }
.adm-table .actions a { font-size: 11px; }
/* Tables with [data-testid="dormitories-table"]: hide Адреса (3), Поверхів (4) */
[data-testid="dormitories-table"] tbody td:nth-child(3),
[data-testid="dormitories-table"] thead th:nth-child(3),
[data-testid="dormitories-table"] tbody td:nth-child(4),
[data-testid="dormitories-table"] thead th:nth-child(4) {
display: none;
}
/* Status badge smaller font */
.adm-status { font-size: 9px; padding: 2px 6px; }
}
/* Roles: permission matrix responsive scroll wrapper */
@media (max-width: 900px) {
.adm-perm-matrix-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.adm-perm-matrix { font-size: 11px; }
.adm-perm-matrix th { padding: 8px var(--s-2); }
.adm-perm-matrix td { padding: 6px var(--s-2); }
.adm-perm-matrix thead th.rotated { min-height: 10rem; font-size: 0.75rem; padding: 0.5rem 0.25rem; }
}
/* KPI grid at 520px: 2 columns */
@media (max-width: 520px) {
.adm-kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.adm-kpi { padding: var(--s-3); }
.adm-kpi-num { font-size: 20px; }
.adm-kpi-label { font-size: 9px; }
}
/* Modal responsive at 640px */
@media (max-width: 640px) {
.adm-modal__header {
flex-direction: column;
align-items: flex-start;
}
.adm-modal__title {
font-size: 18px;
}
.adm-modal__close {
position: absolute;
top: var(--s-3);
right: var(--s-3);
}
.adm-form-grid {
grid-template-columns: 1fr;
}
}
/* Audit log filter card wrapping at 760px */
@media (max-width: 760px) {
.adm-audit-filter-form {
flex-direction: column;
gap: var(--s-2);
}
.adm-audit-filter-form > .adm-filter,
.adm-audit-filter-form > .adm-audit-filter-searchbox {
flex-basis: 100%;
}
}
/* Page head actions wrapping at 760px */
@media (max-width: 760px) {
.adm-page-head {
flex-direction: column;
gap: var(--s-3);
}
.adm-page-actions {
flex-wrap: wrap;
gap: var(--s-2);
}
.adm-page-actions > * {
flex: 1 1 auto;
min-width: 140px;
}
}
/* ============================================================
* Toolbar search form (dormitories index, residents, admins…)
* ============================================================
* The previous inline `style="flex:1"` on the input collapsed the
* "Знайти" button and left no breathing room on the right; the
* form itself also had inline padding chained via ad-hoc styles.
* Named classes keep spacing consistent across custom Blade pages.
*/
.adm-toolbar-search-form {
display: flex;
align-items: center;
gap: var(--s-2);
padding-right: var(--s-2);
}
.adm-toolbar-search-input {
flex: 1 1 220px;
min-width: 0;
padding: 8px 12px;
border: 1px solid var(--hair);
border-radius: 10px;
background: var(--paper);
color: var(--ink);
font-size: 13px;
line-height: 1.4;
}
.adm-toolbar-search-input:focus {
outline: 2px solid var(--sky);
outline-offset: 1px;
border-color: var(--sky);
}
/* ============================================================
* Row action links with a trailing arrow
* ============================================================
* Used on custom Blade tables (dormitories, rooms) to make the
* action links look like "next step" affordances rather than raw
* hyperlinks. Compose with `` after the
* label; the icon inherits `currentColor`.
*/
.adm-link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sky);
text-decoration: none;
font-weight: 500;
padding: 4px 0;
transition: color 120ms ease-out, transform 120ms ease-out;
}
.adm-link-arrow:hover,
.adm-link-arrow:focus-visible {
color: var(--ink);
text-decoration: underline;
}
.adm-link-arrow:hover svg,
.adm-link-arrow:focus-visible svg {
transform: translateX(2px);
}
.adm-link-arrow svg {
flex-shrink: 0;
transition: transform 120ms ease-out;
}
/* Vertical stack of row action links (Мешканці / Редагувати on new lines). */
.adm-row-actions {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
/* ============================================================
* Form checkbox / toggle card (dormitory create/edit form)
* ============================================================
* The default browser looks out-of-place
* next to the rest of the design tokens. `.adm-check-card` wraps
* the checkbox + label in a clickable card so the affordance is
* clear and the focus ring behaves.
*/
.adm-check-card {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 10px 14px;
background: var(--mist);
border: 1px solid var(--hair);
border-radius: 10px;
cursor: pointer;
transition: border-color 120ms ease-out, background 120ms ease-out;
}
.adm-check-card:hover {
border-color: var(--sky);
background: var(--paper);
}
.adm-check-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--sky);
cursor: pointer;
margin: 0;
}
.adm-check-card__label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
user-select: none;
}
.adm-check-card__hint {
display: block;
font-size: 11px;
color: var(--muted, #64748B);
font-weight: 400;
margin-top: 2px;
}
/* ============================================================
* Rooms index toolbar
* ============================================================
* A single