/* ============================================================================ SaaSublimation — UNIFIED SKIN LAYER (calibrated to supplier_creation) ---------------------------------------------------------------------------- ONE file that makes every page look identical: same spacing, padding, margins, button size, card size, radius, and typography — the compact, data-dense feel of the supplier_creation page, applied project-wide. LOAD ORDER (in navbar.html ): bootstrap.min.css custom.css <- design tokens (--vyo-primary, --vyo-radius…) [source of truth] skin.css <- THIS FILE, loaded LAST so it wins It reads brand + radius tokens from custom.css, so changing --vyo-primary still repaints everything here too. It does NOT invent its own dimensions — every measurement below is calibrated to supplier_creation: radius 8/5/12 · create-btn 5px 10px @12px · input 6px 12px h26 · filter-card 12px 15px · page-header mb16 gap12 · title 16px · grid gap12. ============================================================================ */ :root { /* ── TYPOGRAPHY — one type system, one web font (loaded once in base) ── */ --skin-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Type scale calibrated to supplier_creation (dense ERP) */ --skin-fs-2xs: 10px; /* micro labels */ --skin-fs-xs: 11px; /* table meta, pills */ --skin-fs-sm: 12px; /* inputs, buttons, table body */ --skin-fs-base: 13px; /* body default */ --skin-fs-md: 14px; /* emphasized body */ --skin-fs-lg: 16px; /* page / card titles */ --skin-fs-xl: 20px; /* section headline */ --skin-fs-2xl: 26px; /* dashboard stat numbers */ --skin-fw-normal: 400; --skin-fw-medium: 500; --skin-fw-semibold: 600; --skin-fw-bold: 700; /* ── SPACING — the single rhythm every page inherits ── */ --skin-space-1: 4px; --skin-space-2: 7px; --skin-space-3: 10px; --skin-space-4: 12px; /* grid gap / standard gap (matches vyo-filter-grid) */ --skin-space-5: 15px; /* card inner padding-x (matches filter-card) */ --skin-space-6: 16px; /* section bottom margin (matches page-header) */ --skin-space-7: 24px; /* ── RADIUS — inherited from custom.css tokens (8 / 5 / 12) ── */ --skin-radius-sm: var(--vyo-radius-sm, 5px); --skin-radius: var(--vyo-radius, 8px); --skin-radius-lg: var(--vyo-radius-lg, 12px); /* ── COMPONENT SIZES — fixed so every button/input/card is even ── */ --skin-btn-pad-y: 5px; --skin-btn-pad-x: 10px; --skin-btn-pad-y-lg: 7px; --skin-btn-pad-x-lg: 14px; --skin-input-pad-y: 6px; --skin-input-pad-x: 12px; --skin-input-height: 32px; /* comfortable click target, dense look */ --skin-card-pad: 15px; /* card body padding */ --skin-card-max: 800px; /* form card max-width (supplier form) */ /* ── SURFACES & STRUCTURE — derived from brand, no stray hexes ── */ --skin-border: #e2e8f0; --skin-border-strong: #cbd6d5; --skin-surface: #ffffff; --skin-surface-muted: #f7f9fb; --skin-text: #1a2e2c; --skin-text-muted: #5b6b6a; --skin-shadow-sm: 0 1px 2px rgba(16, 44, 41, 0.06); --skin-shadow: 0 2px 10px rgba(16, 44, 41, 0.08); --skin-shadow-lg: 0 8px 26px rgba(16, 44, 41, 0.12); /* ── SEMANTIC STATUS — ONE vocabulary, brand-aligned ── */ --skin-success: #0f8a5f; --skin-success-bg: #e7f7ef; --skin-danger: #c0392b; --skin-danger-bg: #fdeaea; --skin-warning: #b7791f; --skin-warning-bg: #fdf3e3; --skin-info: var(--vyo-primary, #0f736b); --skin-info-bg: #e3efee; --skin-transition: 0.15s ease; } /* --------------------------------------------------------------------------- TYPOGRAPHY applied globally --------------------------------------------------------------------------- */ body { font-family: var(--skin-font); font-size: var(--skin-fs-base); color: var(--skin-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .skin-scope, .skin-scope * { font-family: var(--skin-font); } h1,h2,h3,h4,h5,h6,.skin-title { font-family: var(--skin-font); font-weight: var(--skin-fw-bold); color: var(--skin-text); letter-spacing: -0.01em; } /* --------------------------------------------------------------------------- BRAND NEUTRALIZERS — retire clashing colors WITHOUT editing every page. Bootstrap blue/green get remapped to the brand teal so even un-migrated pages using vanilla .btn-primary / .text-primary / links match instantly. --------------------------------------------------------------------------- */ a { color: var(--vyo-primary, #0f736b); text-decoration: none; } a:hover { color: var(--vyo-primary-dark, #0b5a54); } .btn-primary { --bs-btn-bg: var(--vyo-primary,#0f736b); --bs-btn-border-color: var(--vyo-primary,#0f736b); --bs-btn-hover-bg: var(--vyo-primary-dark,#0b5a54); --bs-btn-hover-border-color: var(--vyo-primary-dark,#0b5a54); --bs-btn-active-bg: var(--vyo-primary-dark,#0b5a54); --bs-btn-active-border-color: var(--vyo-primary-dark,#0b5a54); --bs-btn-focus-shadow-rgb: 15,115,107; } .btn-outline-primary { --bs-btn-color: var(--vyo-primary,#0f736b); --bs-btn-border-color: var(--vyo-primary,#0f736b); --bs-btn-hover-bg: var(--vyo-primary,#0f736b); --bs-btn-hover-border-color: var(--vyo-primary,#0f736b); --bs-btn-active-bg: var(--vyo-primary,#0f736b); } .text-primary { color: var(--vyo-primary,#0f736b)!important; } .bg-primary { background-color: var(--vyo-primary,#0f736b)!important; } .border-primary { border-color: var(--vyo-primary,#0f736b)!important; } .link-primary { color: var(--vyo-primary,#0f736b)!important; } .btn-success { --bs-btn-bg: var(--skin-success); --bs-btn-border-color: var(--skin-success); --bs-btn-hover-bg: #0c7350; --bs-btn-hover-border-color: #0c7350; } .text-success { color: var(--skin-success)!important; } .badge.bg-success { background-color: var(--skin-success)!important; } /* Consistent focus ring everywhere (kills default browser blue glow) */ .form-control:focus, .form-select:focus, .btn:focus, .btn:focus-visible { border-color: var(--vyo-primary,#0f736b); box-shadow: 0 0 0 0.18rem rgba(15,115,107,0.20); outline: none; } /* --------------------------------------------------------------------------- SHARED COMPONENTS — reusable blocks; every page uses these, so spacing, padding, button size and card size are identical project-wide. --------------------------------------------------------------------------- */ /* Page frame */ .skin-page { padding: var(--skin-space-6) var(--skin-space-5) var(--skin-space-7); max-width: 1440px; margin: 0 auto; } .skin-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--skin-space-4); flex-wrap: wrap; margin-bottom: var(--skin-space-6); } .skin-page-title { font-size: var(--skin-fs-lg); font-weight: var(--skin-fw-bold); margin: 0; padding-left: var(--skin-space-3); display: flex; align-items: center; gap: var(--skin-space-3); } .skin-page-title .skin-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--skin-radius); background: var(--skin-info-bg); color: var(--vyo-primary,#0f736b); font-size: 13px; } .skin-page-subtitle { color: var(--skin-text-muted); font-size: var(--skin-fs-sm); margin: 2px 0 0 var(--skin-space-3); } /* Card */ .skin-card { background: var(--skin-surface); border: 1px solid var(--skin-border); border-radius: var(--skin-radius-lg); box-shadow: var(--skin-shadow-sm); overflow: hidden; } .skin-card + .skin-card { margin-top: var(--skin-space-5); } .skin-card-head { padding: var(--skin-space-4) var(--skin-space-5); border-bottom: 1px solid var(--skin-border); display: flex; align-items: center; justify-content: space-between; gap: var(--skin-space-3); background: var(--skin-surface); } .skin-card-title { font-size: var(--skin-fs-lg); font-weight: var(--skin-fw-semibold); margin: 0; } .skin-card-body { padding: var(--skin-card-pad); } .skin-card-body--flush { padding: 0; } .skin-card-foot { padding: var(--skin-space-4) var(--skin-space-5); border-top: 1px solid var(--skin-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--skin-space-3); } /* Buttons — ONE size system */ .skin-btn { display: inline-flex; align-items: center; gap: var(--skin-space-2); font-family: var(--skin-font); font-size: var(--skin-fs-sm); font-weight: var(--skin-fw-semibold); line-height: 1; padding: var(--skin-btn-pad-y) var(--skin-btn-pad-x); border-radius: var(--skin-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--skin-transition), box-shadow var(--skin-transition), transform 0.05s ease; white-space: nowrap; text-decoration: none; } .skin-btn:active { transform: translateY(1px); } .skin-btn i { font-size: 0.9em; } .skin-btn--lg { padding: var(--skin-btn-pad-y-lg) var(--skin-btn-pad-x-lg); font-size: var(--skin-fs-md); } .skin-btn--sm { padding: 3px 7px; font-size: var(--skin-fs-xs); } .skin-btn--primary { background: var(--vyo-primary,#0f736b); color:#fff; box-shadow: var(--skin-shadow-sm); } .skin-btn--primary:hover { background: var(--vyo-primary-dark,#0b5a54); color:#fff; } .skin-btn--create { background: var(--vyo-create-bg,#0f736b); color:#fff; } .skin-btn--create:hover { filter: brightness(0.94); color:#fff; } .skin-btn--edit { background: var(--vyo-edit-bg,#dbefee); color: var(--vyo-edit-color,#0f736b); border-color: var(--vyo-edit-border,#3a968e); } .skin-btn--danger { background: var(--skin-danger-bg); color: var(--skin-danger); border-color:#eab4ae; } .skin-btn--danger:hover { background: var(--skin-danger); color:#fff; } .skin-btn--ghost { background: transparent; color: var(--skin-text-muted); border-color: var(--skin-border-strong); } .skin-btn--ghost:hover { background: var(--skin-surface-muted); color: var(--skin-text); } /* Inputs — ONE size */ .skin-field { margin-bottom: var(--skin-space-4); } .skin-label { display:block; font-size: var(--skin-fs-sm); font-weight: var(--skin-fw-semibold); color: var(--skin-text); margin-bottom: var(--skin-space-1); } .skin-input, .skin-select { width:100%; font-size: var(--skin-fs-sm); font-family: var(--skin-font); padding: var(--skin-input-pad-y) var(--skin-input-pad-x); min-height: var(--skin-input-height); border: 1px solid var(--skin-border-strong); border-radius: var(--skin-radius-sm); background: var(--skin-surface); color: var(--skin-text); transition: border-color var(--skin-transition), box-shadow var(--skin-transition); } .skin-input:focus, .skin-select:focus { border-color: var(--vyo-primary,#0f736b); box-shadow: 0 0 0 0.18rem rgba(15,115,107,0.16); outline:none; } /* Tables — one data-table look */ .skin-table-wrap { width:100%; overflow-x:auto; border-radius: var(--skin-radius); } table.skin-table { width:100%; border-collapse: collapse; font-size: var(--skin-fs-sm); } table.skin-table thead th { background: var(--skin-surface-muted); color: var(--skin-text-muted); font-weight: var(--skin-fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--skin-fs-2xs); text-align:left; padding: var(--skin-space-2) var(--skin-space-4); border-bottom: 1px solid var(--skin-border); white-space: nowrap; } table.skin-table tbody td { padding: var(--skin-space-2) var(--skin-space-4); border-bottom: 1px solid var(--skin-border); color: var(--skin-text); vertical-align: middle; } table.skin-table tbody tr:hover td { background: #f0faf8; cursor: pointer; } table.skin-table tbody tr.selected td { background: var(--skin-info-bg); } /* Status pills — one vocabulary */ .skin-pill { display:inline-flex; align-items:center; gap:0.35em; font-size: var(--skin-fs-xs); font-weight: var(--skin-fw-semibold); padding: 2px 8px; border-radius:999px; line-height:1.5; } .skin-pill::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; } .skin-pill--active { color: var(--skin-success); background: var(--skin-success-bg); } .skin-pill--inactive { color: var(--skin-danger); background: var(--skin-danger-bg); } .skin-pill--pending { color: var(--skin-warning); background: var(--skin-warning-bg); } .skin-pill--info { color: var(--vyo-primary,#0f736b); background: var(--skin-info-bg); } /* Toolbar (filter row) */ .skin-toolbar { display:flex; align-items:flex-end; gap: var(--skin-space-4); flex-wrap:wrap; padding: var(--skin-space-4) var(--skin-space-5); border-bottom: 1px solid var(--skin-border); } .skin-toolbar .skin-field { margin-bottom:0; min-width:160px; } .skin-toolbar .skin-toolbar-spacer { margin-left:auto; } /* Dashboard stat card */ .skin-stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--skin-space-4); } .skin-stat { background: var(--skin-surface); border:1px solid var(--skin-border); border-radius: var(--skin-radius-lg); padding: var(--skin-space-5); box-shadow: var(--skin-shadow-sm); position:relative; overflow:hidden; } .skin-stat::after { content:""; position:absolute; inset:0 auto 0 0; width:4px; background: var(--vyo-primary,#0f736b); } .skin-stat-label { font-size: var(--skin-fs-2xs); text-transform:uppercase; letter-spacing:0.05em; color: var(--skin-text-muted); font-weight: var(--skin-fw-semibold); } .skin-stat-value { font-size: var(--skin-fs-2xl); font-weight: var(--skin-fw-bold); color: var(--skin-text); margin-top: var(--skin-space-1); line-height:1.1; } .skin-stat-meta { font-size: var(--skin-fs-xs); color: var(--skin-text-muted); margin-top: var(--skin-space-1); } .skin-stat-icon { position:absolute; top: var(--skin-space-4); right: var(--skin-space-4); width:30px; height:30px; border-radius: var(--skin-radius); display:inline-flex; align-items:center; justify-content:center; background: var(--skin-info-bg); color: var(--vyo-primary,#0f736b); } /* Empty state */ .skin-empty { text-align:center; padding: var(--skin-space-7) var(--skin-space-5); color: var(--skin-text-muted); } .skin-empty i { font-size:1.8rem; color: var(--skin-border-strong); margin-bottom: var(--skin-space-3); } .skin-empty h4 { font-size: var(--skin-fs-lg); color: var(--skin-text); margin-bottom: var(--skin-space-2); } /* --------------------------------------------------------------------------- QUALITY FLOOR — accessibility, motion, responsive; applied once for all --------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--vyo-primary,#0f736b); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } /* SweetAlert2 success icon: no animation, pin shapes to final state */ .swal2-icon.swal2-success .swal2-success-line-tip, .swal2-icon.swal2-success .swal2-success-line-long, .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-icon.swal2-success .swal2-success-circular-line-right, .swal2-icon.swal2-success .swal2-success-fix { animation: none !important; } .swal2-icon.swal2-success .swal2-success-line-tip { top: 2.8125em !important; left: 0.8125em !important; width: 1.5625em !important; opacity: 1 !important; } .swal2-icon.swal2-success .swal2-success-line-long { top: 2.375em !important; right: 0.5em !important; width: 2.9375em !important; opacity: 1 !important; } } @media (max-width: 640px) { .skin-page { padding: var(--skin-space-4) var(--skin-space-3) var(--skin-space-6); } .skin-card-body { padding: var(--skin-space-4); } .skin-page-title { font-size: var(--skin-fs-md); } .skin-toolbar .skin-field { min-width: 100%; } }