/*================ Template Name: Rashmi Production Stock - By Soft Amass India Description: This Template is build for Rashmi Production Stock by Soft Amass India. Version: 1.0 Author: Soft Amass India Website: https://softamassindia.com/ =======================*/ /*---------------------------------------- ------------------------------------------ /////////// ///\\\ ||| /// /// \\\ ||| \\\ /// \\\ ||| \\\\\\\\\\ /// \\\ ||| \\\ ////// \\\\\\ ||| /// /// \\\ ||| /////////// /// \\\ ||| ------------------------------------------ ----------------------------------------*/ /* ============================================================ * ROLLING MILL PRODUCTION SYSTEM — Global Stylesheet v4.0 * Design: Metronic-8 Inspired Professional Dashboard Theme * ============================================================ * * TABLE OF CONTENTS * --------------------------------------------------------- * 1. CSS Custom Properties (Design Tokens) * 2. Base Reset & Body * 3. Typography Helpers * 4. SVG Icon Helper * 5. Layout — Sidebar * 6. Layout — Top Header * 7. Layout — Main Content Wrapper * 8. Component — Login Screen * 9. Component — Buttons * 10. Component — Stat / KPI Cards * 11. Component — Content Cards * 12. Component — Tables * 13. Component — Forms & Inputs * 14. Component — Tabs (pill & underline variants) * 15. Component — Badges & Pills * 16. Component — Modal / Dialog * 17. Component — Toast Notifications * 18. Component — Validation Items * 19. Utility Classes * 20. Custom Scrollbar * 21. Print Styles * 22. Responsive Breakpoints * ============================================================ */ /* ============================================================ * 1. CSS CUSTOM PROPERTIES (Design Tokens) * All colours, spacing, and sizing are driven from here. * Swap data-theme="dark" on to switch themes. * ============================================================ */ :root { /* --- Brand / Accent --- */ --blue: #1B84FF; --blue-l: #EBF4FF; --blue-d: #0965D0; --grn: #17C653; --grn-l: #DFFFEA; --red: #F8285A; --red-l: #FFF0F4; --amb: #F6C000; --amb-l: #FFF8E1; --teal: #00B2C4; --teal-l: #E0F9FB; --pur: #7239EA; --pur-l: #F1EEFF; /* --- Neutral Surfaces --- */ --bg: #F5F8FA; --card: #FFFFFF; --card2: #FAFBFC; --hdr: #FFFFFF; --side: #1E2129; --side2: #16181f; --side-act: rgba(255,255,255,.06); /* --- Text --- */ --tx: #071437; --tx2: #464f66; --txh: #000000; --tx-inv: rgba(255,255,255,.87); --tx-inv2: rgba(255,255,255,.45); /* --- Borders --- */ --bdr: #DBDFE9; --bdr2: #EBEDF0; --thead: #F9FAFB; --tfoot: #F1F4F8; --inp: #FFFFFF; --ro: #F9FAFB; /* --- Shadows --- */ --sh0: 0 0 0 0 transparent; --sh1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --sh2: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --sh3: 0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06); /* --- Radii --- */ --r: 12px; --r2: 8px; --r3: 6px; --rpill: 999px; /* --- Typography --- */ --sans: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --mf: 'IBM Plex Mono', 'Fira Code', monospace; /* --- Layout --- */ --sw: 265px; /* sidebar width */ --sw-c: 74px; /* sidebar collapsed width */ --hh: 68px; /* header height */ /* --- Transitions --- */ --tr: .22s cubic-bezier(.4,0,.2,1); --tr-fast: .14s ease; } /* ---- Dark Theme Overrides ---- */ [data-theme="dark"] { --bg: #111827; --card: #1F2937; --card2: #1A2332; --hdr: #1A2332; --side: #0F1117; --side2: #090B11; --side-act: rgba(255,255,255,.07); --tx: #C9D1E0; --tx2: #6B7280; --txh: #F0F4FF; --bdr: #2D3748; --bdr2: #374151; --thead: #1A2332; --tfoot: #162031; --inp: #1A2332; --ro: #161E2D; --sh1: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --sh2: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25); --sh3: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); --blue-l: #182A45; --grn-l: #0D2818; --red-l: #2A1020; --amb-l: #2A1F08; --teal-l: #082532; --pur-l: #1B1040; } /* ============================================================ * 2. BASE RESET & BODY * ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--tx); min-height: 100vh; font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background var(--tr), color var(--tr); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; } /* ============================================================ * 3. TYPOGRAPHY HELPERS * ============================================================ */ .t-h1 { font-size: 22px; font-weight: 700; color: var(--txh); } .t-h2 { font-size: 17px; font-weight: 700; color: var(--txh); } .t-h3 { font-size: 14px; font-weight: 600; color: var(--tx); } .t-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); } .t-mono { font-family: var(--mf); } .t-muted { color: var(--tx2); } /* ============================================================ * 4. SVG ICON HELPER * All icons use * ============================================================ */ .icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .icon-sm { width: 14px; height: 14px; } .icon-md { width: 20px; height: 20px; } .icon-lg { width: 24px; height: 24px; } /* ============================================================ * 5. LAYOUT — SIDEBAR * ============================================================ */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sw); height: 100vh; background: var(--side); display: flex; flex-direction: column; z-index: 300; transition: width var(--tr); overflow: hidden; } .sidebar.collapsed { width: var(--sw-c); } /* Logo / brand row */ .s-logo { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: var(--hh); border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; cursor: pointer; user-select: none; } .s-logo:hover .s-toggle { opacity: 1; } /* Brand icon box */ .s-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), #5BA8FF); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--mf); color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px rgba(27,132,255,.4); } .s-brand { overflow: hidden; opacity: 1; transition: opacity var(--tr), width var(--tr); white-space: nowrap; } .sidebar.collapsed .s-brand { opacity: 0; width: 0; pointer-events: none; } .s-brand-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; } .s-brand-sub { font-size: 10px; color: var(--tx-inv2); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; } /* Sidebar collapse toggle button */ .s-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); display: flex; align-items: center; justify-content: center; color: var(--tx-inv2); transition: all var(--tr); flex-shrink: 0; opacity: .6; } .s-toggle:hover { background: rgba(255,255,255,.15); color: #fff; opacity: 1; } /* Navigation area */ .s-nav { flex: 1; padding: 12px 10px; overflow-y: auto; overflow-x: hidden; } /* Nav group label */ .s-grp { margin-bottom: 4px; } .s-grp-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: rgba(255,255,255,.22); padding: 6px 10px 4px; white-space: nowrap; overflow: hidden; transition: opacity var(--tr); } .sidebar.collapsed .s-grp-label { opacity: 0; } /* Nav item */ .s-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; transition: all var(--tr); white-space: nowrap; overflow: hidden; border: 1px solid transparent; position: relative; text-decoration: none; } .s-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); } .s-item.active { background: rgba(27,132,255,.18); color: #5BB8FF; border-color: rgba(27,132,255,.25); } .s-item.active .icon { color: #5BB8FF; } /* Icon wrapper inside nav item */ .s-item .s-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Nav text label */ .s-item .nt { white-space: nowrap; overflow: hidden; transition: opacity var(--tr), width var(--tr); } .sidebar.collapsed .s-item .nt { opacity: 0; width: 0; pointer-events: none; } /* Sidebar footer (user + logout) */ .s-foot { padding: 10px; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0; } .s-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; margin-bottom: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); overflow: hidden; } .s-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--pur)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .s-uinfo { overflow: hidden; transition: opacity var(--tr), width var(--tr); } .sidebar.collapsed .s-uinfo { opacity: 0; width: 0; pointer-events: none; } .s-uname { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; } .s-urole { font-size: 10.5px; color: var(--tx-inv2); white-space: nowrap; } /* Sidebar tooltip on collapsed state */ .sidebar.collapsed .s-item { justify-content: center; } .sidebar.collapsed .s-user { justify-content: center; padding: 8px; } /* ============================================================ * 6. LAYOUT — TOP HEADER * ============================================================ */ .app-hdr { position: fixed; top: 0; left: var(--sw); right: 0; height: var(--hh); background: var(--hdr); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 200; gap: 16px; box-shadow: var(--sh1); transition: left var(--tr), background var(--tr); } .app-hdr.collapsed { left: var(--sw-c); } .h-left { display: flex; align-items: center; gap: 12px; } .h-title { font-size: 16px; font-weight: 700; color: var(--txh); } .h-sub { font-size: 12px; color: var(--tx2); margin-top: 1px; } /* Header right actions */ .h-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } /* Plant/status badge */ .plant-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--blue-l); color: var(--blue); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--rpill); font-family: var(--mf); border: 1px solid rgba(27,132,255,.2); } /* Date input wrapper */ .date-wrap { display: flex; align-items: center; gap: 8px; background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--r2); padding: 6px 12px; cursor: pointer; transition: border-color var(--tr); } .date-wrap:hover, .date-wrap:focus-within { border-color: var(--blue); } .date-wrap label { display: flex; align-items: center; color: var(--tx2); } #datePicker, input[type="date"].date-inp { border: none; background: transparent; color: var(--tx); font-family: var(--mf); font-size: 12.5px; font-weight: 600; cursor: pointer; outline: none; } /* Plant selector in header */ .plant-sel { padding: 7px 10px; border: 1px solid var(--bdr); border-radius: var(--r2); background: var(--inp); color: var(--tx); font-size: 13px; font-weight: 500; cursor: pointer; outline: none; transition: border-color var(--tr); min-width: 160px; } .plant-sel:focus { border-color: var(--blue); } /* Generic select styled */ .sel { padding: 7px 10px; border: 1px solid var(--bdr); border-radius: var(--r2); background: var(--inp); color: var(--tx); font-size: 13px; font-weight: 500; cursor: pointer; outline: none; transition: border-color var(--tr); } .sel:focus { border-color: var(--blue); } /* Date range picker */ .date-range { display: flex; align-items: center; gap: 4px; background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--r2); padding: 5px 10px; font-size: 12px; color: var(--tx2); transition: border-color var(--tr); } .date-range:focus-within { border-color: var(--blue); } .date-range input[type="date"] { border: none; background: transparent; color: var(--tx); font-family: var(--mf); font-size: 12px; outline: none; font-weight: 600; } .date-range-sep { color: var(--tx2); font-size: 11px; padding: 0 2px; } /* Theme toggle icon button */ .theme-btn { width: 36px; height: 36px; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--bdr); background: var(--inp); cursor: pointer; color: var(--tx2); transition: all var(--tr); } .theme-btn:hover { background: var(--bdr); color: var(--tx); } /* ============================================================ * 7. LAYOUT — MAIN CONTENT WRAPPER * ============================================================ */ .main { margin-left: var(--sw); margin-top: var(--hh); padding: 24px; min-height: calc(100vh - var(--hh)); transition: margin-left var(--tr); } .main.collapsed { margin-left: var(--sw-c); } /* Section heading inside main */ .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin: 20px 0 12px; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--bdr); } /* ============================================================ * 8. COMPONENT — LOGIN SCREEN * ============================================================ */ .login-overlay { position: fixed; inset: 0; background: linear-gradient(135deg, #0B1628 0%, #142040 50%, #0A1A38 100%); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-wrap { width: 100%; max-width: 400px; } /* Decorative blobs */ .login-overlay::before, .login-overlay::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .login-overlay::before { width: 400px; height: 400px; background: rgba(27,132,255,.12); top: -100px; left: -100px; } .login-overlay::after { width: 350px; height: 350px; background: rgba(114,57,234,.10); bottom: -80px; right: -80px; } .login-box { background: rgba(255,255,255,.04); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 44px 40px; box-shadow: 0 32px 64px rgba(0,0,0,.6); position: relative; z-index: 1; } .login-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .login-logo-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--blue), #5BB8FF); display: flex; align-items: center; justify-content: center; font: 700 17px/1 var(--mf); color: #fff; box-shadow: 0 6px 20px rgba(27,132,255,.45); flex-shrink: 0; } .login-logo-text { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; } .login-logo-text small { display: block; font-size: 10.5px; color: rgba(255,255,255,.38); font-weight: 400; text-transform: uppercase; letter-spacing: .09em; } .login-title { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 5px; } .login-sub { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 28px; } .login-field { margin-bottom: 16px; } .login-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: 7px; } .login-field input { width: 100%; padding: 11px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; font-size: 14px; outline: none; transition: border-color .2s, background .2s; } .login-field input::placeholder { color: rgba(255,255,255,.25); } .login-field input:focus { border-color: rgba(27,132,255,.6); background: rgba(27,132,255,.08); } .login-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--blue), #4A9EFF); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .2s, transform .15s; box-shadow: 0 4px 16px rgba(27,132,255,.45); display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } .login-btn:hover { filter: brightness(1.1); } .login-btn:active { transform: scale(.98); } .login-err { font-size: 12.5px; color: #FF7096; margin-top: 10px; text-align: center; min-height: 20px; } .role-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; } .role-pill { padding: 4px 12px; border-radius: var(--rpill); font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); transition: all .18s; } .role-pill:hover { background: rgba(255,255,255,.10); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.25); } /* ============================================================ * 9. COMPONENT — BUTTONS * Variants: btn-primary, btn-success, btn-danger, * btn-outline, btn-ghost, btn-icon * ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 15px; border-radius: var(--r2); font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; border: 1px solid transparent; transition: all var(--tr-fast); white-space: nowrap; line-height: 1; text-decoration: none; } .btn:active { transform: scale(.97); } /* Small & large size modifiers */ .btn-sm { padding: 4px 10px; font-size: 11.5px; border-radius: var(--r3); } .btn-lg { padding: 10px 22px; font-size: 14px; } /* Primary */ .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 2px 8px rgba(27,132,255,.30); } .btn-primary:hover { background: var(--blue-d); border-color: var(--blue-d); box-shadow: 0 4px 14px rgba(27,132,255,.40); } /* Success / green */ .btn-success { background: var(--grn); color: #fff; border-color: var(--grn); box-shadow: 0 2px 8px rgba(23,198,83,.25); } .btn-success:hover { filter: brightness(1.08); } .btn-success:disabled { opacity: .5; cursor: not-allowed; } /* Danger / red */ .btn-danger { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 2px 8px rgba(248,40,90,.25); } .btn-danger:hover { filter: brightness(1.08); } /* Outline */ .btn-outline { background: transparent; border-color: var(--bdr); color: var(--tx); } .btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-l); } /* Warning / amber */ .btn-warning { background: var(--amb); color: #fff; border-color: var(--amb); } .btn-warning:hover { filter: brightness(1.08); } /* Ghost – transparent low-emphasis */ .btn-ghost { background: transparent; color: var(--tx2); border-color: transparent; } .btn-ghost:hover { background: var(--thead); color: var(--tx); } /* Icon-only circular button */ .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--r2); background: transparent; border: 1px solid var(--bdr); color: var(--tx2); } .btn-icon:hover { background: var(--thead); color: var(--tx); } /* Remove / delete button (used in settings rows) */ .btn-rm { width: 30px; height: 30px; border-radius: var(--r3); display: inline-flex; align-items: center; justify-content: center; background: var(--red-l); color: var(--red); border: 1px solid rgba(248,40,90,.15); cursor: pointer; flex-shrink: 0; transition: all var(--tr-fast); } .btn-rm:hover { background: var(--red); color: #fff; } .btn-rm:disabled { opacity: .4; cursor: not-allowed; } /* ============================================================ * 10. COMPONENT — STAT / KPI CARDS * ============================================================ */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .stat-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 20px 20px 18px; box-shadow: var(--sh1); transition: box-shadow var(--tr), transform var(--tr); display: flex; align-items: flex-start; gap: 14px; overflow: hidden; position: relative; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--r) var(--r) 0 0; background: transparent; transition: background var(--tr); } .stat-card:hover { box-shadow: var(--sh2); transform: translateY(-1px); } /* Accent top-bar colors */ .sc-blue::after { background: var(--blue); } .sc-green::after { background: var(--grn); } .sc-red::after { background: var(--red); } .sc-amber::after { background: var(--amb); } .sc-teal::after { background: var(--teal); } .sc-purple::after { background: var(--pur); } /* Icon box inside stat card */ .stat-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .si-blue { background: var(--blue-l); color: var(--blue); } .si-green { background: var(--grn-l); color: var(--grn); } .si-red { background: var(--red-l); color: var(--red); } .si-amber { background: var(--amb-l); color: var(--amb); } .si-teal { background: var(--teal-l); color: var(--teal); } .si-purple { background: var(--pur-l); color: var(--pur); } .stat-info { flex: 1; min-width: 0; } .stat-lbl { font-size: 11.5px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-val { font-family: var(--mf); font-size: 22px; font-weight: 700; color: var(--txh); line-height: 1; letter-spacing: -.02em; } .stat-sub { font-size: 11px; color: var(--tx2); margin-top: 5px; } /* KPI grid — used on analytics page */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } /* ============================================================ * 11. COMPONENT — CONTENT CARDS * ============================================================ */ .card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--sh1); overflow: hidden; transition: box-shadow var(--tr); } .card:hover { box-shadow: var(--sh2); } .card-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bdr); gap: 10px; } .card-title { font-size: 13.5px; font-weight: 700; color: var(--txh); display: flex; align-items: center; gap: 8px; } .card-body { padding: 20px; } .card-body-sm { padding: 14px 16px; } .card-body-flush { padding: 0; } /* Grid layouts for cards */ .card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; } /* Legacy class names — mapped for backward compatibility */ .sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .sum-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 20px; box-shadow: var(--sh1); margin-bottom: 14px; } .sum-card h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* Set card (used in dashboard settings panel) */ .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .set-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 20px; box-shadow: var(--sh1); } .set-card h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* Chart card / wrapper */ .chart-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh1); margin-bottom: 16px; } .chart-card-title { font-size: 13px; font-weight: 700; color: var(--txh); margin-bottom: 4px; } .chart-card-sub { font-size: 11px; color: var(--tx2); margin-bottom: 14px; } .chart-wrap { position: relative; height: 220px; } .chart-wrap.tall { height: 280px; } .chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .chart-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } /* Slot cards — data entry accordion */ .slot-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--sh1); overflow: hidden; margin-bottom: 10px; transition: border-color var(--tr), box-shadow var(--tr); } .slot-card:hover { box-shadow: var(--sh2); } .slot-card.has-data { border-left: 3px solid var(--grn); } .slot-card.has-err { border-left: 3px solid var(--red) !important; } .slot-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--thead); cursor: pointer; user-select: none; transition: background var(--tr); gap: 12px; } .slot-hdr:hover { background: var(--tfoot); } .slot-hl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .slot-time { font-family: var(--mf); font-size: 13px; font-weight: 700; color: var(--txh); } .slot-badge { font-size: 10px; padding: 2px 9px; border-radius: var(--rpill); font-weight: 700; font-family: var(--mf); } .sb-empty { background: var(--bdr2); color: var(--tx2); } .sb-ok { background: var(--grn-l); color: var(--grn); } .sb-err { background: var(--red-l); color: var(--red); } .grade-tag { font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: var(--blue-l); color: var(--blue); } .slot-qs { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: auto; margin-right: 0; } .qs-i { display: flex; gap: 4px; align-items: center; font-size: 11px; } .qs-l { color: var(--tx2); } .qs-v { font-family: var(--mf); font-weight: 700; color: var(--tx); } .tag-primary{ font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: #d9ebff !important; } .txt-primary{ color: #0d70e2 !important; } .tag-warning { font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: #ffeede !important; } .txt-warning{ color: #e97406 !important; } .tag-gray { font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: #e6e6e6 !important; } .txt-gray { color: #302d2d !important; } .tag-success { font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: #dffde9 !important; } .txt-success { color: #048d32 !important; } .tag-danger { font-family: var(--mf); font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r3); background: #ffdbdb !important; } .txt-danger { color: #b90404 !important; } .ci { width: 22px; height: 22px; border-radius: 50%; background: var(--bdr2); display: flex; align-items: center; justify-content: center; color: var(--tx2); transition: transform var(--tr), background var(--tr); flex-shrink: 0; } .ci.open { transform: rotate(180deg); } .slot-calc { display: flex; gap: 25px; padding: 7px 16px; background: var(--tfoot); border-bottom: 1px solid var(--bdr); font-size: 11.5px; flex-wrap: wrap; align-items: center; } .sc-i { display: flex; gap: 7px; align-items: center; } .sc-l { color: var(--tx2); font-weight: 600; } .sc-v { font-family: var(--mf); font-weight: 600; color: var(--tx); } .sc-pct { font-family: var(--mf); font-weight: 700; color: var(--teal); } .slot-body.collapsed { display: none; } /* Grade bar inside slot body */ .grade-bar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--ro); border-bottom: 1px solid var(--bdr); } .grade-bar label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); white-space: nowrap; } .grade-sel { padding: 5px 9px; border: 1px solid var(--bdr); border-radius: var(--r2); background: var(--inp); color: var(--tx); font-family: var(--mf); font-size: 12px; cursor: pointer; outline: none; min-width: 170px; transition: border-color var(--tr); } .grade-sel:focus { border-color: var(--blue); } /* Val panel (validation tab) */ .val-panel { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 20px; margin-bottom: 16px; box-shadow: var(--sh1); } .val-panel h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); margin-bottom: 12px; } .val-items { display: flex; flex-wrap: wrap; gap: 6px; } /* Plant section card */ .plant-sec { border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; } .plant-sec-hdr { background: var(--blue-l); padding: 9px 16px; font-weight: 700; font-size: 12.5px; color: var(--blue); } .plant-sec-body { padding: 14px 16px; } /* ============================================================ * 12. COMPONENT — TABLES * ============================================================ */ /* Overflow wrapper */ .ov-auto { overflow-x: auto; } /* Main data-entry table */ .dt { width: 100%; border-collapse: collapse; font-size: 12px; } .dt .th-grp th { background: var(--thead); color: var(--tx2); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 6px 9px; text-align: center; border-bottom: 1px solid var(--bdr); border-right: 1px solid var(--bdr); } .dt .th-sub th { background: var(--thead); color: var(--tx2); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 5px 9px; text-align: right; border-bottom: 2px solid var(--bdr); border-right: 1px solid var(--bdr); } .dt .th-grp th:first-child, .dt .th-sub th:first-child { text-align: left; } .dt tbody tr { border-bottom: 1px solid var(--bdr); transition: background var(--tr); } .dt tbody tr:hover { background: var(--thead); } .dt td { padding: 7px 9px; vertical-align: middle; border-right: 1px solid var(--bdr); } .dt td:last-child, .dt thead th:last-child { border-right: none; } .dt .ft td { background: var(--tfoot) !important; font-weight: 700; font-family: var(--mf); font-size: 11.5px; padding: 8px 9px; border-top: 2px solid var(--bdr); } .dt .ft td:first-child { font-family: var(--sans); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2); } .col-sep { border-left: 2px solid var(--bdr) !important; } /* Section label chip (inside table rows) */ .sec-lbl { font-family: var(--mf); font-size: 10px; font-weight: 700; color: var(--tx2); background: var(--thead); padding: 2px 8px; border-radius: 5px; display: inline-block; } /* Numeric read-only computed cell */ .cc { font-family: var(--mf); font-size: 11.5px; font-weight: 600; color: var(--blue); background: var(--ro); border: 1px solid var(--bdr); border-radius: 5px; padding: 5px 8px; text-align: right; display: block; min-width: 60px; white-space: nowrap; } /* Numeric input inside table */ .pi { width: 100%; min-width: 60px; padding: 5px 7px; border: 1px solid var(--bdr); border-radius: var(--r3); background: var(--inp); color: var(--tx); font-family: var(--mf); font-size: 11.5px; font-weight: 500; text-align: right; outline: none; transition: all var(--tr); } .pi:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,132,255,.12); } .pi.pi-err { border-color: var(--red); background: var(--red-l); } .pi[readonly] { opacity: .6; cursor: not-allowed; } /* Summary table */ .st { width: 100%; border-collapse: collapse; font-size: 12px; } .st th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2); padding: 6px 8px; border-bottom: 1px solid var(--bdr); text-align: right; font-weight: 700; } .st th:first-child { text-align: left; } .st td { padding: 7px 8px; border-bottom: 1px solid var(--bdr); text-align: right; font-family: var(--mf); font-size: 11.5px; transition: background var(--tr); } .st td:first-child { text-align: left; font-family: var(--sans); font-size: 12px; color: var(--tx2); } .st tbody tr:hover td { background: var(--thead); } .st tr:last-child td { border-bottom: none; font-weight: 700; color: var(--blue); border-top: 2px solid var(--bdr); } /* Report table */ .rpt-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 12px; } .rpt-table th { background: var(--thead); padding: 6px 8px; text-align: right; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2); border: 1px solid var(--bdr); font-weight: 700; } .rpt-table th:first-child, .rpt-table th:nth-child(2) { text-align: left; } .rpt-table td { padding: 5px 8px; border: 1px solid var(--bdr); text-align: right; font-family: var(--mf); font-size: 11px; } .rpt-table td:first-child, .rpt-table td:nth-child(2) { text-align: left; font-family: var(--sans); } .rpt-table tr:nth-child(even) td { background: var(--thead); } .rpt-table .tot { font-weight: 700; background: var(--tfoot) !important; } /* Plant comparison table */ .plant-table-wrap { overflow-x: auto; } .plant-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 700px; } .plant-table th { background: var(--thead); padding: 9px 12px; text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tx2); border-bottom: 2px solid var(--bdr); white-space: nowrap; } .plant-table th:first-child, .plant-table th:nth-child(2) { text-align: left; } .plant-table td { padding: 9px 12px; border-bottom: 1px solid var(--bdr); text-align: right; font-family: var(--mf); font-size: 11.5px; } .plant-table td:first-child { text-align: left; font-family: var(--sans); font-weight: 600; } .plant-table td:nth-child(2) { text-align: left; font-family: var(--sans); color: var(--tx2); } .plant-table tbody tr:hover td { background: var(--thead); } .plant-table .pt-total td { background: var(--tfoot); font-weight: 700; border-top: 2px solid var(--bdr); } .pt-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: var(--blue-l); color: var(--blue); font-size: 10.5px; font-weight: 800; font-family: var(--mf); } /* Settings table (inline config tables) */ .cfg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cfg-table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); padding: 6px 8px; border-bottom: 2px solid var(--bdr); text-align: left; } .cfg-table tbody tr { border-bottom: 1px solid var(--bdr); } .cfg-table tbody tr:hover td { background: var(--thead); } .cfg-table td { padding: 8px; vertical-align: middle; } /* Report helper */ .rpt-title { font-size: 18px; font-weight: 800; color: var(--txh); margin-bottom: 3px; } .rpt-meta { font-size: 11.5px; color: var(--tx2); margin-bottom: 14px; font-family: var(--mf); } .rpt-h4 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx2); margin: 12px 0 6px; border-bottom: 1px solid var(--bdr); padding-bottom: 4px; } /* ============================================================ * 13. COMPONENT — FORMS & INPUTS * ============================================================ */ .fi { display: flex; flex-direction: column; gap: 4px; } .fi label { font-size: 10.5px; color: var(--tx2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .fi input, .fi select, .fi textarea { padding: 7px 10px; border: 1px solid var(--bdr); border-radius: var(--r2); background: var(--inp); color: var(--tx); font-family: var(--mf); font-size: 12.5px; outline: none; transition: border-color var(--tr), box-shadow var(--tr); } .fi input:focus, .fi select:focus, .fi textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,132,255,.12); } /* Generic form group */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--bdr); border-radius: var(--r2); background: var(--inp); color: var(--tx); font-size: 13px; outline: none; transition: border-color var(--tr), box-shadow var(--tr); } .form-group input:focus, .form-group select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,132,255,.12); } /* Settings row layouts */ .cat-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; } .byp-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; } .pl-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; } .gr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; } /* Checkbox custom */ .checkbox-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkbox-wrap input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--blue); } /* ============================================================ * 14. COMPONENT — TABS * ============================================================ */ /* Pill-style tabs */ .tabs { display: flex; gap: 3px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 4px; margin-bottom: 20px; width: fit-content; box-shadow: var(--sh1); flex-wrap: wrap; } .tab { padding: 7px 16px; border-radius: calc(var(--r) - 3px); font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--tx2); font-family: var(--sans); transition: all var(--tr); display: flex; align-items: center; gap: 6px; } .tab:hover:not(.active) { background: var(--thead); color: var(--tx); } .tab.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(27,132,255,.3); } /* Analytics-page tabs (a-tabs) */ .atabs { display: flex; gap: 3px; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 4px; margin-bottom: 20px; width: fit-content; box-shadow: var(--sh1); flex-wrap: wrap; } .atab { padding: 7px 16px; border-radius: calc(var(--r) - 3px); font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--tx2); font-family: var(--sans); transition: all var(--tr); display: flex; align-items: center; gap: 6px; } .atab:hover:not(.active) { background: var(--thead); color: var(--tx); } .atab.active { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(27,132,255,.3); } /* Panel show/hide */ .panel { display: none; } .panel.active { display: block; } .apanel { display: none; } .apanel.active { display: block; } /* Settings side-nav tabs (settings page) */ .snav { display: flex; flex-direction: column; gap: 2px; } .snav-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r2); cursor: pointer; color: var(--tx2); font-size: 13px; font-weight: 500; transition: all var(--tr); border: 1px solid transparent; } .snav-item:hover { background: var(--thead); color: var(--tx); } .snav-item.active { background: var(--blue-l); color: var(--blue); border-color: rgba(27,132,255,.2); font-weight: 600; } .snav-item .sni { font-size: 15px; width: 20px; text-align: center; } .spanel { display: none; } .spanel.active { display: block; } /* ============================================================ * 15. COMPONENT — BADGES & PILLS * ============================================================ */ .badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--rpill); } .badge-blue { background: var(--blue-l); color: var(--blue); } .badge-green { background: var(--grn-l); color: var(--grn); } .badge-red { background: var(--red-l); color: var(--red); } .badge-amber { background: var(--amb-l); color: var(--amb); } .badge-teal { background: var(--teal-l); color: var(--teal); } .badge-purple { background: var(--pur-l); color: var(--pur); } .badge-gray { background: var(--bdr2); color: var(--tx2); } /* Legacy badge (for old .badge used in old code) */ .badge { background: var(--blue-l); color: var(--blue); } /* Role badge */ .role-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--rpill); } /* Validation item */ .vi { display: flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--rpill); font-size: 11.5px; font-weight: 500; border: 1px solid; } .vi.ok { background: var(--grn-l); color: var(--grn); border-color: rgba(23,198,83,.2); } .vi.err { background: var(--red-l); color: var(--red); border-color: rgba(248,40,90,.2); cursor: pointer; } .vi.warn { background: var(--amb-l); color: var(--amb); border-color: rgba(246,192,0,.25); } .vdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Status dot */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-green { background: var(--grn); } .dot-red { background: var(--red); } .dot-amber { background: var(--amb); } .dot-blue { background: var(--blue); } .dot-gray { background: var(--tx2); } /* User card */ .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .user-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r); padding: 18px; box-shadow: var(--sh1); transition: box-shadow var(--tr); } .user-card:hover { box-shadow: var(--sh2); } .uc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .uc-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; } .uc-name { font-size: 14px; font-weight: 700; color: var(--txh); } .uc-user { font-size: 11.5px; color: var(--tx2); font-family: var(--mf); } .uc-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .uc-plants { font-size: 11px; color: var(--tx2); margin-bottom: 10px; line-height: 1.6; } .uc-actions { display: flex; gap: 6px; } /* ============================================================ * 16. COMPONENT — MODAL / DIALOG * ============================================================ */ .modal-ov, .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--tr); backdrop-filter: blur(3px); } .modal-ov.open, .modal-bg.open { opacity: 1; pointer-events: all; } .modal { background: var(--card); border-radius: var(--r); width: 100%; max-width: 1040px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--sh3); transform: translateY(14px) scale(.98); transition: transform var(--tr); border: 1px solid var(--bdr); } .modal-ov.open .modal, .modal-bg.open .modal { transform: translateY(0) scale(1); } /* Settings page modal (user modal) */ .modal-ov .modal, .modal-bg .modal { max-width: 520px; } .modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bdr); gap: 12px; } .modal-hdr h2 { font-size: 15px; font-weight: 700; color: var(--txh); display: flex; align-items: center; gap: 8px; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-ftr { padding: 14px 20px; border-top: 1px solid var(--bdr); display: flex; gap: 8px; justify-content: flex-end; background: var(--card2); border-radius: 0 0 var(--r) var(--r); } /* ============================================================ * 17. COMPONENT — TOAST NOTIFICATIONS * ============================================================ */ .toast-wrap { position: fixed; top: calc(var(--hh) + 12px); right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r2); padding: 12px 16px; box-shadow: var(--sh3); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: toast-in .25s cubic-bezier(.34,1.5,.64,1); min-width: 260px; max-width: 360px; pointer-events: all; } .toast .t-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toast.ok { border-left: 4px solid var(--grn); } .toast.ok .t-ic { background: var(--grn-l); color: var(--grn); } .toast.err { border-left: 4px solid var(--red); } .toast.err .t-ic { background: var(--red-l); color: var(--red); } .toast.info { border-left: 4px solid var(--blue); } .toast.info .t-ic { background: var(--blue-l); color: var(--blue); } @keyframes toast-in { from { transform: translateX(24px) scale(.92); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } /* ============================================================ * 19. UTILITY CLASSES * ============================================================ */ .d-flex { display: flex; } .d-grid { display: grid; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } .text-right { text-align: right; } .text-center { text-align: center; } .font-mono { font-family: var(--mf); } .text-muted { color: var(--tx2); } .text-blue { color: var(--blue); } .text-green { color: var(--grn); } .text-red { color: var(--red); } .text-amber { color: var(--amb); } .text-teal { color: var(--teal); } .fw-700 { font-weight: 700; } .fw-600 { font-weight: 600; } .fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .divider { height: 1px; background: var(--bdr); margin: 16px 0; } .hidden { display: none !important; } /* Legacy .mono for inline data */ .mono { font-family: var(--mf); font-size: 12px; font-weight: 600; color: var(--blue); } /* ============================================================ * 20. CUSTOM SCROLLBAR * ============================================================ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tx2); } /* ============================================================ * 21. PRINT STYLES * ============================================================ */ @media print { .sidebar, .app-hdr, .toast-wrap, .modal-ov, .theme-btn { display: none !important; } .main { margin: 0; padding: 0; } body { background: #fff; } .stat-card, .card, .sum-card { box-shadow: none; border: 1px solid #ccc; } } /* ============================================================ * 22. RESPONSIVE BREAKPOINTS * ============================================================ */ /* Tablet and smaller: collapse sidebar by default */ @media (max-width: 1024px) { :root { --sw: 260px; } .stat-row { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .card-grid-4 { grid-template-columns: repeat(2, 1fr); } .chart-grid-3 { grid-template-columns: 1fr 1fr; } .set-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --sw: 0px; --sw-c: 0px; --hh: 56px; } /* Hide sidebar, show only when overlay-toggled */ .sidebar { transform: translateX(-100%); transition: transform var(--tr), width var(--tr); width: 265px !important; /* Always full-width on mobile */ } .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--sh3); } .sidebar.collapsed { /* on mobile, collapsed = hidden, not icon-only */ transform: translateX(-100%); } .app-hdr, .app-hdr.collapsed { left: 0; } .main, .main.collapsed { margin-left: 0; } /* Mobile overlay backdrop */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 299; } .mobile-overlay.active { display: block; } /* Mobile hamburger button */ .mob-menu-btn { display: flex !important; width: 36px; height: 36px; border-radius: var(--r2); background: transparent; border: 1px solid var(--bdr); align-items: center; justify-content: center; cursor: pointer; color: var(--tx); margin-right: 4px; } .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; } .kpi-grid { grid-template-columns: 1fr 1fr; } .card-grid-2 { grid-template-columns: 1fr; } .chart-grid-2 { grid-template-columns: 1fr; } .chart-grid-3 { grid-template-columns: 1fr; } .sum-grid { grid-template-columns: 1fr; } .main { padding: 14px; } .h-right .btn-outline, .h-right .date-wrap, .h-right .plant-sel { display: none; } /* Show only essential header buttons on mobile */ .h-right .btn-primary, .h-right .btn-success, .h-right .theme-btn { display: flex; } .atabs, .tabs { width: 100%; justify-content: stretch; } .atab, .tab { flex: 1; justify-content: center; font-size: 11px; padding: 6px 8px; } .modal { max-width: 100% !important; max-height: 100vh; border-radius: 0; } } @media (max-width: 480px) { .stat-row { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } .cat-row { grid-template-columns: 1fr 1fr auto; } .pl-row { grid-template-columns: 1fr auto; } } /* Ensure mob-menu-btn is hidden on large screens */ .mob-menu-btn { display: none; }