:root{
  --bg:#F5F4F2; --surface:#FFFFFF; --surface2:#FAFAF9; --surface3:#EFEEEB;
  --line:#E4E3DF; --line2:#D3D2CD;
  --ink:#1C2124; --ink2:#5E6467; --ink3:#8C9194;
  --accent:#F2600C; --accent-ink:#B84703; --accent-soft:#FCEAD9;
  --deep:#1C2124;
  --amber:#8A5B12; --amber-soft:#FBF0DD;
  --blue:#1C6A8C; --blue-soft:#E4EFF4;
  --green:#137A55; --green-soft:#E1F1EA;
  --clay:#AE4A3C; --clay-soft:#F8E8E5;
  --shadow:0 1px 2px rgba(20,24,26,.05), 0 8px 24px -16px rgba(20,24,26,.2);
}
:root[data-jc-theme="dark"]{
  --bg:#101315; --surface:#181C1F; --surface2:#1D2225; --surface3:#262B2E;
  --line:#2A3033; --line2:#3A4145;
  --ink:#ECEEEF; --ink2:#9AA0A3; --ink3:#71777B;
  --accent:#FF7A2E; --accent-ink:#FF8B47; --accent-soft:#33200F;
  --deep:#14181A;
  --amber:#D9A25A; --amber-soft:#2C2317;
  --blue:#6FB6D4; --blue-soft:#14262E;
  --green:#4FC79B; --green-soft:#10302A;
  --clay:#DE8A7C; --clay-soft:#2E1C19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.6);
}

body.jc-v2{margin:0;background:var(--bg);color:var(--ink);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.jc-v2 *{box-sizing:border-box;}
/* :not(.btn) - otherwise this beats Bootstrap's own .btn-primary/.btn-danger/
   etc. color on specificity (.jc-v2 a > .btn-primary alone), turning every
   <a class="btn ..."> into accent-orange text on its own colored button
   background instead of the button variant's intended white/grey text. */
.jc-v2 a:not(.btn){color:var(--accent-ink);text-decoration:none;}
.jc-v2 a:not(.btn):hover{color:var(--ink);}
.jc-v2 input,.jc-v2 select,.jc-v2 textarea,.jc-v2 button{font-family:inherit;font-size:inherit;color:inherit;}
.jc-v2 input::placeholder,.jc-v2 textarea::placeholder{color:var(--ink3);}
.jc-v2 input:focus,.jc-v2 select:focus,.jc-v2 textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.jc-v2 ::-webkit-scrollbar{width:10px;height:10px;}
.jc-v2 ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:3px solid transparent;background-clip:content-box;}

.jc-shell{min-height:100vh;display:flex;background:var(--bg);}

.jc-sidebar{width:248px;flex:0 0 auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .15s ease;}
.jc-sidebar.jc-collapsed{width:72px;}
.jc-sidebar-head{height:64px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);}
.jc-collapsed .jc-sidebar-head{justify-content:center;padding:0;}
.jc-sidebar-head .jc-logo-full{height:22px;width:auto;object-fit:contain;object-position:left;}
.jc-sidebar-head .jc-logo-mark{height:26px;width:auto;object-fit:contain;}
.jc-sidebar-head .jc-version{margin-left:auto;font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink3);border:1px solid var(--line);padding:3px 6px;border-radius:5px;}
.jc-collapsed .jc-sidebar-head .jc-version{display:none;}

.jc-nav{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px;}
.jc-nav-heading{padding:16px 10px 6px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;}
.jc-collapsed .jc-nav-heading{padding:0;height:1px;background:var(--line);margin:12px 8px 10px;font-size:0;}
.jc-nav-link{display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 10px;white-space:nowrap;border:none;border-radius:10px;background:transparent;color:var(--ink2);font-size:14px;font-weight:450;cursor:pointer;text-align:left;width:100%;text-decoration:none;}
.jc-collapsed .jc-nav-link{justify-content:center;padding:8px;}
.jc-nav-link:hover{background:var(--surface3);color:var(--ink);}
.jc-nav-link.jc-active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}
.jc-nav-link i{width:17px;font-size:14.5px;text-align:center;opacity:.9;}
.jc-nav-link .jc-count{margin-left:auto;font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink2);background:var(--surface3);padding:2px 7px;border-radius:20px;}
.jc-collapsed .jc-nav-link .jc-count,.jc-collapsed .jc-nav-link span{display:none;}

.jc-sidebar-foot{padding:10px;border-top:1px solid var(--line);}
.jc-license-mini{margin-top:8px;padding:12px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);}
.jc-license-mini .jc-license-line{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink2);}
.jc-license-mini .jc-license-line i{color:var(--accent);}
.jc-license-mini .jc-license-sub{margin-top:6px;font-size:11.5px;color:var(--ink3);line-height:1.5;}
.jc-collapse-btn{display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 10px;white-space:nowrap;border:none;border-radius:10px;background:transparent;color:var(--ink2);font-size:13.5px;cursor:pointer;width:100%;text-align:left;}
.jc-collapse-btn:hover{background:var(--surface3);}
.jc-collapse-btn i{width:17px;text-align:center;}
.jc-collapsed .jc-collapse-btn{justify-content:center;}
.jc-collapsed .jc-collapse-btn span{display:none;}

.jc-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.jc-header{height:64px;flex:0 0 auto;position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;}
.jc-header-title{font-size:16px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jc-header-sub{font-size:12.5px;color:var(--ink2);}

.jc-theme-toggle{position:relative;flex:0 0 auto;width:56px;height:30px;padding:0;border:1px solid var(--line2);border-radius:20px;background:var(--surface2);cursor:pointer;transition:background .18s ease;margin-left:auto;}
.jc-theme-toggle .jc-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink2);transition:transform .18s ease;}
[data-jc-theme="dark"] .jc-theme-toggle .jc-knob{transform:translateX(26px);}

.jc-content{padding:24px;flex:1;}

.jc-stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
.jc-stat-card .jc-stat-label{font-size:12.5px;color:var(--ink2);}
.jc-stat-card .jc-stat-value{font-size:26px;font-weight:600;letter-spacing:-0.02em;margin-top:6px;}

.jc-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.jc-license-alert{border:1px solid var(--line2);border-radius:12px;padding:14px 18px;margin:16px 24px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--amber-soft);color:var(--ink);}
.jc-license-alert.jc-expired{background:var(--clay-soft);}

.jc-v2 .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);}
.jc-v2 .card-header{background:var(--surface2);border-bottom:1px solid var(--line);color:var(--ink);}
.jc-v2 .card-body{color:var(--ink);}
.jc-v2 .card-footer{background:var(--surface2);border-top:1px solid var(--line);}
.jc-v2 .modal-content{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);color:var(--ink);}
.jc-v2 .modal-header{border-bottom:1px solid var(--line);}
.jc-v2 .modal-footer{border-top:1px solid var(--line);}
.jc-v2 .form-label{color:var(--ink2);font-weight:500;}
.jc-v2 .form-control,.jc-v2 .form-select{background:var(--surface);color:var(--ink);border:1px solid var(--line2);}
.jc-v2 .form-control:focus,.jc-v2 .form-select:focus{background:var(--surface);color:var(--ink);border-color:var(--accent);box-shadow:none;}

.jc-content-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}

.jc-view-toggle{display:flex;align-items:center;border:1px solid var(--line2);border-radius:9px;overflow:hidden;}
.jc-view-toggle a{display:flex;align-items:center;gap:7px;min-height:34px;padding:5px 13px;font-size:13px;font-weight:500;color:var(--ink3);text-decoration:none;background:transparent;}
.jc-view-toggle a+a{border-left:1px solid var(--line2);}
.jc-view-toggle a.jc-active{background:var(--surface3);color:var(--ink);}

.jc-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start;}
.jc-board-col{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px;}
.jc-board-col-head{display:flex;align-items:center;gap:9px;padding:2px 4px;}
.jc-board-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.jc-board-col-label{font-size:13.5px;font-weight:600;color:var(--ink);}
.jc-board-col-count{margin-left:auto;font-family:'Geist Mono',monospace;font-size:11.5px;color:var(--ink3);}
.jc-board-card{text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:13px;display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;}
.jc-board-card:hover{border-color:var(--line2);color:inherit;}
.jc-board-card-top{display:flex;align-items:center;gap:8px;}
.jc-board-card-id{font-family:'Geist Mono',monospace;font-size:12px;color:var(--accent-ink);}
.jc-board-card-date{margin-left:auto;font-size:11px;color:var(--ink3);font-weight:500;}
.jc-board-card-customer{font-size:13.5px;font-weight:500;color:var(--ink);}
.jc-board-card-item{font-size:12.5px;color:var(--ink2);line-height:1.45;}
.jc-board-card-foot{display:flex;align-items:center;gap:8px;padding-top:4px;border-top:1px solid var(--line);}
.jc-board-avatar{width:22px;height:22px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--ink2);flex:0 0 auto;}
.jc-board-card-tech{font-size:12px;color:var(--ink3);}
.jc-board-card-price{margin-left:auto;font-family:'Geist Mono',monospace;font-size:12px;color:var(--ink2);}

/* Bootstrap table + DataTables ship their own light-only styling and know
   nothing about --bg/--surface/--ink, so dark mode otherwise leaves a white
   table (and its "Show/Search"/pagination toolbar) floating on a dark page. */
[data-jc-theme="dark"] .jc-v2 .table{
  --bs-table-bg:var(--surface);
  --bs-table-color:var(--ink);
  --bs-table-border-color:var(--line);
  --bs-table-striped-bg:var(--surface2);
  --bs-table-striped-color:var(--ink);
  --bs-table-hover-bg:var(--surface3);
  --bs-table-hover-color:var(--ink);
  --bs-table-active-bg:var(--surface3);
  --bs-table-active-color:var(--ink);
  color:var(--ink);
  border-color:var(--line);
}
[data-jc-theme="dark"] .jc-v2 .dataTables_wrapper,
[data-jc-theme="dark"] .jc-v2 .dataTables_length,
[data-jc-theme="dark"] .jc-v2 .dataTables_filter,
[data-jc-theme="dark"] .jc-v2 .dataTables_info,
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate{color:var(--ink);}
[data-jc-theme="dark"] .jc-v2 .dataTables_length select,
[data-jc-theme="dark"] .jc-v2 .dataTables_filter input{
  background:var(--surface);color:var(--ink);border:1px solid var(--line2);
}
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button{
  color:var(--ink2) !important;background:transparent !important;border-color:transparent !important;
}
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button:hover{
  color:var(--ink) !important;background:var(--surface3) !important;border-color:var(--line2) !important;
}
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button.current,
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button.current:hover{
  color:#fff !important;background:var(--accent) !important;border-color:var(--accent) !important;
}
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button.disabled,
[data-jc-theme="dark"] .jc-v2 .dataTables_paginate .paginate_button.disabled:hover{
  color:var(--ink3) !important;background:transparent !important;border-color:transparent !important;
}

/* Same problem, different shape: Bootstrap's .text-muted/.text-secondary
   utilities force a color with !important that was only ever tuned for
   light mode. */
[data-jc-theme="dark"] .jc-v2 .text-muted,
[data-jc-theme="dark"] .jc-v2 .text-secondary{color:var(--ink3) !important;}

/* Bootstrap's contextual .alert-* variants are light-pastel-only (subtle
   bg + matching dark text via CSS vars tuned for a white page) - readable
   on their own, but a jarring light island against the dark shell. */
[data-jc-theme="dark"] .jc-v2 .alert-success{--bs-alert-bg:var(--green-soft);--bs-alert-color:var(--green);--bs-alert-border-color:var(--green);}
[data-jc-theme="dark"] .jc-v2 .alert-danger{--bs-alert-bg:var(--clay-soft);--bs-alert-color:var(--clay);--bs-alert-border-color:var(--clay);}
[data-jc-theme="dark"] .jc-v2 .alert-warning{--bs-alert-bg:var(--amber-soft);--bs-alert-color:var(--amber);--bs-alert-border-color:var(--amber);}

/* select2 (customer/received-items pickers on Create Job Card) ships its
   own light-only theme CSS and knows nothing about --surface/--ink either. */
[data-jc-theme="dark"] .jc-v2 .select2-container--bootstrap-5 .select2-selection{
  background-color:var(--surface) !important;border-color:var(--line2) !important;color:var(--ink) !important;
}
[data-jc-theme="dark"] .jc-v2 .select2-container--bootstrap-5 .select2-selection__rendered{color:var(--ink) !important;}
[data-jc-theme="dark"] .jc-v2 .select2-container--bootstrap-5 .select2-selection__placeholder{color:var(--ink3) !important;}
[data-jc-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown{
  background-color:var(--surface) !important;border-color:var(--line2) !important;color:var(--ink) !important;
}
[data-jc-theme="dark"] .select2-container--bootstrap-5 .select2-search__field{
  background-color:var(--surface) !important;border-color:var(--line2) !important;color:var(--ink) !important;
}
[data-jc-theme="dark"] .select2-container--bootstrap-5 .select2-results__option{color:var(--ink) !important;}
[data-jc-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted{
  background-color:var(--accent) !important;color:#fff !important;
}