59 lines
4.6 KiB
CSS
59 lines
4.6 KiB
CSS
:root {
|
|
--jc-ink: #172033;
|
|
--jc-muted: #667085;
|
|
--jc-primary: #635bff;
|
|
--jc-primary-dark: #5148e5;
|
|
--jc-surface: #ffffff;
|
|
--jc-bg: #f6f7fb;
|
|
--jc-border: #e8eaf2;
|
|
--jc-shadow: 0 14px 38px rgba(20, 28, 55, .08);
|
|
}
|
|
.brand-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#fff;padding:4px}.brand-preview{max-width:220px;max-height:90px;object-fit:contain;border:1px solid var(--jc-border);border-radius:10px;padding:8px;background:#fff}.nav-search{max-width:520px;width:100%}.technician-bottom-nav{display:none}
|
|
* { box-sizing: border-box; }
|
|
body { background: var(--jc-bg); color: var(--jc-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; }
|
|
a { color: var(--jc-primary); }
|
|
.navbar { background: linear-gradient(135deg, #1d2540 0%, #302c68 58%, #5148e5 100%) !important; min-height: 68px; box-shadow: 0 4px 18px rgba(31, 36, 76, .18); }
|
|
.navbar-brand { letter-spacing: -.035em; font-size: 1.2rem; }
|
|
.sidebar-link { color: #667085; border-radius: 10px; padding: .7rem .85rem; font-weight: 500; transition: .18s ease; }
|
|
.sidebar-link:hover { background: #f0efff; color: var(--jc-primary); transform: translateX(2px); }
|
|
.sidebar-link.active { background: #eeecff; color: var(--jc-primary); font-weight: 700; }
|
|
main { min-width: 0; }
|
|
.card { border: 1px solid var(--jc-border); border-radius: 16px; box-shadow: var(--jc-shadow); }
|
|
.card-header, .card-body { border-radius: inherit; }
|
|
.card h1, .card h2, .card h3 { letter-spacing: -.03em; }
|
|
.metric-card { border: 0; overflow: hidden; position: relative; box-shadow: var(--jc-shadow); }
|
|
.metric-card::after { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; right: -28px; top: -28px; background: rgba(99, 91, 255, .1); }
|
|
.metric-card .display-6 { color: var(--jc-ink); letter-spacing: -.06em; }
|
|
.btn-primary { background: var(--jc-primary); border-color: var(--jc-primary); box-shadow: 0 8px 18px rgba(99, 91, 255, .22); }
|
|
.btn-primary:hover, .btn-primary:focus { background: var(--jc-primary-dark); border-color: var(--jc-primary-dark); }
|
|
.btn-outline-primary { color: var(--jc-primary); border-color: #bdb8ff; }
|
|
.btn-outline-primary:hover { background: var(--jc-primary); border-color: var(--jc-primary); }
|
|
.form-control, .form-select { border-color: #dfe2ec; border-radius: 10px; padding: .68rem .8rem; }
|
|
.form-control:focus, .form-select:focus { border-color: #9b95ff; box-shadow: 0 0 0 .22rem rgba(99, 91, 255, .12); }
|
|
.table { --bs-table-bg: transparent; }
|
|
.table thead th { color: var(--jc-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border-bottom-color: var(--jc-border); }
|
|
.table tbody td { border-bottom-color: #f0f1f5; vertical-align: middle; }
|
|
.badge { border-radius: 999px; padding: .45em .72em; font-weight: 650; }
|
|
.login-card { max-width: 440px; margin: 10vh auto; border: 0; box-shadow: 0 24px 70px rgba(31, 36, 76, .16); }
|
|
.login-card::before { content: ""; display: block; height: 7px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, #635bff, #9b95ff); }
|
|
.client-tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding: .45rem; margin-bottom: 1.35rem; background: #fff; border: 1px solid var(--jc-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 28, 55, .05); }
|
|
.client-tab { border: 0; background: transparent; border-radius: 10px; color: var(--jc-muted); padding: .68rem 1rem; font-weight: 650; transition: .18s ease; }
|
|
.client-tab:hover { background: #f2f1ff; color: var(--jc-primary); }
|
|
.client-tab.active { background: var(--jc-primary); color: #fff; box-shadow: 0 6px 14px rgba(99, 91, 255, .2); }
|
|
.client-section-hidden { display: none !important; }
|
|
.section-kicker { color: var(--jc-primary); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
|
|
@media (max-width: 767.98px) {
|
|
.desktop-table { display: none; }
|
|
.mobile-card { display: block; }
|
|
.sidebar-link { padding: .75rem .8rem; min-height:44px; }
|
|
.btn, .form-control, .form-select { min-height:44px; }
|
|
.technician-bottom-nav { display:flex; position:fixed; z-index:1030; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--jc-border); box-shadow:0 -8px 24px rgba(20,28,55,.12); padding:.45rem; justify-content:space-around; }
|
|
.technician-bottom-nav a { color:var(--jc-primary); font-weight:700; text-decoration:none; padding:.55rem .8rem; }
|
|
body:has(.technician-bottom-nav) { padding-bottom:74px; }
|
|
.nav-search { max-width:none; }
|
|
main { padding-bottom:1.5rem; }
|
|
|
|
.client-tab { white-space: nowrap; padding: .62rem .8rem; }
|
|
}
|
|
@media (min-width: 768px) { .mobile-card { display: none; } }
|