body { font-family: "Aptos Narrow","Aptos","Segoe UI",Arial,sans-serif; margin: 0; background:#f4f6f8; font-size:12pt; }
    header { background:#1f2937; color:#fff; padding:20px; position:relative; }
    h1 { margin:0; font-size:22px; }
    header p { margin:6px 0 0; font-size:13px; }

    .controls {
      background:#111827;
      padding:8px 12px;
      color:#fff;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .controls .spacer{ flex:1; }
    .tab-btn {
      background:#1f2937;
      color:#fff;
      border:none;
      padding:9px 15px;
      font-size:18px;
      cursor:pointer;
      width:auto;
    }
    .tab-btn.active { background:#2563eb; }
    .controls label { font-size:12pt; }
    .controls input { padding:4px 6px; font-size:12pt; max-width:140px; }

    /* Revenue search */
    .rev-search-wrap{ width:100%; display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; position:relative; }
    .rev-search-wrap input[type="text"]{ flex:1; min-width:220px; max-width:none; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.15); background:#e5e7eb; color:#111827; font-size:12pt; }
    .rev-search-wrap button{ width:auto; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); background:#111827; color:#fff; cursor:pointer; }
    .rev-search-wrap button.primary{ background:#2563eb; border:none; }
    
    /* Search Suggestions Dropdown */
    #searchSuggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #d1d5db;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        max-height: 300px;
        overflow-y: auto;
        display: none;
        margin-top: 4px;
    }
    #searchSuggestions.show { display: block; }
    .suggestion-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
        font-size: 13px;
        color: #1f2937;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .suggestion-item:last-child { border-bottom: none; }
    .suggestion-item:hover { background: #eff6ff; color: #2563eb; }
    .suggestion-item .s-date { color: #6b7280; font-size: 11px; }
    .suggestion-item .s-match { font-weight: 600; }

    .rev-search-results{ margin:10px 0 16px; }
    .rev-search-results .meta{ font-size:12px; opacity:0.9; margin:6px 0 10px; }
    .rev-search-results table td{ font-size:12px; }
    .rev-badge{ display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; border:1px solid rgba(0,0,0,0.12); background:#f3f4f6; }
    .rev-badge.pvq{ background:#fecaca; }
    .rev-badge.rtn{ background:#7f1d1d; color:#fff; }
    .rev-badge.inp{ background:#bfdbfe; }
    .rev-badge.comp{ background:#bbf7d0; }

    /* Column slider panel (hidden behind button) */
    #sliderToggle{ width:auto; background:#0f172a; color:#ffffff; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:8px 10px; font-size:12px; cursor:pointer; }
    #sliderToggle:hover{ background:#111f3a; }
    .slider-panel{
      position: fixed;
      right: 16px;
      top: 110px;
      width: 320px;
      max-width: calc(100vw - 32px);
      background: #0b1220;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 12px;
      box-shadow: 0 18px 48px rgba(0,0,0,0.35);
      padding: 12px;
      z-index: 9999;
      display: none;
    }
    .slider-panel.open{ display:block; }
    .slider-panel .hdr{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .slider-panel .hdr strong{ font-size:13px; }
    .slider-panel .hdr button{ width:auto; background:#111827; color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:6px 10px; cursor:pointer; }
    .slider-panel .hdr button:hover{ background:#1f2937; }
    .slider-panel .body{ margin-top:10px; display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; }
    .slider-row{ display:grid; grid-template-columns: 1fr 32px 140px 32px 52px; gap:8px; align-items:center; }
    .slider-row label{ font-size:12px; opacity:0.95; }
    .slider-row input[type="range"]{ width:100%; }
    .slider-step-btn{ width:auto; height:28px; padding:0; border-radius:8px; border:1px solid rgba(255,255,255,0.18); background:#111827; color:#fff; cursor:pointer; font-weight:900; line-height:28px; }
    .slider-step-btn:hover{ background:#1f2937; }
    .slider-row .val{ font-size:12px; text-align:right; opacity:0.85; }
    .slider-panel .actions{ margin-top:10px; display:flex; gap:8px; }
    .slider-panel .actions button{ width:auto; }
    @media (max-width: 768px){
      .slider-panel{ right:10px; left:10px; width:auto; }
      .slider-row{ grid-template-columns: 1fr 30px 120px 30px 48px; }
    }

    .container { padding:20px; }
    h2 { margin-top:20px; font-size:18px; }

    table { width:100%; border-collapse:collapse; background:#fff; margin-bottom:10px; table-layout:fixed; }
    table.team-table { table-layout:fixed; }
    table.team-table th, table.team-table td { overflow:hidden; }

    /* Emergency checkbox styling */
    input.emergency-checkbox { width:18px; height:18px; cursor:pointer; }
    input.emergency-checkbox:checked { accent-color:#dc2626; }
    tr.emergency-row { border-left:4px solid #dc2626; }
    tr.emergency-row td input[data-field="wo"] { color:#dc2626 !important; font-weight:900 !important; }
    
    /* Ensure bold red persists during hover and other row states */
    table.team-table tbody tr.emergency-row td input[data-field="wo"],
    table.team-table tbody tr.emergency-row:hover td input[data-field="wo"],
    table.team-table tbody tr.emergency-row td:hover input[data-field="wo"] {
      color: #dc2626 !important;
      font-weight: 900 !important;
      -webkit-text-fill-color: #dc2626 !important;
    }

    /* =============================
       Column width variables
       ============================= */
    :root {
      /* Team (defaults) */
      --team-col-tech: 6%;
      --team-col-emg: 3%;
      --team-col-wo: 33%;
      --team-col-in: 4%;
      --team-col-out: 6%;
      --team-col-status: 10%;
      --team-col-desc: 26%;
      --team-col-mat: 6%;
      --team-col-invoice: 6%;

      /* Sam Pending */
      --pending-col-num: 8%;
      --pending-col-sla: 10%;
      --pending-col-wo: 25%;
      --pending-col-po: 10%;
      --pending-col-cat: 8%;
      --pending-col-status: 12%;
      --pending-col-assign: 12%;
      --pending-col-tracking: 15%;

      /* Quotes */
      --quotes-col-wo: 80%;
      --quotes-col-status: 5%;
    }

    /* Apply widths (Team tables) */
    table.team-table th:nth-child(1), table.team-table td:nth-child(1) { width: var(--team-col-tech); }
    table.team-table th:nth-child(2), table.team-table td:nth-child(2) { width: var(--team-col-emg); }
    table.team-table th:nth-child(3), table.team-table td:nth-child(3) { width: var(--team-col-wo); }
    table.team-table th:nth-child(4), table.team-table td:nth-child(4) { width: var(--team-col-in); }
    table.team-table th:nth-child(5), table.team-table td:nth-child(5) { width: var(--team-col-out); }
    table.team-table th:nth-child(6), table.team-table td:nth-child(6) { width: var(--team-col-status); }
    table.team-table th:nth-child(7), table.team-table td:nth-child(7) { width: var(--team-col-desc); }
    table.team-table th:nth-child(8), table.team-table td:nth-child(8) { width: var(--team-col-mat); }
    table.team-table th:nth-child(9), table.team-table td:nth-child(9) { width: var(--team-col-invoice); }

    /* Apply widths (Pending) */
    table.pending-table th:nth-child(1), table.pending-table td:nth-child(1) { width: var(--pending-col-num); }
    table.pending-table th:nth-child(2), table.pending-table td:nth-child(2) { width: var(--pending-col-sla); }
    table.pending-table th:nth-child(3), table.pending-table td:nth-child(3) { width: var(--pending-col-wo); }
    table.pending-table th:nth-child(4), table.pending-table td:nth-child(4) { width: var(--pending-col-po); }
    table.pending-table th:nth-child(5), table.pending-table td:nth-child(5) { width: var(--pending-col-cat); }
    table.pending-table th:nth-child(6), table.pending-table td:nth-child(6) { width: var(--pending-col-status); }
    table.pending-table th:nth-child(7), table.pending-table td:nth-child(7) { width: var(--pending-col-assign); }
    table.pending-table th:nth-child(8), table.pending-table td:nth-child(8) { width: var(--pending-col-tracking); }

    table.pending-table th:nth-child(1), table.pending-table td:nth-child(1) { padding: 4px 6px; }
    table.pending-table td:nth-child(1) { vertical-align: middle; }
    table.pending-table th:nth-child(1) { text-align: left; }
    table.pending-table td:nth-child(1) { white-space: nowrap; }

    .pending-row-actions { display: flex; align-items: center; gap: 10px; }
    .pending-row-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 3.4ch;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(99,102,241,0.25);
      background: rgba(99,102,241,0.10);
      color: #1e3a8a;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.2px;
      line-height: 1;
    }
    button[data-action="clear-pending-row"] {
      width: auto;
      padding: 7px 12px;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,0.14);
      background: #f9fafb;
      color: #111827;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(0,0,0,0.04);
      transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 90ms ease, box-shadow 120ms ease;
    }
    button[data-action="clear-pending-row"]:hover {
      background: #fee2e2;
      border-color: rgba(220,38,38,0.35);
      color: #991b1b;
      box-shadow: 0 2px 10px rgba(220,38,38,0.12);
    }
    button[data-action="clear-pending-row"]:active { transform: translateY(1px); }
    button[data-action="clear-pending-row"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.25), 0 2px 10px rgba(37,99,235,0.10);
      border-color: rgba(37,99,235,0.45);
    }

    /* Apply widths (Quotes) */
    table.quotes-table th:nth-child(1), table.quotes-table td:nth-child(1) { width: var(--quotes-col-wo); }
    table.quotes-table th:nth-child(2), table.quotes-table td:nth-child(2) { width: var(--quotes-col-status); }

    th, td { border:1px solid #ddd; padding:6px; font-size:12pt; }
    th { background:#e5e7eb; }
    th.sortable{ cursor:pointer; user-select:none; }
    th.sortable .sort-ind{ font-size:10px; opacity:0.8; margin-left:6px; }
    th.sortable.active{ background:#dbeafe; }

    input, select, textarea, button { width:100%; box-sizing:border-box; font-size:12pt; font-family: "Aptos Narrow","Aptos","Segoe UI",Arial,sans-serif; }

    /* Billing dashboard */
    .billing-wrap{ background:#ffffff; padding:16px; border-radius:12px; border:1px solid #e5e7eb; }
    .billing-grid{ display:flex; gap:16px; align-items:stretch; min-height:70vh; }
    .billing-card{ flex:1; display:flex; flex-direction:column; gap:10px; border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#f9fafb; }
    .billing-card h3{ margin:0; font-size:16px; }

    /* Billing category headings (Incurred / Proposed / Material) */
    .billcalc-section h4{
      margin:0 0 8px;
      font-size:18px;
      color:#1e3a8a; /* dark blue */
      text-decoration:underline;
    }
    .billcalc-section{ background:#ffffff; border:1px solid rgba(0,0,0,0.12); border-radius:12px; padding:10px; }
    .billcalc-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
    .billcalc-table th, .billcalc-table td{ border:1px solid #e5e7eb; padding:6px; font-size:12pt; }
    .billcalc-table th{ background:#f3f4f6; }
    .billcalc-table input{ padding:6px 8px; border-radius:8px; border:1px solid rgba(0,0,0,0.14); background:#fff; }
    .billcalc-table input[readonly]{ background:#f9fafb; }
    .billcalc-subtotals{ display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; margin-top:8px; font-weight:800; }
    .billcalc-grand{ margin-top:10px; padding:10px; border-radius:12px; background:#111827; color:#fff; display:flex; justify-content:space-between; align-items:center; font-weight:900; }

    @media (max-width: 768px){
      .billing-grid{ flex-direction:column; }
    }

    button.now-btn { margin-top:4px; font-size:9px; padding:2px 4px; width:15%; cursor:pointer; }
    button.clear-btn { margin-top:4px; font-size:9px; padding:2px 4px; width:15%; cursor:pointer; }
    .in-buttons{ display:flex; gap:4px; }
    .elapsed-time{ margin-top:4px; font-size:11px; font-weight:700; color:#111827; }
    .elapsed-time.running{ color:#b91c1c; font-weight:900; }
    .elapsed-time.done{ color:#16a34a; }

    .tech-name { font-weight:bold; background:#f9fafb; vertical-align:top; font-size:14px; min-width:40px; }
    .slot-controls{ display:flex; gap:6px; margin-top:6px; }
    .slot-btn{ width:28px !important; height:28px; padding:0 !important; line-height:28px; font-weight:bold; cursor:pointer; }

    /* Auto-trim display (ellipsis) for WO + Description while keeping full value via tooltip */
    input.trim-field{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* Tracking link icon + custom tooltip (Sam Pending Schedule) */
    .tracking-wrap{ display:flex; align-items:center; gap:6px; }
    .tracking-link-icon{
      width:auto !important;
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:2px 4px;
      border-radius:6px;
      border:1px solid rgba(37,99,235,0.35);
      background:rgba(37,99,235,0.08);
      color:#2563eb;
      cursor:pointer;
      user-select:none;
      line-height:1;
      font-size:14px;
      text-decoration:none;
    }
    .tracking-link-icon:hover{ background:rgba(37,99,235,0.16); border-color:rgba(37,99,235,0.55); }

    .tracking-tooltip{
      position:fixed;
      z-index:100000;
      max-width:min(520px, 86vw);
      background:#0b1220;
      color:#fff;
      border:1px solid rgba(255,255,255,0.18);
      border-radius:10px;
      padding:8px 10px;
      font-size:12px;
      line-height:1.25;
      box-shadow:0 14px 40px rgba(0,0,0,0.45);
      display:none;
      pointer-events:none;
      white-space:normal;
      word-break:break-word;
    }
    .tracking-tooltip.show{ display:block; }

    tr.status-pvq { background-color:#fecaca; }
    tr.status-rtn { background-color:#fecaca; }
    tr.status-submitted { background-color:#bbf7d0; }
    tr.status-submitted td input, tr.status-submitted td select { background-color: transparent !important; }
    tr.status-onhold { background-color:#ffedd5; }
    tr.status-honeydo { background-color:#fecaca; }
    tr.status-customer { background-color:#fef9c3; }
    tr.status-inprogress { background-color:#bfdbfe; }
    tr.status-completed { background-color:#bbf7d0; }
    tr.status-scheduled { background-color:#bbf7d0; }

    /* Manual Row Colors (Override Status) */
    tr.row-color-blue { background-color: #bfdbfe !important; }
    tr.row-color-green { background-color: #bbf7d0 !important; }
    tr.row-color-yellow { background-color: #fef9c3 !important; }
    tr.row-color-orange { background-color: #ffedd5 !important; }
    tr.row-color-red { background-color: #fecaca !important; }
    tr.row-color-purple { background-color: #f3e8ff !important; }
    tr.row-color-pink { background-color: #fce7f3 !important; }

    /* Bold Row Toggle */
    tr.row-bold td input, tr.row-bold td select, tr.row-bold td textarea { font-weight: 900 !important; }
    .btn-bold-toggle {
      width: 24px !important;
      height: 24px !important;
      padding: 0 !important;
      border-radius: 4px;
      border: 1px solid #d1d5db;
      background: #fff;
      cursor: pointer;
      font-weight: 900;
      font-size: 12px;
      transition: all 0.2s;
    }
    .btn-bold-toggle.active {
      background: #111827;
      color: #fff;
      border-color: #111827;
    }

    /* Reminder field styling (bold red when entered) */
    input[data-field="checkoutReminder"].has-reminder{
      color:#b91c1c !important;
      font-weight:900;
    }

    /* Checkout reminder overdue highlight (only highlights the OUT cell) */
    tr.checkout-overdue td.out-cell{
      background:#fecaca !important;
      box-shadow: inset 0 0 0 2px #dc2626;
    }
    tr.checkout-overdue td.out-cell input{
      background:#fee2e2 !important;
      border-color:#dc2626 !important;
    }

    /* Highlight OUT time green when selected */
    td.out-cell input[data-field="out"].has-out-time{
      background:#bbf7d0 !important;
      border:1px solid #16a34a !important;
      font-weight:700;
      color:#065f46;
    }

    /* Alternating row shading for work order rows (easier on eyes) */
    table.team-table tbody tr:nth-child(even):not(.status-pvq):not(.status-rtn):not(.status-honeydo):not(.status-customer):not(.status-inprogress):not(.status-completed):not(.status-scheduled):not(.status-submitted) {
      background-color:#f3f4f6;
    }

    /* Totals Summary Table - Manual Resizing */
    table.totals-summary-table {
      table-layout: fixed; /* Fixed layout required for manual resizing control */
      width: 100%; /* Ensure it takes full width of container */
    }
    
    /* Make headers relative for resizer positioning */
    table.totals-summary-table th {
      position: relative;
      padding: 4px 6px;
      overflow: hidden; /* Prevent content from spilling if resized too small */
    }
    
    /* The draggable handle */
    .col-resizer {
      position: absolute;
      top: 0;
      right: 0;
      width: 5px;
      height: 100%;
      cursor: col-resize;
      user-select: none;
      /* Invisible by default, hover to see */
      background: transparent;
      z-index: 10;
    }
    
    /* Visual feedback on hover or active dragging */
    .col-resizer:hover,
    .col-resizer.resizing {
      background: #3b82f6; /* Blue indicator */
      width: 4px; /* Slightly wider visual */
    }

    footer { background:#e5e7eb; padding:10px; font-size:12px; }

    @media (max-width: 768px) {
      header { padding:14px; }
      h1 { font-size:18px; }
      .container { padding:10px; }
      table { display:block; overflow-x:auto; white-space:nowrap; }
    }