← employee list
← detail panel
Bootstrap's .flex-nowrap has !important so we need higher
specificity (.row.flex-nowrap) to allow wrapping. */
.row.flex-nowrap {
flex-wrap: wrap !important;
}
/* Force the employee list col-auto to fill the full width */
.row.flex-nowrap > .col-auto {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
/* Detail panel: full width, remove fixed/min height */
.row.flex-nowrap > .col {
flex: 0 0 100%;
max-width: 100%;
}
/* h-100 on detail cards is meaningless when stacked; let it be auto */
#empCard,
#empDetailCard { height: auto !important; }
/* Ensure all table containers scroll horizontally; drop the desktop height
cap so the page scrolls naturally on mobile (no nested vertical scroll). */
.table-container { overflow-x: auto; max-height: none; }
#logTableWrap,
.table-responsive:has(#tblMatrix),
.table-responsive:has(.contrib-current-table) { max-height: none; }
/* Touch-friendly minimum tap target for sidebar links */
a.sidebar-link { min-height: 44px; }
/* Card headers — allow content to wrap on narrow screens.
Overrides both the CSS rule (.card-header.d-flex) and the
inline style="flex-wrap: nowrap" found on several headers. */
.card-header { flex-wrap: wrap !important; }
/* Payroll posted badge — tighten font so it fits on one line */
#ppPostedBadge { font-size: 0.7rem !important; }
/* Filter bar — allow items to wrap so the notice link
doesn't get clipped on narrow screens */
.erp-filter-bar { flex-wrap: wrap; }
/* Hide the "Employee accounts managed in…" notice on mobile
(it links to another page; useful on desktop, crowded on mobile) */
.erp-filter-bar > .text-muted { display: none !important; }
/* Period date-range filter (OTA / LOA / Loan-CA detail headers + their
pending-approval modals). The two date inputs are a fixed 135px each,
which overflows narrow screens. Let the surrounding groups wrap and the
inputs flex/shrink so the header reflows instead of overflowing. */
#empCard .card-header > span.d-flex,
.erp-modal-header {
flex-wrap: wrap;
}
/* Keep the close (X) on the title row, aligned with the modal header.
The period filter drops to its own full-width row underneath. */
.erp-modal-header .btn-close {
order: 2;
margin-left: auto;
}
.erp-modal-header .erp-period-filter {
order: 3;
flex: 0 0 100%;
margin: 0.5rem 0 0 0;
}
.erp-period-filter { flex-wrap: wrap; }
.erp-period-filter .erp-filter-input {
width: auto !important;
flex: 1 1 120px;
min-width: 0;
}
/* EA detail card headers (OT / LOA / Loan-CA): give each group its own
row — name + ID badge, then the period filter full-width, then the
action buttons (Pending badge + Request) right-aligned. */
#empCard .card-header > span.d-flex { width: 100%; row-gap: 0.4rem; }
#empCard .card-header .erp-period-filter { flex: 1 1 100%; margin-top: 0.1rem; }
#empCard .card-header > .d-flex {
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 0.4rem;
margin-top: 0.4rem;
}
#empCard .card-header .erp-badge-warning { flex-shrink: 0; }
.erp-filter-bar .form-select,
.erp-filter-bar .erp-filter-input {
font-size: 14px !important;
height: 32px !important;
width: 100% !important;
max-width: 100% !important;
}
/* ── Timecard Manager filter bar ──────────────────────────
Put "Last Refreshed" on the same (top) row as the Filter label,
and stop the Period date inputs from overlapping. */
#tmFilterBar { align-items: center; }
/* All controls drop below row 1; the Filter label and Last Refreshed
share row 1 (label left, refreshed right via its ms-auto). */
#tmFilterBar > * { order: 1; }
#tmFilterBar > .erp-filter-label:first-child { order: 0; }
#tmFilterBar > #tmLastRefreshed { order: 0; }
/* Search inputs — 16 px prevents iOS Safari auto-zoom.
Must use the same ID-level selectors as the desktop rules
(specificity 1-0-2) so the mobile override actually wins. */
#empSearchPlaceholder input[type="search"],
#deptSearchPlaceholder input[type="search"],
#ppSearchPlaceholder input[type="search"],
#ssSearchPlaceholder input[type="search"],
#tmSearchPlaceholder input[type="search"],
#rptPsSearchPlaceholder input[type="search"],
#rptPayslipSearchPlaceholder input[type="search"],
#rptMasterlistSearchPlaceholder input[type="search"],
#rptLoanSearchPlaceholder input[type="search"],
#rpt13thSearchPlaceholder input[type="search"],
#umSearchPlaceholder input[type="search"] {
font-size: 14px !important;
height: 32px !important;
}
/* ROLE column: "Admin / Owner", "Payroll Officer" need room */
#tblUm tbody select.form-select {
min-width: 155px !important;
width: 155px !important;
}
/* ── DT gutter fix ────────────────────────────────────────
DataTables' own stylesheet sets --bs-gutter-y: 0.5rem on
.dt-container .row at max-width 767px. Bootstrap applies
this as margin-top on every .row > * child, creating the
white space above/below the table. Override to 0. */
.table-container .dt-container .row {
--bs-gutter-y: 0 !important;
}
.table-container .dt-container .row > * {
margin-top: 0 !important;
}
/* Reduce mt-3 spacing on small screens (was 1rem, now 0.5rem). */
.mt-3 { margin-top: 0.5rem !important; }
/* Tighten main-content padding so less empty space shows
at the very top and bottom of the page. */
.main-content { padding: 0.5rem; }
/* ── Biometrics modal: reset forced 1300px width ──────────
The modal-dialog has inline style="width:1300px;min-width:1300px"
which overflows the mobile viewport. Reset it to auto. */
/* Reset hardcoded pixel widths on wide modals so they fit the
mobile viewport instead of overflowing it. */
#modalBiometrics .modal-dialog,
#modalPp .modal-dialog {
width: auto !important;
min-width: 0 !important;
max-width: 100%;
}
/* Payroll Summary modal body: 4 col-auto panels sit side by
side on desktop (flex-wrap:nowrap set above). On mobile
override to wrap so each panel stacks full-width. */
#modalPp .modal-body .row.pp {
flex-wrap: wrap;
--bs-gutter-y: 0.5rem;
}
#modalPp .modal-body .row.pp > .col-auto {
flex: 0 0 100%;
max-width: 100%;
}
/* Let inputs stretch to fill the full card width when stacked */
#modalPp .pp input:not([type="checkbox"]) {
width: auto;
flex: 1 1 0;
min-width: 0;
}
/* Footer: allow posted note to wrap to its own row on mobile */
#modalPp .modal-footer {
flex-wrap: wrap;
gap: 0.25rem;
}
#modalPp .modal-footer #ppPostedNote {
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
font-size: 0.75rem;
}
/* input-group fix: Bootstrap uses flex-wrap:wrap so the small
40px checkbox span falls to a new line on narrow screens.
Force nowrap so all items stay on one row; form-control's
min-width:0 lets the text inputs shrink as needed. */
#modalPp .input-group {
flex-wrap: nowrap;
}
/* Modal header fix: the employee name + date range subtitle
is too long for one line on mobile. Let the title shrink
and clip to a single line with ellipsis. */
#modalPp .modal-header {
align-items: flex-start;
gap: 0.5rem;
}
#modalPp .modal-title {
font-size: 0.78rem;
min-width: 0; /* allow the flex item to shrink */
overflow: hidden;
}
#modalPp .pp-title-sub {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-top: 2px;
}
/* ── Modal: reduce form gaps on mobile ────────────────────
g-5 (1.5rem gutter) creates huge vertical space when cols
stack on mobile. Bring both axes down to a tighter value. */
.modal-body .row.g-5 {
--bs-gutter-y: 0.75rem;
--bs-gutter-x: 0.75rem;
}
.modal-body .row.g-3 {
--bs-gutter-y: 0.5rem;
}
/* ── Modal tables: horizontal scroll ──────────────────────
Tables inside .modal-body that are wider than the screen
(e.g. tblTsv with 7 time-input columns) need a scroll
context. Target any bordered container holding a table
and any plain table directly in modal-body. */
.modal-body .border.rounded-3 {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.modal-body > .table-responsive,
.modal-body table {
min-width: 0;
}
/* ── Filter bar reorder ────────────────────────────────────
Desired mobile layout for ALL filter bars:
Row 1: ▽ FILTER ············ [last-refreshed if any]
Row 2: [ Search _______________________ 🔍 ]
Row 3+: [ selects / other controls ]
Strategy:
• Filter label → order 0 (default, stays first)
• Last-refreshed → order 0 (same row, ms-auto pushes right)
• Every search placeholder → order 1 + full width (own row)
• Selects / other filter controls → order 2+ */
/* Last-refreshed shares row 1 with the filter label (ms-auto
pushes it to the far right of that line) */
#ppLastRefreshed,
#tmLastRefreshed { order: 0; }
/* ALL search placeholders: full-width row below the label */
#empSearchPlaceholder,
#deptSearchPlaceholder,
#ppSearchPlaceholder,
#ssSearchPlaceholder,
#tmSearchPlaceholder,
#rptPsSearchPlaceholder,
#rptPayslipSearchPlaceholder,
#rptMasterlistSearchPlaceholder,
#rptLoanSearchPlaceholder,
#rpt13thSearchPlaceholder,
#umSearchPlaceholder {
order: 1;
flex: 0 0 100%;
}
/* Payroll-specific selects: full-width rows below Last Refreshed on mobile */
#ppDeptFilter { order: 1; flex: 0 0 100%; }
#ppStatusFilter { order: 2; flex: 0 0 100%; }
#ppSearchPlaceholder { order: 3; }
/* TCM filter controls: ABNORMAL ONLY below search */
#tmAbnormalFilter { order: 3; }
/* DTR two-panel: add vertical gap between stacked cards.
The row has no gutter class so Bootstrap adds no margin-top.
Use row g-3 equivalent: 1 rem between panels on mobile. */
.row.flex-nowrap > .col { margin-top: 0.75rem; }
}
/* ============================================================
Dashboard (views/db.php) — reuses the system :root palette
============================================================ */
.dashboard { margin-bottom: 1rem; }
.db-hero {
background: linear-gradient(135deg, var(--sidebar-bg) 0%, #243650 55%, var(--tab-active) 130%);
color: #fff;
border-radius: var(--bs-border-radius, .5rem);
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 6px 18px rgba(26, 37, 53, .18);
}
.db-hero-greeting { font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.db-hero-sub { font-size: .8rem; color: rgba(255, 255, 255, .72); margin-top: .15rem; }
.db-hero-date {
display: inline-flex;
align-items: center;
gap: .45rem;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
padding: .4rem .85rem;
font-size: .82rem;
font-weight: 500;
white-space: nowrap;
}
/* KPI cards */
.db-kpi {
border: 1px solid var(--border);
border-radius: var(--bs-border-radius, .5rem);
background: var(--surface-card);
padding: 1rem 1.1rem;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.db-kpi::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--db-accent, var(--tab-active));
}
.db-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 41, 59, .08); }
.db-kpi-label { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.db-kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: .15rem; }
.db-kpi-icon {
flex: 0 0 auto;
width: 46px; height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.4rem;
color: var(--db-accent, var(--tab-active));
background: var(--db-accent-soft, rgba(37, 99, 235, .1));
}
.db-kpi--amber { --db-accent: #d97706; --db-accent-soft: rgba(217, 119, 6, .12); }
.db-kpi--violet { --db-accent: #7c3aed; --db-accent-soft: rgba(124, 58, 237, .12); }
.db-kpi--teal { --db-accent: #0d9488; --db-accent-soft: rgba(13, 148, 136, .12); }
.db-kpi--blue { --db-accent: var(--tab-active); --db-accent-soft: rgba(37, 99, 235, .1); }
/* Panels */
.dashboard .card-header { background: var(--card-hdr-bg); color: var(--card-hdr-text); border-bottom: 1px solid var(--card-hdr-border); font-weight: 600; }
.db-period-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.db-period-cell { text-align: center; padding: .5rem .25rem; border-radius: .5rem; background: var(--surface-page); }
.db-period-cell-label { font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.db-period-cell-value { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.dashboard .list-group-item-action { transition: background .12s ease; }
.dashboard .list-group-item-action:hover { background: var(--surface-page); }
.db-attn-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
/* Consistent body text size across the two panels (period label + attention rows) */
#dbPeriodBody,
#dbAttentionList { font-size: 0.8rem; }
/* ============================================================
Topbar — right-aligned group + user profile (moved from sidebar footer)
============================================================ */
.topbar-right {
margin-left: auto;
display: flex;
align-items: center;
gap: 1rem;
}
.topbar-profile {
display: flex;
align-items: center;
gap: 8px;
}
.topbar-avatar,
.topbar-avatar-badge {
width: 30px;
height: 30px;
border-radius: 50%;
flex-shrink: 0;
}
.topbar-avatar {
object-fit: cover;
border: 1px solid var(--border);
}
.topbar-avatar-badge {
background: var(--sidebar-accent, #3b82f6);
color: #fff;
font-size: .55rem;
font-weight: 700;
letter-spacing: .04em;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Per-role avatar colors — follow the role accent tokens above */
.topbar-avatar-badge--adm { background: var(--role-adm); }
.topbar-avatar-badge--po { background: var(--role-po); }
.topbar-avatar-badge--tk { background: var(--role-tk); }
.topbar-avatar-badge--sv { background: var(--role-sv); }
.topbar-avatar-badge--emp { background: var(--role-emp); }
.topbar-profile-info {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
line-height: 1.15;
overflow: hidden;
}
.topbar-user-name {
font-size: .72rem;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-user-role {
font-size: .6rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
/* On small screens, keep just the avatar to save space */
@media (max-width: 767.98px) {
.topbar-profile-info { display: none; }
}
/* Profile dropdown toggle (replaces the plain block; opens the Logout menu) */
.topbar-profile-toggle {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
padding: 4px 8px;
border-radius: 8px;
cursor: pointer;
transition: background .12s ease;
}
.topbar-profile-toggle:hover { background: var(--surface-page); }
.topbar-profile-toggle:focus-visible { outline: 2px solid var(--tab-active); outline-offset: 1px; }
.topbar-profile-toggle[aria-expanded="true"] { background: var(--surface-page); }
.topbar-profile-caret { font-size: .65rem; color: var(--text-secondary); transition: transform .12s ease; }
.topbar-profile-toggle[aria-expanded="true"] .topbar-profile-caret { transform: rotate(180deg); }
.topbar-profile .dropdown-menu { font-size: .8rem; min-width: 180px; }
.topbar-profile .dropdown-header { line-height: 1.25; }
/* ============================================================
Sidebar footer — app version label (replaces the Logout link)
============================================================ */
.sidebar-app-version {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 6px 8px;
text-align: center;
}
.sidebar-app-version-name {
font-size: .62rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-app-version-num {
font-size: .58rem;
letter-spacing: .04em;
color: rgba(255, 255, 255, 0.3);
}
#sidebar.collapsed .sidebar-app-version-name { display: none; }
/* =========================================================
===========================================================
SIDEBAR (merged from former css/sidebar.css)
Always loaded together with this file on the main shell, and
depends on the design tokens declared in :root above — so it
now lives here as one stylesheet instead of a second request.
===========================================================
========================================================= */
#sidebar {
width: var(--sidebar-width, 220px);
flex-shrink: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--sidebar-bg, #1a2535);
border-right: none;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.18);
transition: width 0.25s ease-in-out;
overflow: hidden;
z-index: 100;
}
/* =========================================================
Header (logo + app name)
========================================================= */
.sidebar-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 12px 12px;
border-bottom: 1px solid var(--sidebar-border, rgba(255,255,255,0.08));
flex-shrink: 0;
}
.sidebar-logo {
width: 30px;
height: 30px;
object-fit: contain;
flex-shrink: 0;
border-radius: 4px;
}
.sidebar-app-name {
font-size: 0.75rem;
font-weight: 700;
color: var(--sidebar-text-active, #ffffff);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
overflow: hidden;
}
/* =========================================================
Navigation content
========================================================= */
.sidebar-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 6px 6px;
scrollbar-width: none;
}
.sidebar-content::-webkit-scrollbar { display: none; }
/* Group labels */
.sidebar-group-label {
font-size: 0.6rem;
font-weight: 700;
color: var(--sidebar-group, rgba(255,255,255,0.30));
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 14px 10px 4px;
pointer-events: none;
user-select: none;
list-style: none;
}
/* Nav items */
.sidebar-item { list-style: none; }
a.sidebar-link {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
color: var(--sidebar-text, rgba(255,255,255,0.70));
font-size: 0.72rem;
font-weight: 500;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.04em;
position: relative;
border-radius: 5px;
border-left: 2px solid transparent;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
margin-bottom: 1px;
}
a.sidebar-link:hover {
background: var(--sidebar-hover, rgba(255,255,255,0.07));
color: var(--sidebar-text-active, #ffffff);
}
/* Active state */
.sidebar-item.active > a.sidebar-link {
background: var(--sidebar-active, rgba(255,255,255,0.13));
color: var(--sidebar-text-active, #ffffff);
border-left-color: var(--sidebar-accent, #3b82f6);
font-weight: 600;
padding-left: 8px;
}
/* Icons */
.sidebar-link .bi {
font-size: 1.1rem;
line-height: 1;
flex: 0 0 1.4rem;
width: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.75;
}
.sidebar-item.active > a.sidebar-link .bi { opacity: 1; }
.sidebar-link label {
margin: 0;
display: block;
line-height: 1.2;
cursor: pointer;
}
/* =========================================================
Dropdown menus (for future use)
========================================================= */
#sidebar .sidebar-link[data-bs-toggle="collapse"] { padding-right: 2.5rem; }
#sidebar .sidebar-link[data-bs-toggle="collapse"]::after {
content: "›";
font-size: 1.1rem;
font-weight: 300;
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
opacity: 0;
transition: transform 0.2s ease, opacity 0.15s ease;
color: var(--sidebar-text-active);
}
#sidebar .sidebar-link[data-bs-toggle="collapse"]:hover::after { opacity: 0.5; }
#sidebar .sidebar-item:has(.sidebar-dropdown.show)
> .sidebar-link[data-bs-toggle="collapse"]::after {
transform: translateY(-50%) rotate(90deg);
opacity: 0.8;
}
#sidebar .sidebar-dropdown {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.25s ease-out, opacity 0.15s linear;
will-change: max-height, opacity;
}
#sidebar .sidebar-dropdown.show {
max-height: 500px;
opacity: 1;
}
/* =========================================================
Footer (logout + profile)
========================================================= */
.sidebar-footer {
width: 100%;
border-top: 1px solid var(--sidebar-border, rgba(255,255,255,0.08));
padding: 8px 6px;
flex-shrink: 0;
}
/* Logout link */
a.sidebar-link.sidebar-logout {
color: rgba(255, 255, 255, 0.50);
font-size: 0.68rem;
}
a.sidebar-link.sidebar-logout:hover {
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.06);
}
/* Profile block */
.sidebar-profile {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px 4px;
}
.sidebar-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0.9;
}
.sidebar-avatar-badge {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
background: var(--sidebar-accent, #3b82f6);
color: #fff;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sidebar-profile-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar-user-name {
font-size: 0.68rem;
font-weight: 600;
color: var(--sidebar-text-active, #ffffff);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
font-size: 0.6rem;
color: var(--sidebar-group, rgba(255,255,255,0.35));
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* =========================================================
Collapsed state
========================================================= */
#sidebar.collapsed { width: 60px; }
#sidebar.collapsed .sidebar-link label,
#sidebar.collapsed .sidebar-app-name,
#sidebar.collapsed .sidebar-group-label,
#sidebar.collapsed .sidebar-profile-info,
#sidebar.collapsed .sidebar-user-name,
#sidebar.collapsed .sidebar-user-role {
display: none;
}
#sidebar.collapsed .sidebar-item > a.sidebar-link {
justify-content: center;
padding: 8px;
border-left: 2px solid transparent;
}
#sidebar.collapsed .sidebar-item.active > a.sidebar-link {
border-left-color: var(--sidebar-accent, #3b82f6);
}
#sidebar.collapsed .sidebar-dropdown { display: none; }
#sidebar.collapsed .sidebar-logo { width: 28px; }
/* Resize cursor on the sidebar toggle */
#sidebarToggle:hover { cursor: ew-resize; }
/* =========================================================
Mobile — sidebar as overlay drawer
========================================================= */
@media (max-width: 767.98px) {
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: var(--sidebar-width, 220px) !important; /* always full-width drawer, never icon-only */
transform: translateX(-100%);
transition: transform 0.25s ease-in-out;
z-index: 1050;
}
#sidebar.mobile-open {
transform: translateX(0);
}
/* Re-show labels that collapsed state would hide */
#sidebar.collapsed .sidebar-link label,
#sidebar.collapsed .sidebar-app-name,
#sidebar.collapsed .sidebar-group-label,
#sidebar.collapsed .sidebar-profile-info,
#sidebar.collapsed .sidebar-user-name,
#sidebar.collapsed .sidebar-user-role {
display: revert;
}
#sidebar.collapsed .sidebar-item > a.sidebar-link {
justify-content: flex-start;
padding: 7px 10px;
}
}