/* Common layout */
:root {
      --sidebar-width: 240px;
      --sidebar-bg: #1e2a3a;
      --sidebar-color: #c8d6e5;
      --sidebar-active: #3d9be9;
      --topbar-height: 56px;
    }
    body { background: #f4f6fb; }

    /* Sidebar */
    #sidebar {
      position: fixed; top: 0; left: 0; bottom: 0;
      width: var(--sidebar-width);
      background: var(--sidebar-bg);
      overflow-y: auto; z-index: 1000;
      transition: transform .25s;
    }
    #sidebar .sidebar-brand {
      display: flex; align-items: center; gap: 10px;
      padding: 20px 16px; font-size: 1rem; font-weight: 700;
      color: #fff; border-bottom: 1px solid rgba(255,255,255,.1);
    }
    #sidebar .sidebar-brand i { font-size: 1.4rem; color: var(--sidebar-active); }
    #sidebar .nav-link {
      color: var(--sidebar-color); padding: 10px 16px;
      border-radius: 6px; margin: 2px 8px;
      display: flex; align-items: center; gap: 10px;
      transition: background .15s;
    }
    #sidebar .nav-link:hover, #sidebar .nav-link.active {
      background: rgba(61,155,233,.18); color: #fff;
    }
    #sidebar .nav-link.active { border-left: 3px solid var(--sidebar-active); }
    #sidebar .nav-section {
      font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
      color: rgba(200,214,229,.4); padding: 12px 24px 4px;
    }

    /* Topbar */
    #topbar {
      position: fixed; top: 0; left: var(--sidebar-width); right: 0;
      height: var(--topbar-height); background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
      display: flex; align-items: center; padding: 0 24px;
      z-index: 999; gap: 12px;
    }
    .topbar-brand {
      display: flex; align-items: center; gap: 8px;
      color: #1e2a3a; font-weight: 700;
      min-width: 0;
    }
    .topbar-brand span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .topbar-brand i { color: var(--sidebar-active); }
    .sidebar-toggle { display: none; }
    .sidebar-toggle i { pointer-events: none; }
    .logout-label { white-space: nowrap; }

    /* Main */
    #main {
      margin-left: var(--sidebar-width);
      padding: calc(var(--topbar-height) + 24px) 24px 24px;
      min-height: 100vh;
    }

    /* Cards */
    .stat-card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
    .stat-card .icon-box {
      width: 52px; height: 52px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    #todayProjects,
    #myDue,
    #pendingActions,
    #pendingReports,
    #underAssigned,
    #incompleteProjects {
      scroll-margin-top: calc(var(--topbar-height) + 16px);
    }

    /* Table */
    .table-card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: visible; }
    .table-card .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table thead th { background: #f8f9fc; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
    .detail-info-table {
      table-layout: fixed;
      width: 100%;
    }
    .detail-info-table th,
    .detail-info-table td {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .responsive-stack-table {
      min-width: 0 !important;
    }
    .responsive-stack-table th,
    .responsive-stack-table td {
      white-space: normal !important;
    }
    .invoice-detail-table-wrap {
      max-height: calc(100vh - 180px);
      overflow: auto;
    }
    .invoice-detail-table-wrap thead th {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .expense-detail-toggle {
      --bs-btn-padding-y: .05rem;
      --bs-btn-padding-x: .35rem;
      --bs-btn-font-size: .72rem;
      vertical-align: .08rem;
      white-space: nowrap;
    }
    .expense-detail-row > td {
      padding: 0 !important;
      border-top: 0;
    }
    .expense-detail-panel {
      margin: .25rem .75rem .75rem;
      padding: .75rem;
      border-left: 3px solid #0d6efd;
      background: #f8fbff;
      border-radius: 6px;
    }
    .work-agent-detail + .work-agent-detail {
      border-top: 1px solid #dbe7f6;
    }
    .expense-sub-detail + .expense-sub-detail {
      border-top: 1px solid #edf2f7;
    }
    .detail-heading-title {
      min-width: 0;
    }
    .detail-heading-title .detail-title-text {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .detail-heading-actions {
      flex-wrap: wrap;
    }
    .detail-heading-actions .btn {
      white-space: nowrap;
    }
    @media (max-width: 575.98px) {
      .detail-heading {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: .75rem;
      }
      .detail-heading-title {
        flex: 1 1 100%;
      }
      .detail-heading-title .detail-title-text {
        font-size: 1.65rem;
        line-height: 1.25;
      }
      .detail-heading-actions {
        width: 100%;
        justify-content: flex-start !important;
        text-align: left !important;
      }
      .table-card .table {
        min-width: 640px;
      }
      .table-card .table.table-sm {
        min-width: 520px;
      }
      .table-card .table th,
      .table-card .table td {
        white-space: nowrap;
      }
      .table-card .responsive-stack-table {
        min-width: 0 !important;
      }
      .responsive-stack-table thead {
        display: none;
      }
      .responsive-stack-table tbody,
      .responsive-stack-table tr,
      .responsive-stack-table td {
        display: block;
        width: 100%;
      }
      .responsive-stack-table tr {
        padding: .75rem 1rem;
        border-bottom: 1px solid #e9ecef;
      }
      .responsive-stack-table td {
        border: 0;
        padding: .35rem 0;
        white-space: normal !important;
      }
      .responsive-stack-table td[data-label] {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: .75rem;
        align-items: start;
      }
      .responsive-stack-table td[data-label]::before {
        content: attr(data-label);
        color: #6c757d;
        font-weight: 700;
        white-space: nowrap;
      }
      .responsive-stack-table td.text-end {
        text-align: left !important;
      }
      .responsive-stack-table td.dashboard-action-cell .dashboard-action-message {
        grid-column: 1 / -1;
        margin-top: .5rem !important;
        line-height: 1.6;
      }
      .responsive-stack-table .btn {
        white-space: nowrap;
      }
      .invoice-detail-table-wrap {
        max-height: 70vh;
        overflow: auto;
      }
      .expense-detail-panel {
        margin: .25rem 0 .75rem;
      }
    }

    /* Custom badge colors */
    .bg-orange { background-color: #fd7e14 !important; }
    .bg-purple { background-color: #6f42c1 !important; }
    @media (max-width: 575.98px) {
      .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }
      .nav-pills .nav-link {
        white-space: nowrap;
      }
    }

    /* Links */
    a { text-decoration: none; color: #0d6efd; font-weight: bold; }
    a:hover { text-decoration: none; color: #0a58ca; }
    #sidebar a, #sidebar a:hover { color: inherit; font-weight: inherit; }
    .btn, .btn:hover { font-weight: inherit; }
    .nav-link, .nav-link:hover { font-weight: inherit; }
    .dropdown-item, .dropdown-item:hover { font-weight: inherit; color: inherit; }
    .bi-arrow-left {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.9em;
      height: 1.9em;
      margin-right: .35rem !important;
      border-radius: 50%;
      background: #0d6efd;
      color: #fff;
      font-size: 1.05em;
      font-weight: 700;
      vertical-align: -0.35em;
      box-shadow: 0 2px 6px rgba(13,110,253,.25);
    }

    /* Responsive */
    @media (max-width: 768px) {
      #sidebar { transform: translateX(-100%); }
      #sidebar.show { transform: translateX(0); }
      #topbar { left: 0; }
      #main { margin-left: 0; }
      .sidebar-toggle { display: inline-block; }
      #topbar { padding: 0 12px; gap: 8px; }
      .topbar-brand { flex: 1 1 auto; }
      #topbar .text-muted.small { flex: 0 0 auto; }
      .logout-label { display: none; }
      #topbar .btn-outline-danger { padding-left: .65rem; padding-right: .65rem; }
    }
    @media (orientation: landscape) and (max-height: 575.98px) {
      #sidebar { transform: translateX(-100%); }
      #sidebar.show { transform: translateX(0); }
      #topbar { left: 0; }
      #main { margin-left: 0; }
      .sidebar-toggle { display: inline-block; }
      #topbar { padding: 0 12px; gap: 8px; }
      .topbar-brand { flex: 1 1 auto; }
      #topbar .text-muted.small { flex: 0 0 auto; }
      .logout-label { display: none; }
      #topbar .btn-outline-danger { padding-left: .65rem; padding-right: .65rem; }
    }

/* Login page */
body.login-page {
      min-height: 100vh;
      background: linear-gradient(135deg, #1e2a3a 0%, #2d4a6e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
body.login-page .login-card {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
      padding: 48px 40px;
    }
body.login-page .login-logo {
      font-size: 2.5rem;
      color: #3d9be9;
      text-align: center;
      margin-bottom: 8px;
    }
body.login-page .login-title {
      text-align: center;
      font-size: 1.1rem;
      font-weight: 700;
      color: #1e2a3a;
      margin-bottom: 32px;
    }
    .login-page .form-control:focus {
      border-color: #3d9be9;
      box-shadow: 0 0 0 .2rem rgba(61,155,233,.2);
    }
body.login-page .btn-login {
      background: #3d9be9;
      border: none;
      color: #fff;
      width: 100%;
      padding: 12px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 8px;
      transition: background .2s;
    }
body.login-page .btn-login:hover {
      background: #2a85d0;
      color: #fff;
    }
body.login-page .oauth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #6c757d;
      font-size: .85rem;
      margin: 22px 0 16px;
    }
body.login-page .oauth-divider::before,
body.login-page .oauth-divider::after {
      content: "";
      flex: 1;
      border-top: 1px solid #dee2e6;
    }
body.login-page .btn-oauth {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
body.login-page .btn-google {
      background: #fff;
      color: #3c4043;
      border: 1px solid #dadce0;
    }
body.login-page .btn-google:hover {
      background: #f8fafd;
      color: #202124;
      border-color: #c6cacf;
    }
body.login-page .btn-line {
      background: #06c755;
      color: #fff;
      border: 1px solid #06c755;
    }
body.login-page .btn-line:hover {
      background: #05b84f;
      color: #fff;
      border-color: #05b84f;
    }
    .login-page .input-group-text {
      background: #f8f9fc;
    }
body.login-page .login-qr {
      text-align: center;
      margin: -16px 0 24px;
      padding: 12px;
      border: 1px solid #dee2e6;
      border-radius: 10px;
      background: #f8f9fc;
    }
body.login-page .login-qr img {
      width: 132px;
      height: 132px;
    }
body.login-page .login-qr-label {
      margin-top: 8px;
      color: #6c757d;
      font-size: .85rem;
    }
    @media (max-width: 480px) {
      body.login-page {
        align-items: stretch;
        background: #fff;
      }
      body.login-page .login-card {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        padding: 40px 24px;
      }
    }

/* Admin project day detail */
.admin-agent-title,
.admin-agent-actions .btn,
.admin-report-actions .btn {
  white-space: nowrap;
}


.admin-agent-actions {
  min-width: 0;
}

.admin-agent-section.table-card .admin-agent-section-body {
  overflow-x: visible;
}

.admin-report-expense-table td {
  vertical-align: middle;
}

@media (max-width: 575.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #main {
    overflow-x: hidden;
  }

  .admin-agent-card {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
  }

  .admin-agent-head {
    width: 100%;
  }

  .admin-agent-title {
    display: block;
    margin-bottom: .75rem;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-agent-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: .35rem !important;
    width: 100%;
    max-width: 100%;
  }

  .admin-agent-actions form {
    display: inline-flex !important;
    margin: 0;
  }

  .admin-agent-actions .btn {
    writing-mode: horizontal-tb;
    line-height: 1.3;
  }

  .admin-reset-btn {
    padding: .25rem .55rem;
  }

  .admin-status-badges .badge {
    font-size: .75rem !important;
    line-height: 1.25;
  }

  .admin-report-review .row > .col-auto {
    width: 100%;
  }

  .admin-report-review .input-group {
    max-width: 220px;
  }

  .admin-report-expense-table,
  .admin-report-expense-table tbody,
  .admin-report-expense-table tr,
  .admin-report-expense-table td {
    display: block;
    min-width: 0 !important;
    max-width: 100%;
    width: 100% !important;
  }

  .table-card .admin-report-expense-table.table,
  .table-card .admin-report-expense-table.table-sm {
    min-width: 0 !important;
  }

  .admin-agent-section.table-card .card-body,
  .admin-agent-section.table-card .admin-agent-section-body {
    overflow-x: hidden !important;
  }

  .admin-agent-section.table-card .table,
  .admin-agent-section.table-card .table.table-sm {
    min-width: 0 !important;
  }

  .admin-agent-section.table-card .table th,
  .admin-agent-section.table-card .table td {
    white-space: normal !important;
  }

  .admin-report-expense-table tr {
    padding: .5rem 0;
    border-bottom: 1px solid #dee2e6;
  }

  .admin-report-expense-table td {
    border: 0;
    padding: .15rem .25rem;
    text-align: left !important;
  }

  .admin-report-expense-table .admin-expense-amount-cell {
    max-width: 220px;
    margin-left: 0;
  }

  .admin-report-expense-table .admin-expense-amount-cell .input-group {
    max-width: none;
  }

  .admin-report-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
  }

  .admin-report-actions .btn {
    margin-left: 0 !important;
  }
}