@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); /* Cefla Operations Suite — premium "Aurora" design system. Light-default with a refined dark variant via [data-theme="dark"] on . Accent = indigo (#4F46E5 / #6366F1) for a modern logistics-SaaS feel; semantic green/amber/red reserved strictly for status. One typeface (Inter), two weights (400/500). Card system on a tertiary page background; hairline borders; restraint. Inter loads from Google Fonts; falls back to Segoe UI on locked-down machines. */ /* ============================ DESIGN TOKENS ============================ */ :root{ /* ===== SHARED TOKENS (all themes) ===== */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; /* the big rounded content panel */ --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-lg: 0 4px 16px rgba(16,24,40,.10); --sidebar-w: 72px; /* collapsed icon rail */ --sidebar-w-open: 244px; /* expanded with labels */ --topbar-h: 60px; /* ===== WHITE THEME (default) ===== */ --bg: #EEF0F5; /* app backdrop behind the panel */ --panel: #FFFFFF; --card: #FFFFFF; --card-2: #F1F3F9; --panel-2: #F1F3F9; --line: #E5E8F0; --line-2: #D4D9E6; --text: #1A1D29; --text-dim: #5B6173; --text-faint: #9197A8; --primary: #2D7FF9; --primary-hover:#1C6FE8; --primary-soft: rgba(45,127,249,.08); --primary-tint: #E8F1FE; --on-primary: #FFFFFF; --link: #2D7FF9; --success: #16A34A; --success-soft:rgba(22,163,74,.10); --warning: #D97706; --warning-soft:rgba(217,119,6,.12); --danger: #DC2626; --danger-soft:rgba(220,38,38,.10); --info: #2D7FF9; --red:#2D7FF9; --red-dk:#1C6FE8; --red-soft:#2D7FF9; --accent:#2D7FF9; --good:#16A34A; --muted:#9197A8; --amber-row:#FFF7ED; /* chrome */ --sidebar-bg: #1E2233; /* graphite-indigo rail */ --sidebar-line: rgba(255,255,255,.08); --sidebar-text: #AEB4C9; --sidebar-hover: rgba(255,255,255,.08); --sidebar-active-bg: var(--primary); --sidebar-active-text:#FFFFFF; --sidebar-brand-bg: #181B29; --topbar-bg: #FFFFFF; --topbar-text: #1A1D29; --content-bg: #FFFFFF; /* the floating panel */ --content-grad: transparent; } /* --- DARK THEME --- */ /* ===== DARK THEME (black & graphite) ===== */ [data-theme="dark"]{ --bg: #0B0C0F; --panel: #16181D; --card: #16181D; --card-2: #1F2228; --panel-2: #1F2228; --line: #2A2E36; --line-2: #3A3F49; --text: #ECEEF2; --text-dim: #A2A8B4; --text-faint: #6B7280; --primary:#5B9DFF; --primary-hover:#7DB3FF; --primary-soft:rgba(91,157,255,.12); --primary-tint:rgba(91,157,255,.16); --on-primary:#0B0C0F; --link:#7DB3FF; --success:#34D399; --success-soft:rgba(52,211,153,.14); --warning:#FBBF24; --warning-soft:rgba(251,191,36,.14); --danger:#F87171; --danger-soft:rgba(248,113,113,.14); --info:#5B9DFF; --red:#5B9DFF; --red-dk:#3D7FE0; --red-soft:#5B9DFF; --accent:#5B9DFF; --good:#34D399; --amber-row:rgba(251,191,36,.08); --shadow:0 1px 2px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.40); --shadow-lg:0 8px 28px rgba(0,0,0,.55); --sidebar-bg:#000000; --sidebar-line:rgba(255,255,255,.06); --sidebar-text:#9AA0AC; --sidebar-hover:rgba(255,255,255,.07); --sidebar-active-bg:#2A2E36; --sidebar-active-text:#FFFFFF; --sidebar-brand-bg:#000000; --topbar-bg:#16181D; --topbar-text:#ECEEF2; --content-bg:#16181D; --content-grad:transparent; } /* ===== CEFLA RED THEME ===== */ [data-theme="red"]{ --bg: #F3EEEF; --panel: #FFFFFF; --card: #FFFFFF; --card-2: #F7F1F2; --panel-2: #F7F1F2; --line: #EAD9DC; --line-2: #DCC2C6; --text: #2A1418; --text-dim: #6E5458; --text-faint: #9E8488; --primary:#C8102E; --primary-hover:#A60D26; --primary-soft:rgba(200,16,46,.07); --primary-tint:#FBE9EC; --on-primary:#FFFFFF; --link:#C8102E; --success:#16A34A; --success-soft:rgba(22,163,74,.10); --warning:#D97706; --warning-soft:rgba(217,119,6,.12); --danger:#DC2626; --danger-soft:rgba(220,38,38,.10); --info:#C8102E; --red:#C8102E; --red-dk:#A60D26; --red-soft:#C8102E; --accent:#C8102E; --good:#16A34A; --amber-row:#FFF7ED; --sidebar-bg:#7A0C1E; /* deep cefla red */ --sidebar-line:rgba(255,255,255,.10); --sidebar-text:#E8C0C6; --sidebar-hover:rgba(255,255,255,.10); --sidebar-active-bg:#FFFFFF; --sidebar-active-text:#7A0C1E; --sidebar-brand-bg:#660A19; --topbar-bg:#FFFFFF; --topbar-text:#2A1418; --content-bg:#FFFFFF; --content-grad:transparent; } /* ===== BLUE THEME ===== */ [data-theme="blue"]{ --bg: #E9EEF6; --panel: #FFFFFF; --card: #FFFFFF; --card-2: #EEF3FA; --panel-2: #EEF3FA; --line: #DAE3F0; --line-2: #C2D0E6; --text: #0F1B2D; --text-dim: #4A5A72; --text-faint: #8595AC; --primary:#1565D8; --primary-hover:#0E54BC; --primary-soft:rgba(21,101,216,.07); --primary-tint:#E4EEFC; --on-primary:#FFFFFF; --link:#1565D8; --success:#16A34A; --success-soft:rgba(22,163,74,.10); --warning:#D97706; --warning-soft:rgba(217,119,6,.12); --danger:#DC2626; --danger-soft:rgba(220,38,38,.10); --info:#1565D8; --red:#1565D8; --red-dk:#0E54BC; --red-soft:#1565D8; --accent:#1565D8; --good:#16A34A; --amber-row:#FFF7ED; --sidebar-bg:#0B2E66; /* deep navy */ --sidebar-line:rgba(255,255,255,.10); --sidebar-text:#A9C0E4; --sidebar-hover:rgba(255,255,255,.10); --sidebar-active-bg:#FFFFFF; --sidebar-active-text:#0B2E66; --sidebar-brand-bg:#09254F; --topbar-bg:#FFFFFF; --topbar-text:#0F1B2D; --content-bg:#FFFFFF; --content-grad:transparent; } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{ font-family:Inter,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none;} button,input,select{font-family:inherit;font-size:14px;} h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;} /* ============================ APP SHELL (full-width topbar + sidebar below) === */ .shell{height:100vh;overflow:hidden;background:var(--bg);} /* -------- TOP BAR: full width, fixed at the very top, logo in far-left -------- */ .topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:60; background:var(--topbar-bg);display:flex;align-items:center;gap:16px;padding:0 20px 0 0; border-bottom:1px solid var(--line);} .tb-brand{display:flex;align-items:center;gap:11px;min-width:var(--sidebar-w);flex:0 0 auto; height:100%;padding:0 18px;text-decoration:none;white-space:nowrap;} .tb-brand img{height:26px;width:auto;max-width:34px;object-fit:contain;display:block;flex:0 0 auto;} .tb-brand b{font-size:15px;font-weight:600;color:var(--topbar-text);letter-spacing:-.01em;white-space:nowrap;} .sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px; border:none;background:none;color:var(--text-dim);cursor:pointer;border-radius:10px;flex:0 0 auto;} .sb-toggle:hover{background:var(--card-2);color:var(--text);} .tb-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--text-dim);} .tb-pagetitle{font-size:17px;font-weight:700;color:var(--primary);letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:6px;} .tb-pagetitle .tb-pt-label{font-size:12px;font-weight:600;color:var(--text-faint); text-transform:uppercase;letter-spacing:.06em;margin-right:6px;} .tb-user{font-weight:500;color:var(--topbar-text);} /* inline text-edit mode */ .tb-editbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px; border:1px solid var(--line);background:var(--card);color:var(--text-dim);cursor:pointer; border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;transition:all 120ms ease;} .tb-editbtn:hover{background:var(--card-2);color:var(--text);} .tb-editbtn.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);} .tedit{outline:1px dashed var(--primary);outline-offset:2px;border-radius:3px;cursor:text; transition:background 120ms ease,outline-color 120ms ease;min-width:8px;display:inline-block;} .tedit:hover{background:var(--primary-soft);} .tedit:focus{outline:2px solid var(--primary);background:var(--primary-soft);} .tedit-saving{outline-color:var(--warning);} .tedit-saved{outline:2px solid var(--success)!important;background:var(--success-soft)!important;} .tedit-failed{outline:2px solid var(--danger)!important;background:var(--danger-soft)!important;} .tb-build{font-size:11px;opacity:.55;margin-left:2px;} /* -------- LEFT SIDEBAR: starts BELOW the topbar, narrow icon rail -------- */ .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);z-index:50; background:var(--sidebar-bg);display:flex;flex-direction:column;overflow:hidden; transition:width 180ms cubic-bezier(.4,0,.2,1);} .sidebar:hover{width:var(--sidebar-w-open);box-shadow:6px 0 24px rgba(0,0,0,.18);} body.sb-locked .sidebar{width:var(--sidebar-w-open);} body.sb-locked .sidebar:hover{box-shadow:none;} /* labels hidden when collapsed; revealed on hover / when locked */ .sidebar .sb-label{opacity:0;transition:opacity 120ms ease;white-space:nowrap;} .sidebar:hover .sb-label, body.sb-locked .sidebar .sb-label{opacity:1;} .sidebar .sb-caret{opacity:0;} .sidebar:hover .sb-caret, body.sb-locked .sidebar .sb-caret{opacity:.7;} .sb-nav{flex:1 1 auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:3px; overflow-y:auto;overflow-x:hidden;} .sb-nav::-webkit-scrollbar{width:0;} /* a nav row: icon + label that fades in */ .sb-link, .sb-grp-trigger{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px; color:var(--sidebar-text);font-size:13.5px;font-weight:500;text-decoration:none; white-space:nowrap;width:100%;background:none;border:none;cursor:pointer;text-align:left; transition:background 120ms ease,color 120ms ease;} .sb-link:hover, .sb-grp-trigger:hover{background:var(--sidebar-hover);color:#fff;} .sb-link.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);} .sb-ic{width:20px;height:20px;flex:0 0 auto;} .sb-dis{opacity:.4;cursor:default;} .sb-dis:hover{background:none;color:var(--sidebar-text);} .sb-group{display:flex;flex-direction:column;} .sb-grp-trigger.active{color:#fff;} .sb-caret{margin-left:auto;transition:transform 160ms ease,opacity 120ms ease;} .sb-group.open .sb-caret{transform:rotate(180deg);} .sb-sub{display:none;flex-direction:column;gap:1px;padding:2px 0 4px;} .sb-group.open .sb-sub{display:flex;} .sb-sub a{display:block;padding:8px 12px 8px 46px;color:var(--sidebar-text);font-size:13px; text-decoration:none;border-radius:10px;white-space:nowrap;opacity:0; transition:background 120ms ease,color 120ms ease;} .sidebar:hover .sb-sub a, body.sb-locked .sidebar .sb-sub a{opacity:1;} .sb-sub a:hover{background:var(--sidebar-hover);color:#fff;} .sb-sub a.active{color:#fff;font-weight:600;} .sb-admin{margin:6px 12px 14px;flex:0 0 auto;} /* -------- MAIN: content panel, flush to chrome at top-left with a rounded corner -- */ .main{position:fixed;top:var(--topbar-h);left:var(--sidebar-w);right:0;bottom:0; display:flex;flex-direction:column;overflow:hidden;background:var(--sidebar-bg); transition:left 180ms cubic-bezier(.4,0,.2,1);padding:0;} body.sb-locked .main{left:var(--sidebar-w-open);} .main > .pagehead, .main > .content{background:var(--content-bg);} .main > .pagehead{border-radius:var(--radius-lg) 0 0 0;flex:0 0 auto;} .main > .content{flex:1 1 auto;overflow-y:auto;} .main > .content:first-child{border-radius:var(--radius-lg) 0 0 0;} /* unified hyperlink style across the app */ a.lnk, .content a:not(.btn):not(.logic-link):not(.logout-link):not(.pill):not(.tag){ color:var(--link, var(--primary)); text-decoration:none; } a.lnk:hover, .content a:not(.btn):not(.logic-link):not(.logout-link):not(.pill):not(.tag):hover{ text-decoration:underline; } /* page header: title sits inside the top of the floating panel */ .pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px; flex-wrap:wrap;padding:22px 28px 0;} .pagehead .title{font-size:21px;font-weight:600;color:var(--text);letter-spacing:-.015em;} .content{padding:16px 28px 28px;} /* SQUARE CORNERS for everything inside the content panel (cards, tiles, charts, inputs, buttons, tables, etc.). The panel's own top-left notch stays rounded because that radius is set on .main > .content (the panel), not its children. */ .content *, .pagehead *{border-radius:0 !important;} /* keep genuinely-round things round: status dots, avatars, online dot */ .content .lt-dot, .content .online-dot, .content .dot, .content [class*="circle"], .content img.avatar{border-radius:50% !important;} /* global search in the brand bar */ .topsearch{position:relative;flex:0 1 380px;max-width:420px;} .topsearch .ts-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%); color:var(--text-faint);pointer-events:none;} /* theme toggle button */ /* theme picker (4 themes) */ .theme-picker{position:relative;} .theme-pick-btn{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--line); background:var(--card);color:var(--text-dim);cursor:pointer;transition:all 120ms ease;} .theme-pick-btn:hover{background:var(--card-2);color:var(--text);border-color:var(--line-2);} .theme-menu{display:none;position:absolute;top:42px;right:0;min-width:160px;z-index:60; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-lg);padding:6px;} .theme-picker.open .theme-menu{display:block;} .theme-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px; background:none;border:none;cursor:pointer;font-size:13px;color:var(--text); border-radius:8px;text-align:left;transition:background 120ms ease;} .theme-opt:hover{background:var(--card-2);} .theme-opt.active{background:var(--primary-tint);color:var(--primary);font-weight:600;} .theme-opt .sw{width:16px;height:16px;border-radius:5px;flex:0 0 auto;border:1px solid rgba(0,0,0,.12);} .sw-white{background:linear-gradient(135deg,#fff 50%,#1E2233 50%);} .sw-dark{background:linear-gradient(135deg,#16181D 50%,#000 50%);} .sw-red{background:linear-gradient(135deg,#fff 50%,#7A0C1E 50%);} .sw-blue{background:linear-gradient(135deg,#fff 50%,#0B2E66 50%);} /* ============================ PORTLET TILES ============================ */ .portlet-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:14px;} .portlet{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:16px 18px;box-shadow:var(--shadow);grid-column:span 12;} .portlet.col-6{grid-column:span 6;}.portlet.col-4{grid-column:span 4;} .portlet.col-8{grid-column:span 8;}.portlet.col-3{grid-column:span 3;} .portlet > h3{font-size:14px;font-weight:500;margin-bottom:14px;} @media (max-width:1000px){.portlet.col-6,.portlet.col-4,.portlet.col-8,.portlet.col-3{grid-column:span 12;}} /* ============================ METRIC TILES ============================ */ .metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;margin-bottom:18px;} .metric{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:16px;box-shadow:var(--shadow);} /* metric tiles nested inside a portlet/card: soft fill, no border or shadow */ .portlet .metric, .card .metric, .metric.svc{background:var(--card-2);border:none;box-shadow:none;} .metric.wide{grid-column:span 2;min-width:260px;} .metric .l{font-size:12px;color:var(--text-dim);} .metric .v{font-size:26px;font-weight:500;margin-top:5px;letter-spacing:-.02em; font-variant-numeric:tabular-nums;} .metric .v.alert{color:var(--danger);} /* ---- Creatio-style KPI tiles: saturated color fill, big number, label on top ---- */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px;} .kpi{border-radius:14px;padding:16px 18px 18px;color:#fff;position:relative;overflow:hidden; display:flex;flex-direction:column;gap:6px;min-height:104px; box-shadow:0 1px 3px rgba(16,24,40,.10);} .kpi .kpi-label{font-size:13px;font-weight:600;opacity:.92;letter-spacing:.01em;} .kpi .kpi-value{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-top:auto;} .kpi .kpi-sub{font-size:11.5px;opacity:.85;font-weight:500;} .kpi.blue{background:linear-gradient(150deg,#2D7FF9,#1C6FE8);} .kpi.indigo{background:linear-gradient(150deg,#5B5BD6,#3F3FB0);} .kpi.green{background:linear-gradient(150deg,#22B07D,#159267);} .kpi.orange{background:linear-gradient(150deg,#F59E42,#E8801C);} .kpi.red{background:linear-gradient(150deg,#F26D6D,#DC4848);} .kpi.teal{background:linear-gradient(150deg,#2BB8C4,#1894A0);} .kpi.gray{background:linear-gradient(150deg,#8893A8,#6B7488);} /* ---- Scoro-style stat cards: light, bordered, balanced, even grid ---- */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;} .stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-height:96px; justify-content:flex-start;transition:box-shadow 140ms ease,border-color 140ms ease;} .stat-card:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2);} .stat-card-label{font-size:12px;font-weight:600;color:var(--text-dim); text-transform:uppercase;letter-spacing:.04em;} /* ---- Creatio-style underline tabs ---- */ .ctabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;} .ctabs a, .ctabs button{background:none;border:none;cursor:pointer;font-family:inherit; padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-dim); border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 120ms,border-color 120ms; text-decoration:none;} .ctabs a:hover, .ctabs button:hover{color:var(--text);} .ctabs a.active, .ctabs button.active{color:var(--primary);border-bottom-color:var(--primary);} /* ============================ BUTTONS ============================ */ .btn{background:var(--card);color:var(--text);border:1px solid var(--line-2); padding:8px 15px;border-radius:var(--radius-sm);cursor:pointer;font-weight:500; transition:background 120ms ease,border-color 120ms ease,transform 80ms ease;} .btn:hover{background:var(--card-2);border-color:var(--line-2);} .btn:active{transform:scale(.98);} .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary);} .btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);} .btn.sm{padding:5px 11px;font-size:12.5px;} .btn:disabled{opacity:.5;cursor:default;} .bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;} .bar .spacer{flex:1;} /* ============================ TABLES ============================ */ /* Default = airy (detail/summary pages). Add class "dense" to big data grids. */ table.grid{width:auto;border-collapse:collapse;font-size:13px;} table.grid th{text-align:left;color:var(--text-faint);font-weight:500;font-size:11.5px; letter-spacing:.03em;padding:13px 20px 13px 0;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--card);white-space:nowrap;} table.grid td{padding:13px 20px 13px 0;border-bottom:1px solid var(--line);white-space:nowrap;} table.grid.dense th{padding:8px 14px 8px 0;} table.grid.dense td{padding:7px 14px 7px 0;} table.grid.dense{font-size:12.5px;} table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:20px;} table.grid.dense td.num,table.grid.dense th.num{padding-right:14px;} table.grid tbody tr:nth-child(even) td{background:transparent;} table.grid tbody tr:hover td{background:var(--primary-soft);} table.grid tbody tr.row-selected td{background:var(--primary-tint)!important;} table.grid tr.flag td{background:var(--amber-row);} table.grid tr.flag td:first-child{border-left:2px solid var(--primary);} table.grid td{white-space:nowrap;max-width:460px;overflow:hidden;text-overflow:ellipsis;} table.grid td.wrap{white-space:pre-line;max-width:460px;} table.grid td.sel,table.grid th.sel{padding-right:10px;width:1%;} table.grid.topalign td,table.grid.topalign th{vertical-align:top;} table.grid td.itemcode{font-size:14px;font-weight:500;} table.grid td.itemcode a{color:var(--primary);} table.grid th.sortable a{color:var(--grid-head-text);display:inline-block;} table.grid th.sortable a:hover{color:var(--text);} .check{color:var(--success);font-size:11.5px;font-weight:500;} .pill{display:inline-block;background:var(--primary-tint);color:var(--primary); font-size:10.5px;font-weight:500;padding:2px 9px;border-radius:20px;} .muted{color:var(--text-dim);} /* ============================ FORM ELEMENTS ============================ */ input[type=text],input[type=password],input[type=number],select{ background:var(--card);border:1px solid var(--line-2);color:var(--text); padding:9px 11px;border-radius:var(--radius-sm);width:100%;transition:border-color 120ms,box-shadow 120ms;} input:focus,select:focus{outline:none;border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);} label.fld{display:block;margin-bottom:12px;} label.fld span{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:6px;} label.radio{font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;} label.radio input{margin:0;width:auto;} .flash{padding:11px 15px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px; border:1px solid transparent;} .flash.ok{background:var(--success-soft);border-color:var(--success);color:var(--success);} .flash.err{background:var(--danger-soft);border-color:var(--danger);color:var(--danger);} .flash.info{background:var(--card-2);border-color:var(--line-2);color:var(--text-dim);} /* ============================ LOGIN ============================ */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);} .login-card{background:var(--card);border:1px solid var(--line);border-radius:16px; padding:34px 30px;width:360px;box-shadow:var(--shadow-lg);} .login-card .lhead{text-align:center;margin-bottom:24px;} .login-card .lhead img{height:44px;margin-bottom:14px;} .login-card .lhead .t{font-size:16px;font-weight:500;} .login-card .lhead .s{font-size:12.5px;color:var(--text-dim);margin-top:3px;} .login-card .btn{width:100%;justify-content:center;margin-top:6px;} /* ============================ CARDS ============================ */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);} /* nested cards: no box-in-box — drop border, shadow, and background */ .card .card{border:none;box-shadow:none;background:transparent;padding:0;margin-bottom:12px;border-radius:0;} .card h3{font-size:15px;margin-bottom:14px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .card h4{font-size:13.5px;font-weight:500;} .row-actions{display:flex;gap:8px;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;} .tag{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--card-2);color:var(--text-dim);} .tag.on{background:var(--success-soft);color:var(--success);} .tag.off{background:var(--danger-soft);color:var(--danger);} .pill.warn{background:var(--warning-soft);color:var(--warning);} /* side-by-side cards (detail pages) */ /* item 5: charts/stats pack as many per row as the screen allows (responsive) */ .chart-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; align-items:start; margin-bottom:16px; } .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; align-items:start; margin-bottom:16px; } /* item 3: chart tiles have NO card border or background — chart sits on the page */ .chart-tile{ background:transparent; border:0; border-radius:0; padding:6px 4px; text-align:center; box-shadow:none; } .chart-tile h3{ font-size:13.5px; font-weight:500; margin-bottom:8px; } .chart-tile svg{ max-width:100%; height:auto; } .chart-tile p{ margin-top:6px; } .cols2{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;} .cols2 > .card{flex:1 1 0;min-width:300px;margin-bottom:14px;} .cols2 > .card table.grid{width:100%;} .cols2 > .card table.grid th,.cols2 > .card table.grid td{padding-right:10px;} .table-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;} .table-pair > .card{margin-bottom:14px;} .table-pair table.grid{width:100%;} @media (max-width:900px){.table-pair{grid-template-columns:1fr;}} /* description cell */ table.grid td.desccell{max-width:420px;} table.grid td.desccell .descline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px;} table.grid td.desccell .descline + .descline{margin-top:3px;border-top:1px dashed var(--line);padding-top:3px;} /* ============================ DEVICE CARDS ============================ */ .device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;} .device-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;color:var(--text);box-shadow:var(--shadow); transition:border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease;} .device-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg);} .device-thumb{height:120px;display:flex;align-items:center;justify-content:center; background:var(--card-2);overflow:hidden;} .device-thumb img{max-height:120px;max-width:100%;object-fit:contain;display:block;} .device-noimg{color:var(--text-faint);font-size:12px;} .device-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px;} .device-name{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.3;} .device-meta{font-size:12px;color:var(--text-dim);} .device-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px;} .device-stats{display:flex;flex-direction:column;gap:2px;margin-top:4px;} .device-stat{font-size:11.5px;color:var(--text-dim);} .device-stat .ds-pct{color:var(--text);font-weight:500;} .device-pick{display:flex;flex-wrap:wrap;gap:6px 18px;max-height:220px;overflow-y:auto;padding:4px 2px;} .device-pick .dpick{flex:0 0 auto;min-width:200px;} /* ============================ JDE WARNING BOXES ============================ */ .metrics-warn-row{display:flex;gap:12px;align-items:stretch;margin-bottom:16px;flex-wrap:nowrap;} .metrics-warn-row > .metrics{display:flex!important;flex-wrap:nowrap;gap:12px;flex:0 1 auto;} .metrics-warn-row > .metrics > .metric{min-width:120px;} .warn-card{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;cursor:pointer; border:1.5px solid var(--warning);border-radius:var(--radius); background:var(--warning-soft);padding:13px 16px;color:var(--text);transition:background 150ms ease;} .warn-card:hover{background:var(--warning-soft);filter:brightness(.97);} .warn-card.warn-red{border-color:var(--danger);background:var(--danger-soft);} .warn-card.warn-red .warn-sign{color:var(--danger);} .warn-card.warn-red .warn-text{color:var(--danger);} .jde-block-card{border-color:var(--warning)!important;background:var(--warning-soft);} .jde-block-card table.grid th{background:var(--warning-soft);color:var(--warning);} table.grid tr.manual-row td{background:var(--danger);color:#fff;border-color:rgba(255,255,255,.15);} table.grid tr.manual-row td a{color:#fff!important;text-decoration:underline;} table.grid tr.manual-row td .pill{background:#fff;color:var(--danger);} table.grid tr.manual-row:hover td{background:var(--danger);filter:brightness(.95);} .warn-sign{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center; color:var(--warning);animation:warnpulse 1.3s ease-in-out infinite;} .warn-sign svg{width:34px;height:34px;} .warn-text{font-weight:500;letter-spacing:.2px;font-size:13.5px;color:var(--warning);line-height:1.3;} @keyframes warnpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.86);}} .devline{line-height:1.4;white-space:nowrap;} .devline + .devline{margin-top:1px;} .goal-panel{background:var(--primary-soft);border:1px solid var(--primary);} .goal-panel h3{color:var(--primary);} /* floating copy bar */ .copybar{position:fixed;right:24px;bottom:24px;z-index:50;display:none;gap:8px;align-items:center; background:var(--card);border:1px solid var(--line-2);border-radius:24px;padding:9px 15px;box-shadow:var(--shadow-lg);} .copybar.show{display:flex;} .copybar .cnt{font-size:12.5px;color:var(--text-dim);} .pager{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;} /* ============================ GLOBAL SEARCH ============================ */ .topsearch input{width:100%;height:36px;background:var(--card-2);border:1px solid var(--line); border-radius:20px;color:var(--text);padding:0 14px 0 34px;font-size:13px;} .topsearch input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .gsresults{display:none;position:absolute;top:40px;left:0;right:0;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg); max-height:60vh;overflow-y:auto;z-index:40;} .gsh{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);padding:9px 14px 4px;} .gsi{display:block;padding:8px 14px;color:var(--text);font-size:13px;border-top:1px solid var(--line);} .gsi:first-of-type{border-top:none;} .gsi:hover{background:var(--card-2);} .gsi b{color:var(--primary);font-weight:500;} .gsi .gsd{display:block;font-size:11.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gsi .gsc{display:inline-block;background:var(--danger);color:#fff;font-size:9px;border-radius:4px;padding:0 4px;vertical-align:middle;} /* ============================ PRINT ============================ */ @media print{ .sidebar,.banner,.goal-panel,.metrics-warn-row,.bar,form .inc, #checkall,.btn,.warn-card,.device-pick,.theme-picker{display:none!important;} body,.content,.main,html{background:#fff!important;color:#000!important;margin:0;} .content{margin:0!important;padding:0!important;} table.grid{width:100%;border-collapse:collapse;} table.grid th{background:#eee!important;color:#000!important;border:1px solid #999;padding:4px 6px;font-size:11px;} table.grid td{color:#000!important;background:#fff!important;border:1px solid #ccc;padding:4px 6px;font-size:11px;} table.grid td a{color:#000!important;} table.grid tr.manual-row td{background:#fde2e2!important;color:#000!important;} table.grid tr.print-hide{display:none!important;} table.grid th:first-child,table.grid td:first-child{display:none;} .jde-block-card{display:block!important;border:1px solid #999!important;} .devline{color:#000!important;} } /* ============================ ADMIN TABS ============================ */ .tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;} .tabbar button{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim); font-size:13.5px;font-weight:500;padding:10px 16px;cursor:pointer;border-radius:0; transition:color 120ms ease,border-color 120ms ease;margin-bottom:-1px;} .tabbar button:hover{color:var(--text);} .tabbar button.active{color:var(--primary);border-bottom-color:var(--primary);} .tabpane{display:none;} .tabpane.active{display:block;} /* ===================== COMPUTATION LOGIC LINKS ===================== */ .logic-link{font-size:10.5px;font-weight:500;color:var(--text-faint); border:1px solid var(--line);border-radius:10px;padding:1px 8px;text-decoration:none; white-space:nowrap;transition:color 120ms,border-color 120ms;} .logic-link:hover{color:var(--primary);border-color:var(--primary);} .portlet h3 .logic-link{margin-left:8px;vertical-align:middle;} /* ===================== SIGN OUT LINK ===================== */ .logout-link{font-size:12px;font-weight:500;color:var(--text-dim); text-decoration:none;border:1px solid var(--line); border-radius:14px;padding:3px 12px;transition:color 120ms,border-color 120ms,background 120ms;white-space:nowrap;} .logout-link:hover{color:var(--primary);border-color:var(--primary);} .hide{display:none !important;} /* ===================== DATA DISCREPANCY HIGHLIGHT ===================== */ tr.anomaly-row > td{ background:var(--danger-soft, #FEF2F2); } tr.anomaly-row > td:first-child{ box-shadow: inset 3px 0 0 var(--danger, #DC2626); } .anomaly-flag{ display:inline-block; font-size:10px; font-weight:600; color:var(--danger,#DC2626); border:1px solid var(--danger,#DC2626); border-radius:10px; padding:0 6px; margin-left:6px; white-space:nowrap; vertical-align:middle; } /* ===================== NUMBERED DESCRIPTIONS + TOP-ALIGN ===================== */ td.topcell, th.topcell{ vertical-align:top; } .numdesc{ display:inline; } .numdesc-n{ color:var(--text-faint); font-variant-numeric:tabular-nums; margin-right:3px; } /* ===================== GRIDX — universal data-grid framework ===================== */ .gridx-wrap{ overflow:auto; max-width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); } /* data grids align to the content padding edges (same left/right as the page's search controls). When a grid sits inside a .card, strip the card's chrome and padding so the grid lines up flush with the other controls instead of being inset further. Applies to every grid via the shared classes. */ .content > .card:has(> .gridx-wrap), .content > .card:has(> .gx-bar){ border:none; box-shadow:none; border-radius:0; padding:0; background:transparent; margin-bottom:16px; } .gridx-wrap table.gridx{ margin:0; width:100%; border-collapse:separate; border-spacing:0; } .gridx-wrap table.gridx thead th{ position:sticky; top:0; z-index:2; background:var(--card-2); color:var(--text); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:9px 12px; border-bottom:1px solid var(--line-2); white-space:nowrap; } .gridx-wrap table.gridx tbody td{ padding:8px 12px; border-bottom:1px solid var(--line); font-size:13px; color:var(--text); } /* zebra striping + hover (reference look) */ .gridx-wrap table.gridx tbody tr:nth-child(even) > td{ background:color-mix(in srgb, var(--card-2) 45%, transparent); } .gridx-wrap table.gridx tbody tr:hover > td{ background:var(--primary-soft); } .gridx-wrap table.gridx tbody tr:last-child td{ border-bottom:0; } /* toolbar: rounded, sits in a light tray like the reference */ .gx-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:8px 10px; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); } .gx-bar .gx-search{ width:280px; max-width:100%; flex:0 0 auto; padding:6px 10px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--text); font-size:13px; } .gx-bar .gx-sizewrap{ font-size:12px; display:flex; align-items:center; gap:4px; color:var(--text-dim); } .gx-bar .gx-size{ padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--text); font-size:12px; } .gx-bar .gx-count{ font-size:12px; } .gx-pager{ display:flex; align-items:center; gap:6px; margin:8px 0; } .gx-filterrow th{ padding:3px 8px !important; background:var(--card); position:sticky; top:36px; z-index:1; border-bottom:1px solid var(--line); } .gx-colfilter{ padding:3px 6px; border:1px solid var(--line); border-radius:5px; background:var(--card); color:var(--text); } .gx-arrow{ font-size:10px; } table.gridx td{ white-space:nowrap; } /* export buttons emphasised a touch so PDF/CSV are easy to find */ .gx-bar .gx-csv, .gx-bar .gx-pdf, .gx-bar .gx-pop{ font-size:12px; } /* --- gridx column sizing & alignment (auto-balance) --- numeric columns: narrow + right-aligned; text columns: left-aligned, take the slack. */ .gridx-wrap table.gridx td.num, .gridx-wrap table.gridx th.num, .gridx-wrap table.gridx td.sortable.num{ text-align:right; white-space:nowrap; width:1%; } .gridx-wrap table.gridx td.sel, .gridx-wrap table.gridx th.sel{ width:34px; text-align:center; } /* first text column (usually a code/name) and any .grow column take remaining width */ .gridx-wrap table.gridx td, .gridx-wrap table.gridx th{ text-align:left; } .gridx-wrap table.gridx td.num, .gridx-wrap table.gridx th.num{ text-align:right; } .gridx-wrap table.gridx .grow{ width:auto; } /* highlighted rows must stay readable on hover (fix: text kept its color while bg changed) */ .gridx-wrap table.gridx tbody tr.flag > td, .gridx-wrap table.gridx tbody tr.anomaly-row > td{ background:var(--amber-row, #FEF3C7); color:#111418; } .gridx-wrap table.gridx tbody tr.anomaly-row > td{ background:var(--danger-soft, #FEF2F2); } .gridx-wrap table.gridx tbody tr.flag:hover > td, .gridx-wrap table.gridx tbody tr.anomaly-row:hover > td{ background:color-mix(in srgb, var(--danger, #DC2626) 16%, var(--card)); color:#111418; } .gridx-wrap table.gridx tbody tr.manual-row > td{ background:var(--danger,#DC2626); color:#fff; } .gridx-wrap table.gridx tbody tr.manual-row:hover > td{ background:color-mix(in srgb, var(--danger,#DC2626) 86%, #000); color:#fff; } .gridx-wrap table.gridx tbody tr.manual-row > td a{ color:#fff; } /* ============== ORDER DETAIL — FANCY PRINT (no section splits) ============== */ @media print{ .sidebar,.topbar,.gx-bar,.gx-pager{display:none!important;} .main{margin-top:0!important;margin-left:0!important;max-width:none!important;} /* keep each card whole across page breaks */ .card{break-inside:avoid;page-break-inside:avoid;border:1px solid #ccc!important; box-shadow:none!important;margin:0 0 12px!important;background:#fff!important;color:#000!important;} h3,h4{break-after:avoid;page-break-after:avoid;} /* the 2-wide shipment grid stacks one per row in print so cards stay whole */ .card h3,.card h4{color:#000!important;} .ship-grid{display:block!important;} /* force the collapsed travel/raw sections open so they print */ details{display:block!important;} details>summary{display:none!important;} details>*{display:block!important;} /* a clean printed header band */ .print-header{display:block!important;} } .print-header{display:none;} @page{margin:14mm 12mm;} /* ===================== FONT COLORS (admin-definable) + ROW-HIGHLIGHT READABILITY ===================== Standard grid/body text is BLACK by default; admin can override via Appearance. Conditional row highlights: SOFT-tint rows keep dark text; SOLID strong-color (red) rows force WHITE text so they're never invisible. */ :root{ --grid-text:#111418; --grid-head-text:#6b7280; --menu-text:#e8e8ef; } [data-theme="dark"]{ --grid-text:#e7e7ee; --grid-head-text:#aeb2bd; } /* base grid text uses the (admin-overridable) grid text color */ table.grid td{ color:var(--grid-text); } table.grid th, table.grid th a, table.gridx thead th, table.gridx thead th a, table.gridx thead th .gx-arrow{ color:var(--grid-head-text) !important; } /* SOFT-tint conditional highlights: keep text dark/readable on the light wash */ table.grid tr.anomaly-row > td, table.grid tr.flag td{ color:#111418 !important; } table.grid tr.anomaly-row > td a, table.grid tr.flag td a{ color:#1d4ed8 !important; } /* SOLID red highlight (manual-row / backorder): WHITE text, the one white-text case */ table.grid tr.manual-row td{ color:#fff !important; } table.grid tr.manual-row td a{ color:#fff !important; } table.grid tr.manual-row td .numdesc-n{ color:rgba(255,255,255,.8) !important; } /* gridx selection-highlighted rows keep dark text on the light tint */ table.gridx tbody tr td{ color:var(--grid-text); } /* online-users pill + "set as my home page" button in the brand bar */ .topbar .online-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); padding:2px 8px; border:1px solid var(--line); border-radius:12px; white-space:nowrap; } .topbar .online-dot{ width:7px; height:7px; border-radius:50%; background:var(--success,#22C55E); box-shadow:0 0 0 3px color-mix(in srgb, var(--success,#22C55E) 25%, transparent); } .topbar .sethome-link{ font-size:11.5px; font-weight:500; color:var(--text-dim); background:none; border:1px solid var(--line); border-radius:12px; padding:3px 10px; cursor:pointer; white-space:nowrap; transition:color 120ms, border-color 120ms; } .topbar .sethome-link:hover{ color:var(--primary); border-color:var(--primary); } @media print{ .topbar .online-pill, .topbar .sethome-link{ display:none!important; } } /* grey helper description under a page title (admin-editable) */ .pagehead .page-help{ font-size:13px; color:var(--text-dim); margin-top:5px; max-width:880px; line-height:1.5; } /* Body-text admin color governs CONTENT prose + grid body (not chrome/inputs) */ :root{ --content-text: var(--text); } .content{ color: var(--content-text); }