/* ============================================================================================= VCOMPLIANT — SHARED UI FOUNDATION --------------------------------------------------------------------------------------------- The single design foundation for the whole application. Everything reusable lives here: design tokens, a typography scale, an 8px spacing system, radii, shadows, component classes, utility classes, responsive helpers, print styles and accessibility rules. HOW IT FITS TOGETHER vc-foundation.css <- this file. Tokens + components + utilities. Loaded on EVERY page. theme-*.css <- a theme only overrides TOKEN VALUES and maps AdminLTE's own classes onto them. No theme should redefine component structure. SAFETY CONTRACT This file is purely ADDITIVE. It defines custom properties on :root, `.vc-*` component classes and `.u-*` utilities. It deliberately does NOT restyle bare element selectors (button, table, input...) so it cannot alter the appearance of the 387 existing AdminLTE pages. Loading it changes nothing until a class is used or a theme consumes a token. DARK MODE Every component is styled through tokens only, so dark mode is a token swap - no component rule is ever duplicated for dark. Enabled by html[data-vc-dark="1"] or html[data-theme="dark"]. BREAKPOINT LADDER (mobile-first) 320 / 375 / 414 small -> large mobile (base styles, single column, fluid) 768 tablet portrait 1024 tablet landscape 1280 laptop 1366 / 1440 desktop 1920 large desktop ============================================================================================= */ /* ============================================================================================= 01 DESIGN TOKENS ============================================================================================= */ :root{ /* ---- brand ---- */ --vc-primary:#1F6FB2; --vc-primary-hover:#1A5E99; --vc-primary-active:#164F81; --vc-primary-soft:#E6F0F9; --vc-primary-contrast:#FFFFFF; --vc-secondary:#12466F; --vc-secondary-hover:#0E3859; --vc-secondary-soft:#E3ECF4; --vc-secondary-contrast:#FFFFFF; /* ---- semantic ---- */ --vc-success:#0B7D4E; --vc-success-soft:#E4F3EB; --vc-success-border:#B7DFC9; --vc-success-contrast:#FFFFFF; --vc-warning:#9A6206; --vc-warning-soft:#FBF0DC; --vc-warning-border:#EBD3A0; --vc-warning-contrast:#FFFFFF; --vc-error:#B3261E; --vc-error-soft:#FBE9E7; --vc-error-border:#F0C2BD; --vc-error-contrast:#FFFFFF; --vc-info:#15607A; --vc-info-soft:#E2EFF4; --vc-info-border:#B5D6E2; --vc-info-contrast:#FFFFFF; --vc-neutral:#5A6B7F; --vc-neutral-soft:#EEF2F6; --vc-neutral-border:#D5DDE6; /* ---- background & surface ---- */ --vc-bg:#F3F6F9; /* app canvas */ --vc-bg-subtle:#EDF1F6; --vc-surface:#FFFFFF; /* cards, panels */ --vc-surface-raised:#FFFFFF; /* dialogs, popovers */ --vc-surface-sunken:#F8FAFC; /* table headers, wells */ --vc-overlay:rgba(13,27,42,.48); /* ---- border ---- */ --vc-border:#DDE3EB; --vc-border-strong:#C6D0DC; --vc-border-subtle:#EAEEF3; /* ---- typography colours ---- */ --vc-text:#0D1B2A; --vc-text-secondary:#46586D; --vc-text-muted:#75869A; --vc-text-inverse:#FFFFFF; --vc-text-link:var(--vc-primary); /* ---- interaction states ---- */ --vc-hover-bg:rgba(31,111,178,.07); --vc-active-bg:rgba(31,111,178,.13); --vc-selected-bg:var(--vc-primary-soft); --vc-focus-ring:var(--vc-primary); --vc-focus-ring-width:2px; --vc-focus-ring-offset:2px; --vc-disabled-bg:#EDF1F6; --vc-disabled-text:#A6B2C0; --vc-disabled-border:#DDE3EB; /* ---- typography scale ---- */ --vc-font:"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --vc-font-display:"Segoe UI Variable Display","Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,Arial,sans-serif; --vc-font-mono:"Cascadia Mono",ui-monospace,Consolas,"SF Mono",Menlo,monospace; --vc-fs-display:34px; --vc-lh-display:1.15; --vc-fw-display:700; --vc-fs-page-title:24px; --vc-lh-page-title:1.2; --vc-fw-page-title:700; --vc-fs-section:19px; --vc-lh-section:1.25; --vc-fw-section:650; --vc-fs-card-title:15px; --vc-lh-card-title:1.3; --vc-fw-card-title:650; --vc-fs-subheading:14px; --vc-lh-subheading:1.4; --vc-fw-subheading:600; --vc-fs-body:14px; --vc-lh-body:1.55; --vc-fw-body:400; --vc-fs-small:13px; --vc-lh-small:1.5; --vc-fs-caption:12px; --vc-lh-caption:1.45; --vc-fs-label:12.5px; --vc-fw-label:600; --vc-fs-table:13px; --vc-lh-table:1.45; --vc-fs-table-head:11px; --vc-ls-table-head:.07em; --vc-fs-button:13.5px; --vc-fw-button:600; /* ---- spacing (8px grid) ---- */ --vc-space-1:4px; --vc-space-2:8px; --vc-space-3:12px; --vc-space-4:16px; --vc-space-5:24px; --vc-space-6:32px; --vc-space-7:40px; --vc-space-8:48px; --vc-space-9:64px; /* ---- radius ---- */ --vc-radius-button:4px; --vc-radius-input:4px; --vc-radius-card:6px; --vc-radius-dialog:10px; --vc-radius-table:6px; --vc-radius-dropdown:6px; --vc-radius-badge:999px; --vc-radius-none:0; /* ---- shadows ---- */ --vc-shadow-none:none; --vc-shadow-sm:0 1px 2px rgba(13,27,42,.06), 0 1px 1px rgba(13,27,42,.04); --vc-shadow-md:0 2px 4px rgba(13,27,42,.05), 0 6px 16px rgba(13,27,42,.07); --vc-shadow-lg:0 8px 20px rgba(13,27,42,.10), 0 2px 6px rgba(13,27,42,.06); --vc-shadow-hover:0 4px 10px rgba(13,27,42,.10), 0 10px 24px rgba(13,27,42,.09); --vc-shadow-dialog:0 12px 32px rgba(13,27,42,.16); /* ---- motion ---- */ --vc-ease:cubic-bezier(.2,.6,.3,1); --vc-duration-fast:120ms; --vc-duration:180ms; --vc-duration-slow:260ms; /* ---- layering ---- */ --vc-z-base:1; --vc-z-sticky:100; --vc-z-drawer:900; --vc-z-overlay:1000; --vc-z-dialog:1010; --vc-z-toast:1080; --vc-z-tooltip:1090; /* ---- touch ---- */ --vc-touch-target:44px; } /* ============================================================================================= 02 DARK MODE — token swap only. No component rule is duplicated below this point. ============================================================================================= */ html[data-vc-dark="1"], html[data-theme="dark"]{ --vc-primary:#5BA3DE; --vc-primary-hover:#7FBBEA; --vc-primary-active:#9ACBF0; --vc-primary-soft:#16293A; --vc-primary-contrast:#06131E; --vc-secondary:#7FBBEA; --vc-secondary-hover:#9ACBF0; --vc-secondary-soft:#16293A; --vc-secondary-contrast:#06131E; --vc-success:#5FC79A; --vc-success-soft:#122C22; --vc-success-border:#1F4E3B; --vc-success-contrast:#06131E; --vc-warning:#E0AE5C; --vc-warning-soft:#2C2415; --vc-warning-border:#54401D; --vc-warning-contrast:#06131E; --vc-error:#F08A7F; --vc-error-soft:#2E1815; --vc-error-border:#5B2A24; --vc-error-contrast:#06131E; --vc-info:#6FB6CE; --vc-info-soft:#132830; --vc-info-border:#234B58; --vc-info-contrast:#06131E; --vc-neutral:#93A4B6; --vc-neutral-soft:#1B2733; --vc-neutral-border:#2E3F51; --vc-bg:#0B1219; --vc-bg-subtle:#101822; --vc-surface:#131C26; --vc-surface-raised:#18232F; --vc-surface-sunken:#18232F; --vc-overlay:rgba(0,0,0,.62); --vc-border:#263546; --vc-border-strong:#36495E; --vc-border-subtle:#1E2A38; --vc-text:#E8EEF5; --vc-text-secondary:#AFBECE; --vc-text-muted:#8496A8; --vc-text-inverse:#06131E; --vc-hover-bg:rgba(127,187,234,.10); --vc-active-bg:rgba(127,187,234,.18); --vc-disabled-bg:#1B2733; --vc-disabled-text:#5E7085; --vc-disabled-border:#263546; --vc-shadow-sm:0 1px 2px rgba(0,0,0,.40); --vc-shadow-md:0 2px 6px rgba(0,0,0,.42), 0 8px 20px rgba(0,0,0,.34); --vc-shadow-lg:0 10px 24px rgba(0,0,0,.5); --vc-shadow-hover:0 12px 28px rgba(0,0,0,.55); --vc-shadow-dialog:0 14px 36px rgba(0,0,0,.6); } /* ============================================================================================= 03 TYPOGRAPHY CLASSES ============================================================================================= */ .vc-display {font-family:var(--vc-font-display); font-size:var(--vc-fs-display); line-height:var(--vc-lh-display); font-weight:var(--vc-fw-display); letter-spacing:-.025em; color:var(--vc-text); margin:0; text-wrap:balance;} .vc-page-title {font-family:var(--vc-font-display); font-size:var(--vc-fs-page-title); line-height:var(--vc-lh-page-title); font-weight:var(--vc-fw-page-title); letter-spacing:-.02em; color:var(--vc-text); margin:0; text-wrap:balance;} .vc-section-title{font-family:var(--vc-font-display); font-size:var(--vc-fs-section); line-height:var(--vc-lh-section); font-weight:var(--vc-fw-section); letter-spacing:-.015em; color:var(--vc-text); margin:0;} .vc-card-title {font-family:var(--vc-font-display); font-size:var(--vc-fs-card-title); line-height:var(--vc-lh-card-title); font-weight:var(--vc-fw-card-title); color:var(--vc-text); margin:0;} .vc-subheading {font-size:var(--vc-fs-subheading); line-height:var(--vc-lh-subheading); font-weight:var(--vc-fw-subheading); color:var(--vc-text-secondary); margin:0;} .vc-body {font-size:var(--vc-fs-body); line-height:var(--vc-lh-body); color:var(--vc-text-secondary); margin:0;} .vc-small {font-size:var(--vc-fs-small); line-height:var(--vc-lh-small); color:var(--vc-text-secondary);} .vc-caption {font-size:var(--vc-fs-caption); line-height:var(--vc-lh-caption); color:var(--vc-text-muted);} .vc-label {font-size:var(--vc-fs-label); font-weight:var(--vc-fw-label); color:var(--vc-text); display:inline-block;} .vc-table-text {font-size:var(--vc-fs-table); line-height:var(--vc-lh-table); color:var(--vc-text-secondary);} .vc-button-text {font-size:var(--vc-fs-button); font-weight:var(--vc-fw-button); letter-spacing:.005em;} .vc-mono {font-family:var(--vc-font-mono); font-size:.9em;} .vc-num {font-variant-numeric:tabular-nums;} .vc-required::after{content:" *"; color:var(--vc-error);} /* ============================================================================================= 04 BUTTONS ============================================================================================= */ .vc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--vc-space-2); font-family:inherit; font-size:var(--vc-fs-button); font-weight:var(--vc-fw-button); line-height:1.2; padding:var(--vc-space-2) var(--vc-space-4); min-height:36px; border:1px solid transparent; border-radius:var(--vc-radius-button); background:var(--vc-primary); color:var(--vc-primary-contrast); cursor:pointer; text-decoration:none; white-space:nowrap; transition:background var(--vc-duration) var(--vc-ease), border-color var(--vc-duration) var(--vc-ease), box-shadow var(--vc-duration) var(--vc-ease); } .vc-btn:hover{background:var(--vc-primary-hover); color:var(--vc-primary-contrast); text-decoration:none;} .vc-btn:active{background:var(--vc-primary-active);} .vc-btn--secondary{background:var(--vc-surface); color:var(--vc-text); border-color:var(--vc-border-strong);} .vc-btn--secondary:hover{background:var(--vc-surface-sunken); color:var(--vc-text);} .vc-btn--outline{background:transparent; color:var(--vc-primary); border-color:var(--vc-primary);} .vc-btn--outline:hover{background:var(--vc-primary-soft); color:var(--vc-primary);} .vc-btn--ghost{background:transparent; color:var(--vc-text-secondary); border-color:transparent;} .vc-btn--ghost:hover{background:var(--vc-hover-bg); color:var(--vc-text);} .vc-btn--success{background:var(--vc-success); color:var(--vc-success-contrast);} .vc-btn--danger{background:var(--vc-error); color:var(--vc-error-contrast);} .vc-btn--warning{background:var(--vc-warning); color:var(--vc-warning-contrast);} .vc-btn--success:hover,.vc-btn--danger:hover,.vc-btn--warning:hover{filter:brightness(.93);} .vc-btn--sm{min-height:30px; padding:var(--vc-space-1) var(--vc-space-3); font-size:var(--vc-fs-caption);} .vc-btn--lg{min-height:44px; padding:var(--vc-space-3) var(--vc-space-5); font-size:var(--vc-fs-subheading);} .vc-btn--block{display:flex; width:100%;} .vc-btn--icon{padding:var(--vc-space-2); min-width:36px;} .vc-btn[disabled],.vc-btn--disabled,.vc-btn[aria-disabled="true"]{ background:var(--vc-disabled-bg) !important; color:var(--vc-disabled-text) !important; border-color:var(--vc-disabled-border) !important; cursor:not-allowed; box-shadow:none !important; filter:none !important; } .vc-btn--loading{position:relative; color:transparent !important; pointer-events:none;} .vc-btn--loading::after{ content:""; position:absolute; width:15px; height:15px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; color:var(--vc-primary-contrast); animation:vc-spin .7s linear infinite; } @keyframes vc-spin{to{transform:rotate(360deg)}} /* ============================================================================================= 05 FORM CONTROLS ============================================================================================= */ .vc-field{display:flex; flex-direction:column; gap:var(--vc-space-2); margin-bottom:var(--vc-space-4);} .vc-input,.vc-select,.vc-textarea{ font-family:inherit; font-size:var(--vc-fs-body); color:var(--vc-text); background:var(--vc-surface); border:1px solid var(--vc-border-strong); border-radius:var(--vc-radius-input); padding:var(--vc-space-2) var(--vc-space-3); min-height:36px; width:100%; transition:border-color var(--vc-duration) var(--vc-ease), box-shadow var(--vc-duration) var(--vc-ease); } .vc-textarea{min-height:80px; resize:vertical;} .vc-select{border-radius:var(--vc-radius-dropdown); appearance:none; padding-right:var(--vc-space-6); background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;} .vc-input:focus,.vc-select:focus,.vc-textarea:focus{ outline:none; border-color:var(--vc-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--vc-primary) 22%, transparent); } .vc-input[disabled],.vc-select[disabled],.vc-textarea[disabled]{ background:var(--vc-disabled-bg); color:var(--vc-disabled-text); border-color:var(--vc-disabled-border); cursor:not-allowed; } .vc-input::placeholder,.vc-textarea::placeholder{color:var(--vc-text-muted);} .vc-help{font-size:var(--vc-fs-caption); color:var(--vc-text-muted);} .vc-field--error .vc-input,.vc-field--error .vc-select,.vc-field--error .vc-textarea{border-color:var(--vc-error); box-shadow:0 0 0 3px color-mix(in srgb, var(--vc-error) 18%, transparent);} .vc-field--error .vc-msg{color:var(--vc-error);} .vc-field--success .vc-input,.vc-field--success .vc-select{border-color:var(--vc-success);} .vc-field--success .vc-msg{color:var(--vc-success);} .vc-msg{font-size:var(--vc-fs-caption); display:flex; align-items:center; gap:var(--vc-space-1);} /* checkbox / radio / switch */ .vc-check{display:inline-flex; align-items:center; gap:var(--vc-space-2); font-size:var(--vc-fs-body); color:var(--vc-text-secondary); cursor:pointer; min-height:var(--vc-touch-target);} .vc-switch{width:38px; height:21px; border-radius:var(--vc-radius-badge); background:var(--vc-border-strong); position:relative; flex:none; transition:background var(--vc-duration) var(--vc-ease);} .vc-switch::after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left var(--vc-duration) var(--vc-ease);} .vc-switch--on{background:var(--vc-success);} .vc-switch--on::after{left:19px;} /* search + filters */ .vc-search{position:relative; display:block;} .vc-search .vc-input{padding-left:var(--vc-space-7);} .vc-search__icon{position:absolute; left:var(--vc-space-3); top:50%; transform:translateY(-50%); color:var(--vc-text-muted); pointer-events:none;} .vc-filters{display:flex; flex-wrap:wrap; gap:var(--vc-space-2); align-items:flex-end;} .vc-filters .vc-field{margin-bottom:0; min-width:160px; flex:1 1 160px;} /* ============================================================================================= 06 CARDS ============================================================================================= */ .vc-card{background:var(--vc-surface); border:1px solid var(--vc-border); border-radius:var(--vc-radius-card); box-shadow:var(--vc-shadow-sm);} .vc-card--raised{box-shadow:var(--vc-shadow-md);} .vc-card--interactive{transition:box-shadow var(--vc-duration) var(--vc-ease), transform var(--vc-duration) var(--vc-ease);} .vc-card--interactive:hover{box-shadow:var(--vc-shadow-hover);} .vc-card__header{display:flex; align-items:center; justify-content:space-between; gap:var(--vc-space-3); padding:var(--vc-space-3) var(--vc-space-4); border-bottom:1px solid var(--vc-border);} .vc-card__body{padding:var(--vc-space-4);} .vc-card__footer{padding:var(--vc-space-3) var(--vc-space-4); border-top:1px solid var(--vc-border); background:var(--vc-surface-sunken); border-radius:0 0 var(--vc-radius-card) var(--vc-radius-card);} /* stat / KPI tile */ .vc-stat{background:var(--vc-surface); border:1px solid var(--vc-border); border-radius:var(--vc-radius-card); box-shadow:var(--vc-shadow-sm); padding:var(--vc-space-4); position:relative; overflow:hidden;} .vc-stat__label{font-size:var(--vc-fs-caption); font-weight:650; text-transform:uppercase; letter-spacing:.06em; color:var(--vc-text-muted); display:flex; align-items:center; gap:var(--vc-space-1);} .vc-stat__value{font-family:var(--vc-font-display); font-size:29px; font-weight:700; letter-spacing:-.03em; line-height:1; margin-top:var(--vc-space-2); font-variant-numeric:tabular-nums; color:var(--vc-text);} .vc-stat__foot{margin-top:var(--vc-space-2); font-size:var(--vc-fs-caption); color:var(--vc-text-muted);} .vc-stat__rule{height:2px; border-radius:2px; margin-top:var(--vc-space-3); background:var(--vc-border);} /* ============================================================================================= 07 BADGES / TAGS ============================================================================================= */ .vc-badge{display:inline-flex; align-items:center; gap:var(--vc-space-1); padding:3px 9px; border-radius:var(--vc-radius-badge); font-size:11.5px; font-weight:650; white-space:nowrap; border:1px solid transparent; background:var(--vc-neutral-soft); color:var(--vc-neutral); border-color:var(--vc-neutral-border);} .vc-badge--success{background:var(--vc-success-soft); color:var(--vc-success); border-color:var(--vc-success-border);} .vc-badge--warning{background:var(--vc-warning-soft); color:var(--vc-warning); border-color:var(--vc-warning-border);} .vc-badge--error{background:var(--vc-error-soft); color:var(--vc-error); border-color:var(--vc-error-border);} .vc-badge--info{background:var(--vc-info-soft); color:var(--vc-info); border-color:var(--vc-info-border);} /* ============================================================================================= 08 ALERTS ============================================================================================= */ .vc-alert{display:flex; gap:var(--vc-space-3); align-items:flex-start; padding:var(--vc-space-3) var(--vc-space-4); border-radius:var(--vc-radius-card); border:1px solid var(--vc-border); border-left-width:3px; font-size:var(--vc-fs-body); background:var(--vc-surface); color:var(--vc-text-secondary);} .vc-alert--success{background:var(--vc-success-soft); border-color:var(--vc-success-border); border-left-color:var(--vc-success); color:var(--vc-success);} .vc-alert--warning{background:var(--vc-warning-soft); border-color:var(--vc-warning-border); border-left-color:var(--vc-warning); color:var(--vc-warning);} .vc-alert--error{background:var(--vc-error-soft); border-color:var(--vc-error-border); border-left-color:var(--vc-error); color:var(--vc-error);} .vc-alert--info{background:var(--vc-info-soft); border-color:var(--vc-info-border); border-left-color:var(--vc-info); color:var(--vc-info);} .vc-toast{box-shadow:var(--vc-shadow-dialog); background:var(--vc-surface-raised);} /* ============================================================================================= 09 TABLES (sticky header, priority columns, mobile card view) ============================================================================================= */ .vc-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--vc-border); border-radius:var(--vc-radius-table); background:var(--vc-surface);} .vc-table{width:100%; border-collapse:collapse; font-size:var(--vc-fs-table);} .vc-table th{ text-align:left; font-size:var(--vc-fs-table-head); font-weight:700; text-transform:uppercase; letter-spacing:var(--vc-ls-table-head); color:var(--vc-text-muted); background:var(--vc-surface-sunken); padding:var(--vc-space-3); white-space:nowrap; border-bottom:1px solid var(--vc-border); } .vc-table td{padding:var(--vc-space-3); border-bottom:1px solid var(--vc-border); color:var(--vc-text-secondary); vertical-align:middle;} .vc-table tbody tr:last-child td{border-bottom:0;} .vc-table tbody tr:hover{background:var(--vc-hover-bg);} .vc-table--striped tbody tr:nth-child(odd){background:var(--vc-surface-sunken);} .vc-table__num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;} /* sticky header: only where DataTables is not managing it */ .vc-table-wrap .vc-table:not(.dataTable) thead th{position:sticky; top:0; z-index:var(--vc-z-sticky);} /* sortable affordance */ .vc-table th[aria-sort]{cursor:pointer;} .vc-table th[aria-sort]::after{content:"↕"; opacity:.4; margin-left:var(--vc-space-1);} .vc-table th[aria-sort="ascending"]::after{content:"↑"; opacity:1; color:var(--vc-primary);} .vc-table th[aria-sort="descending"]::after{content:"↓"; opacity:1; color:var(--vc-primary);} /* severity stripe: state in form as well as colour */ .vc-row--critical td:first-child{box-shadow:inset 3px 0 0 var(--vc-error);} .vc-row--warning td:first-child{box-shadow:inset 3px 0 0 var(--vc-warning);} .vc-row--success td:first-child{box-shadow:inset 3px 0 0 var(--vc-success);} /* toolbar above a table */ .vc-table-toolbar{display:flex; flex-wrap:wrap; gap:var(--vc-space-2); align-items:center; justify-content:space-between; padding:var(--vc-space-3); border-bottom:1px solid var(--vc-border);} .vc-table-foot{display:flex; flex-wrap:wrap; gap:var(--vc-space-3); align-items:center; justify-content:space-between; padding:var(--vc-space-3); border-top:1px solid var(--vc-border); font-size:var(--vc-fs-caption); color:var(--vc-text-muted);} /* ============================================================================================= 10 PAGINATION / BREADCRUMB / TABS / ACCORDION ============================================================================================= */ .vc-pagination{display:flex; gap:var(--vc-space-1); align-items:center;} .vc-pagination button,.vc-pagination a{ min-width:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--vc-border); background:var(--vc-surface); color:var(--vc-primary); border-radius:var(--vc-radius-button); font-size:var(--vc-fs-small); cursor:pointer; text-decoration:none; } .vc-pagination [aria-current="page"]{background:var(--vc-primary); border-color:var(--vc-primary); color:var(--vc-primary-contrast); font-weight:650;} .vc-breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:var(--vc-space-2); font-size:var(--vc-fs-caption); color:var(--vc-text-muted); padding:0; margin:0; list-style:none;} .vc-breadcrumb li{display:flex; align-items:center; gap:var(--vc-space-2);} .vc-breadcrumb li + li::before{content:"/"; color:var(--vc-border-strong);} .vc-breadcrumb [aria-current="page"]{color:var(--vc-text-secondary);} .vc-tabs{display:flex; gap:var(--vc-space-1); border-bottom:1px solid var(--vc-border); overflow-x:auto;} .vc-tabs button{background:transparent; border:0; border-bottom:2px solid transparent; padding:var(--vc-space-3) var(--vc-space-4); font-size:var(--vc-fs-body); font-weight:600; color:var(--vc-text-muted); cursor:pointer; white-space:nowrap; min-height:var(--vc-touch-target);} .vc-tabs button:hover{color:var(--vc-text);} .vc-tabs button[aria-selected="true"]{color:var(--vc-primary); border-bottom-color:var(--vc-primary);} .vc-accordion__trigger{display:flex; align-items:center; justify-content:space-between; gap:var(--vc-space-3); width:100%; background:transparent; border:0; padding:var(--vc-space-3) 0; font-size:var(--vc-fs-subheading); font-weight:600; color:var(--vc-text); cursor:pointer; min-height:var(--vc-touch-target); text-align:left;} .vc-accordion__panel{padding-bottom:var(--vc-space-3); color:var(--vc-text-secondary); font-size:var(--vc-fs-body);} .vc-accordion__item + .vc-accordion__item{border-top:1px solid var(--vc-border);} /* ============================================================================================= 11 DIALOG / TOOLTIP / AVATAR / PROGRESS / SKELETON / EMPTY ============================================================================================= */ .vc-dialog{background:var(--vc-surface-raised); border-radius:var(--vc-radius-dialog); box-shadow:var(--vc-shadow-dialog); border:1px solid var(--vc-border); max-width:520px; width:100%;} .vc-dialog__header{padding:var(--vc-space-4); border-bottom:1px solid var(--vc-border);} .vc-dialog__body{padding:var(--vc-space-4); color:var(--vc-text-secondary);} .vc-dialog__footer{display:flex; justify-content:flex-end; gap:var(--vc-space-2); padding:var(--vc-space-3) var(--vc-space-4); background:var(--vc-surface-sunken); border-top:1px solid var(--vc-border); border-radius:0 0 var(--vc-radius-dialog) var(--vc-radius-dialog);} .vc-overlay{position:fixed; inset:0; background:var(--vc-overlay); z-index:var(--vc-z-overlay); display:grid; place-items:center; padding:var(--vc-space-4);} .vc-tooltip{position:relative;} .vc-tooltip__bubble{position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--vc-text); color:var(--vc-text-inverse); font-size:var(--vc-fs-caption); padding:var(--vc-space-1) var(--vc-space-2); border-radius:var(--vc-radius-button); white-space:nowrap; z-index:var(--vc-z-tooltip); box-shadow:var(--vc-shadow-md);} .vc-avatar{width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; background:var(--vc-primary); color:var(--vc-primary-contrast); font-weight:700; font-size:var(--vc-fs-caption); flex:none; overflow:hidden;} .vc-avatar--sm{width:24px; height:24px; font-size:10px;} .vc-avatar--lg{width:44px; height:44px; font-size:var(--vc-fs-body);} .vc-progress{height:6px; background:var(--vc-surface-sunken); border-radius:var(--vc-radius-badge); overflow:hidden;} .vc-progress__bar{height:100%; background:var(--vc-primary); border-radius:var(--vc-radius-badge); transition:width var(--vc-duration-slow) var(--vc-ease);} .vc-spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--vc-primary); border-top-color:transparent; animation:vc-spin .7s linear infinite; display:inline-block;} .vc-skeleton{background:linear-gradient(90deg,var(--vc-surface-sunken) 25%,var(--vc-bg-subtle) 50%,var(--vc-surface-sunken) 75%); background-size:200% 100%; animation:vc-shimmer 1.4s infinite; border-radius:var(--vc-radius-button); height:12px;} @keyframes vc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .vc-empty{text-align:center; padding:var(--vc-space-7) var(--vc-space-4);} .vc-empty__art{width:52px; height:52px; margin:0 auto var(--vc-space-3); border-radius:var(--vc-radius-card); background:var(--vc-primary-soft); color:var(--vc-primary); display:grid; place-items:center;} .vc-empty__title{font-size:var(--vc-fs-subheading); font-weight:650; color:var(--vc-text); display:block; margin-bottom:var(--vc-space-1);} .vc-empty__text{font-size:var(--vc-fs-small); color:var(--vc-text-muted); max-width:52ch; margin:0 auto var(--vc-space-3);} /* ============================================================================================= 12 NAVIGATION (desktop sidebar -> tablet collapsed -> mobile drawer) ============================================================================================= */ .vc-nav{display:flex; flex-direction:column; gap:2px; background:var(--vc-secondary); padding:var(--vc-space-2);} .vc-nav__group{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:700; padding:var(--vc-space-3) var(--vc-space-3) var(--vc-space-1);} .vc-nav__item{display:flex; align-items:center; gap:var(--vc-space-3); padding:var(--vc-space-2) var(--vc-space-3); border-radius:var(--vc-radius-button); color:rgba(255,255,255,.78); font-size:var(--vc-fs-small); font-weight:500; text-decoration:none; min-height:var(--vc-touch-target);} .vc-nav__item:hover{background:rgba(255,255,255,.09); color:#fff; text-decoration:none;} .vc-nav__item[aria-current="page"]{background:var(--vc-primary); color:var(--vc-primary-contrast); font-weight:650;} .vc-nav__badge{margin-left:auto; font-size:11px; font-family:var(--vc-font-mono); background:rgba(255,255,255,.14); padding:1px 6px; border-radius:var(--vc-radius-badge);} /* drawer behaviour on small screens */ .vc-drawer{position:fixed; inset:0 auto 0 0; width:min(84vw,300px); transform:translateX(-100%); transition:transform var(--vc-duration-slow) var(--vc-ease); z-index:var(--vc-z-drawer); overflow-y:auto;} .vc-drawer--open{transform:translateX(0);} .vc-drawer-scrim{position:fixed; inset:0; background:var(--vc-overlay); z-index:calc(var(--vc-z-drawer) - 1);} /* ============================================================================================= 12b APPLICATION PATTERNS (register + master data-entry) --------------------------------------------------------------------------------------------- The two screen shapes this application repeats hundreds of times. They live in the FOUNDATION, not in a theme, for two reasons: 1. Pages using these classes must render correctly under EVERY theme - including Classic, which loads no theme stylesheet at all. Defining them in a theme left Classic unstyled. 2. They were previously duplicated in two theme files. One definition, driven by tokens, means each theme restyles them for free. ============================================================================================= */ /* ---- panel wrapper (replaces hard-coded 1px borders around report/grid areas) ---- */ .vc-panel{ background:var(--vc-surface); border:1px solid var(--vc-border); border-radius:var(--vc-radius-card); box-shadow:var(--vc-shadow-sm); overflow:hidden; } .vc-report{ background:var(--vc-surface); border:1px solid var(--vc-border); border-radius:var(--vc-radius-card); box-shadow:var(--vc-shadow-sm); overflow:hidden; } /* ---- report identity strip: Period / Company / Branch ---- */ .vc-report-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--vc-space-3); margin:0; padding:var(--vc-space-3) var(--vc-space-4); background:var(--vc-surface-sunken); border-bottom:1px solid var(--vc-border); } .vc-report-meta dt{ font-size:var(--vc-fs-table-head); text-transform:uppercase; letter-spacing:var(--vc-ls-table-head); color:var(--vc-text-muted); font-weight:700; margin:0; } .vc-report-meta dd{margin:var(--vc-space-1) 0 0; font-size:var(--vc-fs-body); color:var(--vc-text); font-weight:600;} /* ---- form row: one field + its actions on a shared baseline ---- Replaces the inline style="margin-top:20px" magic number, which broke whenever a label wrapped or the viewport narrowed. */ .vc-formrow{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--vc-space-3);} .vc-formrow .vc-field{flex:1 1 280px; min-width:0; margin-bottom:0;} .vc-formrow .vc-field label{margin:0;} .vc-formrow .vc-actions{display:flex; gap:var(--vc-space-2); flex:0 0 auto; padding-bottom:1px;} .vc-formrow .vc-actions .btn,.vc-formrow .vc-actions .vc-btn{margin:0 !important;} .vc-actions{display:flex; gap:var(--vc-space-2); flex-wrap:wrap;} /* ---- status / validation banner ---- The box is painted on the message element's own and ONLY when that span has content. An asp:Label with no Text renders an EMPTY span, so nothing at all is drawn until the code-behind sets a message. Deliberately avoids :has(), which is not safe to rely on here. */ .vc-formrow + .vc-msg{margin-top:var(--vc-space-3);} .vc-msg > span:not(:empty){ display:inline-flex; align-items:flex-start; gap:var(--vc-space-2); padding:var(--vc-space-3) var(--vc-space-4); border:1px solid var(--vc-warning-border); border-left:3px solid var(--vc-warning); background:var(--vc-warning-soft); color:var(--vc-warning); border-radius:var(--vc-radius-card); font-size:var(--vc-fs-small); font-weight:600; } .vc-msg > span:not(:empty)::before{ content:""; flex:none; width:16px; height:16px; margin-top:1px; background-color:currentColor; -webkit-mask:var(--vc-msg-ico) center/contain no-repeat; mask:var(--vc-msg-ico) center/contain no-repeat; } :root{ --vc-msg-ico:url("data:image/svg+xml;utf8,"); } /* ---- registers and master grids ---- */ .vc-register,.vc-grid{margin:0 !important; background:transparent;} .vc-register > thead > tr > th, .vc-grid > thead > tr > th{ background:var(--vc-surface-sunken) !important; color:var(--vc-text-muted) !important; font-size:var(--vc-fs-table-head); font-weight:700; text-transform:uppercase; letter-spacing:var(--vc-ls-table-head); border:0 !important; border-bottom:1px solid var(--vc-border) !important; padding:var(--vc-space-3); white-space:nowrap; } .vc-register > tbody > tr > td,.vc-register > tr > td, .vc-grid > tbody > tr > td{ border:0 !important; border-top:1px solid var(--vc-border) !important; padding:var(--vc-space-3); color:var(--vc-text-secondary); vertical-align:middle; font-size:var(--vc-fs-table); } .vc-register > tbody > tr:hover > td, .vc-grid > tbody > tr:hover > td{background:var(--vc-hover-bg);} /* sticky only where DataTables is not managing the header (84 pages use fixedHeader:true) */ .vc-register:not(.dataTable) > thead > tr > th, .vc-grid:not(.dataTable) > thead > tr > th{position:sticky; top:0; z-index:var(--vc-z-sticky);} .vc-register .vc-num,.vc-grid .vc-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;} /* DataTables clones the header row into a filter row; stop those inputs reading as headings */ .vc-grid > thead > tr:nth-child(2) > th, .vc-register > thead > tr:nth-child(2) > th, table.dataTable > thead > tr:nth-child(2) > th{ text-transform:none !important; letter-spacing:0 !important; font-weight:400 !important; padding:var(--vc-space-2) var(--vc-space-3) !important; background:var(--vc-surface) !important; } .vc-grid > thead > tr:nth-child(2) > th input, .vc-register > thead > tr:nth-child(2) > th input, table.dataTable > thead > tr:nth-child(2) > th input{ width:100%; font-family:inherit; font-size:var(--vc-fs-small); color:var(--vc-text); background:var(--vc-surface-sunken); border:1px solid var(--vc-border); border-radius:var(--vc-radius-input); padding:var(--vc-space-1) var(--vc-space-2); } .vc-grid > thead > tr:nth-child(2) > th input:focus, .vc-register > thead > tr:nth-child(2) > th input:focus, table.dataTable > thead > tr:nth-child(2) > th input:focus{ outline:none; border-color:var(--vc-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--vc-primary) 22%, transparent); } /* ---- row state: soft tint + severity stripe, replacing AdminLTE's solid colour fills. State is carried by POSITION and TEXT as well as hue (the old fills failed WCAG 1.4.1). */ .vc-register tr.bg-red > td,.vc-register tr.bg-yellow > td,.vc-register tr.bg-green > td{ color:var(--vc-text) !important; font-weight:500; } .vc-register tr.bg-red > td{background:var(--vc-error-soft) !important;} .vc-register tr.bg-yellow> td{background:var(--vc-warning-soft) !important;} .vc-register tr.bg-green > td{background:var(--vc-success-soft) !important;} .vc-register tr.bg-red > td:first-child{box-shadow:inset 3px 0 0 var(--vc-error);} .vc-register tr.bg-yellow> td:first-child{box-shadow:inset 3px 0 0 var(--vc-warning);} .vc-register tr.bg-green > td:first-child{box-shadow:inset 3px 0 0 var(--vc-success);} /* ---- status cell -> pill, coloured from the row class the query already emits ---- */ .vc-status span{ display:inline-block; padding:3px 10px; border-radius:var(--vc-radius-badge); font-size:11.5px; font-weight:650; white-space:nowrap; background:var(--vc-neutral-soft); color:var(--vc-neutral); border:1px solid var(--vc-neutral-border); } tr.bg-red .vc-status span{background:var(--vc-error-soft); color:var(--vc-error); border-color:var(--vc-error-border);} tr.bg-yellow .vc-status span{background:var(--vc-warning-soft); color:var(--vc-warning); border-color:var(--vc-warning-border);} tr.bg-green .vc-status span{background:var(--vc-success-soft); color:var(--vc-success); border-color:var(--vc-success-border);} /* ---- row action buttons: icon + word, so the control has a real accessible name ---- */ .vc-rowacts{display:inline-flex; gap:var(--vc-space-2); flex-wrap:wrap;} .vc-act{ display:inline-flex; align-items:center; gap:var(--vc-space-1); padding:var(--vc-space-1) var(--vc-space-3) !important; font-size:var(--vc-fs-caption) !important; font-weight:650; border-radius:var(--vc-radius-button) !important; background:var(--vc-surface) !important; color:var(--vc-text-secondary) !important; border:1px solid var(--vc-border-strong) !important; box-shadow:none !important; text-decoration:none; } .vc-act:hover{background:var(--vc-surface-sunken) !important; color:var(--vc-text) !important;} .vc-act-danger{ background:var(--vc-error-soft) !important; color:var(--vc-error) !important; border-color:var(--vc-error-border) !important; } .vc-act-danger:hover{background:var(--vc-error) !important; color:var(--vc-error-contrast) !important;} /* ---- empty state (hyphen form used by the pages; mirrors .vc-empty__* above) ---- */ .vc-empty-art{ width:52px; height:52px; margin:0 auto var(--vc-space-3); border-radius:var(--vc-radius-card); background:var(--vc-primary-soft); color:var(--vc-primary); display:grid; place-items:center; } .vc-empty strong{display:block; font-size:var(--vc-fs-subheading); font-weight:650; color:var(--vc-text); margin-bottom:var(--vc-space-1);} .vc-empty p{font-size:var(--vc-fs-small); color:var(--vc-text-muted); max-width:52ch; margin:0 auto;} @media (max-width:767px){ .vc-report-meta{grid-template-columns:1fr; gap:var(--vc-space-2);} .vc-formrow .vc-actions{width:100%;} .vc-formrow .vc-actions .btn,.vc-formrow .vc-actions .vc-btn{flex:1 1 auto; justify-content:center;} } /* ---- the margin-top:20px button-alignment hack (54 pages) ---- Those pages lift a button level with an input using an inline margin-top:20px magic number, standing in for the height of the field's