:root {
      --navy: #1F3864;
      --teal: #1B5E5E;
      --blue: #2E75B6;
      --green: #548235;
      --red: #C00000;
      --orange: #BF8F00;
      --light-blue: #D6E4F0;
      --light-green: #E2EFDA;
      --light-yellow: #FFF2CC;
      --light-red: #FCE4EC;
      --light-orange: #FBE5D6;
      --gray: #F2F2F2;
      --border: #D0D0D0;
      --purple: #7B2D8E;
      --light-purple: #F3E5F5;
      --dark-green: #2D5016;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f6fa;
      color: #333;
    }

    /* Navigation Bar */
    .nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: var(--navy);
      color: white;
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .nav h1 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      min-width: fit-content;
    }

    .nav-tabs {
      flex: 1;
      display: flex;
      gap: 4px;
      overflow-x: auto;
      justify-content: center;
    }

    .nav-tab {
      padding: 6px 10px;
      background: transparent;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      border-bottom: 2px solid transparent;
      transition: border-color 0.2s;
      white-space: nowrap;
    }

    .nav-tab:hover {
      border-bottom-color: rgba(255, 255, 255, 0.5);
    }

    .nav-tab.active {
      border-bottom-color: white;
    }

    .actions {
      display: flex;
      gap: 6px;
      min-width: fit-content;
    }

    .btn {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background-color: var(--blue);
      color: white;
    }

    .btn-primary:hover {
      background-color: #1e5ba8;
      box-shadow: 0 2px 6px rgba(46, 117, 182, 0.3);
    }

    .btn-secondary {
      background-color: rgba(255, 255, 255, 0.2);
      color: white;
    }

    .btn-secondary:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    /* Panels */
    #panels {
      transform-origin: top center;
      transition: transform 0.15s ease;
    }
    .panel {
      display: none;
      max-width: 1400px;
      margin: 0 auto;
      padding: 24px;
    }

    .panel.active {
      display: block;
    }

    /* Card Styles */
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      margin-bottom: 24px;
      overflow: hidden;
    }

    .card-header {
      background-color: var(--navy);
      color: white;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 14px;
    }

    .card-header.teal {
      background-color: var(--teal);
    }

    .card-header.green {
      background-color: var(--green);
    }

    .card-header.purple {
      background-color: var(--purple);
    }

    .card-content {
      padding: 16px;
    }

    /* Table Styles */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th {
      background-color: var(--gray);
      padding: 12px;
      text-align: left;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.5px;
      color: #666;
      border-bottom: 1px solid var(--border);
    }

    td {
      padding: 12px;
      border-bottom: 1px solid #eee;
    }

    tr:hover td {
      background-color: #fafafa;
    }

    .subtotal {
      background-color: var(--light-gray);
      font-weight: 600;
      border-top: 1px solid var(--border);
    }

    .total-row {
      background-color: var(--light-green);
      font-weight: 700;
      border-top: 2px solid var(--green);
      border-bottom: 2px solid var(--green);
    }

    .section-header {
      background-color: var(--light-blue);
      font-weight: 600;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .gross-row {
      background-color: var(--light-green);
      font-weight: 600;
      border-top: 1px solid var(--green);
    }

    /* Input Styles */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
      font-family: inherit;
      font-size: 13px;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      transition: border-color 0.2s;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(46, 117, 182, 0.1);
    }

    .sprint-hrs {
      background-color: var(--light-yellow);
    }

    .actual-hrs {
      background-color: var(--light-purple);
    }

    .edit-input {
      border: 1px solid var(--blue);
      padding: 6px 8px;
      border-radius: 4px;
    }

    .budget-input {
      border: 1px solid var(--border);
      padding: 6px 8px;
      border-radius: 4px;
    }

    .overhead-input {
      background-color: var(--light-blue);
    }

    .wf-input, .overhead-input {
      background-color: rgba(27, 94, 94, 0.08);
      -moz-appearance: textfield;
    }
    .overhead-input {
      text-align: right;
    }

    .wf-input::-webkit-outer-spin-button,
    .wf-input::-webkit-inner-spin-button,
    .overhead-input::-webkit-outer-spin-button,
    .overhead-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .pnl-sortable-list .pnl-detail-row {
      cursor: grab;
    }

    .pnl-sortable-list .pnl-detail-row.sortable-ghost {
      opacity: 0.4;
      background: var(--light-blue);
    }

    .pnl-detail-row td:first-child {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .pnl-drag-handle {
      cursor: grab;
      color: #999;
      font-size: 14px;
      user-select: none;
    }

    .pnl-drag-handle:hover {
      color: #555;
    }

    .pnl-delete-btn {
      background: none;
      border: none;
      color: var(--red);
      cursor: pointer;
      font-size: 13px;
      padding: 0 4px;
      opacity: 0.5;
    }

    .pnl-delete-btn:hover {
      opacity: 1;
    }

    .pnl-add-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
    }

    .pnl-add-row button {
      background: none;
      border: 1px dashed var(--border);
      border-radius: 4px;
      padding: 4px 12px;
      cursor: pointer;
      font-size: 12px;
      color: #666;
      transition: all 0.15s;
    }

    .pnl-add-row button:hover {
      border-color: var(--blue);
      color: var(--blue);
    }

    .wf-date {
      background-color: rgba(27, 94, 94, 0.08);
    }

    .wf-select {
      background-color: rgba(27, 94, 94, 0.08);
    }

    .comment-input {
      width: 100%;
      border: 1px solid #ddd;
      padding: 4px 6px;
      border-radius: 4px;
      font-size: 12px;
    }

    /* Timesheet */
    .ts-section { transition: all 0.2s; }
    .ts-section-header:hover { filter: brightness(0.97); }
    .ts-person-row td { padding: 6px 8px; border-bottom: 1px solid #eee; }
    .ts-person-row:hover td { background: #f7fbff; }
    .ts-rate-subrow td { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; }
    .ts-input { font-family: inherit; font-size: 12px; padding: 3px 5px; border: 1px solid transparent; border-radius: 3px; transition: border-color 0.15s; }
    .ts-input:hover { border-color: #ccc; }
    .ts-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px rgba(46,117,182,0.1); }
    .ts-currency-input { background: rgba(27,94,94,0.05); text-align: right; }
    .ts-status-select { border-radius: 12px !important; text-align: center; }
    .ts-sortable-list .ts-person-row { cursor: grab; }
    .ts-sortable-list .ts-person-row.sortable-ghost { opacity: 0.4; background: var(--light-blue); }

    /* P&L Row */
    .pnl-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      gap: 16px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    .pnl-row:last-child {
      border-bottom: none;
    }

    /* Badge Styles */
    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .on-track {
      background-color: var(--light-green);
      color: var(--green);
    }

    .over {
      background-color: rgba(192, 0, 0, 0.1);
      color: var(--red);
    }

    .tight {
      background-color: var(--light-yellow);
      color: var(--orange);
    }

    .no-budget {
      background-color: var(--light-blue);
      color: var(--blue);
    }

    .under {
      background-color: var(--light-green);
      color: var(--green);
    }

    .bleeding {
      background-color: var(--light-red);
      color: var(--red);
    }

    .received {
      background-color: var(--light-green);
      color: var(--green);
    }

    .pending {
      background-color: var(--light-yellow);
      color: var(--orange);
    }

    .not-invoiced {
      background-color: var(--light-blue);
      color: var(--blue);
    }

    .delinquent {
      background-color: var(--light-red);
      color: var(--red);
      text-decoration: line-through;
    }

    .paid {
      background-color: var(--light-green);
      color: var(--green);
    }

    .paid::before {
      content: "✓ ";
      font-weight: 700;
    }

    /* Stats Row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-card {
      background-color: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      text-align: center;
    }

    .stat-label {
      font-size: 12px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: var(--navy);
    }

    .stat-sub {
      font-size: 11px;
      color: #666;
      margin-top: 4px;
    }

    /* Project Selector */
    .proj-header {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 16px;
      align-items: center;
      margin-bottom: 24px;
    }

    .proj-nav {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .proj-nav button {
      background-color: var(--light-blue);
      border: 1px solid var(--border);
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
    }

    .proj-nav button:hover {
      background-color: var(--blue);
      color: white;
    }

    .proj-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--navy);
    }

    /* Budget Bar */
    .budget-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 12px;
    }

    .budget-bar-label {
      font-size: 12px;
      font-weight: 600;
      min-width: 80px;
    }

    .budget-bar-fill {
      flex: 1;
      height: 20px;
      background-color: #e8e8e8;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .budget-bar-progress {
      height: 100%;
      background-color: var(--green);
      border-radius: 4px;
      transition: width 0.3s;
    }

    .budget-bar-percent {
      font-size: 12px;
      font-weight: 600;
      min-width: 40px;
      text-align: right;
    }

    /* Settings Row */
    .settings-row {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }

    .settings-row label {
      font-weight: 600;
      font-size: 13px;
      min-width: 120px;
    }

    /* Overage Alert */
    .overage-alert {
      background-color: var(--light-red);
      border: 1px solid var(--red);
      color: var(--red);
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      margin: 12px 0;
    }

    /* Reconciliation Import Bar */
    .import-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 12px;
      background-color: var(--light-blue);
      border: 1px solid var(--blue);
      border-radius: 6px;
      margin-bottom: 16px;
    }

    .import-bar button {
      background-color: var(--blue);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .import-bar button:hover {
      background-color: #1e5ba8;
    }

    /* Burn Indicator */
    .burn-indicator {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      background-color: white;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
    }

    .burn-indicator.warning {
      background-color: var(--light-yellow);
      border-color: var(--orange);
    }

    .burn-indicator.danger {
      background-color: var(--light-red);
      border-color: var(--red);
    }

    /* Margin Shift */
    .margin-shift {
      font-size: 13px;
      font-weight: 600;
      padding: 8px 12px;
    }

    .margin-shift.positive {
      color: var(--green);
    }

    .margin-shift.negative {
      color: var(--red);
    }

    /* Cash Position */
    .cash-position {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 16px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .cash-warn {
      background-color: var(--light-yellow);
      border: 1px solid var(--orange);
      color: var(--orange);
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      font-style: italic;
    }

    /* Team Management Row */
    .team-mgmt-row {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    .team-mgmt-row input {
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 13px;
    }

    .team-mgmt-row .delete-btn {
      background-color: var(--red);
      color: white;
      border: none;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .team-mgmt-row .delete-btn:hover {
      background-color: #a00000;
    }

    /* Add Button */
    .add-btn {
      background-color: var(--blue);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.2s;
      margin-top: 12px;
    }

    .add-btn:hover {
      background-color: #1e5ba8;
      box-shadow: 0 2px 6px rgba(46, 117, 182, 0.3);
    }

    /* Waterfall Columns */
    .wf-columns {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 16px;
    }

    .wf-column {
      min-width: 280px;
      flex: 0 0 280px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
    }

    .wf-col-header {
      padding: 12px;
      background-color: var(--teal);
      color: white;
      border-radius: 10px 10px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 13px;
    }

    .wf-col-header input[type="date"] {
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: white;
      padding: 4px 6px;
      border-radius: 4px;
      font-size: 11px;
    }

    .wf-col-header input[type="date"]::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    .wf-col-header .close-btn {
      background-color: transparent;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 16px;
      padding: 0;
      line-height: 1;
      font-weight: 600;
      transition: all 0.2s;
    }

    .wf-col-header .close-btn:hover {
      opacity: 0.8;
    }

    .wf-section {
      padding: 12px;
      border-bottom: 1px solid #eee;
    }

    .wf-section:last-child {
      border-bottom: none;
    }

    .wf-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #888;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .wf-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      margin: 4px 0;
      background-color: #f8f9fa;
      border-radius: 6px;
      cursor: grab;
      font-size: 13px;
      border: 1px solid transparent;
      transition: all 0.15s;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .wf-item:hover {
      border-color: var(--border);
      background-color: white;
    }

    .wf-item.dragging {
      opacity: 0.5;
      border-color: var(--blue);
    }

    .wf-item .item-name {
      flex: 1;
      word-break: break-word;
    }

    .wf-item .item-amount {
      font-weight: 600;
      margin: 0 8px;
      min-width: 60px;
      text-align: right;
    }

    .wf-item input[type="checkbox"] {
      margin-left: 8px;
      cursor: pointer;
    }

    .wf-item.paid {
      background: linear-gradient(transparent 48%, var(--green) 48%, var(--green) 52%, transparent 52%);
      opacity: 0.55;
    }

    .wf-item.paid .item-name {
      color: #666;
    }

    .wf-item.delinquent {
      background-color: #fee2e2;
      border-color: #fca5a5;
    }

    .wf-item .delinquent-tag {
      font-size: 10px;
      color: var(--red);
      font-weight: 700;
      margin-left: 4px;
    }

    .wf-running {
      padding: 10px 12px;
      font-weight: 700;
      border-top: 2px solid var(--border);
      font-size: 14px;
      text-align: center;
    }

    .wf-inbound-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }

    .wf-inbound-toggle .chevron {
      transition: transform 0.2s;
      font-size: 12px;
    }

    .wf-inbound-toggle .chevron.collapsed {
      transform: rotate(-90deg);
    }

    .wf-inbound-body.collapsed {
      display: none;
    }

    .wf-add-col {
      min-width: 60px;
      flex: 0 0 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed var(--border);
      border-radius: 10px;
      cursor: pointer;
      color: #888;
      font-size: 24px;
      transition: all 0.15s;
      background-color: transparent;
    }

    .wf-add-col:hover {
      border-color: var(--blue);
      color: var(--blue);
      background-color: rgba(46, 117, 182, 0.05);
    }

    /* Trend Indicators */
    .trend-bar-wrap {
      height: 20px;
      background-color: #e8e8e8;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .trend-bar {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s;
    }

    .trend-arrow {
      display: inline-block;
      margin-right: 4px;
    }

    .trend-arrow.up {
      color: var(--green);
    }

    .trend-arrow.down {
      color: var(--red);
    }

    /* Drag and Drop Zone */
    .drag-drop-zone {
      border: 2px dashed var(--border);
      border-radius: 10px;
      padding: 24px;
      text-align: center;
      color: #888;
      cursor: pointer;
      transition: all 0.15s;
      background-color: transparent;
    }

    .drag-drop-zone:hover,
    .drag-drop-zone.dragover {
      border-color: var(--blue);
      background-color: rgba(46, 117, 182, 0.05);
      color: var(--blue);
    }

    /* Sync Summary */
    .sync-summary {
      background-color: var(--light-green);
      border: 1px solid var(--green);
      border-radius: 8px;
      padding: 12px 16px;
      margin-top: 12px;
      font-size: 13px;
      color: var(--dark-green);
    }

    /* ================================================================
       HAMBURGER TOGGLE (hidden on desktop)
       ================================================================ */
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }

    /* Scroll wrapper for tables on mobile */
    .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* ================================================================
       RESPONSIVE: TABLET (<= 900px)
       Hamburger nav + mobile-first layout kicks in here
       ================================================================ */
    @media (max-width: 900px) {
      .proj-header {
        grid-template-columns: 1fr;
      }

      /* --- NAV: hamburger mode --- */
      .nav {
        flex-wrap: wrap;
        gap: 8px;
      }

      .nav h1 {
        font-size: 14px;
      }

      .nav-toggle {
        display: block;
      }

      .nav-tabs {
        display: none !important;
        flex-direction: column;
        width: 100%;
        order: 3;
        gap: 0;
        background: var(--navy);
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: 8px;
      }

      .nav-tabs.open {
        display: flex !important;
      }

      .nav-tab {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
        border-bottom: none;
        border-left: 3px solid transparent;
      }

      .nav-tab.active {
        border-bottom: none;
        border-left-color: white;
        background: rgba(255,255,255,0.08);
      }

      .nav-tab:hover {
        border-bottom: none;
        background: rgba(255,255,255,0.05);
      }

      .actions {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      /* Hide zoom controls — use pinch zoom instead */
      .zoom-controls {
        display: none !important;
      }

      .btn {
        padding: 5px 10px;
        font-size: 12px;
      }

      /* --- STATS: 2-column grid --- */
      .stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      /* --- Financial Overview stats+buttons wrapper: stack vertically --- */
      .fin-overview-header {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .fin-overview-header .stats-row {
        width: 100% !important;
      }

      /* --- Waterfall: 50% columns --- */
      .wf-columns {
        flex-wrap: wrap;
      }

      .wf-column {
        flex: 0 0 calc(50% - 8px) !important;
        min-width: 0 !important;
      }

      .panel {
        padding: 12px !important;
      }

      .card-body {
        padding: 16px !important;
      }
    }

    /* ================================================================
       RESPONSIVE: PHONE (<= 600px)
       ================================================================ */
    @media (max-width: 600px) {
      .stats-row {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
      }

      .nav {
        padding: 8px 12px;
      }

      .panel {
        padding: 6px !important;
      }

      .card-body {
        padding: 10px !important;
      }

      .card-header h2 {
        font-size: 14px !important;
      }

      /* Waterfall: full-width columns */
      .wf-column {
        flex: 0 0 100% !important;
      }

      /* Override fixed-width inputs in tables */
      table input[type="number"],
      table input[type="text"] {
        min-width: 50px !important;
        max-width: 100% !important;
      }

      /* Auth gate: smaller padding on tiny screens */
      #authGate > div {
        padding: 24px 16px !important;
      }
    }