/* ========================================================================== ALMS Compact ERP Theme — common.css Central stylesheet for the whole admin panel. Keep module-specific CSS out of individual views — extend this file instead. ========================================================================== */ :root { --alms-primary: #2f5f9e; --alms-primary-dark: #234873; --alms-sidebar-bg: #1b2836; --alms-sidebar-bg-end: #0f171f; --alms-sidebar-active: #2f5f9e; /* Reserved for the sidebar only — never reused for site-wide buttons/links — so the sidebar's active rail / glows read as its own identity. */ --alms-sidebar-accent: #e8c383; --alms-topbar-bg: #ffffff; --alms-body-bg: #f2f4f7; --alms-card-border: #e3e6ea; --alms-text-muted: #6c757d; --alms-font-body: 'Inter', "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; --alms-font-heading: 'Sora', 'Inter', "Segoe UI", sans-serif; --alms-font-size: 13px; --alms-label-size: 12px; --alms-input-height: 35px; --alms-sidebar-width: 180px; --alms-sidebar-collapsed-width: 76px; --alms-sidebar-gap: .6rem; --alms-topbar-height: 52px; } html, body { font-size: var(--alms-font-size); background-color: var(--alms-body-bg); color: #333c48; } body { font-family: var(--alms-font-body); overflow-x: hidden; } /* ---------- Typography ---------- Sora (a geometric display face) for headings/brand/numbers, Inter for everything else — the pairing used across most modern SaaS products (Linear, Vercel, Notion) instead of the default OS font stack, which is the single fastest way to stop reading as "generic admin template". */ h1, h2, h3, h4, h5, h6, .sidebar-brand .brand-label, .page-header h1, .command-palette-item, .stat-value, .bento-tile-value, .bento-hero-value, .bento-mini-value, .auth-card h1 { font-family: var(--alms-font-heading); letter-spacing: -.01em; } .page-header h1 { font-weight: 700; } .bento-hero-value, .bento-tile-value { font-weight: 800; letter-spacing: -.02em; } a { text-decoration: none; } /* ---------- Layout ---------- A single gap (not sidebar-gap * 2) separates the sidebar's right edge from the content column, so the seam matches the sidebar's own left inset instead of reading as a leftover double gutter. */ .alms-content { margin-left: calc(var(--alms-sidebar-width) + var(--alms-sidebar-gap)); display: flex; flex-direction: column; min-height: 100vh; min-width: 0; transition: margin-left .25s ease; } .alms-main { padding: .6rem 1rem 2rem; flex: 1; min-width: 0; } /* ---------- Topbar (inside content column) ---------- Floated as a rounded card at the same top/height as the sidebar so the two read as one connected design instead of a flush white bar butted up against a floating dark panel. */ .alms-topbar { height: var(--alms-topbar-height); background: var(--alms-topbar-bg); border-radius: 16px; box-shadow: 0 4px 14px rgba(20,30,50,.06); display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; margin: var(--alms-sidebar-gap) var(--alms-sidebar-gap) 0 0; position: sticky; top: var(--alms-sidebar-gap); z-index: 1020; } .topbar-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #4a5568; font-size: 14px; border: none; background: transparent; cursor: pointer; } .topbar-icon-btn:hover { background: #f0f2f5; color: var(--alms-primary); } /* Sidebar toggle buttons (desktop collapse + mobile drawer) — styled as part of the sidebar's own design language rather than a plain icon. */ .sidebar-toggle-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; border: none; background: rgba(47,95,158,.09); color: var(--alms-primary); font-size: 14px; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; } .sidebar-toggle-btn:hover { background: var(--alms-primary); color: #fff; box-shadow: 0 4px 10px rgba(47,95,158,.35); } .sidebar-toggle-btn:active { transform: scale(.92); } .sidebar-toggle-btn:focus-visible { outline: 2px solid var(--alms-primary); outline-offset: 2px; } body.sidebar-collapsed #sidebarDesktopToggle { background: var(--alms-primary); color: #fff; } /* ---------- Diagonal / slanted left sidebar ---------- */ .alms-sidebar { position: fixed; top: var(--alms-sidebar-gap); left: var(--alms-sidebar-gap); bottom: var(--alms-sidebar-gap); width: var(--alms-sidebar-width); background: linear-gradient(165deg, var(--alms-sidebar-bg) 0%, var(--alms-sidebar-bg-end) 100%); border-radius: 22px; overflow: visible; z-index: 1040; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 1px 0 0 rgba(255,255,255,.03), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25), 0 16px 36px rgba(8,14,22,.4); transform: translateX(0); transition: transform .25s ease, width .25s ease; display: flex; flex-direction: column; } /* Decorative depth layer: a soft champagne glow anchored behind the brand (the sidebar's one reserved accent color) plus a faint diagonal texture — both purely cosmetic, clipped to the sidebar's own rounded box. */ .alms-sidebar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(180px 150px at 30px 44px, rgba(232,195,131,.08), transparent 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); pointer-events: none; } .sidebar-brand { position: relative; height: 84px; flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; padding: 0 1.3rem; color: #fff; font-weight: 700; font-size: 16px; overflow: hidden; border-radius: 22px 22px 0 0; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .sidebar-brand::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--alms-primary) 0%, var(--alms-primary-dark) 60%, transparent 60.5%); /* Fixed pixel cut (not a %) so the angle stays identical to the active-item chevron below regardless of sidebar width at any breakpoint. */ clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0% 100%); opacity: .95; } .sidebar-brand .brand-icon, .sidebar-brand .brand-label { position: relative; z-index: 1; } .brand-icon { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.1) 45%, rgba(255,255,255,.16) 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -3px 4px rgba(0,0,0,.28), 0 3px 6px rgba(0,0,0,.35), 0 0 12px rgba(232,195,131,.28); flex: 0 0 auto; } .brand-icon i { color: #fff; font-size: 16px; } .sidebar-brand .brand-logo { position: relative; z-index: 1; max-height: 34px; max-width: 120px; width: auto; object-fit: contain; } body.sidebar-collapsed .sidebar-brand .brand-logo { max-width: 34px; } /* Cut-corner glint — the same diagonal notch reused on every nav icon chip, rounded off naturally by the chip's own border-radius + overflow:hidden. */ .brand-icon::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 9px 9px 0 0; border-color: rgba(232,195,131,.55) transparent transparent transparent; } .sidebar-nav { list-style: none; margin: 0; padding: 1rem 0 1rem .9rem; display: flex; flex-direction: column; gap: .3rem; position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } .sidebar-nav::-webkit-scrollbar { width: 5px; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; } .sidebar-nav .nav-link { position: relative; color: rgba(255,255,255,.72); font-size: 11.5px; padding: .55rem 1rem .55rem .55rem; margin-right: .9rem; display: flex; align-items: center; gap: .65rem; border-radius: 10px; white-space: nowrap; /* Barely-raised idle "tile" — a faint top-lit gradient plus a soft drop shadow so every row reads as a slightly embossed button even before hover/active kicks in. */ background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 55%); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.18); transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1), margin-right .15s ease, padding-right .15s ease, clip-path .15s ease, box-shadow .15s cubic-bezier(.4,0,.2,1); } /* Icon chip — every nav icon sits in its own small container instead of floating bare next to the label, and participates in hover/active state changes independently of the row background. */ .nav-icon { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 9px; background: linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 60%, rgba(255,255,255,.07) 100%); color: rgba(255,255,255,.8); font-size: 13px; flex: 0 0 auto; /* Embossed glass chip: soft top highlight + inset bottom shadow reads as a physically raised button, deepened further on hover/active below. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.3); transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1); } /* Same cut-corner glint as the brand icon — ties every icon in the sidebar (expanded, collapsed, hover, active) back to one diagonal signature. */ .nav-icon::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 8px 8px 0 0; border-color: rgba(255,255,255,.14) transparent transparent transparent; transition: border-color .15s cubic-bezier(.4,0,.2,1); } .sidebar-nav .nav-link:hover { background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.03) 100%); color: #fff; transform: translateX(2px) translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 5px 10px rgba(0,0,0,.28); } .sidebar-nav .nav-link:hover .nav-icon { background: linear-gradient(150deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.16) 100%); color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.35), 0 0 8px rgba(232,195,131,.28); } .sidebar-nav .nav-link:hover .nav-icon::before, .sidebar-nav .nav-link.active .nav-icon::before { border-color: rgba(232,195,131,.55) transparent transparent transparent; } .sidebar-nav .nav-link.active { color: #fff; font-weight: 600; background: linear-gradient(95deg, var(--alms-sidebar-active) 0%, #3f7cc4 100%); /* Raised-button 3D: bright top bevel + darker bottom bevel on top of the existing outward drop shadow, so the active pill reads as a pressed-in, physically lit key rather than a flat color swap. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.2), 0 6px 16px rgba(47,95,158,.45); margin-right: 0; padding-right: 1.9rem; border-radius: 10px 0 0 10px; /* Same fixed-pixel angle as the brand header cut above — a genuinely unified diagonal, not a coincidentally similar percentage cut. */ clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0% 100%); } .sidebar-nav .nav-link.active .nav-icon { background: linear-gradient(150deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.25); } /* Active rail — the sidebar's reserved accent color, on the active item's inner edge. Sits at x=2px, inside the clip-path's un-cut left side (the cut only tapers the right edge), so it renders cleanly in both the expanded diagonal pill and the collapsed icon-only pill. */ .sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--alms-sidebar-accent); box-shadow: 0 0 6px rgba(232,195,131,.6); } .sidebar-caret { margin-left: auto; font-size: 10px; transition: transform .15s; } .sidebar-nav .nav-item.open > .nav-link .sidebar-caret { transform: rotate(90deg); } .sidebar-submenu { list-style: none; padding-left: 2rem; display: none; } .sidebar-nav .nav-item.open > .sidebar-submenu { display: block; } .sidebar-submenu .nav-link { font-size: 11.5px; padding: .4rem .7rem; margin-right: .9rem; clip-path: none; } /* ---------- Collapsed desktop sidebar: icon-only + hover tooltip ---------- Markup only exposes `.sidebar-label` (row text) and `.sidebar-section-title` (group headings) — there is no separate icon-chip wrapper — so collapsing is done by hiding those two directly and turning each `.nav-link` into a fixed-size, auto-centered square button instead of relying on the expanded row's asymmetric nav padding. */ @media (min-width: 992px) { body.sidebar-collapsed .alms-sidebar { width: var(--alms-sidebar-collapsed-width); } body.sidebar-collapsed .alms-content { margin-left: calc(var(--alms-sidebar-collapsed-width) + var(--alms-sidebar-gap)); } body.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; } body.sidebar-collapsed .sidebar-brand .brand-label { display: none; } body.sidebar-collapsed .sidebar-nav { padding: 1rem .5rem; align-items: center; } body.sidebar-collapsed .sidebar-nav .sidebar-section-title { display: none; } body.sidebar-collapsed .sidebar-nav .sidebar-label { display: none; width: 0; overflow: hidden; white-space: nowrap; } body.sidebar-collapsed .sidebar-nav .sidebar-caret { display: none; } /* Submenus can't fly out inline in a 76px rail without a bigger redesign, so they stay closed/hidden while collapsed rather than spilling text. */ body.sidebar-collapsed .sidebar-nav .sidebar-submenu { display: none !important; } body.sidebar-collapsed .sidebar-nav .nav-item { width: 100%; } body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; align-items: center; gap: 0; width: 40px; height: 40px; padding: 0; margin-right: 0; margin-inline: auto; } body.sidebar-collapsed .sidebar-nav .nav-link.active { padding: 0; border-radius: 10px; clip-path: none; } } /* Collapsed-sidebar hover tooltip — a single shared element appended to and positioned via JS (see common.js), not a per-link ::after. .sidebar-nav needs `overflow-y: auto` to scroll its full menu list inside the fixed-height sidebar rail, and per the CSS overflow spec that forces overflow-x to clip too (you can't have one axis visible and the other auto) — so a ::after tooltip positioned past the link's right edge would get cut off at the sidebar's own boundary. Living in sidesteps that clipping entirely. */ .sidebar-hover-tooltip { position: fixed; background: #16212c; color: #fff; padding: .4rem .7rem; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility .15s ease; box-shadow: 0 8px 18px rgba(0,0,0,.3); z-index: 1060; } .sidebar-hover-tooltip.is-visible { opacity: 1; visibility: visible; } /* ---------- Mobile off-canvas backdrop ---------- */ .sidebar-backdrop { display: none; } /* ---------- Top-of-page loading bar (see common.js) ---------- No `transition` here on purpose: this element is used two different ways (a slow 4s crawl on click, an instant snap-to-100%-then-fade on the next page's load) that need two different transition rules, so common.js sets `transition` inline for whichever phase is active rather than fighting a single shared one declared here. */ .alms-top-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--alms-primary), var(--alms-sidebar-accent)); z-index: 3000; box-shadow: 0 0 8px rgba(47,95,158,.6); } /* ---------- Command palette (Ctrl+K) ---------- */ .command-palette-overlay { display: none; position: fixed; inset: 0; background: rgba(10,14,20,.5); z-index: 2000; align-items: flex-start; justify-content: center; padding-top: 12vh; } .command-palette-overlay.is-open { display: flex; } .command-palette-box { width: min(560px, 92vw); max-height: 70vh; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(8,14,22,.35); overflow: hidden; display: flex; flex-direction: column; } .command-palette-input-wrap { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--alms-card-border); color: var(--alms-text-muted); } .command-palette-input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: #23303f; } .command-palette-input-wrap kbd { font-size: 10.5px; color: var(--alms-text-muted); background: #f0f2f5; border: 1px solid var(--alms-card-border); border-radius: 5px; padding: .15em .5em; flex: 0 0 auto; } /* Below ~480px there isn't room for both the placeholder text and this hint without crowding — the Esc hint is a desktop keyboard-shortcut cue anyway, so it's the one that gives way, not the input. */ @media (max-width: 480px) { .command-palette-input-wrap kbd { display: none; } } .command-palette-results { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; } .command-palette-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px; font-size: 13px; color: #384656; cursor: pointer; } .command-palette-item.is-active, .command-palette-item:hover { background: rgba(47,95,158,.09); color: var(--alms-primary-dark); } .command-palette-item-icon { width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(47,95,158,.1); color: var(--alms-primary); font-size: 12px; } .command-palette-empty { padding: 1.2rem; text-align: center; font-size: 12.5px; color: var(--alms-text-muted); } /* ---------- Page header / breadcrumb ---------- Title + breadcrumb now sit on one compact row (page-title-row) instead of the breadcrumb stacking on its own line below the

; wraps gracefully on narrow screens since both this row and .page-header stay flex-wrap. */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .15rem; flex-wrap: wrap; gap: .5rem; } .page-header h1 { font-size: 17px; font-weight: 600; margin: 0; color: #253242; } .page-header .page-subtitle { font-size: 12px; color: var(--alms-text-muted); } .page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; row-gap: .1rem; } .alms-breadcrumb { font-size: 11.5px; margin: 0; padding: 0 0 0 .6rem; list-style: none; display: flex; align-items: center; gap: .35rem; color: var(--alms-text-muted); border-left: 1px solid var(--alms-card-border); } .alms-breadcrumb li { display: flex; align-items: center; } .alms-breadcrumb li::after { content: "/"; margin-left: .35rem; color: #c3c9d1; } .alms-breadcrumb li:last-child::after { content: ""; } .alms-breadcrumb a { color: var(--alms-primary); } /* ---------- Cards ---------- Same rounded/elevated language as the topbar/sidebar (radius + layered shadow instead of a hard-lined box) so the content area reads as part of the same design system. */ .card { background: #fff; border: 1px solid rgba(20,30,50,.05); border-radius: 16px; box-shadow: 0 2px 4px rgba(20,30,50,.04), 0 10px 24px rgba(20,30,50,.06); overflow: hidden; } /* One-shot entrance on first paint only (not re-triggered on every re-render/ AJAX reload — plain CSS `animation` on page load, nothing JS-driven to accidentally replay). Respects prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .card { animation: alms-fade-up .5s cubic-bezier(.16,1,.3,1) both; } @keyframes alms-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } /* No divider here — the header flows straight into the toolbar below it; the one clear break now sits right before the table (see .table-toolbar). */ .card-header { background: #fff; padding: 0.5rem 1.1rem; font-size: 13.5px; font-weight: 600; color: #23303f; border-bottom: none; display: flex; align-items: center; justify-content: space-between; } .card-body { padding: .5rem 1.1rem 1rem; overflow-x: auto; } .card + .card { margin-top: .85rem; } /* Form-section headers reuse the app's icon-chip language (same rounded- square idea as the sidebar's .nav-icon / the table's action-button chips) instead of a flat colored plate — no markup change needed, since every section header already renders as a bare immediately followed by text inside .card-header. */ .form-section-card .card-header { background: #fff; color: #23303f; border-bottom: 1px solid var(--alms-card-border); gap: .6rem; /* The base .card-header rule is flex + space-between, tuned for the list-page header's title+"Add New" pair. A section header is just a bare icon followed by a raw text node — flexbox wraps that trailing text in its own anonymous flex item, so space-between was pushing the title away from its icon toward the right edge. Left-align instead. */ justify-content: flex-start; } .form-section-card .card-header i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(47,95,158,.1); color: var(--alms-primary); font-size: 13px; flex: 0 0 auto; } /* ---------- Forms ---------- Radius/border/focus-ring now match the app's chip/button language instead of stock Bootstrap's 4px corners and default blue focus glow. */ label, .form-label { font-size: var(--alms-label-size); font-weight: 600; color: #445064; margin-bottom: .25rem; } .form-control, .form-select, .select2-container .select2-selection { font-size: var(--alms-font-size) !important; min-height: var(--alms-input-height) !important; border-radius: 8px; border: 1px solid var(--alms-card-border); transition: border-color .15s ease, box-shadow .15s ease; } .form-control, .form-select { height: var(--alms-input-height); padding: .3rem .7rem; } textarea.form-control { height: auto; } .select2-selection__rendered { line-height: var(--alms-input-height) !important; font-size: var(--alms-font-size) !important; } .select2-selection__arrow { height: var(--alms-input-height) !important; } .form-control:focus, .form-select:focus { border-color: var(--alms-primary); box-shadow: 0 0 0 3px rgba(47,95,158,.12); outline: none; } .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--alms-primary) !important; box-shadow: 0 0 0 3px rgba(47,95,158,.12) !important; } .form-check-input { cursor: pointer; } .form-check-input:checked { background-color: var(--alms-primary); border-color: var(--alms-primary); } .form-check-input:focus { border-color: var(--alms-primary); box-shadow: 0 0 0 3px rgba(47,95,158,.12); } /* Validation now uses the app's own danger red (matches .badge-danger and the Delete action button) instead of Bootstrap's stock #dc3545. */ .form-text.error, .invalid-feedback, .field-error { font-size: 11px; color: #b3261e; display: block; margin-top: .3rem; font-weight: 500; } .is-invalid { border-color: #b3261e !important; } .is-invalid:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.14) !important; } .form-group, .mb-form { margin-bottom: .25rem; } .required-star::after { content: "*"; color: #b3261e; margin-left: 2px; } /* ---------- Buttons ---------- */ .btn { font-size: 12.5px; padding: .38rem .8rem; border-radius: 4px; transition: transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn-sm { font-size: 11.5px; padding: .28rem .6rem; } .btn i { margin-right: .3rem; } .btn-icon { padding: .3rem .45rem; } .btn:active { transform: scale(.96); } .btn-primary { background: var(--alms-primary); border-color: var(--alms-primary); } .btn-primary:hover { background: var(--alms-primary-dark); border-color: var(--alms-primary-dark); box-shadow: 0 4px 12px rgba(47,95,158,.3); } /* Row action buttons — restrained icon chips matching the sidebar's .nav-icon language, instead of loud solid-color Bootstrap squares. Routine actions stay neutral at rest and only tint on hover/focus; Delete is the one action allowed to read as destructive at rest too. */ .table-action-btns { display: flex; align-items: center; gap: .35rem; } .table-action-btns .btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; font-size: 12px; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } .table-action-btns .btn i { margin-right: 0; } .table-action-btns .btn:active { transform: scale(.92); } .table-action-btns .btn:focus-visible { outline: 2px solid var(--alms-primary); outline-offset: 2px; } .table-action-btns .btn-info, .table-action-btns .btn-primary, .table-action-btns .btn-success, .table-action-btns .btn-secondary { background: rgba(74,85,104,.08); color: #4a5568; } .table-action-btns .btn-info:hover { background: rgba(12,110,143,.14); color: #0c6e8f; } .table-action-btns .btn-primary:hover { background: rgba(47,95,158,.14); color: var(--alms-primary); } .table-action-btns .btn-success:hover { background: rgba(30,125,60,.14); color: #1e7d3c; } .table-action-btns .btn-secondary:hover{ background: rgba(87,99,117,.14); color: #43505f; } .table-action-btns .btn-danger { background: rgba(179,38,30,.09); color: #b3261e; } .table-action-btns .btn-danger:hover { background: #b3261e; color: #fff; box-shadow: 0 3px 8px rgba(179,38,30,.35); } /* ---------- Tables / DataTables ---------- table-bordered was dropped in favor of Bootstrap's default horizontal-only row dividers; zebra striping + hover tint are driven through Bootstrap 5.3's own CSS variables rather than fighting its specificity. */ table.dataTable { font-size: 12.5px; } table.dataTable.alms-datatable { --bs-table-striped-bg: #fafbfc; --bs-table-hover-bg: rgba(47,95,158,.06); --bs-table-border-color: var(--alms-card-border); } table.dataTable thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #5b6779; background: #f8f9fb; white-space: nowrap; } table.dataTable td, table.dataTable th { padding: .6rem .65rem; vertical-align: middle; } /* The one visual break between the unified header/toolbar block above and the table data below (the header/body divider itself was removed). */ .card-body .table-toolbar { margin: 0 0 .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--alms-card-border); } .dataTables_wrapper .dataTables_length select { font-size: 12px; height: 32px; padding: 0 1.4rem 0 .6rem; border-radius: 6px; border: 1px solid var(--alms-card-border); background-color: #fff; } .dataTables_wrapper .dataTables_length label { font-size: 12px; color: var(--alms-text-muted); display: flex; align-items: center; gap: .4rem; margin: 0; } .dataTables_wrapper .dataTables_filter label { font-size: 0; margin: 0; position: relative; } .dataTables_wrapper .dataTables_filter label::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f002"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--alms-text-muted); font-size: 11px; pointer-events: none; } .dataTables_wrapper .dataTables_filter input { font-size: 12px; height: 32px; min-width: 200px; padding: 0 .7rem 0 26px; border-radius: 999px; border: 1px solid var(--alms-card-border); background-color: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--alms-primary); box-shadow: 0 0 0 3px rgba(47,95,158,.12); } .dataTables_wrapper .dataTables_info { font-size: 11.5px; color: var(--alms-text-muted); } .dataTables_wrapper .dataTables_paginate .pagination { gap: .2rem; } .dataTables_wrapper .dataTables_paginate .page-item .page-link { border: none; border-radius: 8px; margin-left: 0; padding: .3rem .65rem; font-size: 11.5px; color: #4a5568; } .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover { background: rgba(47,95,158,.09); color: var(--alms-primary); } .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background: var(--alms-primary); color: #fff; box-shadow: 0 3px 8px rgba(47,95,158,.35); } .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link { color: #c3c9d1; background: transparent; } .table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; flex-wrap: wrap; gap: .5rem; } /* ---------- Report filter bar ---------- One shared layout for every Reports-module filter form, replacing each page's hand-picked Bootstrap col-md-2/3/4 grid. Fields flow via flexbox with a common flex-basis instead of fixed column fractions, so the same markup reflows cleanly whether a report has 3 fields or 9, and the filter row now lives inside the same card as its results table (the bottom border below is the same seam language as .table-toolbar above, so a merged filter+results panel reads as one connected block). */ .report-filter-heading { display: flex; align-items: center; gap: .4rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--alms-text-muted); margin-bottom: .6rem; } .report-filter-heading i { font-size: 10px; } .report-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--alms-card-border); } .report-filter-field { display: flex; flex-direction: column; flex: 1 1 190px; min-width: 160px; } .report-filter-field label { margin-bottom: .25rem; } .report-filter-actions { display: flex; align-items: flex-end; gap: .5rem; margin-left: auto; } /* Scoped to report filter bars only — keeps the app's global .btn radius untouched everywhere else, per "no unrelated redesign". */ .report-filter-actions .btn { border-radius: 8px; font-weight: 600; white-space: nowrap; } .report-filter-actions .btn-primary { box-shadow: 0 2px 6px rgba(47,95,158,.25); } .report-filter-actions .btn-outline-secondary { border-color: var(--alms-card-border); color: #5b6779; } .report-filter-actions .btn-outline-secondary:hover { background: #f4f6f8; color: #23303f; border-color: var(--alms-card-border); } .report-filter-note { font-size: 11.5px; color: var(--alms-text-muted); margin: -.4rem 0 .9rem; } /* Active-filter chip strip — sits between the filter bar/note and the results table, still inside the same card-body, so it reads as a summary of the panel above rather than a separate block. */ .report-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 .9rem; } .report-filter-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--alms-primary-dark); background: rgba(47,95,158,.08); border: 1px solid rgba(47,95,158,.18); border-radius: 999px; padding: .3rem .55rem .3rem .7rem; transition: background .15s ease, border-color .15s ease; } .report-filter-chip:hover { background: rgba(47,95,158,.15); border-color: rgba(47,95,158,.32); color: var(--alms-primary-dark); } .report-filter-chip-label { font-weight: 700; opacity: .7; } .report-filter-chip i { font-size: 9px; opacity: .65; } @media (max-width: 576px) { .report-filter-bar { align-items: stretch; } .report-filter-field { flex-basis: 100%; } .report-filter-actions { flex-basis: 100%; margin-left: 0; justify-content: stretch; } .report-filter-actions .btn { flex: 1 1 0; } } /* ---------- Badges ---------- Status pills: a soft tinted background + matching border (instead of the old flat pastel rectangle) so the same color reads correctly whether the badge sits on a light or dark card — the tint is derived from the status color at low opacity rather than a hardcoded light hex, so it never washes out on a dark background the way a pale solid fill would. The small leading dot (.badge-dot, added by status_badge()/yes_no_badge() in app_helper.php) gives each pill a quick-scan color cue independent of reading the label text. */ .badge { display: inline-flex; align-items: center; gap: .38em; font-size: 10.5px; font-weight: 700; padding: .34em .65em .34em .55em; border-radius: 999px; border: 1px solid transparent; line-height: 1.4; } .badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; flex: 0 0 auto; } .badge-success { background: rgba(30,125,60,.1); color: #1e7d3c; border-color: rgba(30,125,60,.28); } .badge-primary { background: rgba(35,72,115,.1); color: var(--alms-primary-dark); border-color: rgba(35,72,115,.28); } .badge-warning { background: rgba(151,101,12,.12); color: #97650c; border-color: rgba(151,101,12,.3); } .badge-danger { background: rgba(179,38,30,.1); color: #b3261e; border-color: rgba(179,38,30,.28); } .badge-info { background: rgba(12,110,143,.1); color: #0c6e8f; border-color: rgba(12,110,143,.28); } .badge-secondary { background: rgba(87,99,117,.12); color: #576375; border-color: rgba(87,99,117,.28); } .badge-dark { background: rgba(42,47,54,.12); color: #2a2f36; border-color: rgba(42,47,54,.28); } /* ---------- User avatar (colored initials, see user_avatar() helper) ---------- */ .user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.2); } /* Same gradient set as .stat-card.bg-c1..c6 / .bento-tile.bg-c1..c6 — those rules are scoped to their own base class, so reapplied here too. */ .user-avatar.bg-c1 { background: linear-gradient(135deg,#2f5f9e,#3f7cc4); } .user-avatar.bg-c2 { background: linear-gradient(135deg,#1e8e5a,#28b476); } .user-avatar.bg-c3 { background: linear-gradient(135deg,#c77c11,#e5a03d); } .user-avatar.bg-c4 { background: linear-gradient(135deg,#b3261e,#dd4c40); } .user-avatar.bg-c5 { background: linear-gradient(135deg,#5b4bc4,#7b6de0); } .user-avatar.bg-c6 { background: linear-gradient(135deg,#0c6e8f,#1596bd); } /* ---------- Notification dropdown ---------- */ .notif-dropdown-menu { width: 320px; } .notif-dropdown-list { max-height: 320px; overflow-y: auto; } .notif-item { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .4rem; border-bottom: 1px solid var(--alms-card-border); font-size: 12px; } .notif-item:last-child { border-bottom: none; } .notif-item-icon { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 12px; margin-top: 1px; } .notif-icon-warning { background: rgba(151,101,12,.12); color: #97650c; } .notif-icon-danger { background: rgba(179,38,30,.1); color: #b3261e; } .notif-icon-info { background: rgba(12,110,143,.1); color: #0c6e8f; } .notif-icon-secondary { background: rgba(87,99,117,.12); color: #576375; } .notif-item-body { flex: 1 1 auto; min-width: 0; } .notif-item-message { color: #2b333d; line-height: 1.4; } .notif-item-meta { font-size: 10.5px; color: var(--alms-text-muted); margin-top: 2px; } .notif-unread-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--alms-primary); box-shadow: 0 0 5px rgba(47,95,158,.6); margin-top: 6px; } [data-theme="dark"] .notif-item { border-bottom-color: rgba(255,255,255,.08); } [data-theme="dark"] .notif-item-message { color: #d7dee6; } /* Notification-count bubble on the topbar bell — a solid numeric counter, not a status label, so it keeps the old flat/solid treatment rather than the tinted pill style above (a translucent tint would wash out the count against the icon button behind it). */ .notif-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 1; background: #b3261e; color: #fff; border-radius: 999px; box-shadow: 0 0 0 2px var(--alms-topbar-bg); } /* Toggleable status badges (status_toggle_badge()) always wrap the badge in an ; plain informational badges never have that attribute, so this selector reaches exactly the clickable ones. A dashed underline is the classic, low-key "this is interactive" cue — no extra markup, and it never fires on the AJAX action buttons that also use data-toggle-status-url, since those are