/* ============================================================ YardShift – Design System Fonts: Inter (primary), DM Sans (maritime) Themes: ys-slate | ys-maritime | ys-steel | ys-obsidian Applied via: [data-ys-theme="ys-slate"] on ============================================================ */ /* ── Base font ──────────────────────────────────────────────── */ :root { --ys-font-primary: "Inter", "DM Sans", system-ui, -apple-system, sans-serif; --ys-font-maritime: "DM Sans", "Inter", system-ui, sans-serif; --ys-radius-sm: 6px; --ys-radius: 8px; --ys-radius-lg: 12px; --ys-transition: 0.18s cubic-bezier(.3,.7,.4,1); } html, body { font-family: var(--ys-font-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Theme: Slate (default) ─────────────────────────────────── */ [data-ys-theme="ys-slate"], :root { --ys-sidebar-bg: #1e293b; --ys-sidebar-hover: #334155; --ys-sidebar-text: #94a3b8; --ys-sidebar-active: #3b82f6; --ys-accent: #3b82f6; --ys-accent-rgb: 59, 130, 246; --ys-accent-light: #eff6ff; --ys-bg: #f8fafc; --ys-surface: #ffffff; --ys-border: #e2e8f0; --ys-text: #0f172a; --ys-text-muted: #64748b; --ys-danger: #ef4444; --ys-success: #10b981; --ys-warning: #f59e0b; --ys-font: var(--ys-font-primary); } /* ── Theme: Maritime ────────────────────────────────────────── */ [data-ys-theme="ys-maritime"] { --ys-sidebar-bg: #091524; --ys-sidebar-hover: #0f2035; --ys-sidebar-text: #7fa8c4; --ys-sidebar-active: #c9a227; --ys-accent: #c9a227; --ys-accent-rgb: 201, 162, 39; --ys-accent-light: #fefce8; --ys-bg: #0d1b2a; --ys-surface: #132338; --ys-border: #1e3a55; --ys-text: #e2eff8; --ys-text-muted: #7fa8c4; --ys-danger: #ef4444; --ys-success: #22c55e; --ys-warning: #f59e0b; --ys-font: var(--ys-font-maritime); } [data-ys-theme="ys-maritime"] body, [data-ys-theme="ys-maritime"] html { font-family: var(--ys-font-maritime); } /* ── Theme: Steel ───────────────────────────────────────────── */ [data-ys-theme="ys-steel"] { --ys-sidebar-bg: #1c2b3a; --ys-sidebar-hover: #243447; --ys-sidebar-text: #8eacc2; --ys-sidebar-active: #f59e0b; --ys-accent: #f59e0b; --ys-accent-rgb: 245, 158, 11; --ys-accent-light: #fffbeb; --ys-bg: #f0f4f8; --ys-surface: #ffffff; --ys-border: #d1dce8; --ys-text: #1a2332; --ys-text-muted: #5a7a94; --ys-danger: #ef4444; --ys-success: #10b981; --ys-warning: #f59e0b; --ys-font: var(--ys-font-primary); } /* ── Theme: Obsidian ────────────────────────────────────────── */ [data-ys-theme="ys-obsidian"] { --ys-sidebar-bg: #0a0a0f; --ys-sidebar-hover: #13131c; --ys-sidebar-text: #6b7280; --ys-sidebar-active: #a78bfa; --ys-accent: #a78bfa; --ys-accent-rgb: 167, 139, 250; --ys-accent-light: #f5f3ff; --ys-bg: #111118; --ys-surface: #18181f; --ys-border: #27272e; --ys-text: #f0f0f5; --ys-text-muted: #6b7280; --ys-danger: #f87171; --ys-success: #34d399; --ys-warning: #fbbf24; --ys-font: var(--ys-font-primary); } /* ── Bootstrap / Serenity token overrides ───────────────────── */ :root, [data-ys-theme] { --bs-primary: var(--ys-accent); --bs-primary-rgb: var(--ys-accent-rgb); --bs-body-bg: var(--ys-bg); --bs-body-color: var(--ys-text); --bs-border-color: var(--ys-border); --bs-secondary-bg: var(--ys-surface); } /* ── Body & main area ───────────────────────────────────────── */ body { background-color: var(--ys-bg); color: var(--ys-text); font-family: var(--ys-font); transition: background-color 0.3s, color 0.3s; } .s-main, .content, main { background-color: var(--ys-bg); transition: background-color 0.3s; } /* ── Cards / panels ─────────────────────────────────────────── */ .card, .panel, .slick-viewport, .s-Panel { background: var(--ys-surface); border-color: var(--ys-border); border-radius: var(--ys-radius-lg); } /* ── Sidebar brand block ────────────────────────────────────── */ .ys-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.06); } .ys-brand-avatar { width: 36px; height: 36px; border-radius: var(--ys-radius); background: var(--ys-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: -.5px; flex-shrink: 0; transition: background var(--ys-transition); } .ys-brand-name { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.3px; line-height: 1.25; } .ys-brand-sub { color: var(--ys-sidebar-text); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; margin-top: 1px; } /* ── Header date ────────────────────────────────────────────── */ .ys-header-date { font-size: 12px; color: var(--ys-text-muted); font-weight: 400; letter-spacing: .01em; } /* ── Sidebar shell ──────────────────────────────────────────── */ .s-sidebar { background-color: var(--ys-sidebar-bg) !important; border-right: 1px solid rgba(255,255,255,.06); transition: background-color 0.3s; } .s-sidebar-pane { background-color: var(--ys-sidebar-bg); } /* ── Sidebar nav links ──────────────────────────────────────── */ .s-sidebar-item > .s-sidebar-link { color: var(--ys-sidebar-text); border-radius: var(--ys-radius); margin: 1px 8px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; transition: background var(--ys-transition), color var(--ys-transition), padding-left var(--ys-transition); font-weight: 400; font-size: 13px; } .s-sidebar-item > .s-sidebar-link::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--ys-sidebar-active); transform: scaleY(0); opacity: 0; transition: transform var(--ys-transition), opacity var(--ys-transition); } .s-sidebar-item > .s-sidebar-link:hover { background-color: var(--ys-sidebar-hover); color: #ffffff; text-decoration: none; } .s-sidebar-item > .s-sidebar-link:hover .s-sidebar-icon { transform: scale(1.12); } /* Active state */ .s-sidebar-item.active > .s-sidebar-link, .s-sidebar-item.active > .s-sidebar-link:hover { background: linear-gradient(135deg, rgba(var(--ys-accent-rgb), .22) 0%, rgba(var(--ys-accent-rgb), .10) 100% ); color: var(--ys-sidebar-active) !important; font-weight: 600; } .s-sidebar-item.active > .s-sidebar-link::before { transform: scaleY(1); opacity: 1; } /* Icons */ .s-sidebar-icon { width: 18px; text-align: center; transition: transform var(--ys-transition), color var(--ys-transition); flex-shrink: 0; } /* Child menus */ .s-sidebar-menu .s-sidebar-menu { background: rgba(0,0,0,.15); border-radius: var(--ys-radius); margin: 2px 8px; padding: 4px 0; } .s-sidebar-menu .s-sidebar-menu .s-sidebar-link { padding-left: 36px; font-size: 12px; } /* Collapse toggle chevron */ .s-sidebar-menu-toggle { margin-left: auto; transition: transform 0.22s cubic-bezier(.3,.7,.4,1); font-size: 11px; } .s-sidebar-item.active > .s-sidebar-link > .s-sidebar-menu-toggle, .s-sidebar-link[aria-expanded="true"] > .s-sidebar-menu-toggle { transform: rotate(90deg); } /* ── Sidebar search ─────────────────────────────────────────── */ .s-sidebar-search { position: relative; } .s-sidebar-search-input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: var(--ys-radius); color: #fff; padding: 7px 12px 7px 32px; font-size: 12px; font-family: var(--ys-font); transition: background var(--ys-transition), border-color var(--ys-transition); } .s-sidebar-search-input::placeholder { color: var(--ys-sidebar-text); opacity: 0.7; } .s-sidebar-search-input:focus { background: rgba(255,255,255,.12); border-color: rgba(var(--ys-accent-rgb), .5); outline: none; } .s-sidebar-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ys-sidebar-text); font-size: 11px; pointer-events: none; } /* ── Top navbar (header) ────────────────────────────────────── */ .s-sidebar-header { background-color: var(--ys-surface) !important; border-bottom: 1px solid var(--ys-border) !important; transition: background-color 0.3s, border-color 0.3s; } .s-sidebar-header-title { color: var(--ys-text); font-weight: 700; font-size: 15px; letter-spacing: -.3px; font-family: var(--ys-font); } .s-sidebar-header-link { color: var(--ys-text-muted) !important; border-radius: var(--ys-radius-sm); padding: 5px 8px; transition: background var(--ys-transition), color var(--ys-transition); } .s-sidebar-header-link:hover { background: rgba(var(--ys-accent-rgb), .10); color: var(--ys-accent) !important; } /* Toggler button */ .s-sidebar-toggler { border: none; background: transparent; color: var(--ys-text-muted); border-radius: var(--ys-radius-sm); padding: 6px 10px; transition: background var(--ys-transition), color var(--ys-transition); } .s-sidebar-toggler:hover { background: rgba(var(--ys-accent-rgb), .10); color: var(--ys-accent); } /* ── Site logo ──────────────────────────────────────────────── */ .s-site-logo-img { content: url(../../Serenity.Assets/logo/white-128.png); } /* ── YardShift theme switcher ───────────────────────────────── */ .ys-theme-toggle-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; } .ys-theme-label { display: none; } @media (min-width: 768px) { .ys-theme-label { display: inline; } } .ys-theme-menu { min-width: 160px; padding: 8px; border: 1px solid var(--ys-border); background: var(--ys-surface); border-radius: var(--ys-radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06); animation: ys-menu-in .18s cubic-bezier(.3,.7,.4,1); } @keyframes ys-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } } .ys-theme-menu-header { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ys-text-muted); padding: 2px 8px 6px; list-style: none; } .ys-theme-item { display: flex !important; align-items: center; gap: 8px; padding: 7px 10px !important; border-radius: var(--ys-radius-sm) !important; font-size: 13px !important; color: var(--ys-text) !important; transition: background var(--ys-transition), color var(--ys-transition); } .ys-theme-item:hover { background: rgba(var(--ys-accent-rgb), .08) !important; color: var(--ys-accent) !important; } .ys-theme-item.active { background: rgba(var(--ys-accent-rgb), .12) !important; color: var(--ys-accent) !important; font-weight: 600 !important; } .ys-theme-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* ── Buttons ────────────────────────────────────────────────── */ .btn-primary { background-color: var(--ys-accent); border-color: var(--ys-accent); transition: opacity var(--ys-transition), transform var(--ys-transition), box-shadow var(--ys-transition); } .btn-primary:hover { opacity: .88; box-shadow: 0 4px 14px rgba(var(--ys-accent-rgb), .35); } .btn-primary:active { transform: scale(.97); } .btn-primary, .btn-primary:focus, .btn-primary:active { background-color: var(--ys-accent) !important; border-color: var(--ys-accent) !important; } /* ── Grids / tables ─────────────────────────────────────────── */ .table { color: var(--ys-text); border-color: var(--ys-border); } .table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ys-text-muted); background: var(--ys-bg); border-bottom: 2px solid var(--ys-border) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(var(--ys-accent-rgb), .025); } .table-hover > tbody > tr:hover > * { background-color: rgba(var(--ys-accent-rgb), .06); } /* Slickgrid overrides */ .slick-header-column { background: var(--ys-bg) !important; border-right-color: var(--ys-border) !important; color: var(--ys-text-muted) !important; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .slick-row.odd { background: rgba(var(--ys-accent-rgb), .025); } .slick-row:hover { background: rgba(var(--ys-accent-rgb), .06) !important; } .slick-row.selected { background: rgba(var(--ys-accent-rgb), .15) !important; } /* ── Form inputs ────────────────────────────────────────────── */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { background-color: var(--ys-surface); border-color: var(--ys-border); color: var(--ys-text); border-radius: var(--ys-radius); font-family: var(--ys-font); transition: border-color var(--ys-transition), box-shadow var(--ys-transition); } .form-control:focus, .form-select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus { border-color: var(--ys-accent); box-shadow: 0 0 0 3px rgba(var(--ys-accent-rgb), .18); outline: none; } /* ── Dropdowns ──────────────────────────────────────────────── */ .dropdown-menu { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05); animation: ys-menu-in .18s cubic-bezier(.3,.7,.4,1); } .dropdown-item { color: var(--ys-text); border-radius: var(--ys-radius-sm); transition: background var(--ys-transition), color var(--ys-transition); font-size: 13px; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--ys-accent-rgb), .08); color: var(--ys-accent); } /* ── Dialog / modals ────────────────────────────────────────── */ .modal-content, .ui-dialog { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius-lg); box-shadow: 0 24px 64px rgba(0,0,0,.2); color: var(--ys-text); } .modal-header, .ui-dialog-titlebar { border-bottom: 1px solid var(--ys-border); } .modal-footer { border-top: 1px solid var(--ys-border); } /* ── Badges / chips ─────────────────────────────────────────── */ .badge.bg-primary { background-color: var(--ys-accent) !important; } .badge.bg-success { background-color: var(--ys-success) !important; } .badge.bg-danger { background-color: var(--ys-danger) !important; } .badge.bg-warning { background-color: var(--ys-warning) !important; } /* ── Serenity translation / permission overrides ────────────── */ .s-TranslationGrid input.custom-text { width: 100%; height: 23px; padding: 0 3px; } .s-PermissionCheckEditor { min-height: 450px; } /* ── Page enter animation ───────────────────────────────────── */ .content, .s-main > .content { animation: ys-page-in .25s cubic-bezier(.3,.7,.4,1); } @keyframes ys-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Panel pages (Daily Entry / Roster) ─────────────────────── */ .ys-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; } .ys-panel-toprow { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .ys-panel-toprow-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ys-panel-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ys-text); } .ys-panel-sub { margin: 2px 0 0; font-size: 12px; color: var(--ys-text-muted); } /* KPI strip */ .ys-kpi-strip { display: flex; gap: 10px; flex-wrap: wrap; } .ys-kpi { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius); padding: 8px 14px; min-width: 90px; } .ys-kpi-accent { border-left: 3px solid var(--ys-accent); } .ys-kpi-green { border-left: 3px solid #22c55e; } .ys-kpi-red { border-left: 3px solid #ef4444; } .ys-kpi-amber { border-left: 3px solid #f59e0b; } .ys-kpi-purple { border-left: 3px solid #8b5cf6; } .ys-kpi-val { font-size: 18px; font-weight: 800; color: var(--ys-text); line-height: 1.2; } .ys-kpi-accent .ys-kpi-val { color: var(--ys-accent); } .ys-kpi-green .ys-kpi-val { color: #22c55e; } .ys-kpi-red .ys-kpi-val { color: #ef4444; } .ys-kpi-amber .ys-kpi-val { color: #f59e0b; } .ys-kpi-purple .ys-kpi-val { color: #8b5cf6; } .ys-kpi-lbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ys-text-muted); margin-top: 1px; } /* Filter bar */ .ys-filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ys-filter-count { font-size: 12px; color: var(--ys-text-muted); } /* Inputs shared */ .ys-inp-md { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius); color: var(--ys-text); padding: 6px 10px; font-size: 12px; font-family: var(--ys-font); transition: border-color var(--ys-transition); } .ys-inp-md:focus { border-color: var(--ys-accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--ys-accent-rgb),.15); } .ys-inp-sm { background: var(--ys-bg); border: 1px solid var(--ys-border); border-radius: var(--ys-radius-sm); color: var(--ys-text); padding: 4px 7px; font-size: 12px; font-family: var(--ys-font); } .ys-inp-sm:focus { border-color: var(--ys-accent); outline: none; } .ys-inp-xs { background: var(--ys-bg); border: 1px solid var(--ys-border); border-radius: var(--ys-radius-sm); color: var(--ys-text); padding: 4px 6px; font-size: 12px; width: 60px; font-family: var(--ys-font); } /* Default setter band */ .ys-default-band { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(var(--ys-accent-rgb), .08); border: 1px solid rgba(var(--ys-accent-rgb), .20); border-radius: var(--ys-radius); padding: 8px 14px; } .ys-band-label { font-size: 11px; font-weight: 700; color: var(--ys-accent); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; } .ys-band-sep { font-size: 12px; color: var(--ys-text-muted); } .ys-band-note { font-size: 11px; color: var(--ys-text-muted); } /* Buttons */ .ys-btn-accent { background: var(--ys-accent); color: #fff; border: none; border-radius: var(--ys-radius); padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--ys-font); transition: opacity var(--ys-transition), box-shadow var(--ys-transition); } .ys-btn-accent:hover { opacity: .88; box-shadow: 0 4px 14px rgba(var(--ys-accent-rgb),.30); } .ys-btn-accent:disabled { opacity: .55; cursor: default; } .ys-btn-ghost { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius); color: var(--ys-text); padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: var(--ys-font); transition: background var(--ys-transition); } .ys-btn-ghost:hover { background: rgba(var(--ys-accent-rgb),.08); color: var(--ys-accent); } .ys-btn-green { background: #22c55e; color: #fff; border: none; border-radius: var(--ys-radius); padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--ys-font); transition: opacity var(--ys-transition); } .ys-btn-green:hover { opacity: .85; } /* Grid wrapper */ .ys-grid-wrap { overflow-x: auto; border-radius: var(--ys-radius-lg); border: 1px solid var(--ys-border); } /* Entry table */ .ys-table { width: 100%; border-collapse: collapse; background: var(--ys-surface); } .ys-table thead tr { background: var(--ys-bg); } .ys-table th { padding: 8px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ys-text-muted); border-bottom: 2px solid var(--ys-border); white-space: nowrap; position: sticky; top: 0; z-index: 5; background: var(--ys-bg); } .ys-table td { padding: 5px 6px; border-bottom: 1px solid var(--ys-border); vertical-align: middle; font-size: 13px; } .ys-table tbody tr:hover { background: rgba(var(--ys-accent-rgb),.04) !important; } /* Daily entry column sizing */ .de-num { color: var(--ys-text-muted); font-size: 10px; width: 30px; text-align: center; } .de-emp { min-width: 140px; } .de-name { font-size: 13px; font-weight: 600; color: var(--ys-text); } .de-code { font-size: 11px; color: var(--ys-text-muted); } .de-trade { font-size: 12px; color: var(--ys-text-muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Division badge */ .ys-badge { border-radius: 4px; padding: 1px 7px; font-size: 9px; font-weight: 700; white-space: nowrap; } /* Loading / empty state */ .ys-loading { text-align: center; padding: 24px; color: var(--ys-text-muted); font-size: 13px; } /* Month label */ .ys-month-label { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius); padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--ys-text); min-width: 150px; text-align: center; } /* Roster grid */ .ys-roster-wrap { overflow-x: auto; border-radius: var(--ys-radius-lg); border: 1px solid var(--ys-border); } .ys-roster-table { border-collapse: collapse; background: var(--ys-surface); } .ys-roster-table th { padding: 5px 3px; font-size: 11px; font-weight: 600; color: var(--ys-text-muted); background: var(--ys-bg); border-bottom: 2px solid var(--ys-border); position: sticky; top: 0; z-index: 5; white-space: nowrap; text-align: center; } .ys-roster-table td { padding: 3px 2px; border-bottom: 1px solid var(--ys-border); vertical-align: middle; } .rs-th-fix { position: sticky; z-index: 6; } .rs-th-emp { left: 0; min-width: 140px; text-align: left; padding-left: 8px; } .rs-th-proj { left: 140px; min-width: 120px; text-align: left; } .rs-th-day { width: 26px; min-width: 26px; } .rs-th-stat { width: 30px; min-width: 30px; } .rs-td-emp { position: sticky; left: 0; background: inherit; z-index: 2; min-width: 140px; padding: 4px 8px; } .rs-td-proj { position: sticky; left: 140px; background: inherit; z-index: 2; min-width: 120px; padding: 3px 4px; } .rs-td-day { padding: 2px 1px; text-align: center; } .rs-td-stat { text-align: center; font-size: 12px; font-weight: 700; width: 30px; } /* Roster cell */ .ys-rc { width: 24px; height: 22px; border-radius: 3px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform var(--ys-transition); } .ys-rc:hover { transform: scale(1.18); } /* Legend */ .ys-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ys-text-muted); padding: 2px 0; } .ys-legend-item { display: flex; align-items: center; gap: 5px; } .ys-legend-hint { margin-left: auto; font-size: 11px; color: var(--ys-text-muted); } /* Context menu */ .ys-ctx-menu { position: fixed; z-index: 9000; background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: var(--ys-radius-lg); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 170px; } .ys-ctx-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--ys-text); padding: 7px 12px; font-size: 12px; cursor: pointer; border-radius: var(--ys-radius-sm); font-family: var(--ys-font); transition: background var(--ys-transition); } .ys-ctx-menu button:hover { background: rgba(var(--ys-accent-rgb),.08); color: var(--ys-accent); } /* ── Capacity panel ─────────────────────────────────────────── */ .cap-card { background: var(--ys-surface); border: 1px solid var(--ys-border); border-radius: 12px; padding: 16px; transition: transform .2s, box-shadow .2s; } .cap-card:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,.08); } .cap-kpi-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 16px; } .cap-div-card { padding: 12px !important; } .cap-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; } .cap-stat-box { background: var(--ys-bg); border: 1px solid var(--ys-border); border-radius: 7px; padding: 7px 8px; text-align: center; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--ys-accent-rgb), .25); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--ys-accent-rgb), .45); } /* ============================================================ Invoice Module — badges, filter bar, workflow stepper ============================================================ */ /* ── Status badges ──────────────────────────────────────────── */ .ys-invoice-badge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; letter-spacing: .02em; } .ys-badge-secondary { background: rgba(100,116,139,.15); color: #64748b; } .ys-badge-primary { background: rgba(59,130,246,.15); color: #3b82f6; } .ys-badge-info { background: rgba(6,182,212,.15); color: #0891b2; } .ys-badge-danger { background: rgba(239,68,68,.15); color: #dc2626; } .ys-badge-warning { background: rgba(245,158,11,.15); color: #d97706; } .ys-badge-orange { background: rgba(249,115,22,.15); color: #ea580c; } .ys-badge-success { background: rgba(34,197,94,.15); color: #16a34a; } .ys-badge-dark { background: rgba(30,41,59,.15); color: #475569; } /* ── Quick status filter bar ────────────────────────────────── */ .invoice-filter-bar { display: flex; gap: 6px; padding: 8px 8px 6px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ys-border); background: var(--ys-surface); } .invoice-filter-btn { border-radius: 20px !important; padding: 3px 16px !important; font-size: 12px !important; font-weight: 600 !important; transition: all var(--ys-transition) !important; } .invoice-filter-btn:hover { transform: translateY(-1px); } /* ── Workflow stepper (dialog header) ───────────────────────── */ .invoice-workflow-stepper { padding: 14px 20px 12px; background: var(--ys-bg); border-bottom: 1px solid var(--ys-border); margin-bottom: 0; } .wf-header { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ys-text-muted); margin-bottom: 10px; } .wf-inner { display: flex; align-items: flex-start; } .wf-step { display: flex; flex-direction: column; align-items: center; min-width: 0; } .wf-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ys-border); background: var(--ys-surface); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ys-text-muted); transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; } .wf-label { font-size: 9px; color: var(--ys-text-muted); text-align: center; margin-top: 5px; max-width: 62px; line-height: 1.3; font-weight: 500; } .wf-step.done .wf-dot { background: var(--ys-success); border-color: var(--ys-success); color: #fff; } .wf-step.done .wf-label { color: var(--ys-text); font-weight: 600; } .wf-step.active .wf-dot { background: var(--ys-accent); border-color: var(--ys-accent); color: #fff; box-shadow: 0 0 0 3px rgba(var(--ys-accent-rgb), .2); } .wf-step.active .wf-label { color: var(--ys-accent); font-weight: 700; } .wf-line { flex: 1; height: 2px; background: var(--ys-border); margin: 12px 3px 0; min-width: 12px; transition: background .2s; } .wf-line.done { background: var(--ys-success); } .wf-disputed-badge { align-self: center; margin-left: 12px; padding: 4px 12px; border-radius: 5px; font-size: 11px; font-weight: 700; background: rgba(239,68,68,.12); color: var(--ys-danger); border: 1px solid rgba(239,68,68,.25); white-space: nowrap; flex-shrink: 0; } /* ── Expense Category Pill ── */ .ys-expense-cat { display: inline-block; border-radius: 4px; padding: 2px 7px; font-size: 9px; font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; }