/* ========================================================================== Expert Movers — Design System ========================================================================== */ :root{ --em-navy:#16324f; --em-navy-dark:#0f2439; --em-navy-light:#24466e; --em-accent:#2f6fed; --em-accent-dark:#1e56d1; --em-accent-soft:#eaf1ff; --em-bg:#f3f5f9; --em-surface:#ffffff; --em-border:#e6e9ef; --em-border-soft:#f0f2f6; --em-text:#1c2536; --em-text-muted:#6b7686; --em-text-faint:#98a2b3; --em-radius-sm:8px; --em-radius:12px; --em-radius-lg:16px; --em-shadow-sm:0 1px 2px rgba(20,30,50,.05); --em-shadow:0 4px 14px rgba(20,30,50,.06); --em-shadow-lg:0 10px 30px rgba(20,30,50,.10); --em-transition:.16s cubic-bezier(.4,0,.2,1); } /* Dark mode — toggled via [data-theme="dark"] on , persisted client-side */ [data-theme="dark"]{ --em-bg:#10151f; --em-surface:#1a2130; --em-border:#2a3345; --em-border-soft:#232c3d; --em-text:#e4e8f0; --em-text-muted:#9aa5b8; --em-text-faint:#6b7686; --em-accent-soft:#1c2b4d; --em-shadow-sm:0 1px 2px rgba(0,0,0,.3); --em-shadow:0 4px 14px rgba(0,0,0,.35); --em-shadow-lg:0 10px 30px rgba(0,0,0,.45); } [data-theme="dark"] .em-search input{background:#141a26;} [data-theme="dark"] table.em-table th{background:#141a26;} [data-theme="dark"] .form-control, [data-theme="dark"] .form-select{background:#141a26; color:var(--em-text); border-color:var(--em-border);} [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus{background:#141a26; color:var(--em-text);} [data-theme="dark"] .btn-light{background:#232c3d; color:var(--em-text); border-color:var(--em-border);} [data-theme="dark"] .btn-outline-secondary{color:var(--em-text-muted); border-color:var(--em-border);} [data-theme="dark"] .dropdown-menu{background:var(--em-surface); border-color:var(--em-border);} [data-theme="dark"] .dropdown-item{color:var(--em-text);} [data-theme="dark"] .dropdown-item:hover{background:var(--em-border-soft); color:var(--em-text);} [data-theme="dark"] .list-group-item{background:var(--em-surface); color:var(--em-text); border-color:var(--em-border);} /* Accent color themes — pick one via [data-accent="..."] on , set company-wide from Settings, or per-user if you later want to expose it individually */ [data-accent="emerald"]{ --em-accent:#059669; --em-accent-dark:#047857; --em-accent-soft:#e3f9ec; } [data-accent="purple"]{ --em-accent:#7c3aed; --em-accent-dark:#6d28d9; --em-accent-soft:#f1e9ff; } [data-accent="rose"]{ --em-accent:#e11d48; --em-accent-dark:#be123c; --em-accent-soft:#ffe4e9; } [data-accent="amber"]{ --em-accent:#d97706; --em-accent-dark:#b45309; --em-accent-soft:#fff1e0; } [data-accent="slate"]{ --em-accent:#475569; --em-accent-dark:#334155; --em-accent-soft:#e9edf2; } /* Compact layout density — tighter spacing/type for fitting more on one screen */ [data-density="compact"] .em-content{padding:16px;} [data-density="compact"] .em-card{padding:13px;} [data-density="compact"] .form-section{padding:13px; margin-bottom:11px;} [data-density="compact"] table.em-table td{padding:7px 10px;} [data-density="compact"] table.em-table th{padding:7px 10px;} [data-density="compact"] .stat2{padding:11px; gap:10px;} [data-density="compact"] .stat2 .icon-circle{width:36px; height:36px; font-size:1rem;} [data-density="compact"] .stat2 .num{font-size:1.15rem;} [data-density="compact"] .section-label{margin:14px 0 6px;} [data-density="compact"] body{font-size:.87rem;} [data-density="compact"] .em-topbar{padding:8px 20px;} *{box-sizing:border-box} html{scroll-behavior:smooth;} body{ background:var(--em-bg); color:var(--em-text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-size:.94rem; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background var(--em-transition), color var(--em-transition); } h1,h2,h3,h4,h5,h6{color:var(--em-text); font-weight:700; letter-spacing:-.01em;} a{color:var(--em-accent); text-decoration:none;} a:hover{color:var(--em-accent-dark);} /* ---------- Shell / Layout ---------- */ .em-shell{display:flex; min-height:100vh;} .em-sidebar{ width:250px; background:linear-gradient(180deg,var(--em-navy),var(--em-navy-dark)); color:#dbe4f5; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:thin; } .em-sidebar::-webkit-scrollbar{width:5px;} .em-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:4px;} .em-sidebar-brand{ padding:20px 22px; font-weight:700; font-size:1.08rem; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; } .em-sidebar-brand i{font-size:1.3rem; color:#7cb2ff;} .em-nav{padding:12px 10px 40px;} .em-nav a{ display:flex; align-items:center; gap:11px; padding:9px 12px; margin:1px 0; color:#c3d0e8; text-decoration:none; font-size:.87rem; border-radius:9px; transition:background var(--em-transition), color var(--em-transition); } .em-nav a i{width:18px; text-align:center; font-size:.95rem; opacity:.85;} .em-nav a:hover{background:rgba(255,255,255,.08); color:#fff;} .em-nav a.active{background:var(--em-accent); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(47,111,237,.4);} .em-nav a.active i{opacity:1;} .em-nav-group{padding:16px 12px 6px; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:#6f86ae; font-weight:700;} .em-sidebar-footer{padding:16px 20px; margin-top:10px; border-top:1px solid rgba(255,255,255,.08); font-size:.72rem; color:#7e93bc; text-align:center;} .em-sidebar-footer .heart{color:#ef5b7a;} .em-main{flex:1; min-width:0; display:flex; flex-direction:column;} .em-topbar{ display:flex; align-items:center; gap:14px; padding:12px 24px; background:var(--em-surface); border-bottom:1px solid var(--em-border); position:sticky; top:0; z-index:100; } .em-burger{display:none; background:none; border:none; font-size:1.35rem; color:var(--em-text); cursor:pointer; padding:4px 6px; border-radius:6px;} .em-burger:hover{background:var(--em-bg);} .em-search{flex:1; max-width:440px; position:relative;} .em-search i{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--em-text-faint); font-size:.85rem;} .em-search input{ width:100%; padding:8px 14px 8px 36px; border-radius:22px; border:1px solid var(--em-border); background:var(--em-bg); font-size:.87rem; transition:border-color var(--em-transition), box-shadow var(--em-transition); } .em-search input:focus{outline:none; border-color:var(--em-accent); box-shadow:0 0 0 3px var(--em-accent-soft); background:#fff;} .em-topbar-actions{margin-left:auto; display:flex; gap:8px; align-items:center;} .em-content{padding:24px; flex:1; max-width:1400px; width:100%; margin:0 auto;} .em-fade{animation:emFadeIn .22s ease;} @keyframes emFadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}} /* ---------- Cards ---------- */ .em-card{background:var(--em-surface); border:1px solid var(--em-border); border-radius:var(--em-radius); padding:20px; box-shadow:var(--em-shadow-sm);} .em-stat{background:var(--em-surface); border:1px solid var(--em-border); border-radius:var(--em-radius); padding:16px 18px;} .em-stat .num{font-size:1.6rem; font-weight:700; color:var(--em-navy);} .em-stat .label{font-size:.8rem; color:var(--em-text-muted); text-transform:uppercase; letter-spacing:.03em;} /* ---------- Tables ---------- */ table.em-table{width:100%; background:var(--em-surface); font-size:.88rem;} table.em-table th{background:var(--em-bg); font-size:.72rem; text-transform:uppercase; color:var(--em-text-muted); letter-spacing:.04em; font-weight:700; border-bottom:1px solid var(--em-border); padding:10px 12px;} table.em-table td{padding:11px 12px; border-bottom:1px solid var(--em-border-soft); vertical-align:middle;} table.em-table tbody tr{transition:background var(--em-transition);} table.em-table tbody tr:hover{background:#fafbfd;} table.em-table tbody tr:last-child td{border-bottom:none;} /* ---------- Buttons & Forms ---------- */ .btn{border-radius:8px; font-weight:500; font-size:.87rem; transition:all var(--em-transition);} .btn-primary{background:var(--em-accent); border-color:var(--em-accent);} .btn-primary:hover{background:var(--em-accent-dark); border-color:var(--em-accent-dark); transform:translateY(-1px); box-shadow:0 4px 10px rgba(47,111,237,.3);} .btn-sm{border-radius:7px;} .form-control, .form-select{ border-radius:8px; border:1px solid var(--em-border); font-size:.88rem; padding:8px 12px; transition:border-color var(--em-transition), box-shadow var(--em-transition); } .form-control:focus, .form-select:focus{border-color:var(--em-accent); box-shadow:0 0 0 3px var(--em-accent-soft);} .form-label{font-weight:600; font-size:.82rem; color:var(--em-text); margin-bottom:5px;} .form-check-input:checked{background-color:var(--em-accent); border-color:var(--em-accent);} /* ---------- Form sections ---------- */ .form-section{ border:1px solid var(--em-border); border-left:3px solid var(--em-accent); border-radius:var(--em-radius); padding:20px; margin-bottom:16px; background:var(--em-surface); box-shadow:var(--em-shadow-sm); } .form-section h6{text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; color:var(--em-text-muted); margin-bottom:16px; font-weight:700; display:flex; align-items:center; gap:7px;} .form-actions-bar{ position:sticky; bottom:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); padding:14px 0; margin-top:6px; border-top:1px solid var(--em-border); display:flex; gap:10px; z-index:20; } /* ---------- Dashboard ---------- */ .dash-header{background:linear-gradient(135deg,var(--em-navy),var(--em-navy-light)); border-radius:var(--em-radius-lg); padding:26px 28px; color:#fff; margin-bottom:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; box-shadow:var(--em-shadow-lg);} .dash-header h4{margin:0; font-weight:700; color:#fff;} .dash-header .sub{color:#b9c9e8; font-size:.88rem; margin-top:3px;} .quick-actions{display:flex; gap:9px; flex-wrap:wrap;} .quick-actions a{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); padding:8px 15px; border-radius:9px; font-size:.84rem; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:all var(--em-transition);} .quick-actions a:hover{background:rgba(255,255,255,.26); color:#fff; transform:translateY(-1px);} .section-label{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--em-text-faint); font-weight:700; margin:24px 0 10px;} .section-label:first-child{margin-top:0;} .stat2{background:var(--em-surface); border:1px solid var(--em-border); border-radius:var(--em-radius); padding:16px; display:flex; align-items:center; gap:14px; transition:transform var(--em-transition), box-shadow var(--em-transition); height:100%; box-shadow:var(--em-shadow-sm);} .stat2:hover{transform:translateY(-2px); box-shadow:var(--em-shadow);} .stat2 .icon-circle{width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0;} .stat2 .num{font-size:1.35rem; font-weight:700; color:var(--em-text); line-height:1.15;} .stat2 .label{font-size:.76rem; color:var(--em-text-muted); margin-top:1px;} .icon-blue{background:#e7f0ff; color:#2f6fed;} .icon-purple{background:#f1e9ff; color:#7c3aed;} .icon-green{background:#e3f9ec; color:#16a34a;} .icon-teal{background:#e1f6f6; color:#0d9488;} .icon-orange{background:#fff1e0; color:#ea7c1f;} .icon-gray{background:#eef0f3; color:#4b5563;} .icon-red{background:#fdeaea; color:#dc2626;} .job-row-card{border:1px solid var(--em-border); border-radius:var(--em-radius-sm); padding:12px 14px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; transition:background var(--em-transition);} .job-row-card:hover{background:#fafbfd;} /* ---------- Login ---------- */ .login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--em-navy),var(--em-navy-dark)); padding:20px;} .login-card{background:var(--em-surface); border-radius:var(--em-radius-lg); padding:38px; width:390px; max-width:100%; box-shadow:var(--em-shadow-lg);} /* ---------- PJAX fast-nav loading indicator ---------- */ body.pjax-loading::before{ content:''; position:fixed; top:0; left:0; height:3px; width:100%; background:var(--em-accent); z-index:2000; animation:pjaxbar .7s ease-in-out infinite alternate; } @keyframes pjaxbar{from{opacity:.4; transform:scaleX(.25); transform-origin:left;} to{opacity:1; transform:scaleX(1); transform-origin:left;}} /* ---------- Mobile ---------- */ @media (max-width: 900px){ .em-sidebar{position:fixed; left:-260px; z-index:1000; transition:left .22s ease; box-shadow:0 0 24px rgba(0,0,0,.35);} .em-sidebar.open{left:0;} .em-burger{display:block;} .em-search{max-width:none;} .em-content{padding:16px;} .dash-header{padding:20px;} table.em-table{font-size:.82rem;} .quick-actions a{padding:7px 12px; font-size:.8rem;} } @media (max-width: 576px){ .em-topbar{padding:10px 14px; gap:10px;} .em-content{padding:12px;} .form-section{padding:15px;} .em-card{padding:15px;} }