/* BBS BauBoard stabile CSS-Grundlage. Aus dem letzten vollstaendigen Projektstand uebernommen; aktuelle Komponenten-Styles werden danach geladen und haben Vorrang. */
:root {
      --bg: #f3f4f6;
      --card: #ffffff;
      --border: #222;
      --soft-border: #d1d5db;
      --text: #111827;
      --muted: #6b7280;
      --green: #dff4d8;
      --blue: #e0f2fe;
      --yellow: #fef3c7;
      --danger: #ef4444;
      --accent: #111827;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    body.admin-view {
      background: #eef2f7;
    }

    body.employee-view {
      background: #f0fdf4;
    }

    .environment-banner {
      position: sticky;
      top: 0;
      z-index: 10000;
      padding: 8px 14px;
      background: #f97316;
      color: #ffffff;
      text-align: center;
      font-size: 14px;
      font-weight: 950;
      letter-spacing: 0.08em;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    }

    body.admin-view header {
      background: #111827;
      border-bottom: 4px solid #2563eb;
    }

    body.employee-view header {
      background: #14532d;
      border-bottom: 4px solid #22c55e;
    }

    header {
      background: var(--accent);
      color: white;
      padding: 18px 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    header h1 {
      margin: 0;
      font-size: 24px;
    }

    header .sub {
      font-size: 14px;
      opacity: 0.85;
      margin-top: 4px;
    }

    .top-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }

    .brand-lockup {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 300px;
    }

    .app-logo {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      flex: 0 0 auto;
      object-fit: cover;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    }

    .mobile-owner-role-menu {
      display: none;
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      z-index: 1400;
      width: min(250px, calc(100vw - 32px));
      padding: 7px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 16px 38px rgba(15, 23, 42, 0.22);
    }

    .mobile-owner-role-menu button {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 44px;
      padding: 9px 12px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #111827;
      box-shadow: none;
      font-size: 14px;
      font-weight: 750;
      text-align: left;
    }

    .mobile-owner-role-menu button + button {
      border-top: 1px solid #eef2f7;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .mobile-owner-role-menu button.current {
      color: #168642;
      background: #effaf2;
    }

    @media (max-width: 780px) {
      .mobile-owner-role-menu.active { display: grid; }
    }

    body.force-mobile-preview .mobile-owner-role-menu.active { display: grid; }


    .brand-text {
      min-width: 0;
    }

    .brand-name {
      display: inline-block;
    }

    .view-switch {
      padding: 6px 9px;
      min-width: auto;
      border-radius: 999px;
      background: #111827;
      color: #ffffff;
      font-size: 12px;
      font-weight: 900;
      margin-left: auto;
    }

    .welcome-text {
      font-weight: 800;
      color: var(--muted);
      padding: 8px 10px;
      background: #f8fafc;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
    }

    button, select, input, textarea {
      font: inherit;
    }

    button {
      border: 0;
      border-radius: 8px;
      padding: 10px 14px;
      cursor: pointer;
      font-weight: 700;
      background: #2563eb;
      color: white;
    }

    button.secondary {
      background: #374151;
    }

    button.light {
      background: #e5e7eb;
      color: #111827;
    }

    a.button.light {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 10px 14px;
      border-radius: 8px;
      background: #e5e7eb;
      color: #111827;
      font-weight: 700;
      text-decoration: none;
    }

    button.danger {
      background: #dc2626;
    }

    .badge-button {
      position: relative;
    }

    .message-badge {
      position: absolute;
      top: -7px;
      right: -7px;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: #dc2626;
      color: white;
      border: 2px solid white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .language-select {
      background: #e5e7eb;
      color: #111827;
      border: 0;
      border-radius: 8px;
      padding: 6px 8px;
      font-weight: 800;
      font-size: 12px;
      max-width: 112px;
    }

    .leave-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin: 12px 0;
    }

    .summary-tile {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
    }

    .summary-number {
      display: block;
      font-size: 26px;
      font-weight: 900;
      color: #111827;
    }

    .summary-tile.sick-summary {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .summary-tile.sick-summary .summary-number {
      color: #dc2626;
    }

    .account-profile-head {
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 18px 0 24px;
      border-bottom: 1px solid var(--soft-border);
      margin-bottom: 18px;
    }

    .account-avatar {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      background: #e5e7eb;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #64748b;
      font-size: 34px;
      font-weight: 900;
      flex: 0 0 auto;
      border: 0;
      cursor: pointer;
      position: relative;
      padding: 0;
    }

    .account-avatar.no-photo {
      border: 2px dashed #22c55e;
      background: #f0fdf4;
      color: #166534;
    }

    .account-avatar-hint {
      position: absolute;
      right: 6px;
      bottom: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: #16a34a;
      color: #ffffff;
      font-size: 18px;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    }

    #editModal.account-photo-sheet .edit-modal {
      width: min(360px, calc(100vw - 28px));
      padding: 14px;
      border-radius: 18px;
    }

    #editModal.account-photo-sheet #editModalFields {
      display: none;
    }

    #editModal.account-photo-sheet #editModalActions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 12px;
    }

    .account-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Der Profilbild-Button darf nicht von allgemeinen Button-Regeln
       auf Formularbreite oder Bildhöhe aufgezogen werden. */
    .account-profile-head .account-avatar {
      width: 120px !important;
      min-width: 120px !important;
      max-width: 120px !important;
      height: 120px !important;
      min-height: 120px !important;
      max-height: 120px !important;
      flex: 0 0 120px !important;
      aspect-ratio: 1 / 1;
      padding: 0 !important;
      box-sizing: border-box;
    }

    .account-profile-head > div:last-child {
      min-width: 0;
      max-width: 100%;
    }

    @media (max-width: 760px) {
      .account-profile-head {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 0 18px;
        box-sizing: border-box;
      }

      .account-profile-head .account-avatar {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
        flex-basis: 88px !important;
        border-radius: 16px !important;
      }
    }

    .account-profile-name {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
    }

    .account-app-version {
      display: inline-flex;
      align-items: center;
      margin-top: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #ecfdf5;
      color: #166534;
      border: 1px solid #bbf7d0;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .account-mobile-role-control {
      display: none;
    }

    .account-mobile-role-control select {
      font-weight: 800;
      color: #166534;
    }

    .two-factor-box {
      display: grid;
      gap: 10px;
      grid-column: 1 / -1;
    }

    .two-factor-steps {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 10px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #14532d;
      font-size: 14px;
      line-height: 1.35;
    }

    .two-factor-qr {
      justify-self: center;
      width: min(240px, 72vw);
      aspect-ratio: 1;
      padding: 12px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--soft-border);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    }

    .two-factor-qr svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .two-factor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .two-factor-actions .secondary {
      font-size: 14px;
      padding: 9px 12px;
    }

    .two-factor-secret {
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--soft-border);
      background: #f8fafc;
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 1px;
      overflow-wrap: anywhere;
      user-select: all;
    }

    .two-factor-recovery-codes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .two-factor-recovery-codes code {
      display: block;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid var(--soft-border);
      font-weight: 800;
      text-align: center;
      letter-spacing: .04em;
    }

    .two-factor-recovery-toggle {
      margin-top: 10px;
      padding: 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid var(--soft-border);
    }

    .two-factor-uri {
      font-size: 12px;
      color: var(--muted);
      overflow-wrap: anywhere;
      display: none;
    }

    .password-toggle-wrap {
      position: relative;
      display: block;
      width: 100%;
    }

    .password-toggle-wrap input {
      width: 100%;
      padding-right: 58px !important;
    }

    .password-eye-button {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #64748b;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
    }

    .password-eye-button:hover,
    .password-eye-button.visible {
      background: #eef2f7;
      color: var(--primary);
      transform: translateY(-50%);
    }

    .password-eye-button svg {
      width: 29px;
      height: 29px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
      display: none;
    }

    .account-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
      gap: 22px;
      align-items: start;
    }

    .account-box {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      padding: 18px;
    }

    .account-box h3 {
      margin: 0 0 14px;
      font-size: 22px;
    }

    .account-line {
      margin-bottom: 12px;
    }

    .account-line input,
    .account-line select {
      border-width: 0 0 1px;
      border-radius: 0;
      padding-left: 0;
      background: transparent;
    }

    main {
      padding: 18px;
      max-width: 1600px;
      margin: auto;
    }

    .toolbar {
      background: var(--card);
      border: 1px solid var(--soft-border);
      border-radius: 12px;
      padding: 8px 10px;
      margin: 8px 0 6px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }

    .toolbar-left, .toolbar-right {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }

    .toolbar-right {
      justify-content: flex-end;
    }

    .toolbar button,
    .toolbar select,
    .toolbar input {
      min-height: 36px;
      padding: 7px 10px;
      border-radius: 7px;
      font-size: 14px;
    }

    .toolbar select,
    .toolbar input {
      width: auto;
      max-width: 210px;
    }

    #viewMode {
      max-width: 170px;
    }

    #dateSearch {
      max-width: 150px;
    }

    #employeeFilter {
      max-width: 190px;
    }

    .table-area-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .table-area-title h2 {
      margin: 0;
      font-size: 20px;
    }

    #planningSectionTitle {
      color: #f97316;
    }

    .platform-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 6px 10px;
      background: #e5e7eb;
      color: #111827;
      font-weight: 900;
      font-size: 12px;
    }

    .week-title {
      font-weight: 800;
      font-size: 18px;
      white-space: nowrap;
      padding: 0 4px;
    }

    .view-toggle {
      display: flex;
      gap: 6px;
    }

    .planner-wrap {
      background: white;
      border-radius: 12px;
      overflow: auto;
      border: 1px solid var(--soft-border);
    }

    .main-home-panel {
      display: grid;
      grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
      gap: 14px;
      margin: 14px 0;
    }

    .home-card {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      padding: 14px;
    }

    .home-card h2,
    .home-card h3 {
      margin: 0 0 8px;
    }

    .time-clock-card {
      text-align: center;
      display: grid;
      justify-items: center;
      gap: 12px;
      padding: 18px 14px;
    }

    .home-time-clock {
      color: #16a34a;
      font-size: clamp(54px, 8vw, 92px);
      line-height: 0.95;
      font-weight: 950;
      letter-spacing: 2px;
      font-variant-numeric: tabular-nums;
    }

    .home-time-category {
      color: #15803d;
      font-size: 18px;
      font-weight: 900;
      min-height: 24px;
    }

    .home-project-button {
      border: 0;
      background: #dcfce7;
      color: #15803d;
      padding: 7px 12px;
      border-radius: 999px;
      font-weight: 900;
      cursor: pointer;
    }

    .home-pause-panel {
      display: grid;
      gap: 4px;
      justify-items: center;
      color: #15803d;
      font-weight: 900;
    }

    .home-pause-icon {
      font-size: 21px;
      line-height: 1;
    }

    .home-pause-clock {
      font-size: 24px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .home-punch-button {
      background: #22c55e;
      border-color: #22c55e;
      min-width: 192px;
      justify-content: center;
      font-size: 17px;
      letter-spacing: 0.3px;
    }

    .home-punch-button:hover {
      background: #16a34a;
      border-color: #16a34a;
    }

    .home-punch-button.danger {
      background: #ef4444;
      border-color: #ef4444;
    }

    .home-punch-button.secondary {
      background: #22c55e;
      border-color: #22c55e;
    }

    .home-clock-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .home-clock-date {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      font-weight: 850;
      font-size: 18px;
      margin-top: 4px;
    }

    .home-task-summary-card {
      display: none;
      gap: 10px;
      align-content: start;
    }

    .home-task-summary-card.active {
      display: grid;
    }

    .home-task-summary-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .home-task-summary-count {
      display: inline-grid;
      place-items: center;
      min-width: 34px;
      height: 34px;
      border-radius: 999px;
      background: #dcfce7;
      color: #166534;
      font-weight: 900;
    }

    .home-task-summary-list {
      display: grid;
      gap: 7px;
    }

    .home-task-summary-item {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 9px 10px;
      background: #f8fafc;
    }

    .home-project-shortcut-card {
      display: none;
      gap: 8px;
      padding: 10px 12px;
      align-content: start;
    }

    .home-project-shortcut-card.active {
      display: grid;
    }

    .home-project-shortcut-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .home-project-shortcut-head h3 {
      margin: 0;
      font-size: 15px;
    }

    .home-project-shortcut-list {
      display: grid;
      gap: 6px;
    }

    .home-project-shortcut-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: #f8fafc;
      color: #0f172a;
      padding: 8px 10px;
      text-align: left;
      cursor: pointer;
    }

    .home-project-shortcut-item strong,
    .home-project-shortcut-item span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-project-shortcut-copy {
      display: block;
      min-width: 0;
    }

    .home-project-shortcut-meta {
      display: block;
      margin-bottom: 2px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
    }

    .home-project-shortcut-item:hover {
      background: #ecfdf5;
      color: #15803d;
    }

    .home-project-shortcut-arrow {
      color: #16a34a;
      font-weight: 950;
    }

    body.content-focused #mainHomePanel {
      display: none;
    }

    .mobile-swipe-stage {
      position: fixed;
      top: var(--mobile-swipe-top, 0);
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 8600;
      display: none;
      overflow: hidden;
      background: var(--bg, #f8fafc);
      touch-action: none;
    }

    .mobile-swipe-stage.active {
      display: block;
    }

    .mobile-swipe-page {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 0 0 18px;
      background: var(--bg, #f8fafc);
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      will-change: transform;
      pointer-events: none;
    }

    .mobile-swipe-page .mobile-swipe-live-panel {
      display: block !important;
      width: var(--mobile-swipe-panel-width, 100%) !important;
      max-width: var(--mobile-swipe-panel-width, 100%) !important;
      min-width: 0 !important;
      min-height: 100%;
      margin: 0 0 0 var(--mobile-swipe-panel-left, 0);
      box-sizing: border-box;
    }

    .mobile-swipe-stage.settling .mobile-swipe-page {
      transition: transform 220ms ease;
    }

    .mobile-pull-refresh {
      position: fixed;
      left: 50%;
      top: calc(env(safe-area-inset-top, 0px) + 10px);
      transform: translate(-50%, -80px);
      z-index: 8700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      color: white;
      font-size: 13px;
      font-weight: 800;
      padding: 9px 13px;
      opacity: 0;
      pointer-events: none;
      transition: transform 160ms ease, opacity 160ms ease;
    }

    .mobile-pull-refresh.active {
      opacity: 1;
    }

    .mobile-pull-refresh.ready {
      background: #16a34a;
    }

    .mobile-pull-refresh.refreshing {
      background: #15803d;
    }

    table.planner {
      border-collapse: collapse;
      width: 100%;
      min-width: 1200px;
      table-layout: fixed;
      background: white;
    }

    .planner th,
    .planner td {
      border: 1px solid #333;
      vertical-align: top;
      padding: 6px;
      min-height: 68px;
    }

    .planner th {
      background: #fafafa;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
    }

    .kw-cell {
      width: 250px;
      font-size: 22px !important;
    }

  .project-cell {
    width: 250px;
    background: #fff;
    text-align: center;
  }

  .project-open-cell,
  .project-jump,
  .month-project-link {
    cursor: pointer;
  }

  .project-open-cell {
    position: relative;
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  }

  .project-open-cell:hover {
    background: #f0fdf4 !important;
    box-shadow: inset 4px 0 0 #16a34a;
  }

  .project-open-cell .project-no::after {
    content: "Projekt öffnen";
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 5px auto 0;
    padding: 3px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 900;
  }

  html[lang="en"] .project-open-cell .project-no::after {
    content: "Open project";
  }

  html[lang="no"] .project-open-cell .project-no::after {
    content: "Åpne prosjekt";
  }

  .project-jump,
  .month-project-link {
    appearance: none;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #14532d;
    font: inherit;
    font-weight: 950;
    text-align: left;
  }

  .project-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 5px;
  }

  .project-jump::after,
  .month-project-link::after {
    content: "↗";
    margin-left: auto;
    font-size: 12px;
    opacity: 0.75;
  }

  .project-jump:hover,
  .month-project-link:hover {
    background: #dcfce7;
    border-color: #86efac;
  }

  .month-project-link {
    display: flex;
    width: 100%;
    padding: 3px 4px;
    font-size: 11px;
    line-height: 1.15;
  }

  .project-cell.sick-project,
  .sick-row .day-cell {
    background: #fee2e2;
  }

  .sick-row .project-no,
  .sick-row .project-name {
    color: #b91c1c;
  }

  .vacation-row .project-cell,
  .vacation-row .day-cell {
    background: #eef2ff;
  }

  .vacation-row .project-no,
  .vacation-row .project-name {
    color: #3730a3;
  }

  .absence-row .project-cell,
  .absence-row .day-cell {
    background: #fef3c7;
  }

  .absence-row .project-no,
  .absence-row .project-name {
    color: #92400e;
  }

  .holiday-head {
    background: #fff7ed !important;
    color: #9a3412;
  }

  .holiday-name {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #c2410c;
    font-weight: 800;
  }

  .holiday-cell {
    background: #fff7ed;
  }

    .project-no {
      font-size: 17px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .project-name {
      font-size: 14px;
    }

    .project-floor {
      display: inline-block;
      margin-top: 5px;
      padding: 2px 7px;
      border-radius: 999px;
      background: #e5e7eb;
      font-size: 12px;
      font-weight: 800;
    }

    .project-meta {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .admin-block {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 12px;
      margin-top: 12px;
      background: #fafafa;
    }

    .admin-block h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .data-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    #timeExportEmployeeList {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 24px;
      width: 100%;
      margin-top: 8px;
      border-top: 1px solid var(--soft-border);
    }

    .time-export-employee-row {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      min-width: 0;
      min-height: 54px;
      padding: 8px 4px;
      border-bottom: 1px solid var(--soft-border);
      cursor: pointer;
    }

    .time-export-employee-row input {
      width: 22px;
      height: 22px;
      margin: 0;
    }

    .time-export-employee-details {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .time-export-employee-details strong,
    .time-export-employee-details .small-info {
      margin: 0;
      overflow-wrap: anywhere;
    }

    .data-pill {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 999px;
      padding: 5px 9px;
      background: white;
      font-size: 12px;
      font-weight: 800;
    }

    #projectList,
    #sectionList,
    #floorList,
    #employeeList,
    #vehicleList {
      display: block;
      max-height: 280px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .hidden-field {
      display: none !important;
    }

    .project-platform {
      border: 1px solid var(--soft-border);
      border-radius: 12px;
      background: white;
      padding: 16px;
      margin-bottom: 14px;
    }

    .platform-grid {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .file-card {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .photo-doc-card {
      background: #ffffff;
    }

    .delivery-mobile-list {
      display: none;
    }

    .project-section-switch {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      padding: 10px;
      position: sticky;
      top: 12px;
    }

    .project-section-switch button.active {
      background: #1d4ed8;
      color: white;
    }

    .project-section-switch button {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
    }

    .project-main-area {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }

    .folder-tools-row {
      display: grid;
      grid-template-columns: minmax(140px, 190px) minmax(180px, 1fr) auto;
      gap: 8px;
      align-items: center;
      max-width: 760px;
    }

    .file-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      border-top: 1px solid #e5e7eb;
      padding-top: 8px;
      margin-top: 8px;
    }

    .folder-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .folder-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      padding: 8px;
    }

    .folder-row.expanded {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .folder-row .selected-folder-files {
      grid-column: 1 / -1;
      margin-top: 4px;
    }

    .folder-row.active {
      border-color: var(--soft-border);
      background: transparent;
    }

    .folder-row.active .folder-open strong {
      color: #16a34a;
    }

    body.admin-view .folder-row.active .folder-open,
    body.employee-view .folder-row.active .folder-open {
      color: #16a34a;
    }

    .folder-row button {
      white-space: nowrap;
    }

    .folder-actions,
    .file-actions {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      justify-content: flex-end;
    }

    .folder-actions button,
    .file-actions button {
      padding: 6px 8px;
      font-size: 12px;
      border-radius: 6px;
    }

    .folder-open {
      text-align: left;
      background: transparent;
      color: var(--text);
      border: 0;
      padding: 0;
      min-width: 0;
      white-space: normal !important;
    }

    .file-title {
      overflow-wrap: anywhere;
      line-height: 1.25;
    }

    .selected-folder-files {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 10px;
    }

    .plan-folder-tree {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .plan-folder-table-wrap {
      width: 100%;
      overflow: auto;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
    }

    .plan-folder-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    .plan-folder-table th,
    .plan-folder-table td {
      border-bottom: 1px solid var(--soft-border);
      padding: 10px 12px;
      vertical-align: top;
    }

    .plan-folder-table th {
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      text-align: left;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .plan-folder-table .plan-main-table-row td,
    .plan-folder-table .plan-subfolder-table-row td,
    .plan-folder-table .plan-file-table-row td {
      background: #fbfdff;
    }

    .plan-folder-main-toggle {
      border: 0;
      background: transparent;
      font: inherit;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      cursor: pointer;
      text-align: left;
      width: 100%;
    }

    .plan-folder-main-toggle:hover {
      color: #166534;
    }

    .plan-folder-main-toggle .plan-folder-arrow {
      font-size: 16px;
      width: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .plan-folder-main-toggle strong {
      font-size: 16px;
      font-weight: 950;
      letter-spacing: 0.01em;
    }

    .plan-folder-table .file-actions {
      justify-content: flex-start;
      gap: 6px;
    }

    .plan-folder-table .plan-table-folder-cell {
      width: 240px;
    }

    .plan-folder-table .plan-table-actions {
      width: 280px;
      min-width: 220px;
    }

    .plan-folder-table .plan-file-table-row.plan-locked td {
      opacity: 0.66;
    }

    .plan-folder-table .plan-file-table-row.plan-inactive td {
      opacity: 0.58;
      background: #f1f5f9;
      color: #64748b;
    }

    .plan-folder-table .plan-main-table-row.is-expanded td {
      border-bottom-color: #16a34a;
      border-bottom-width: 2px;
    }

    .plan-main-folder {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .plan-main-toggle {
      width: 100%;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      text-align: left;
      background: #edf5ef;
      border: 0;
      border-radius: 0;
      color: var(--text);
      padding: 10px 12px;
    }

    .plan-main-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 8px;
      background: #edf5ef;
    }

    .plan-main-head .plan-main-toggle {
      flex: 1 1 auto;
      min-width: 0;
    }

    .plan-main-toggle strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 950;
    }

    .plan-folder-arrow {
      font-size: 18px;
      font-weight: 900;
      color: var(--accent);
      line-height: 1;
      text-align: center;
    }

    .plan-subfolder {
      margin: 10px 12px;
      border: 0;
      border-top: 1px solid #e5e7eb;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      padding: 10px 0 0;
    }

    .plan-subfolder.active {
      border-color: #d1d5db;
      background: transparent;
    }

    .plan-subfolder.plan-drop-target {
      background: rgba(22, 163, 74, 0.08);
      box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.75);
    }

    .plan-main-folder.plan-drop-target > .plan-main-toggle {
      background: rgba(22, 163, 74, 0.08);
    }

    .file-row.plan-file-draggable {
      cursor: grab;
    }

    .file-row.plan-file-draggable:active {
      cursor: grabbing;
    }

    .plan-template-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
      margin-top: 8px;
      max-height: min(42vh, 360px);
      overflow: auto;
      padding-right: 4px;
    }

    .plan-template-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f8fafc;
      min-width: 0;
    }

    .plan-template-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      margin: 0;
      font-weight: 850;
    }

    .plan-template-label span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plan-template-delete {
      width: 28px !important;
      min-width: 28px !important;
      height: 28px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      font-size: 18px !important;
      line-height: 1 !important;
    }

    #editModal.plan-template-modal .edit-modal {
      width: min(760px, calc(100vw - 48px));
    }

    #editModal.plan-template-modal #editModalFields {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      max-height: min(62vh, 520px);
      overflow: auto;
    }

    .plan-template-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .plan-subfolder-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .plan-folder-heading-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .plan-folder-order-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      flex: 0 0 auto;
    }

    .plan-folder-order-button {
      width: 34px !important;
      min-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 !important;
      border: 1px solid #cbd5e1 !important;
      border-radius: 8px !important;
      background: #ffffff !important;
      color: #334155 !important;
      font-size: 17px !important;
      line-height: 1 !important;
    }

    .plan-folder-order-button:disabled {
      opacity: 0.3;
      cursor: default;
    }

    .plan-subfolder-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      padding: 4px 0;
      text-align: left;
      cursor: pointer;
      min-height: 40px;
    }

    .plan-subfolder-title strong {
      color: #1f2937;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.01em;
    }

    .plan-subfolder.active .plan-subfolder-title strong {
      color: #111827;
    }

    .plan-file-link {
      display: inline;
      border: 0;
      background: transparent;
      color: #145c3c;
      padding: 0;
      font: inherit;
      font-weight: 800;
      text-align: left;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      overflow-wrap: anywhere;
    }

    .plan-file-link:hover {
      color: #0d4330;
      text-decoration-thickness: 2px;
    }

    .plan-subfolder .selected-folder-files {
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
      margin-top: 2px;
    }

    .plan-subfolder .file-row {
      margin-top: 0;
      padding: 8px 0;
      border-top: 1px solid #eef1f4;
    }

    @media (max-width: 760px) {
      .folder-tools-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .plan-main-toggle {
        grid-template-columns: 22px minmax(0, 1fr);
      }

      .plan-main-toggle .file-meta {
        grid-column: 2;
      }

      .plan-subfolder {
        margin: 7px 8px;
      }

      .plan-folder-order-button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
      }
    }

    .file-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .plan-status-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .file-preview {
      width: 100%;
      height: 100%;
      min-height: 70vh;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
    }

    .pdf-preview-frame {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 78vh;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
    }

    .pdf-preview-fallback {
      padding: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .pdf-canvas-preview {
      width: 100%;
      min-height: 78vh;
      max-height: calc(94vh - 150px);
      overflow: auto;
      padding: 14px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #eef2f5;
      cursor: grab;
      user-select: none;
      overscroll-behavior: contain;
    }

    .pdf-canvas-preview.dragging {
      cursor: grabbing;
    }

    .pdf-canvas-toolbar {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 8px;
      margin: -14px -14px 12px;
      border-bottom: 1px solid var(--soft-border);
      background: rgba(238, 242, 245, 0.94);
      backdrop-filter: blur(8px);
    }

    .pdf-canvas-toolbar button {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 7px;
    }

    .pdf-zoom-label {
      min-width: 62px;
      color: var(--text);
      font-weight: 800;
      text-align: center;
    }

    .pdf-canvas-status {
      display: grid;
      min-height: 260px;
      place-items: center;
      color: var(--muted);
      font-weight: 800;
      text-align: center;
    }

    .pdf-canvas-page {
      display: block;
      height: auto;
      margin: 0 auto 16px;
      border-radius: 4px;
      background: white;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
      user-select: none;
    }

    .modal-backdrop.file-modal .edit-modal {
      width: min(96vw, 1500px);
      max-width: 96vw;
      height: 94vh;
      display: flex;
      flex-direction: column;
    }

    .modal-backdrop.file-modal .modal-message {
      flex: 1;
      min-height: 0;
      overflow: auto;
      margin-bottom: 10px;
      max-height: none;
    }

    .modal-backdrop.file-modal .file-preview {
      min-height: 0;
      height: 100%;
    }

    .modal-backdrop.file-modal .pdf-preview-frame {
      min-height: 0;
      height: 100%;
    }

    .modal-backdrop.mobile-pdf-fullscreen {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99998;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      background: #ffffff;
    }

    .modal-backdrop.active.mobile-pdf-fullscreen {
      padding: 0;
      padding-bottom: 0;
    }

    .modal-backdrop.mobile-pdf-fullscreen .edit-modal {
      width: 100dvw;
      max-width: none;
      height: 100dvh;
      max-height: 100dvh;
      border: 0;
      border-radius: 0;
      padding: 0;
      background: #ffffff;
      box-shadow: none;
    }

    .modal-backdrop.mobile-pdf-fullscreen #editModalTitle {
      position: fixed;
      left: max(12px, env(safe-area-inset-left));
      top: calc(env(safe-area-inset-top) + 10px);
      z-index: 4;
      max-width: calc(100dvw - 132px);
      margin: 0;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.72);
      color: #ffffff;
      font-size: 13px;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      backdrop-filter: blur(10px);
    }

    .modal-backdrop.mobile-pdf-fullscreen #editModalMessage {
      flex: 1;
      max-height: none;
      min-height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #ffffff;
    }

    .mobile-pdf-viewer {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      background: #ffffff;
      touch-action: auto;
      overscroll-behavior: none;
    }

    .mobile-pdf-canvas-viewport {
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      touch-action: none;
      overscroll-behavior: none;
      background: #e8ebee;
      cursor: grab;
    }

    .mobile-pdf-canvas-viewport:active {
      cursor: grabbing;
    }

    .mobile-pdf-canvas-stage {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      will-change: transform;
    }

    .mobile-pdf-canvas-page {
      display: block;
      margin: 0 auto 8px;
      background: #ffffff;
      box-shadow: 0 1px 7px rgba(15, 23, 42, 0.2);
    }

    .mobile-pdf-canvas-page:last-of-type {
      margin-bottom: 0;
    }

    .plan-review-viewer-prototype .mobile-pdf-canvas-page {
      box-shadow: none;
    }

    .mobile-pdf-sharp-tile {
      position: absolute;
      display: block;
      max-width: none;
      max-height: none;
      pointer-events: none;
      background: #ffffff;
    }

    .plan-review-viewer-prototype.plan-review-yellow-hidden .plan-review-mark-anchor.status-reported {
      display: none;
      pointer-events: none;
    }

    .mobile-pdf-sharp-layer {
      position: absolute;
      z-index: 2;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      transform: none;
    }

    .mobile-pdf-mark-layer {
      position: absolute;
      z-index: 3;
      inset: 0;
      overflow: hidden;
      contain: strict;
      pointer-events: none;
      transform: none;
      transform-origin: 0 0;
      will-change: auto;
    }

    .plan-review-page-overlay {
      position: absolute;
      overflow: visible;
      pointer-events: none;
    }

    .plan-review-mark-anchor {
      position: absolute;
      width: 0;
      height: 0;
      overflow: visible;
      pointer-events: none;
    }

    .plan-review-derived-main-anchor {
      pointer-events: none;
    }

    .plan-review-derived-main-glyph {
      position: absolute;
      left: 0;
      top: 0;
      color: #d71920;
      transform: translate(-50%, -50%);
    }

    .plan-review-derived-main-glyph svg {
      stroke: #d71920;
      stroke-width: 3;
    }

    .plan-review-snap-ring {
      position: absolute;
      width: var(--plan-review-ring-size, 1px);
      height: var(--plan-review-ring-size, 1px);
      border: 1px solid #14532d;
      border-radius: 50%;
      box-sizing: border-box;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .plan-review-position-arrow {
      position: absolute;
      z-index: 4;
      width: 32px;
      height: 32px;
      pointer-events: none;
    }
    .plan-review-position-arrow[hidden] { display: none; }
    .plan-review-position-arrow svg { display: block; width: 32px; height: 32px; }
    .plan-review-position-arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .plan-review-position-arrow .position-arrow-outline { stroke: #fff; stroke-width: 7; }
    .plan-review-position-arrow .position-arrow-line { stroke: #14532d; stroke-width: 4; }

    .plan-review-snap-ring:focus-visible {
      outline: 2px solid #14532d;
      outline-offset: 4px;
    }

    body .plan-review-viewer-prototype .status-reported { color: #a66b00 !important; }
    body .plan-review-viewer-prototype .status-fabricated { color: #9333b8 !important; }
    body .plan-review-viewer-prototype .status-reported .plan-review-mark-glyph svg { stroke: #e5b500; }
    body .plan-review-viewer-prototype .status-fabricated .plan-review-mark-glyph svg { stroke: #9333b8; }
    .plan-review-work-status { font-size: 23px; font-weight: 700; }
    .plan-review-toolbar {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
      padding: 0 max(2px, env(safe-area-inset-right)) 0 max(2px, env(safe-area-inset-left));
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      background: white;
      border-bottom: 1px solid #d8e2db;
    }
    body .plan-review-viewer-prototype .plan-review-toolbar button {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      flex: 0 0 44px;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      box-sizing: border-box;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #0f172a !important;
      font-size: 25px;
      line-height: 1;
    }
    body .plan-review-viewer-prototype .plan-review-toolbar button:focus-visible,
    body .plan-review-viewer-prototype .plan-review-context-menu button:focus-visible {
      outline: 2px solid #1b7137;
      outline-offset: -2px;
    }
    body .plan-review-viewer-prototype .plan-review-yellow-toggle span {
      font-size: 30px;
      font-weight: 800;
      line-height: 1;
    }
    body .plan-review-viewer-prototype .plan-review-yellow-toggle[aria-pressed="true"] span { color: #e5b500; }
    body .plan-review-viewer-prototype .plan-review-yellow-toggle[aria-pressed="false"] span { color: #6b7280; }
    .plan-review-position-navigation {
      display: flex;
      flex: 1 1 150px;
      align-items: center;
      justify-content: center;
      min-width: 0;
      height: 44px;
    }
    .plan-review-position-navigation.hidden { display: none; }
    .plan-review-position-navigation span {
      min-width: 68px;
      overflow: hidden;
      color: #14532d;
      font-size: 11px;
      font-weight: 800;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    body .plan-review-viewer-prototype .plan-review-toolbar .plan-review-position-navigation button {
      flex-basis: 44px;
      font-size: 29px;
    }
    body .plan-review-viewer-prototype .plan-review-toolbar .mobile-pdf-close { margin-left: auto !important; }
    body .plan-review-viewer-prototype .plan-review-toolbar .mobile-pdf-close::before { content: none !important; }
    .plan-review-context-menu {
      position: absolute;
      z-index: 14;
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      width: max-content;
      max-width: min(300px, calc(100% - 12px));
      padding: 5px;
      border: 1px solid #bdd3c3;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
    }
    .plan-review-context-menu.hidden { display: none; }
    body .plan-review-viewer-prototype .plan-review-context-menu button {
      display: inline-flex !important;
      flex: 0 0 60px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 60px !important;
      min-height: 48px !important;
      margin: 0 !important;
      padding: 3px 5px !important;
      border: 0 !important;
      border-radius: 8px !important;
      background: #f4f7f5 !important;
      box-shadow: none !important;
    }
    .plan-review-context-menu button > span { font-size: 25px; font-weight: 800; line-height: 1; }
    .plan-review-context-menu button > span svg { width: 20px; height: 20px; }
    .plan-review-context-menu button > small { font-size: 9px; line-height: 1.1; white-space: nowrap; }
    body .plan-review-context-menu .status-reported { color: #a66b00 !important; }
    body .plan-review-context-menu .status-fabricated { color: #9333b8 !important; }
    body .plan-review-context-menu .status-done { color: #d71920 !important; }
    body .plan-review-context-menu .status-issue { color: #be5900 !important; }
    body .plan-review-context-menu .status-supervisor { color: #1769aa !important; }
    body .plan-review-context-menu .status-remove {
      flex: 0 0 44px !important;
      min-width: 44px !important;
      color: #14532d !important;
    }

    .plan-review-snap-ring.focus-muted {
      opacity: 0.22;
    }

    .plan-review-snap-ring.focus-main {
      border-width: 2px;
      border-color: #166534;
      opacity: 0.72;
    }

    .plan-review-snap-ring.focus-member {
      z-index: 1;
      border-width: 2px;
      border-color: #15803d;
      background: transparent;
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
      opacity: 1;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button {
      position: absolute;
      left: -22px;
      top: -22px;
      width: 44px !important;
      height: 44px;
      min-width: 44px !important;
      min-height: 44px !important;
      margin: 0;
      padding: 0 !important;
      border: 0;
      border-radius: 50%;
      background: transparent !important;
      box-shadow: none !important;
      pointer-events: auto;
      touch-action: none;
      color: #d71920 !important;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-done {
      color: #d71920 !important;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-issue {
      color: #ea7500 !important;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-supervisor {
      color: #1769aa !important;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button:hover,
    body .plan-review-viewer-prototype .plan-review-mark-button:focus-visible,
    body .plan-review-viewer-prototype .plan-review-mark-button:active {
      background: transparent !important;
      box-shadow: none !important;
      filter: none !important;
    }

    .plan-review-mark-glyph {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--plan-review-x-size, 1px);
      height: var(--plan-review-x-size, 1px);
      transform: translate(-50%, -50%);
    }

    .plan-review-mark-glyph svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-done .plan-review-mark-glyph svg {
      stroke: #d71920;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-issue .plan-review-mark-glyph svg {
      stroke: #ea7500;
      stroke-width: 4;
    }

    body .plan-review-viewer-prototype .plan-review-mark-button.status-supervisor .plan-review-mark-glyph svg {
      stroke: #1769aa;
    }

    .modal-backdrop.plan-review-prototype .edit-modal-title-row,
    .modal-backdrop.plan-review-prototype #editModalTitle {
      display: none;
    }

    .modal-backdrop.plan-review-prototype #editModalMessage {
      white-space: normal;
    }

    .plan-review-viewer-prototype {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    body header.plan-review-header,
    body.employee-view header.plan-review-header,
    body.admin-view header.plan-review-header {
      position: relative;
      z-index: 8;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 2px;
      min-width: 0;
      min-height: 0 !important;
      padding: env(safe-area-inset-top) max(2px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)) !important;
      border-bottom: 0;
      background: #ffffff;
      color: #0f172a;
    }

    .plan-review-header-copy {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 44px;
      min-width: 0;
    }

    .plan-review-header-copy strong {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      color: #0f172a;
      font-size: 13px;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plan-review-list-toggle svg,
    .plan-review-supervisor-toggle svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body #planReviewSupervisorToggle.plan-review-supervisor-toggle.active {
      background: transparent !important;
      color: #168642 !important;
    }
    body #planReviewSupervisorToggle.plan-review-supervisor-toggle.active svg { stroke: #168642 !important; }

    .plan-review-progress-summary {
      display: block;
      flex: 0 0 auto;
      min-width: 0;
      overflow: hidden;
      color: #52606d;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plan-review-progress-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      flex: 0 1 auto;
      min-width: 0;
      max-width: 65%;
    }

    .plan-review-progress-copy .plan-review-progress-summary { max-width: 100%; }

    .plan-review-progress-note,
    .plan-review-overview-progress-note {
      display: block;
      max-width: 100%;
      color: #64748b;
      font-size: 10px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .plan-review-progress-note[hidden],
    .plan-review-overview-progress-note[hidden] { display: none; }

    .plan-review-work-progress-note {
      margin: 0;
      padding: 10px 14px;
      color: #52606d;
      font-size: 12px;
      line-height: 1.4;
      overflow-wrap: anywhere;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .plan-review-progress-track {
      display: block;
      position: absolute;
      right: max(2px, env(safe-area-inset-right));
      bottom: 0;
      left: max(6px, env(safe-area-inset-left));
      width: auto;
      height: 2px;
      margin: 0;
      overflow: hidden;
      border-radius: 999px;
      background: #dfe5e8;
    }

    .plan-review-progress-fill {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: #2f7d32;
    }

    .plan-review-viewer-body {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .plan-review-conflict-notice {
      position: absolute;
      z-index: 9;
      top: 8px;
      left: 50%;
      max-width: min(320px, calc(100% - 24px));
      padding: 7px 10px;
      border: 1px solid rgba(180, 83, 9, 0.24);
      border-radius: 9px;
      background: rgba(255, 251, 235, 0.97);
      color: #92400e;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -6px);
      transition: opacity 120ms ease, transform 120ms ease;
    }

    .plan-review-conflict-notice.visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .plan-review-work-panel {
      position: absolute;
      z-index: 6;
      top: 8px;
      bottom: max(8px, env(safe-area-inset-bottom));
      left: max(8px, env(safe-area-inset-left));
      width: min(360px, calc(100% - 16px));
      max-width: calc(100% - 16px);
      height: auto;
      max-height: none;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.14);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
      pointer-events: auto;
      touch-action: pan-y;
      backdrop-filter: blur(14px);
    }

    .plan-review-work-panel.hidden {
      display: none;
    }

    .plan-review-work-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      padding: 10px 10px 8px 14px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    }

    .plan-review-work-head strong {
      min-width: 0;
      color: #0f172a;
      font-size: 15px;
      line-height: 1.2;
    }

    body .plan-review-viewer-prototype .plan-review-work-close {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      color: #0f172a !important;
      box-shadow: none !important;
      font-size: 24px !important;
      line-height: 1 !important;
    }

    .plan-review-work-scroll {
      min-width: 0;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .plan-review-work-empty {
      margin: 0;
      padding: 22px 16px;
      color: #52606d;
      font-size: 14px;
      text-align: center;
    }

    .plan-review-work-group + .plan-review-work-group {
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    body .plan-review-viewer-prototype .plan-review-work-group-toggle,
    body .plan-review-viewer-prototype .plan-review-work-item {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #0f172a !important;
      box-shadow: none !important;
      text-align: left;
    }

    body .plan-review-viewer-prototype .plan-review-work-group-toggle {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center !important;
      gap: 10px;
      min-height: 58px !important;
      padding: 7px 10px !important;
      font-size: 14px !important;
      font-weight: 800 !important;
    }

    .plan-review-position-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      min-width: 36px;
      border: 1.5px solid #334155;
      border-radius: 50%;
      color: #0f172a;
      font-size: 13px;
      font-weight: 850;
      line-height: 1;
    }

    .plan-review-work-group-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .plan-review-work-group-details {
      min-width: 0;
      overflow: hidden;
      color: #0f172a;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plan-review-work-group-meta {
      white-space: normal;
      overflow-wrap: anywhere;
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
    }

    .plan-review-work-chevron {
      color: #334155;
      font-size: 19px;
      font-weight: 600;
      line-height: 1;
      pointer-events: none;
    }

    .plan-review-work-group-static {
      cursor: default;
    }

    .plan-review-main-choices {
      min-width: 0;
      max-width: 100%;
      padding: 8px;
      background: #edf5ef;
      border-block: 1px solid #c4d8ca;
      box-sizing: border-box;
    }

    .plan-review-main-choices-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
    }

    .plan-review-main-choices-head strong {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    body .plan-review-viewer-prototype .plan-review-main-choices-head button {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      padding: 10px;
    }

    .plan-review-main-choices-head svg { width: 20px; height: 20px; }

    body .plan-review-viewer-prototype .plan-review-main-choice {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      min-height: 44px;
      margin: 4px 0;
      padding: 10px;
      box-sizing: border-box;
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
      font-size: 14px;
    }

    .plan-review-work-items {
      border-top: 1px solid rgba(15, 23, 42, 0.06);
      background: rgba(248, 250, 252, 0.88);
    }

    body .plan-review-viewer-prototype .plan-review-work-item {
      display: flex !important;
      align-items: center !important;
      gap: 10px;
      min-height: 44px !important;
      padding: 7px 14px 7px 24px !important;
      font-size: 14px !important;
      font-weight: 700 !important;
    }

    body .plan-review-viewer-prototype .plan-review-work-item + .plan-review-work-item {
      border-top: 1px solid rgba(15, 23, 42, 0.05) !important;
    }

    body .plan-review-viewer-prototype .plan-review-work-item.selected {
      background: rgba(21, 128, 61, 0.08) !important;
    }

    .plan-review-work-item-label {
      min-width: 0;
      flex: 1 1 auto;
    }

    .plan-review-work-quantity {
      flex: 0 0 auto;
      color: #64748b;
      font-size: 12px;
      font-weight: 750;
    }

    .plan-review-work-issue {
      flex: 0 0 auto;
      color: #ea7500;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
    }

    .plan-review-work-done {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #d71920;
      line-height: 1;
    }

    .plan-review-work-done svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 3;
    }

    .plan-review-viewer-loading {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      background: rgba(255, 255, 255, 0.92);
      pointer-events: none;
    }

    .plan-review-viewer-loading.hidden {
      display: none;
    }

    .plan-review-setting {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .plan-review-setting input[type="checkbox"] {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin: 0;
    }

    .plan-status-row {
      align-items: center;
    }

    .plan-status-row > .leave-status {
      margin-top: 0;
    }

    body button.plan-review-status-chip,
    body.admin-view button.plan-review-status-chip,
    body.employee-view button.plan-review-status-chip,
    .plan-review-status-chip {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      margin: 0;
      padding: 0 2px !important;
      border: 0 !important;
      border-radius: 999px;
      background: transparent !important;
      color: #166534 !important;
      box-shadow: none;
      text-decoration: none;
    }

    body button.plan-review-status-chip:hover,
    body button.plan-review-status-chip:focus,
    body button.plan-review-status-chip:focus-visible,
    body button.plan-review-status-chip:active,
    body.admin-view button.plan-review-status-chip:hover,
    body.admin-view button.plan-review-status-chip:focus,
    body.admin-view button.plan-review-status-chip:focus-visible,
    body.admin-view button.plan-review-status-chip:active,
    body.employee-view button.plan-review-status-chip:hover,
    body.employee-view button.plan-review-status-chip:focus,
    body.employee-view button.plan-review-status-chip:focus-visible,
    body.employee-view button.plan-review-status-chip:active {
      background: transparent !important;
      color: #145c2f !important;
      box-shadow: none;
    }

    .plan-review-status-chip-surface {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 26px;
      padding: 4px 9px 4px 7px;
      border: 1px solid rgba(22, 101, 52, 0.16);
      border-radius: 999px;
      background: #dcfce7;
      color: inherit;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      transition: background-color 120ms ease, border-color 120ms ease;
    }

    button.plan-review-status-chip:hover .plan-review-status-chip-surface,
    button.plan-review-status-chip:focus-visible .plan-review-status-chip-surface,
    button.plan-review-status-chip:active .plan-review-status-chip-surface {
      border-color: rgba(22, 101, 52, 0.28);
      background: #c9f7d8;
    }

    .plan-review-status-chip-surface svg {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .plan-review-status-chip.is-static {
      cursor: default;
    }

    .plan-review-file-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      max-width: 100%;
    }

    .plan-review-file-heading > .plan-file-link,
    .plan-review-file-heading > .file-title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .plan-review-overview-progress {
      display: block;
      width: 100%;
      min-width: 0;
      margin-top: 2px;
    }

    .plan-review-overview-progress-value {
      flex: 0 0 auto;
      margin-left: auto;
      color: #166534;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }

    .plan-review-overview-progress-track {
      display: block;
      width: 100%;
      height: 2px;
      margin-top: 3px;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.12);
    }

    .plan-review-overview-progress-fill {
      display: block;
      width: var(--plan-review-overview-progress, 0%);
      height: 100%;
      background: #168642;
    }

    .mobile-pdf-overview {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: max(56px, calc(env(safe-area-inset-top) + 44px)) 8px 8px;
      border: 0;
      border-radius: 0;
      background: #ffffff;
      box-shadow: none;
      overflow: hidden;
    }

    .mobile-pdf-overview canvas {
      display: block;
      max-width: 100%;
      max-height: 100%;
      background: #ffffff;
      box-shadow: 0 1px 8px rgba(15, 23, 42, 0.16);
      pointer-events: none;
    }

    .mobile-pdf-overview-hint {
      position: absolute;
      left: 50%;
      bottom: max(18px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.76);
      color: #ffffff;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      pointer-events: none;
    }

    .mobile-native-pdf-frame {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 100%;
      border: 0;
      background: #ffffff;
      -webkit-overflow-scrolling: touch;
    }

    .modal-backdrop.mobile-pdf-fullscreen #editModalActions {
      position: fixed;
      right: max(12px, env(safe-area-inset-right));
      top: calc(env(safe-area-inset-top) + 8px);
      bottom: auto;
      z-index: 5;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body .modal-backdrop.mobile-pdf-fullscreen #editModalActions > .mobile-pdf-fit,
    body .modal-backdrop.mobile-pdf-fullscreen #editModalActions > .mobile-pdf-close {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 34px !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 50% !important;
      border: 1px solid rgba(255, 255, 255, 0.38);
      background: rgba(15, 23, 42, 0.74);
      color: #ffffff;
      font-size: 20px !important;
      line-height: 1 !important;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
      backdrop-filter: blur(10px);
    }

    body .modal-backdrop.mobile-pdf-fullscreen #editModalActions > .mobile-pdf-fit {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(15, 23, 42, 0.18);
      color: #0f172a;
    }

    body .modal-backdrop.plan-review-prototype #editModalActions > .mobile-pdf-fit,
    body .modal-backdrop.plan-review-prototype #editModalActions > .mobile-pdf-close {
      flex-basis: 44px !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
    }

    body .modal-backdrop.plan-review-prototype #editModalActions {
      width: max-content;
      max-width: none;
      flex-wrap: nowrap;
    }

    .mobile-pdf-fit svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .file-row.mobile-plan-file {
      cursor: pointer;
      align-items: center;
      gap: 10px;
    }

    .file-row.mobile-plan-file .file-title {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .file-row.mobile-plan-file .standard-open-button {
      padding: 8px 10px;
      font-size: 12px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .file-row.plan-locked {
      opacity: 0.58;
      background: #f1f5f9;
      color: #64748b;
      cursor: not-allowed;
    }

    .file-row.plan-locked .file-title {
      text-decoration: none;
    }

    .file-row.plan-inactive {
      opacity: 0.58;
      background: #f1f5f9;
      color: #64748b;
    }

    .plan-settings-form {
      display: grid;
      gap: 12px;
      width: 100%;
    }

    .plan-settings-form label {
      display: grid;
      gap: 6px;
      margin: 0;
      font-weight: 800;
    }

    .plan-settings-form select,
    .plan-settings-form input {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    .plan-settings-note {
      margin: 0;
      line-height: 1.45;
    }

    .file-full-image {
      display: block;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      border-radius: 8px;
    }

    .camera-preview {
      width: 100%;
      max-height: 68vh;
      border-radius: 8px;
      background: #020617;
      object-fit: contain;
    }

    .modal-backdrop.camera-fullscreen {
      position: fixed !important;
      inset: 0 !important;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      background: #020617;
      z-index: 200000 !important;
    }

    .modal-backdrop.camera-fullscreen .edit-modal {
      width: 100vw;
      width: 100dvw;
      height: 100vh;
      height: 100dvh;
      max-width: none;
      max-height: none;
      border-radius: 0;
      border: 0;
      background: #020617;
      color: #ffffff;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      padding: 0;
      overflow: hidden;
    }

    .modal-backdrop.camera-fullscreen #editModalTitle {
      display: none;
    }

    .modal-backdrop.camera-fullscreen #editModalMessage {
      min-height: 0;
      display: block;
      position: relative;
      overflow: hidden;
      margin: 0;
    }

    .modal-backdrop.camera-fullscreen .camera-preview {
      width: 100%;
      height: 100%;
      max-height: none;
      border-radius: 0;
      object-fit: cover;
      background: #020617;
      cursor: crosshair;
      touch-action: manipulation;
    }

    .camera-focus-ring {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      width: 68px;
      height: 68px;
      border: 2px solid #facc15;
      border-radius: 10px;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(1.28);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.36);
    }

    .camera-focus-ring.active {
      animation: camera-focus-pulse 1.15s ease-out;
    }

    .camera-processing-overlay {
      position: absolute;
      inset: 0;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(2, 6, 23, 0.18);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 120ms ease, visibility 120ms ease;
    }

    .camera-processing-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .camera-processing-status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      max-width: min(88vw, 320px);
      padding: 11px 15px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.68);
      color: #ffffff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 14px;
      font-weight: 650;
      line-height: 1.2;
      text-align: center;
    }

    .camera-processing-spinner {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border: 2px solid rgba(255, 255, 255, 0.36);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: camera-processing-spin 0.75s linear infinite;
    }

    .camera-processing-overlay.error .camera-processing-spinner {
      display: none;
    }

    @keyframes camera-processing-spin {
      to { transform: rotate(360deg); }
    }

    @keyframes camera-focus-pulse {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.28);
      }
      18%,
      72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.94);
      }
    }

    .camera-topbar {
      position: absolute;
      left: max(14px, env(safe-area-inset-left, 0px));
      right: max(14px, env(safe-area-inset-right, 0px));
      top: max(12px, env(safe-area-inset-top, 0px));
      z-index: 4;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
      align-items: center;
      padding: 0;
      background: transparent;
      pointer-events: none;
    }

    .camera-topbar button {
      pointer-events: auto;
    }

    #editModal.delete-confirm-modal {
      align-items: center;
      justify-content: center;
    }

    #editModal.delete-confirm-modal .edit-modal {
      width: min(420px, calc(100vw - 32px));
      min-height: 0 !important;
      height: auto !important;
      max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
    }

    #editModal.delete-confirm-modal #editModalActions {
      display: grid !important;
      grid-template-columns: 1fr;
      margin: 18px 0 0 !important;
      padding: 0 !important;
      position: static !important;
      background: transparent !important;
    }

    #editModal.delete-confirm-modal .delete-confirm-action {
      width: 100%;
      min-height: 48px;
    }

    .camera-done-button,
    .camera-close-button,
    .camera-flash-button,
    .camera-switch-button {
      border: 0;
      background: rgba(0, 0, 0, 0.38);
      color: #ffffff;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: none;
    }

    .camera-done-button {
      justify-self: center;
      min-height: 34px;
      padding: 7px 16px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 13px;
      letter-spacing: .02em;
    }

    .camera-close-button,
    .camera-flash-button {
      width: 38px;
      height: 38px;
      min-width: 38px;
      padding: 0;
      border-radius: 999px;
      font-size: 24px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .camera-flash-button {
      justify-self: start;
      font-size: 18px;
    }

    .camera-flash-button svg {
      width: 19px;
      height: 19px;
      display: block;
      fill: currentColor;
    }

    .camera-flash-button.active {
      color: #facc15;
      background: rgba(250, 204, 21, 0.22);
    }

    .camera-close-button {
      justify-self: end;
    }

    .camera-lens-toggle {
      position: absolute;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 122px);
      z-index: 5;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      justify-content: center;
    }

    .camera-lens-toggle button {
      width: 40px;
      height: 32px;
      min-width: 40px !important;
      min-height: 32px;
      border: 0;
      padding: 0 !important;
      border-radius: 999px;
      background: transparent;
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      font-weight: 950;
      line-height: 32px;
      text-align: center;
    }

    .camera-lens-toggle button.active {
      background: rgba(250, 204, 21, 0.16);
      color: #facc15;
    }

    body .modal-backdrop.camera-fullscreen .camera-lens-toggle {
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);
      width: auto !important;
      min-width: 100px !important;
      height: 44px;
      min-height: 44px;
      padding: 2px !important;
      gap: 0;
      border: 1px solid rgba(255, 255, 255, 0.24) !important;
      border-radius: 999px !important;
      background: rgba(0, 0, 0, 0.58) !important;
      box-shadow: none !important;
    }

    body .modal-backdrop.camera-fullscreen .camera-lens-toggle button {
      width: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      height: 40px !important;
      min-height: 40px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: #ffffff !important;
      box-shadow: none !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      text-align: center;
      filter: none !important;
    }

    body .modal-backdrop.camera-fullscreen .camera-lens-toggle button.active {
      background: transparent !important;
      color: #facc15 !important;
    }

    body .modal-backdrop.camera-fullscreen .camera-lens-toggle button:hover,
    body .modal-backdrop.camera-fullscreen .camera-lens-toggle button:focus-visible {
      background: transparent !important;
      filter: none !important;
    }

    .camera-bottom-controls {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
      z-index: 4;
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr) 76px;
      align-items: center;
      gap: 10px;
      padding: 0;
      min-height: 80px;
      background: transparent;
    }

    .camera-fullscreen.delivery-camera-mode .camera-switch-button {
      display: none !important;
    }

    .camera-fullscreen.delivery-camera-mode .camera-bottom-controls {
      grid-template-columns: 76px minmax(0, 1fr) 76px;
    }

    .camera-finish-arrow {
      justify-self: end;
      width: 48px !important;
      height: 48px;
      min-width: 48px !important;
      min-height: 48px !important;
      padding: 0 !important;
      border: 1px solid rgba(255, 255, 255, 0.78) !important;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.18) !important;
      color: #ffffff !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none !important;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .camera-finish-arrow svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .camera-finish-arrow:disabled {
      opacity: 0.58;
    }

    body .modal-backdrop.camera-fullscreen.delivery-camera-mode .camera-flash-button {
      width: 38px !important;
      height: 38px;
      min-width: 38px !important;
      min-height: 38px !important;
      padding: 0 !important;
      border: 1px solid rgba(255, 255, 255, 0.72) !important;
      background: rgba(0, 0, 0, 0.18) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    body .modal-backdrop.camera-fullscreen.delivery-camera-mode .camera-flash-button.active {
      border-color: rgba(250, 204, 21, 0.9) !important;
      background: rgba(250, 204, 21, 0.12) !important;
      color: #fde047 !important;
    }

    .camera-last-shot {
      position: relative;
      width: 54px;
      height: 54px;
      border-radius: 14px;
      border: 2px solid rgba(255, 255, 255, 0.82);
      overflow: visible;
      background: rgba(255, 255, 255, 0.08);
      justify-self: start;
      display: grid;
      place-items: center;
      color: #ffffff;
      font-weight: 950;
    }

    .camera-last-shot.empty {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      pointer-events: none;
      opacity: 0;
    }

    .camera-last-shot.empty .camera-shot-count {
      display: none;
    }

    .camera-last-shot.processing::after {
      content: "";
      position: absolute;
      inset: 5px;
      border: 2px solid rgba(255, 255, 255, 0.42);
      border-top-color: #ffffff;
      border-radius: 9px;
      pointer-events: none;
      animation: camera-processing-spin 0.75s linear infinite;
    }

    .camera-last-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 12px;
    }

    .camera-shot-count {
      position: absolute;
      right: -7px;
      top: -8px;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: #16a34a;
      color: #ffffff;
      border: 2px solid #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
    }

    .camera-capture-button {
      width: 76px;
      height: 76px;
      border-radius: 999px;
      justify-self: center;
      padding: 0;
      background: transparent !important;
      border: 4px solid rgba(255, 255, 255, 0.98);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.42);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .camera-capture-button::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 999px;
      background: #ffffff;
      border: 0;
      box-shadow: none;
    }

    .camera-capture-button::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #ef4444;
      z-index: 1;
    }

    .camera-capture-button:active {
      transform: scale(0.94);
    }

    .camera-switch-button {
      width: 54px;
      height: 54px;
      min-width: 54px;
      border-radius: 999px;
      padding: 0;
      justify-self: end;
      font-size: 25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .camera-switch-button::after {
      display: none;
    }

    body .modal-backdrop.camera-fullscreen .camera-last-shot {
      width: 58px !important;
      min-width: 58px !important;
      max-width: 58px !important;
      height: 58px !important;
      min-height: 58px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 12px !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #ffffff !important;
      justify-self: center;
    }

    body .modal-backdrop.camera-fullscreen .camera-last-shot.empty {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body .modal-backdrop.camera-fullscreen .camera-last-shot img {
      border-radius: 10px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
    }

    body .modal-backdrop.camera-fullscreen .camera-capture-button {
      width: 76px !important;
      min-width: 76px !important;
      max-width: 76px !important;
      height: 76px !important;
      min-height: 76px !important;
      padding: 0 !important;
      border: 4px solid rgba(255, 255, 255, 0.98) !important;
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.42) !important;
    }

    body .modal-backdrop.camera-fullscreen .camera-switch-button {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      height: 54px !important;
      min-height: 54px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: rgba(0, 0, 0, 0.42) !important;
      color: #ffffff !important;
      box-shadow: none !important;
      justify-self: center;
    }

    .camera-switch-icon {
      position: relative;
      width: 30px;
      height: 30px;
      border: 2px solid currentColor;
      border-left-color: transparent;
      border-radius: 999px;
      display: inline-block;
      transform: rotate(-18deg);
    }

    .camera-switch-icon::before {
      content: "";
      position: absolute;
      right: -3px;
      top: 2px;
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid currentColor;
      transform: rotate(18deg);
    }

    .camera-switch-icon::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 9px;
      width: 10px;
      height: 7px;
      border: 2px solid currentColor;
      border-radius: 3px;
    }

    .camera-gallery-view {
      position: fixed;
      inset: 0;
      z-index: 300000;
      background: #111815;
      color: #ffffff;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-height: 100vh;
      min-height: 100dvh;
    }

    .camera-gallery-top {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 10px;
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px;
      background: linear-gradient(to bottom, rgba(17, 24, 21, 0.94), rgba(17, 24, 21, 0));
      z-index: 2;
    }

    .camera-gallery-top strong {
      justify-self: center;
      text-align: center;
    }

    .camera-gallery-icon {
      width: 44px;
      height: 44px;
      min-width: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #ffffff !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 29px;
      line-height: 1;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .camera-gallery-icon svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .camera-gallery-top button,
    .camera-gallery-bottom button {
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
      min-height: 40px;
      padding: 8px 13px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .camera-gallery-main {
      position: relative;
      min-height: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #111815;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }

    .camera-gallery-main img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    .camera-gallery-bottom {
      display: block;
      align-items: center;
      gap: 10px;
      padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
      background: linear-gradient(to top, rgba(17, 24, 21, 0.94), rgba(17, 24, 21, 0));
    }

    .camera-gallery-thumbs {
      display: flex;
      align-items: center;
      gap: clamp(8px, 2.4vw, 12px);
      min-width: 0;
      overflow-x: auto;
      padding: 6px 2px 8px;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .camera-gallery-thumbs::-webkit-scrollbar {
      display: none;
    }

    .camera-gallery-thumb:first-child {
      margin-left: auto;
    }

    .camera-gallery-thumb:last-child {
      margin-right: auto;
    }

    .camera-gallery-thumb {
      appearance: none;
      -webkit-appearance: none;
      flex: 0 0 clamp(64px, 18vw, 76px);
      width: clamp(64px, 18vw, 76px);
      height: auto;
      min-width: 0;
      min-height: 0;
      aspect-ratio: 1;
      border: 2px solid transparent;
      border-radius: 9px;
      overflow: hidden;
      padding: 0;
      background: transparent;
      box-shadow: none;
      filter: none;
      opacity: 0.78;
      scroll-snap-align: center;
    }

    .camera-gallery-thumb.active {
      border-color: #9fc4aa;
      opacity: 1;
    }

    .camera-gallery-thumb:focus-visible {
      outline: 2px solid #dcecdf;
      outline-offset: 3px;
    }

    .camera-gallery-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #18211d;
      display: block;
    }

    .modal-backdrop.camera-fullscreen #editModalFields {
      display: none;
    }

    .modal-backdrop.camera-fullscreen #editModalActions {
      display: none;
    }

    .camera-counter {
      margin-top: 8px;
      font-weight: 800;
      color: var(--muted);
    }

    .camera-shot-strip {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .camera-shot-strip img,
    .camera-review-item img {
      width: 72px;
      height: 72px;
      border-radius: 8px;
      object-fit: cover;
      border: 1px solid var(--soft-border);
      background: white;
    }

    .camera-review-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 10px;
      width: 100%;
    }

    .camera-review-item {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: start;
      padding: 8px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      font-weight: 800;
    }

    .camera-review-thumb {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .camera-review-thumb img {
      display: block;
      width: 100%;
      height: 96px;
      border-radius: 8px;
      object-fit: cover;
    }

    .camera-review-check-wrap {
      position: absolute;
      top: 8px;
      right: 8px;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
    }

    .camera-review-check-wrap input {
      width: 18px;
      height: 18px;
      accent-color: #16a34a;
    }

    .camera-review-check-mark {
      display: none;
    }

    .camera-gallery-top-spacer {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
    }

    .camera-gallery-close {
      width: 40px;
      min-width: 40px;
      height: 40px;
      min-height: 40px;
      padding: 0 !important;
      display: inline-grid;
      place-items: center;
      font-size: 26px;
      line-height: 1;
    }

    .doc-calendar {
      display: grid;
      grid-template-columns: repeat(7, minmax(120px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .doc-day {
      min-height: 220px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      padding: 9px;
      text-align: left;
      color: var(--text);
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .doc-day.has-content {
      border: 2px solid #16a34a;
      background: #f0fdf4;
      box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.08);
    }

    .doc-day-number {
      font-weight: 900;
      font-size: 15px;
    }

    .doc-thumbs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
    }

    .doc-thumbs img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 5px;
      background: #e5e7eb;
    }

    .doc-thumb-placeholder {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 5px;
      background:
        linear-gradient(90deg, rgba(226, 232, 240, 0.55), rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.55));
      background-size: 220% 100%;
      display: block;
      animation: docImageLoading 1.2s ease-in-out infinite;
    }

    .doc-day-loading,
    .doc-image-placeholder {
      min-height: 96px;
      border-radius: 10px;
      background: #f1f5f9;
      color: #64748b;
      display: grid;
      place-items: center;
      padding: 12px;
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }

    @keyframes docImageLoading {
      0% { background-position: 100% 0; }
      100% { background-position: -120% 0; }
    }

    .bbs-image-load-frame {
      position: relative;
      display: block;
      overflow: hidden;
      background: #eef2f7;
      color: #475569;
    }

    .bbs-image-load-frame img {
      opacity: 0;
      transition: opacity 180ms ease;
    }

    .bbs-image-load-frame.is-loaded img {
      opacity: 1;
    }

    .bbs-image-load-status {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 8px;
      padding: 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
      background:
        linear-gradient(90deg, rgba(226, 232, 240, 0.72), rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.72));
      background-size: 220% 100%;
      animation: docImageLoading 1.2s ease-in-out infinite;
    }

    .bbs-image-load-frame.is-loaded .bbs-image-load-status {
      display: none;
    }

    .bbs-image-load-frame.is-error .bbs-image-load-status {
      color: #991b1b;
      background: #fef2f2;
      animation: none;
    }

    .bbs-image-load-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(71, 85, 105, 0.22);
      border-top-color: #2563eb;
      border-radius: 999px;
      animation: bbsImageSpinner 0.75s linear infinite;
    }

    .bbs-image-load-frame.is-error .bbs-image-load-spinner {
      display: none;
    }

    @keyframes bbsImageSpinner {
      to { transform: rotate(360deg); }
    }

    .bbs-image-load-frame--thumb {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 5px;
    }

    .bbs-image-load-frame--thumb .bbs-image-load-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .bbs-image-load-frame--tile {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    .bbs-image-load-frame--viewer {
      width: 100%;
      height: 100%;
      min-height: 260px;
      border-radius: 10px;
    }

    .bbs-original-image-loading {
      min-height: 260px;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 12px;
      color: #475569;
      text-align: center;
    }

    .doc-note-mark {
      font-size: 11px;
      font-weight: 800;
      color: #2563eb;
    }

    .doc-toolbar {
      display: grid;
      grid-template-columns: auto auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .doc-bulk-item {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 8px;
      background: #ffffff;
    }

    .doc-bulk-item label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    #editModal.documentation-day-modal .edit-modal {
      position: relative;
    }

    #editModal.documentation-day-modal #editModalTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .modal-x-button {
      width: 38px;
      height: 38px;
      min-width: 38px;
      padding: 0;
      border-radius: 999px;
      background: #e5e7eb;
      color: #111827;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      line-height: 1;
    }

    #editModal.documentation-day-modal .modal-message {
      margin-bottom: 8px;
    }

    .doc-day-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
      gap: 7px;
    }

    .doc-day-gallery .doc-bulk-item {
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      min-width: 0;
    }

    .doc-day-image-tile {
      position: relative;
      aspect-ratio: 1;
      border: 0;
      border-radius: 10px;
      overflow: hidden;
      background: #eef2f7;
      padding: 0;
      min-width: 0;
    }

    .doc-day-image-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .doc-image-admin-meta {
      margin-top: 4px;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .doc-day-empty {
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      padding: 14px;
      color: var(--muted);
      background: #f8fafc;
      font-weight: 800;
      text-align: center;
    }

    #editModal.documentation-day-modal #editModalFields {
      display: block;
      padding-bottom: 72px;
    }

    #editModal.documentation-day-modal #editModalFields textarea {
      min-height: 84px;
    }

    #editModal.documentation-day-modal #editModalActions {
      position: sticky;
      bottom: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      padding-top: 8px;
      background: linear-gradient(to top, #ffffff 72%, rgba(255, 255, 255, 0));
    }

    .doc-day-date {
      color: #667085;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.35;
      margin: 0 0 14px;
    }

    @media (max-width: 760px) {
      #editModal.documentation-day-modal {
        align-items: center;
        justify-content: center;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
        overflow: hidden;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }

      #editModal.documentation-day-modal .edit-modal {
        width: min(100%, 390px);
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
        flex: 0 0 auto;
        padding: 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 22px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      #editModal.documentation-day-modal #editModalTitle {
        margin: 0;
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
      }

      #editModal.documentation-day-modal .modal-x-button {
        flex: 0 0 44px;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #344054 !important;
        box-shadow: none !important;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
      }

      #editModal.documentation-day-modal #editModalMessage {
        flex: 0 1 auto;
        margin: 0;
        overflow-y: auto;
      }

      #editModal.documentation-day-modal .doc-day-empty {
        margin-bottom: 14px;
        padding: 18px 14px;
        border: 1px dashed #cbd5e1;
        border-radius: 14px;
        background: #f8fafc;
        color: #667085;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.35;
      }

      #editModal.documentation-day-modal #editModalFields {
        flex: 0 0 auto;
        padding-bottom: 0;
      }

      #editModal.documentation-day-modal #editModalFields label {
        display: block;
        margin-bottom: 6px;
        color: #344054;
        font-size: 14px;
        font-weight: 600;
      }

      #editModal.documentation-day-modal #editModalFields textarea {
        width: 100%;
        min-height: 112px;
        padding: 12px 14px;
        border: 1px solid #d0d5dd;
        border-radius: 14px;
        background: #ffffff;
        color: #172033;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        resize: vertical;
      }

      #editModal.documentation-day-modal #editModalActions {
        display: none;
        position: static !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        border: 0;
        background: transparent;
      }

      #editModal.documentation-day-modal.documentation-day-dirty #editModalActions {
        display: grid;
        grid-template-columns: 1fr;
      }

      #editModal.documentation-day-modal #editModalActions .doc-save-button {
        width: 100%;
        min-height: 52px;
        padding: 10px 14px;
        border-radius: 14px;
        background: #169447;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .doc-add-fab {
      width: 54px !important;
      height: 54px !important;
      min-width: 54px !important;
      min-height: 54px !important;
      border-radius: 999px !important;
      padding: 0 !important;
      background: #16a34a !important;
      color: #ffffff !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 8px 20px rgba(22, 163, 74, 0.24);
    }

    .doc-add-svg {
      width: 31px;
      height: 31px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.15;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .doc-save-button {
      min-height: 42px;
      padding: 9px 13px;
      border-radius: 999px;
      background: #14532d;
    }

    .doc-overview-wrap {
      position: relative;
    }

    .doc-overview-add {
      position: sticky;
      left: calc(100% - 72px);
      bottom: 86px;
      margin: 10px 12px 0 auto;
      z-index: 5;
    }

    #editModal.photo-insert-sheet #editModalActions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    #editModal.photo-insert-sheet #editModalActions button {
      min-height: 44px;
      border-radius: 10px;
      background: #e5e7eb;
      color: #111827;
      text-align: left;
    }

    #editModal.photo-insert-sheet #editModalActions button:first-child {
      background: #dcfce7;
      color: #14532d;
    }

    @media (max-width: 760px) {
      #editModal.photo-review-modal {
        align-items: center;
        justify-content: center;
        padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
        overflow: hidden;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }

      #editModal.photo-review-modal .edit-modal {
        width: min(100%, 390px);
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
        flex: 0 0 auto;
        margin-top: 0;
        padding: 18px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 22px;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      #editModal.photo-review-modal #editModalTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 0;
      }

      #editModal.photo-review-modal #editModalMessage {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
        margin: 0 0 14px;
        color: #667085;
      }

      #editModal.photo-review-modal #editModalFields {
        flex: 0 0 auto;
        min-width: 0;
        width: 100%;
        overflow: visible;
      }

      #editModal.photo-review-modal .camera-review-grid {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        min-width: 0;
        max-height: none;
        padding: 2px 2px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 2px;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
      }

      #editModal.photo-review-modal .camera-review-grid::-webkit-scrollbar {
        display: none;
      }

      #editModal.photo-review-modal .camera-review-carousel {
        display: grid;
        gap: 8px;
        width: 100%;
        min-width: 0;
      }

      #editModal.photo-review-modal .camera-review-column {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        flex: 0 0 calc((100% - 16px) / 3);
        min-width: 0;
        gap: 8px;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
      }

      #editModal.photo-review-modal .camera-review-item {
        width: 100%;
        min-width: 0;
        aspect-ratio: 1;
        padding: 0;
        gap: 0;
        border: 2px solid transparent;
        border-radius: 14px;
        background: transparent;
        box-sizing: border-box;
      }

      #editModal.photo-review-modal .camera-review-item.selected {
        border-color: #16a34a;
      }

      #editModal.photo-review-modal .camera-review-thumb {
        width: 100% !important;
        min-width: 0 !important;
        height: 100%;
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 11px;
        overflow: hidden;
        background: #111827 !important;
        box-sizing: border-box;
      }

      #editModal.photo-review-modal .camera-review-thumb img {
        width: 100%;
        height: 100%;
        border-radius: 11px;
        object-fit: cover;
        border: 0;
        background: #111827;
      }

      #editModal.photo-review-modal .camera-review-check-wrap {
        top: 6px;
        right: 6px;
        display: grid;
        place-items: center;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #16a34a;
        box-shadow: none;
        border: 2px solid white;
        border-radius: 50%;
        opacity: 0;
        z-index: 2;
      }

      #editModal.photo-review-modal .camera-review-check-wrap input {
        position: absolute;
        inset: 0;
        width: 24px;
        height: 24px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
      }

      #editModal.photo-review-modal .camera-review-check-mark {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        color: white;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        text-align: center;
        pointer-events: none;
        text-shadow: none;
      }

      #editModal.photo-review-modal .camera-review-item.selected .camera-review-check-wrap {
        opacity: 1;
      }

      #editModal.photo-review-modal .camera-review-add-tile {
        width: 100% !important;
        min-width: 0 !important;
        height: auto;
        min-height: 0 !important;
        aspect-ratio: 1;
        padding: 8px 4px !important;
        border: 1px dashed #aab2bd;
        border-radius: 14px;
        background: #f4f5f7;
        color: #344054;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 28px;
        font-weight: 400;
        line-height: 1;
        box-shadow: none;
        box-sizing: border-box;
      }

      #editModal.photo-review-modal .camera-review-add-tile small {
        font-size: 12px;
        font-weight: 400;
        line-height: 1.05;
      }

      #editModal.photo-review-modal .camera-review-check-wrap {
        top: 5px;
        right: 5px;
        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        max-height: 21px !important;
      }

      #editModal.photo-review-modal .camera-review-check-mark {
        font-size: 13px;
      }

      #editModal.photo-review-modal .camera-review-controls {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        justify-self: center;
        width: min(220px, 100%);
        min-width: 0;
      }

      #editModal.photo-review-modal .camera-review-scroll-button {
        display: grid;
        place-items: center;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #166534 !important;
        box-shadow: none !important;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
      }

      #editModal.photo-review-modal .camera-review-scroll-button.is-unavailable {
        visibility: hidden;
        pointer-events: none;
      }

      #editModal.photo-review-modal .camera-review-range {
        min-width: 0;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
      }

      #editModal.photo-review-modal .camera-review-close {
        flex: 0 0 44px;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #344054 !important;
        box-shadow: none !important;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
      }

      #editModal.photo-review-modal #editModalActions {
        display: grid;
        grid-template-columns: 1fr;
        flex: 0 0 auto;
        gap: 0;
        position: sticky !important;
        bottom: 0;
        z-index: 3;
        margin: 4px 0 0 !important;
        padding: 6px 0 0 !important;
        border-top: 0;
        background: #ffffff;
      }

      #editModal.photo-review-modal #editModalActions button {
        min-height: 52px;
        padding: 10px 14px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 14px;
      }

      #editModal.photo-review-modal .camera-review-save {
        background: #e2e8f0;
        color: #64748b;
        box-shadow: none;
      }

      #editModal.photo-review-modal .camera-review-save.active:not(:disabled) {
        background: #16a34a !important;
        color: white !important;
      }

      #editModal.photo-review-modal .camera-review-save:disabled {
        cursor: default;
        opacity: 1;
      }

      #editModal.photo-review-modal.camera-review-saving .camera-review-grid {
        pointer-events: none;
        opacity: 0.68;
      }

      #editModal.photo-review-modal.camera-review-saving .camera-review-close {
        opacity: 0.45;
      }
    }

    .doc-day-note {
      font-size: 12px;
      line-height: 1.25;
      color: var(--text);
      background: rgba(255,255,255,0.75);
      border-radius: 6px;
      padding: 4px;
    }

    .image-viewer {
      height: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .image-viewer img {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      border-radius: 8px;
      object-fit: contain;
    }

    .image-viewer .bbs-image-load-frame {
      display: grid;
      place-items: center;
    }

    .image-nav {
      min-width: 48px;
      min-height: 72px;
      font-size: 26px;
    }

    /* BBS BauService Design Layer */
    :root {
      --bbs-ink: #111111;
      --bbs-charcoal: #22201d;
      --bbs-stone: #f5f2ed;
      --bbs-paper: #ffffff;
      --bbs-line: #ddd7cf;
      --bbs-orange: #f49a22;
      --bbs-orange-dark: #cf7412;
      --bbs-admin: #28313d;
      --bbs-admin-soft: #edf1f5;
      --bbs-worker: #f49a22;
      --bbs-worker-soft: #fff4e3;
      --bg: var(--bbs-stone);
      --card: var(--bbs-paper);
      --soft-border: var(--bbs-line);
      --text: var(--bbs-ink);
      --muted: #6f6a63;
      --accent: var(--bbs-orange);
    }

    body {
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(245,242,237,0.95)),
        repeating-linear-gradient(45deg, rgba(17,17,17,0.025) 0 1px, transparent 1px 18px);
    }

    body.admin-view {
      background:
        linear-gradient(135deg, rgba(237,241,245,0.96), rgba(255,255,255,0.9)),
        repeating-linear-gradient(45deg, rgba(40,49,61,0.035) 0 1px, transparent 1px 18px);
    }

    body.employee-view {
      background:
        linear-gradient(135deg, rgba(255,244,227,0.96), rgba(255,255,255,0.9)),
        repeating-linear-gradient(45deg, rgba(244,154,34,0.035) 0 1px, transparent 1px 18px);
    }

    header {
      padding: 14px 22px;
      background:
        linear-gradient(100deg, rgba(17,17,17,0.98), rgba(44,39,33,0.96)),
        linear-gradient(45deg, transparent 0 50%, rgba(244,154,34,0.14) 50% 100%);
      border-bottom: 5px solid var(--bbs-orange);
      box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18);
    }

    body.admin-view header {
      background: linear-gradient(100deg, #151a21, #303947);
      border-bottom-color: #6b7684;
    }

    body.employee-view header {
      background: linear-gradient(100deg, #201b16, #4a3420);
      border-bottom-color: var(--bbs-orange);
    }

    header h1 {
      font-size: 25px;
      font-weight: 950;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    header .sub {
      color: #f5d1a0;
      font-weight: 800;
      opacity: 1;
    }

    body.admin-view header .sub {
      color: #cdd6df;
    }

    button {
      border-radius: 6px;
      background: var(--bbs-orange);
      color: #17120d;
      box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08);
    }

    button:hover {
      filter: brightness(0.98);
    }

    body.admin-view button {
      background: var(--bbs-admin);
      color: #ffffff;
    }

    body.employee-view button {
      background: var(--bbs-worker);
      color: #17120d;
    }

    button.secondary {
      background: #3b332b;
      color: #ffffff;
    }

    body.admin-view button.secondary {
      background: #4d5866;
    }

    button.light {
      background: #eee9e2;
      color: #211c17;
    }

    body.admin-view button.light {
      background: #e1e7ee;
      color: #202833;
    }

    button.danger {
      background: #c8342d;
      color: #ffffff;
    }

    .view-switch {
      background: #ffffff !important;
      color: #17120d !important;
      border: 1px solid rgba(255,255,255,0.46);
    }

    body.admin-view .view-switch {
      color: var(--bbs-admin) !important;
    }

    .toolbar,
    .form-panel,
    .project-platform,
    .planner-wrap,
    .home-card,
    .time-card,
    .account-box,
    .file-card,
    .settings-menu,
    .data-row,
    .chat-shell {
      border-color: var(--bbs-line);
      border-radius: 8px;
      background: rgba(255,255,255,0.96);
      box-shadow: 0 12px 30px rgba(33, 28, 23, 0.06);
    }

    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .project-platform,
    body.admin-view .planner-wrap,
    body.admin-view .home-card,
    body.admin-view .time-card,
    body.admin-view .account-box,
    body.admin-view .file-card,
    body.admin-view .settings-menu,
    body.admin-view .data-row,
    body.admin-view .chat-shell {
      border-color: #cbd3dc;
      box-shadow: 0 12px 30px rgba(40, 49, 61, 0.07);
    }

    .toolbar {
      border-left: 5px solid var(--bbs-orange);
      margin-top: 14px;
    }

    body.admin-view .toolbar {
      border-left-color: var(--bbs-admin);
    }

    .project-time-export-chart {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--bbs-line);
      border-radius: 8px;
      background: #f8fbf9;
    }

    .project-time-export-chart h4 {
      margin: 0 0 4px;
      color: #17251d;
    }

    .project-time-export-bars {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .project-time-export-bar-row {
      display: grid;
      grid-template-columns: 86px 1fr 82px;
      gap: 10px;
      align-items: center;
      font-size: 0.88rem;
    }

    .project-time-export-bar-track {
      height: 16px;
      overflow: hidden;
      border-radius: 999px;
      background: #e5efe9;
      border: 1px solid #d4e4da;
    }

    .project-time-export-bar-fill {
      height: 100%;
      min-width: 4px;
      border-radius: inherit;
      background: linear-gradient(90deg, #2f9f63, #5fbd80);
    }

    .project-time-export-bar-value {
      text-align: right;
      font-weight: 700;
      color: #234432;
    }

    .form-panel h2,
    .settings-head h2,
    .home-card h2,
    .home-card h3,
    .file-card h3,
    .table-area-title h2 {
      color: var(--bbs-ink);
      font-weight: 950;
      letter-spacing: 0;
    }

    body.admin-view .form-panel h2,
    body.admin-view .settings-head h2,
    body.admin-view .home-card h2,
    body.admin-view .home-card h3,
    body.admin-view .file-card h3,
    body.admin-view .table-area-title h2 {
      color: var(--bbs-admin);
    }

    .main-home-panel {
      gap: 18px;
    }

    .time-clock-card {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,248,237,0.92));
      border-top: 4px solid var(--bbs-orange);
    }

    body.admin-view .time-clock-card {
      border-top-color: var(--bbs-admin);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,241,245,0.92));
    }

    .home-time-clock,
    .home-time-category,
    .home-pause-panel,
    .home-pause-clock {
      color: var(--bbs-orange);
    }

    .home-project-button {
      background: var(--bbs-worker-soft);
      color: #8a4b08;
      border: 1px solid #ffd39b;
    }

    .home-punch-button,
    .home-punch-button.secondary {
      background: var(--bbs-orange);
      border-color: var(--bbs-orange);
      color: #17120d;
      border-radius: 6px;
    }

    .home-punch-button:hover,
    .home-punch-button.secondary:hover {
      background: #e28719;
      border-color: #e28719;
    }

    table.planner {
      background: #ffffff;
    }

    .planner th,
    .planner td {
      border-color: #3c3630;
    }

    .planner th {
      background: #f7f3ec;
      color: #17120d;
      font-weight: 950;
    }

    body.admin-view .planner th {
      background: #edf1f5;
      color: var(--bbs-admin);
    }

    .project-no {
      color: #17120d;
      font-weight: 950;
    }

    body.admin-view .project-no {
      color: var(--bbs-admin);
    }

    .project-floor,
    .platform-pill,
    .status-pill {
      border-radius: 999px;
      background: #f5eadb;
      color: #7b4308;
    }

    body.admin-view .project-floor,
    body.admin-view .platform-pill,
    body.admin-view .status-pill {
      background: #e5ebf1;
      color: var(--bbs-admin);
    }

    .project-section-switch {
      border-left: 5px solid var(--bbs-orange);
      border-radius: 8px;
    }

    body.admin-view .project-section-switch {
      border-left-color: var(--bbs-admin);
    }

    .project-section-switch button.active,
    .settings-menu button.active {
      background: var(--bbs-orange);
      color: #17120d;
    }

    body.admin-view .project-section-switch button.active,
    body.admin-view .settings-menu button.active {
      background: var(--bbs-admin);
      color: #ffffff;
    }

    .file-card {
      background: #fbfaf7;
    }

    body.admin-view .file-card {
      background: #f7f9fb;
    }

    .data-row.active {
      border-color: #f3b15b;
      background: #fff7ec;
    }

    body.admin-view .data-row.active {
      border-color: #98a7b8;
      background: #f1f5f9;
    }

    .data-row.dragging {
      border-color: var(--bbs-orange);
      background: #fff3df;
    }

    body.admin-view .data-row.dragging {
      border-color: var(--bbs-admin);
      background: #edf1f5;
    }

    .data-row.drop-target {
      outline-color: var(--bbs-orange);
    }

    body.admin-view .data-row.drop-target {
      outline-color: var(--bbs-admin);
    }

    .time-month-table {
      border-color: var(--bbs-line);
      border-radius: 8px;
    }

    .time-month-table th {
      background: #f7f3ec;
      color: #3c3630;
    }

    body.admin-view .time-month-table th {
      background: #edf1f5;
      color: var(--bbs-admin);
    }

    .chat-messages {
      background:
        linear-gradient(135deg, rgba(255,244,227,0.86), rgba(255,255,255,0.88)),
        repeating-linear-gradient(45deg, rgba(244,154,34,0.06) 0 1px, transparent 1px 16px);
    }

    body.admin-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(237,241,245,0.92), rgba(255,255,255,0.9)),
        repeating-linear-gradient(45deg, rgba(40,49,61,0.05) 0 1px, transparent 1px 16px);
    }

    .chat-bubble.mine {
      background: #fff1d9;
      border-color: #f7c47e;
    }

    body.admin-view .chat-bubble.mine {
      background: #e9eef4;
      border-color: #bdc9d6;
    }

    input,
    select,
    textarea {
      border-color: var(--bbs-line);
      border-radius: 6px;
      background: #ffffff;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid rgba(244,154,34,0.25);
      border-color: var(--bbs-orange);
    }

    body.admin-view input:focus,
    body.admin-view select:focus,
    body.admin-view textarea:focus {
      outline-color: rgba(40,49,61,0.18);
      border-color: var(--bbs-admin);
    }

    @media (max-width: 900px) {
      .doc-calendar {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
      }

      .doc-toolbar {
        grid-template-columns: 1fr;
      }
    }

    .project-menu-wrap {
      position: relative;
    }

    .project-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      z-index: 20;
      width: min(360px, 90vw);
      max-height: 360px;
      overflow-y: auto;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2);
      padding: 8px;
    }

    .project-menu button {
      width: 100%;
      margin-bottom: 6px;
      text-align: left;
      background: #f3f4f6;
      color: #111827;
    }

    @media (min-width: 761px) {
      body:not(.force-mobile-preview) #projectPlatform.project-overview-mode {
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      body:not(.force-mobile-preview) #projectPlatform.project-overview-mode #projectPlatformContent {
        display: block;
        width: 100%;
        min-width: 0;
      }
    }

    .project-overview-mobile {
      display: none;
    }

    .project-overview-table-wrap {
      width: 100%;
      overflow-x: auto;
      border-top: 1px solid var(--soft-border);
      background: transparent;
    }

    .project-overview-table {
      width: 100%;
      min-width: 940px;
      border-collapse: collapse;
      table-layout: fixed;
      background: transparent;
      color: var(--text);
    }

    .project-overview-table th {
      padding: 10px;
      border-bottom: 1px solid var(--soft-border);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: 0.02em;
      text-align: left;
      vertical-align: bottom;
    }

    .project-overview-row {
      cursor: pointer;
    }

    .project-overview-row:hover {
      background: #f8fafc;
    }

    .project-overview-row:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    .project-overview-row td {
      padding: 11px 10px;
      border-bottom: 1px solid var(--soft-border);
      line-height: 1.35;
      vertical-align: top;
      overflow-wrap: anywhere;
    }

    .project-overview-code {
      font-weight: 900;
      color: var(--text);
    }

    .project-overview-order {
      color: var(--muted);
      font-weight: 700;
    }

    .project-overview-name {
      font-weight: 800;
    }

    .project-overview-clamp {
      display: block;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .project-overview-sections,
    .project-overview-floors {
      color: var(--muted);
    }

    .project-overview-action-cell {
      text-align: right;
    }

    button.project-overview-open {
      min-height: 36px;
      padding: 7px 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: var(--accent);
      font-weight: 800;
      white-space: nowrap;
    }

    button.project-overview-open:hover,
    button.project-overview-open:focus-visible {
      background: transparent;
      color: var(--accent);
      text-decoration: underline;
    }

    .dot-menu-wrap {
      position: relative;
      display: inline-block;
    }

    .dot-menu-button {
      padding: 2px 6px;
      border-radius: 999px;
      background: transparent;
      color: #64748b;
      font-size: 16px;
      line-height: 1;
      min-width: 24px;
      height: 24px;
    }

    .dot-menu {
      position: fixed;
      right: auto;
      top: auto;
      z-index: 9999;
      min-width: 210px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      padding: 6px;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.26);
    }

    .dot-menu button {
      width: 100%;
      text-align: left;
      background: transparent;
      color: var(--text);
      padding: 7px 8px;
    }

    .dot-menu button:hover {
      background: #f3f4f6;
    }

    .day-cell {
      min-height: 74px;
      height: 74px;
      text-align: center;
      position: relative;
      cursor: pointer;
    }

  .auto-cell {
    width: 48px;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
  }

  .vehicle-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    border-radius: 999px;
    padding: 2px 7px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
  }

    .names {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 800;
      min-height: 30px;
      padding-top: 3px;
    }

    .note {
      margin-top: 6px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .assignment-time {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      border-radius: 999px;
      padding: 2px 8px;
      background: #ecfdf3;
      color: #15803d;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .planning-day-incomplete {
      background: #fff1f2 !important;
      color: #b91c1c !important;
      box-shadow: inset 0 -3px 0 #dc2626;
    }

    .planning-day-incomplete .month-date,
    .month-day.planning-day-incomplete .month-date {
      color: #b91c1c !important;
      font-weight: 900;
    }

    .project-section-name {
      margin-top: 4px;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.25;
    }

    .small-info,
    .request-card,
    .file-row,
    .month-item,
    .project-meta,
    .assignment-card,
    textarea,
    input {
      max-width: 100%;
      box-sizing: border-box;
    }

    .small-info,
    .request-card,
    .file-row,
    .month-item,
    .project-meta,
    .assignment-card {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .absence-label {
      text-align: center;
      font-weight: 800;
      font-size: 16px;
    }

    .absence-label .red { color: red; }
    .absence-label .green { color: green; }
    .absence-label .blue { color: #0284c7; }

    .absence-cell {
      height: 56px;
      text-align: center;
      cursor: pointer;
    }

    .empty-row td {
      height: 58px;
    }

    .form-panel {
      display: none;
      background: white;
      border: 1px solid var(--soft-border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 14px;
    }

    .form-panel.active {
      display: block;
    }

    .form-panel h2 {
      margin: 0 0 12px;
      font-size: 20px;
    }

    .auth-intro {
      display: none;
    }

    body.auth-locked {
      min-height: 100vh;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 48%, #0f766e 100%);
    }

    body.auth-locked header {
      display: none;
    }

    body.auth-locked main {
      min-height: 100vh;
      max-width: none;
      padding: 24px;
      display: grid;
      place-items: center;
    }

    body.auth-locked main > section:not(#accountPanel),
    body.auth-locked main > div,
    body.auth-locked main > p {
      display: none !important;
    }

    body.auth-locked #accountPanel {
      display: block !important;
      width: min(760px, 100%);
      margin: 0;
      padding: 28px;
      border: 0;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
    }

    body.auth-locked #accountPanel .settings-head button {
      display: none;
    }

    body.auth-locked .auth-intro {
      display: block;
      margin-bottom: 20px;
    }

    .auth-intro h1 {
      margin: 0 0 6px;
      font-size: 30px;
    }

    .auth-intro p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .auth-brand-logo {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      object-fit: cover;
      box-shadow: 0 8px 22px rgba(22, 101, 52, 0.16);
      flex: 0 0 auto;
    }

    .auth-brand h1 {
      margin: 0;
      font-size: 30px;
      line-height: 1.05;
      color: #111827;
    }

    .auth-brand p {
      margin: 4px 0 0;
      color: #475569;
      font-weight: 800;
    }

    .auth-form-grid,
    .auth-register-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }

    .auth-form-grid input,
    .auth-register-grid input {
      width: 100%;
      min-width: 0;
    }

    .auth-register-panel {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #d7e0dc;
      border-radius: 10px;
      background: #fbfdfb;
    }

    .auth-choice-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 10px 0 12px;
    }

    .auth-feedback {
      margin: 8px 0 12px;
      padding: 10px 12px;
      border-radius: 8px;
      font-weight: 800;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #1f2937;
    }

    .auth-feedback.error {
      border-color: #fecaca;
      background: #fff1f2;
      color: #991b1b;
    }

    .auth-feedback.success {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    .auth-field-error input,
    .auth-field-error .password-toggle-wrap input {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12) !important;
    }

    .auth-field-note {
      margin-top: 4px;
      color: #b91c1c;
      font-size: 12px;
      font-weight: 800;
    }

    .compact-actions {
      margin-top: 10px;
    }

    @media (max-width: 680px) {
      .auth-brand {
        align-items: flex-start;
      }

      .auth-form-grid,
      .auth-register-grid {
        grid-template-columns: 1fr;
      }
    }

    body.settings-open .toolbar,
    body.settings-open #formPanel,
    body.settings-open #adminMessagePanel,
    body.settings-open #employeeMessagePanel,
    body.settings-open #leaveRequestPanel,
    body.settings-open #projectPlatform,
    body.settings-open .table-area-title,
    body.settings-open .planner-wrap,
    body.settings-open #mobileView,
    body.settings-open main > .legend {
      display: none !important;
    }

    body.content-focused .toolbar,
    body.content-focused .table-area-title,
    body.content-focused .planner-wrap,
    body.content-focused #monthView,
    body.content-focused #mobileView,
    body.content-focused main > .legend {
      display: none !important;
    }

    body.settings-open #managePanel {
      display: block;
    }

    .time-panel {
      display: none;
    }

    .time-panel.active {
      display: block;
    }

    .time-layout {
      display: grid;
      grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
    }

    .time-card {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      padding: 14px;
    }

    #timeCheckCard {
      order: 1;
    }

    #timeEntryCard {
      order: 2;
      grid-column: 1 / -1;
    }

    .time-entry-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .time-entry-mobile-close {
      display: none;
    }

    .time-entry-mobile-head-actions,
    .time-entry-mobile-edit {
      display: none;
    }

    .time-entry-scroll-area {
      display: contents;
    }

    .time-entry-scroll-add {
      display: none;
    }

    body.force-mobile-preview:not(.mobile-time-entry-open) #timeTrackingPanel #timeEntryCard {
      display: none !important;
    }

    body.mobile-time-entry-open {
      overflow: hidden;
    }

    body.mobile-time-entry-open::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 11990;
      background: rgba(15, 23, 42, .58);
      pointer-events: auto;
    }

    body.mobile-time-entry-open #timeEntryCard {
      position: fixed;
      top: max(10px, env(safe-area-inset-top, 0px));
      left: 50%;
      width: min(calc(100vw - 20px), 390px) !important;
      max-width: 390px !important;
      max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      margin: 0;
      padding: 18px;
      border: 0;
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 22px 55px rgba(15, 23, 42, .28);
      display: flex !important;
      flex-direction: column;
      overflow: hidden !important;
      overscroll-behavior: contain;
      transform: translateX(-50%);
      z-index: 12000;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-card-head {
      position: relative;
      top: auto;
      flex: 0 0 auto;
      z-index: 2;
      margin: -18px -18px 12px;
      padding: 18px 18px 8px;
      background: #ffffff;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-scroll-area {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      padding: 0 2px 14px 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    body.mobile-time-entry-open #timeEntryCard #timeEntryTitle {
      margin: 0;
      font-size: 21px;
      font-weight: 500;
      line-height: 1.2;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-mobile-head-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-mobile-edit:not(.hidden) {
      display: grid !important;
      place-items: center;
      flex: 0 0 44px;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #344054 !important;
      box-shadow: none !important;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-mobile-edit svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-mobile-close {
      display: grid !important;
      place-items: center;
      flex: 0 0 44px;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #344054 !important;
      box-shadow: none !important;
      font-size: 0;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-mobile-close span {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 1px solid #d7dee7;
      border-radius: 50%;
      background: #ffffff;
      font-size: 21px;
      line-height: 1;
    }

    .time-entry-header-choice-list {
      display: grid;
      grid-column: 1 / -1;
      gap: 8px;
      width: 100%;
    }

    .time-entry-header-choice {
      display: grid;
      justify-items: start;
      gap: 4px;
      width: 100%;
      min-height: 54px;
      padding: 10px 12px;
      border: 1px solid #d7e4da;
      border-radius: 12px;
      background: #f7faf7;
      color: #1f2933;
      text-align: left;
      box-shadow: none;
    }

    .time-entry-header-choice span {
      color: #667085;
      font-size: 13px;
      font-weight: 600;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-scroll-area > .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 14px 10px;
      align-items: start;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-scroll-area > .grid > div {
      min-width: 0;
      max-width: 100%;
    }

    body.mobile-time-entry-open #timeEntryCard .time-employee-field,
    body.mobile-time-entry-open #timeEntryCard .time-date-field,
    body.mobile-time-entry-open #timeEntryCard .time-break-field,
    body.mobile-time-entry-open #timeEntryCard .time-break-custom-field,
    body.mobile-time-entry-open #timeEntryCard .time-project-field,
    body.mobile-time-entry-open #timeEntryCard .time-ceiling-field,
    body.mobile-time-entry-open #timeEntryCard .time-note-field {
      grid-column: 1 / -1;
    }

    body.mobile-time-entry-open #timeEntryCard label:not(.check-pill) {
      display: block;
      margin: 0 0 6px;
      color: #344054;
      font-size: 13px;
      font-weight: 700;
    }

    body.mobile-time-entry-open #timeEntryCard input,
    body.mobile-time-entry-open #timeEntryCard select,
    body.mobile-time-entry-open #timeEntryCard textarea {
      width: 100%;
      max-width: 100%;
      min-height: 44px;
      border: 1px solid #d0d5dd;
      border-radius: 11px;
      background: #ffffff;
      box-shadow: none;
      font-size: 15px;
    }

    body.mobile-time-entry-open #timeEntryCard textarea {
      min-height: 72px;
      height: 72px;
      resize: vertical;
    }

    body.mobile-time-entry-open #timeEntryCard .time-ceiling-field {
      min-height: 44px;
      display: flex;
      align-items: center;
    }

    body.mobile-time-entry-open #timeEntryCard .time-ceiling-field .ceiling-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: auto;
      min-height: 44px;
      margin: 0;
      padding: 7px 2px;
      border: 0;
      background: transparent;
      white-space: nowrap;
    }

    body.mobile-time-entry-open #timeEntryCard .time-ceiling-field input[type="checkbox"] {
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      margin: 0;
    }

    body.mobile-time-entry-open #timeEntryCard .time-day-summary,
    body.mobile-time-entry-open #timeEntryCard .time-day-existing {
      margin-bottom: 12px;
    }

    body.mobile-time-entry-open #timeEntryCard .form-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      flex: 0 0 auto;
      margin: 0;
      padding: 12px 0 0;
      border-top: 1px solid #e5e7eb;
      position: static;
      background: #ffffff;
    }

    body.mobile-time-entry-open #timeEntryCard #timeSaveBtn {
      grid-column: 1 / -1;
      grid-row: 1;
      width: 100%;
      min-height: 50px;
      border: 0;
      border-radius: 14px;
      background: #169447 !important;
      color: #ffffff !important;
      box-shadow: none;
      font-size: 15px;
      font-weight: 800;
    }

    body.mobile-time-entry-open #timeEntryCard #timeAddEntryBtn,
    body.mobile-time-entry-open #timeEntryCard #timeClearBtn,
    body.mobile-time-entry-open #timeEntryCard #timeDeleteBtn {
      min-height: 44px;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 12px;
    }

    body.mobile-time-entry-open #timeEntryCard #timeAddEntryBtn {
      display: none !important;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-scroll-add {
      display: block;
      grid-column: 1 / -1 !important;
      justify-self: stretch !important;
      position: static !important;
      width: 100% !important;
      min-width: 0 !important;
      height: auto !important;
      min-height: 46px !important;
      padding: 10px 12px !important;
      border: 1px solid #b9d8c2 !important;
      border-radius: 12px !important;
      background: #ffffff !important;
      color: #15803d !important;
      font-size: 14px !important;
      font-weight: 750 !important;
      margin-top: 14px;
    }

    body.mobile-time-entry-open #timeEntryCard .time-entry-scroll-add::before {
      content: none !important;
      display: none !important;
    }

    body.mobile-time-entry-open #timeEntryCard #timeClearBtn {
      display: none !important;
    }

    body.mobile-time-entry-open #timeEntryCard #timeDeleteBtn:not(.hidden) {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      color: #b42318 !important;
    }

    @media (max-width: 340px) {
      body.mobile-time-entry-open #timeEntryCard {
        padding: 14px;
      }

      body.mobile-time-entry-open #timeEntryCard .time-entry-card-head {
        top: auto;
        margin: -14px -14px 10px;
        padding: 14px 14px 7px;
      }

      body.mobile-time-entry-open #timeEntryCard .time-section-field,
      body.mobile-time-entry-open #timeEntryCard .time-floor-field {
        grid-column: 1 / -1;
      }
    }

    #timeCalendarCard {
      order: 3;
      grid-column: 1 / -1;
    }

    .time-month-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: #ffffff;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      overflow: hidden;
    }

    .time-month-table th,
    .time-month-table td {
      padding: 8px;
      border-bottom: 1px solid #e5e7eb;
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
    }

    .time-month-table th {
      background: #f8fafc;
      font-size: 12px;
      color: #475569;
      font-weight: 900;
    }

    .time-compare-cell {
      position: relative;
      cursor: help;
    }

    .time-compare-popover {
      display: none;
      position: absolute;
      z-index: 50;
      left: 100%;
      top: 50%;
      transform: translate(10px, -50%);
      width: min(320px, 72vw);
      white-space: normal;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
      border-radius: 8px;
      padding: 12px;
      color: #0f172a;
    }

    .time-compare-cell:hover .time-compare-popover {
      display: block;
    }

    .time-compare-popover h4 {
      margin: 0 0 8px;
      font-size: 14px;
    }

    .time-compare-popover ul {
      margin: 0;
      padding-left: 18px;
    }

    .time-compare-popover li {
      margin: 4px 0;
    }

    .time-compare-warning {
      color: #b91c1c;
      font-weight: 900;
    }

    .required-field label:first-child::after {
      content: " *";
      color: #dc2626;
      font-weight: 950;
    }

    .required-field input,
    .required-field select {
      border-color: var(--soft-border);
      background: white;
    }

    .required-field.missing input,
    .required-field.missing select {
      border-color: #f97316;
      background: #fff7ed;
    }

    .admin-touched-entry {
      background: #fff7ed;
      border-left: 4px solid #f97316;
    }

    .time-edit-mini {
      padding: 5px 8px;
      border-radius: 7px;
      background: #eef2ff;
      color: #3730a3;
      font-size: 12px;
      min-width: auto;
    }

    .time-diff-plus {
      color: #15803d;
      font-weight: 900;
    }

    .time-diff-minus {
      color: #dc2626;
      font-weight: 900;
    }

    .time-day-summary {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px;
    }

    .time-day-summary .summary-tile {
      min-height: 58px;
      align-items: flex-start;
    }

.time-month-account {
  margin-top: 12px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}

.time-month-account-compact {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  margin-top: 0;
  margin-bottom: 12px;
  grid-template-columns: 1fr;
}

.time-month-account-compact strong {
  font-size: 13px;
}

.time-month-account-compact .small-info {
  color: #14532d;
  font-size: 11px;
}

.time-month-account-compact span {
  font-size: 12px;
}

.time-month-account .summary-number {
  color: #15803d;
}

@media (max-width: 760px) {
  .time-month-account-compact {
    gap: 3px;
    padding: 8px 9px;
    margin-bottom: 8px;
  }

  .time-month-account-compact strong {
    font-size: 12px;
  }

  .time-month-account-compact .small-info,
  .time-month-account-compact span {
    font-size: 11px;
  }

  #timeMonthAccountTile {
    border-radius: 7px;
  }

  #timeCheckCard {
    display: none !important;
  }
}

    .time-month-account.negative {
      border-color: #fecaca;
      background: #fef2f2;
      color: #7f1d1d;
    }

    .time-month-account.negative .summary-number {
      color: #dc2626;
    }

    .time-day-existing {
      margin-top: 12px;
    }

    .target-day-row {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .target-day-head {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      color: var(--text);
      padding: 9px 10px;
      border-radius: 0;
      min-width: 0;
      text-align: left;
    }

    .target-day-body {
      padding: 10px;
      border-top: 1px solid #e5e7eb;
    }

    .time-settings-list {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .time-settings-row {
      display: grid;
      grid-template-columns: minmax(120px, 1.3fr) 105px 120px 120px 120px;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
    }

    .time-settings-row.header {
      background: #eef2f7;
      color: #334155;
      font-size: 13px;
      font-weight: 900;
    }

    .time-settings-row .day-name {
      font-weight: 900;
    }

    .time-settings-row input,
    .time-settings-row select {
      width: 100%;
      min-width: 0;
    }

    @media (max-width: 760px) {
      .time-settings-row {
        grid-template-columns: 1fr 1fr;
      }

      .time-settings-row.header {
        display: none;
      }
    }

    #timeTrackingPanel .grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }

    #timeTrackingPanel input,
    #timeTrackingPanel select,
    #timeTrackingPanel textarea {
      min-width: 0;
      width: 100%;
      font-size: 14px;
      padding: 9px 10px;
    }

    /* Date and time fields should stay compact throughout the app. */
    input[type="date"],
    input[type="time"],
    #timeTrackingPanel input[type="date"],
    #timeTrackingPanel input[type="time"],
    .edit-modal input[type="date"],
    .edit-modal input[type="time"],
    .settings-panel input[type="date"],
    .settings-panel input[type="time"],
    .form-panel input[type="date"],
    .form-panel input[type="time"] {
      width: auto;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      text-align: center;
    }

    input[type="date"],
    #timeTrackingPanel input[type="date"],
    .edit-modal input[type="date"],
    .settings-panel input[type="date"],
    .form-panel input[type="date"] {
      inline-size: min(100%, 170px);
    }

    input[type="time"],
    #timeTrackingPanel input[type="time"],
    .edit-modal input[type="time"],
    .settings-panel input[type="time"],
    .form-panel input[type="time"] {
      inline-size: min(100%, 125px);
    }

    #timeTrackingPanel .time-compact-field {
      width: fit-content;
      min-width: 0;
      max-width: 100%;
      justify-self: start;
    }

    #timeTrackingPanel .time-compact-field input {
      width: auto;
      min-width: 0;
      max-width: 100%;
    }

    #timeTrackingPanel .time-date-field input {
      min-width: 0;
      max-width: 100%;
    }

    .time-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .time-timer {
      font-size: 26px;
      font-weight: 900;
      color: #1d4ed8;
      min-width: 120px;
      text-align: right;
    }

    .time-calendar {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }

    .time-calendar-head {
      font-weight: 900;
      color: #64748b;
      font-size: 12px;
      text-align: center;
    }

    .time-month-arrow {
      width: 44px;
      min-width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #111827;
      font-size: 28px;
      line-height: 1;
      box-shadow: none;
      cursor: pointer;
    }

    .time-month-arrow:active:not(:disabled),
    .time-period-button:active {
      color: #16a34a;
    }

    .time-month-arrow:disabled {
      color: #9ca3af;
      cursor: default;
    }

    .time-calendar-period-picker {
      position: relative;
      display: flex;
      justify-content: center;
      width: min(210px, 100%);
      min-width: 0;
      max-width: 100%;
    }

    .time-period-button {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #111827;
      font: inherit;
      font-weight: 900;
      text-align: center;
      cursor: pointer;
      box-shadow: none;
    }

    .time-period-popover {
      position: absolute;
      z-index: 1200;
      top: calc(100% + 8px);
      left: 50%;
      width: min(280px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
      transform: translateX(-50%);
    }

    .time-period-options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
    }

    .time-period-options button {
      min-width: 0;
      min-height: 44px;
      padding: 8px 5px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #111827;
      box-sizing: border-box;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .time-period-options button:active {
      color: #16a34a;
    }

    .time-period-options button.selected {
      color: #166534;
    }

    body #timeCalendarCard .time-month-arrow,
    body #timeCalendarCard .time-period-button,
    body #timeCalendarCard .time-period-option {
      border: 0 !important;
      background: transparent !important;
      color: #111827 !important;
      box-shadow: none !important;
    }

    body #timeCalendarCard .time-month-arrow:active:not(:disabled),
    body #timeCalendarCard .time-period-button:active,
    body #timeCalendarCard .time-period-option:active,
    body #timeCalendarCard .time-period-option.selected {
      color: #16a34a !important;
    }

    body #timeCalendarCard .time-month-arrow:disabled {
      color: #9ca3af !important;
    }

    .time-day {
      min-height: 94px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      padding: 7px;
      font-size: 12px;
    }

    .time-day.other-month {
      opacity: 0.45;
    }

    .time-day.has-hours {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .time-day.absence-hours {
      border-color: #fcd34d;
      background: #fffbeb;
    }

    .time-day.vacation-hours {
      border-color: #fcd34d;
      background: #fffbeb;
    }

    .time-day.sick-hours {
      border-color: #d1d5db;
      background: #f3f4f6;
    }

    .time-day.missing-hours {
      border-color: #fca5a5;
      background: #fef2f2;
    }

    .time-day.deviation-hours {
      border-color: #14532d;
      background: #15803d;
      color: #ffffff;
    }

    .time-day.admin-touched-day {
      border-color: #60a5fa;
      background: #dbeafe;
    }

    .time-day.deviation-hours .time-entry-dot {
      background: #ffffff;
    }

    .time-day.today {
      outline: 2px solid #dc2626;
      outline-offset: -2px;
    }

    .time-legend-head {
      align-items: center;
      gap: 10px;
    }

    .time-legend-info {
      flex: 0 0 32px;
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.16);
      background: #ffffff;
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 15px;
      padding: 0;
      line-height: 1;
      box-shadow: none;
    }

    .time-legend-info:hover {
      background: #f1f5f9;
      color: #0f766e;
    }

    .time-color-legend {
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }

    .time-color-legend-row {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      font-size: 13px;
      line-height: 1.35;
    }

    .time-color-dot {
      width: 16px;
      height: 16px;
      border-radius: 5px;
      border: 1px solid rgba(15, 23, 42, 0.14);
      display: inline-block;
    }

    .time-color-dot.ok { background: #f0fdf4; border-color: #86efac; }
    .time-color-dot.missing { background: #fef2f2; border-color: #fca5a5; }
    .time-color-dot.deviation { background: #15803d; border-color: #14532d; }
    .time-color-dot.admin { background: #dbeafe; border-color: #60a5fa; }
    .time-color-dot.absence { background: #fffbeb; border-color: #fcd34d; }
    .time-color-dot.vacation { background: #fffbeb; border-color: #fcd34d; }
    .time-color-dot.sick { background: #f3f4f6; border-color: #d1d5db; }

    .admin-time-day-editor {
      display: grid;
      gap: 12px;
      align-content: start;
      width: min(100%, 920px);
    }

    .admin-time-day-notice {
      width: min(100%, 560px);
      margin: 0 auto;
      padding: 10px 14px;
      border: 1px solid #c7dccb;
      border-radius: 12px;
      background: #f2f8f1;
      color: #315a3a;
      text-align: center;
      font-weight: 650;
    }

    .admin-time-day-notice.error {
      border-color: #e7c7c7;
      background: #fff7f5;
      color: #8b3d3d;
    }

    #editModal.admin-time-day-modal {
      align-items: flex-start;
      justify-content: center;
      padding-top: 28px;
    }

    #editModal.admin-time-day-modal .edit-modal {
      width: min(980px, calc(100vw - 48px));
      max-height: calc(100dvh - 56px);
      height: auto;
    }

    #editModal.admin-time-day-modal #editModalFields {
      display: block;
      overflow: auto;
      min-height: 0;
      max-height: calc(100dvh - 190px);
    }

    #editModal.admin-time-day-modal #editModalMessage {
      flex: 0 0 auto;
      max-height: none;
      overflow: visible;
    }

    #editModal.admin-time-day-modal #editModalActions {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--soft-border);
      align-items: center;
    }

    #editModal.admin-time-day-modal .admin-time-entry-actions {
      position: static;
      margin: 18px 0 0;
      padding: 14px 0 0;
      border-top: 1px solid rgba(148, 163, 184, 0.35);
      background: transparent;
      box-shadow: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      min-height: auto;
    }

    #editModal.admin-time-day-modal .admin-time-entry-actions button {
      margin: 0;
    }

    #editModal.admin-time-day-modal .admin-time-entry-box .time-compare-cell {
      position: static;
      display: block;
      width: 100%;
      overflow: visible !important;
      cursor: default;
      z-index: auto;
    }

    #editModal.admin-time-day-modal .admin-time-entry-box .time-compare-popover {
      display: none;
      position: static;
      width: 100%;
      max-width: none;
      margin-top: 10px;
      padding: 10px 12px;
      transform: none !important;
      border-radius: 8px;
      box-shadow: none;
      background: #ffffff;
      border-color: rgba(15, 23, 42, 0.12);
      white-space: normal;
      overflow-wrap: anywhere;
    }

    #editModal.admin-time-day-modal .admin-time-entry-box .time-compare-cell:hover .time-compare-popover {
      display: block;
    }

    #editModal.admin-time-day-modal .admin-time-entry-box .time-compare-popover::after {
      display: none;
    }

    .admin-time-plan-box,
    .admin-time-entry-box,
    .admin-time-status-box {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
    }

    .admin-time-plan-box {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    .admin-time-plan-head {
      align-items: flex-start;
      gap: 10px;
    }

    .admin-time-plan-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px 12px;
    }

    #editModal.admin-time-day-modal button.admin-time-inline-link {
      width: auto;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0;
      padding: 2px 0 !important;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      box-shadow: none;
      color: #15803d !important;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    #editModal.admin-time-day-modal button.admin-time-inline-link:hover,
    #editModal.admin-time-day-modal button.admin-time-inline-link:focus-visible {
      color: #166534 !important;
      background: transparent !important;
    }

    .admin-time-entry-section-title {
      margin: 2px 0 -2px;
      font-size: 16px;
    }

    .admin-time-compare-box {
      border: 1px solid #dbeafe;
      border-radius: 8px;
      background: #f8fafc;
      padding: 12px;
    }

    .admin-time-compare-box h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }

    .admin-time-compare-group {
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      padding-top: 8px;
      margin-top: 8px;
    }

    .admin-time-compare-group:first-of-type {
      border-top: 0;
      padding-top: 0;
      margin-top: 0;
    }

    .admin-time-compare-list {
      display: grid;
      gap: 6px;
      margin-top: 6px;
    }

    .admin-time-compare-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 7px 9px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 7px;
      background: #ffffff;
    }

    .admin-time-compare-row > span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .admin-time-compare-row.warning {
      border-color: #fdba74;
      background: #fff7ed;
      color: #9a3412;
      font-weight: 800;
    }

    .admin-time-entry-box {
      background: #ffffff;
      overflow: visible;
    }

    .admin-time-entry-box.deviation {
      border-color: #fdba74;
      background: #fff7ed;
    }

    .admin-time-entry-box.admin-touched {
      border-color: #60a5fa;
      background: #eff6ff;
    }

    .admin-time-entry-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .admin-time-entry-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 10px;
      align-items: end;
    }

    .admin-time-entry-grid > div,
    .admin-time-entry-grid input,
    .admin-time-entry-grid select,
    .admin-time-entry-grid textarea {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .admin-time-entry-grid .wide {
      grid-column: span 2;
    }

    .admin-time-entry-grid .full {
      grid-column: 1 / -1;
    }

    .admin-time-entry-grid input,
    .admin-time-entry-grid select,
    .admin-time-entry-grid textarea {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    @media (max-width: 760px) {
      #editModal.admin-time-day-modal {
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      }

      #editModal.admin-time-day-modal .edit-modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
      }

      #editModal.admin-time-day-modal #editModalFields {
        overflow-x: hidden;
      }

      .admin-time-day-editor,
      .admin-time-day-editor > *,
      .admin-time-day-notice {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .admin-time-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .admin-time-status-list {
      display: grid;
      gap: 6px;
      margin: 0;
      padding-left: 18px;
    }

    .admin-time-entry-box .admin-time-status-box {
      margin-top: 14px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.72);
    }

    .admin-time-add-row {
      display: flex;
      justify-content: center;
      margin: -4px 0 4px;
    }

    .admin-time-add-entry {
      width: 38px;
      height: 38px;
      min-width: 38px;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
    }

    .time-day-date {
      font-weight: 900;
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .time-entry-dots {
      display: none;
      flex-wrap: wrap;
      gap: 3px;
      align-items: center;
      margin-top: 5px;
    }

    .time-entry-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #111827;
      display: inline-block;
    }

    .time-entry-more {
      color: #111827;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    .time-entry-pill {
      display: block;
      margin-top: 4px;
      padding: 3px 5px;
      border-radius: 6px;
      background: white;
      border: 1px solid var(--soft-border);
      font-weight: 800;
      line-height: 1.25;
    }

    .time-day-details {
      display: grid;
      gap: 4px;
      margin-top: 4px;
    }

    .time-entry-pill span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      margin-top: 1px;
    }

    .time-entry-pill-warning {
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }

    .time-entry-pill-danger {
      border-color: #fdba74;
      background: #fff7ed;
      color: #9a3412;
    }

    .time-entry-pill-admin {
      border-color: #93c5fd;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .time-day.admin-touched-day {
      border-color: #60a5fa;
      background: #dbeafe;
    }

    .time-entry-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 10px;
      background: #f9fafb;
      margin-top: 8px;
    }

    .time-entry-row.open {
      border-color: #93c5fd;
      background: #eff6ff;
    }

    .time-entry-row.confirmed {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .time-entry-row.deviation {
      border-color: #fdba74;
      background: #fff7ed;
    }

    .time-entry-row.missing {
      border-color: #fca5a5;
      background: #fef2f2;
    }

    .time-entry-row.planned {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

    .time-entry-readonly-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
    }

    .time-entry-readonly-list .time-entry-row {
      margin-top: 0;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .time-mini-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .time-mini-actions button {
      padding: 6px 8px;
      font-size: 12px;
    }

    .delivery-action-links {
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .delivery-action-link {
      border: none;
      background: transparent;
      padding: 3px 2px;
      margin: 0;
      color: var(--green, #145c3c);
      text-decoration: underline;
      text-underline-offset: 2px;
      font-size: 11px;
      line-height: 1.2;
      cursor: pointer;
    }

    .delivery-action-link:hover {
      text-decoration-thickness: 2px;
      color: #0d4330;
    }

    .delivery-action-link:disabled,
    .delivery-action-link.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
      text-decoration: none;
      color: #6b7280;
    }

    .delivery-scan-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(14, 116, 144, 0.08);
      color: #0f766e;
      font-size: 12px;
      line-height: 1.1;
      border: 1px solid rgba(14, 116, 144, 0.25);
      white-space: nowrap;
    }

    .delivery-scan-tag::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #0f766e;
      border-top-color: transparent;
      animation: deliveryScanSpin 1s linear infinite;
      box-sizing: border-box;
    }

    @keyframes deliveryScanSpin {
      to { transform: rotate(360deg); }
    }

    .delivery-file-btn {
      padding: 0;
      border: none;
      background: none;
      color: var(--green, #1f7d57);
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

    .delivery-file-btn.disabled {
      color: rgba(31, 41, 55, 0.45);
      text-decoration-color: rgba(31, 41, 55, 0.25);
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.8;
    }

    .delivery-file-btn:hover {
      text-decoration: none;
    }

    .delivery-upload-actions {
      position: relative;
      z-index: 40;
      display: block;
      width: 78px;
      height: 78px;
      min-height: 78px;
      margin: 0 0 14px auto;
    }

    .delivery-camera-add {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 56px !important;
      min-width: 56px !important;
      max-width: 56px !important;
      height: 56px !important;
      min-height: 56px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: #16a34a !important;
      color: #ffffff !important;
      box-shadow: 0 12px 25px rgba(22, 163, 74, 0.28) !important;
    }

    .delivery-camera-add .doc-add-svg {
      width: 30px;
      height: 30px;
    }

    .delivery-upload-picker {
      position: absolute;
      z-index: 3;
      right: 0;
      bottom: 0;
      width: 44px;
      height: 44px;
      margin: 0;
    }

    .delivery-upload-picker::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -11px;
      top: 7px;
      width: 23px;
      height: 8px;
      border-radius: 999px;
      background: #16a34a;
      transform: rotate(42deg);
      transform-origin: center;
    }

    .delivery-upload-picker > summary {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      list-style: none;
    }

    .delivery-upload-picker > summary::-webkit-details-marker {
      display: none;
    }

    .delivery-upload-picker > summary:focus {
      outline: 0;
    }

    .delivery-upload-picker > summary:focus-visible .delivery-more-dot-button {
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.24), 0 7px 18px rgba(15, 23, 42, 0.24);
    }

    .delivery-more-dot-button {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #16a34a;
      color: #ffffff;
      box-shadow: 0 7px 18px rgba(22, 163, 74, 0.28);
    }

    .delivery-more-dot-button > span {
      display: block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
    }

    .delivery-upload-picker[open] .delivery-more-dot-button {
      background: #15803d;
    }

    .delivery-upload-options {
      position: absolute;
      z-index: 1300;
      right: 0;
      bottom: calc(100% + 8px);
      width: min(240px, calc(100vw - 32px));
      padding: 7px;
      border: 1px solid rgba(148, 163, 184, 0.38);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
      overflow: hidden;
    }

    body .delivery-upload-options button {
      width: 100% !important;
      min-height: 46px !important;
      padding: 10px 12px !important;
      border: 0 !important;
      border-radius: 10px !important;
      background: transparent !important;
      color: #111827 !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      text-align: left;
      box-shadow: none !important;
    }

    body .delivery-upload-options button + button {
      border-top: 1px solid #e5e7eb !important;
      border-radius: 0 !important;
    }

    body .delivery-upload-options button:active {
      background: #f1f5f9 !important;
    }

    .delivery-upload-option-icon {
      width: 24px;
      min-width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .delivery-upload-option-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    @media (max-width: 760px) {
      #projectPlatform .project-main-area.project-section-delivery .delivery-upload-actions {
        position: fixed;
        right: calc(18px + env(safe-area-inset-right, 0px));
        bottom: calc(112px + env(safe-area-inset-bottom, 0px));
        z-index: 1200;
        margin: 0;
      }
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-delivery .delivery-upload-actions {
      position: fixed;
      right: calc(18px + env(safe-area-inset-right, 0px));
      bottom: calc(112px + env(safe-area-inset-bottom, 0px));
      z-index: 1200;
      margin: 0;
    }

    @media (max-width: 760px) {
      #projectPlatform .project-main-area.project-section-delivery .delivery-camera-add {
        background: #16a34a !important;
        color: #ffffff !important;
      }
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-delivery .delivery-camera-add,
    body.real-mobile-app #projectPlatform .project-main-area.project-section-delivery .delivery-camera-add {
      background: #16a34a !important;
      color: #ffffff !important;
    }

    .delivery-filter-bar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(170px, auto);
      gap: 10px;
      align-items: end;
      margin: 0 0 12px;
      padding: 10px;
      border: 1px solid var(--soft-border);
      border-radius: 10px;
      background: #f8fafc;
    }

    .delivery-filter-bar label,
    .delivery-suggestion-field label {
      display: block;
      margin-bottom: 5px;
      font-weight: 700;
      color: #334155;
    }

    .delivery-filter-bar input,
    .delivery-filter-bar select {
      width: 100%;
      max-width: 100%;
      min-height: 38px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 8px 10px;
      box-sizing: border-box;
      background: #ffffff;
    }

    .delivery-suggestion-field {
      display: grid;
      gap: 6px;
    }

    .delivery-suggestion-field input {
      width: 100%;
    }

    .delivery-suggestion-hint {
      color: #64748b;
      font-size: 12px;
      line-height: 1.25;
    }

    .settings-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .settings-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 14px;
      align-items: start;
    }

    .settings-menu {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: #f9fafb;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 10px;
    }

    .settings-menu button {
      width: 100%;
      text-align: left;
      background: #e5e7eb;
      color: var(--text);
    }

    .settings-menu button.active {
      background: var(--accent);
      color: white;
    }

    .settings-content {
      display: none;
    }

    .settings-content.active {
      display: block;
    }

    .design-settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      align-items: end;
    }

    .design-mode-panel {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 14px;
      background: #f9fafb;
      margin-top: 12px;
    }

    .design-preview-surface {
      --design-accent: #16a34a;
      --design-surface: #ffffff;
      --design-text: #111827;
      --design-radius: 8px;
      --design-shadow: 0 10px 24px rgba(15,23,42,.10);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      padding: 14px;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      background: #fff;
      color: var(--design-text);
    }

    .design-preview-button {
      border: 0;
      border-radius: var(--design-radius);
      background: var(--design-accent);
      color: #fff;
      box-shadow: var(--design-shadow);
      padding: 10px 14px;
      font-weight: 800;
      cursor: default;
    }

    .design-preview-card {
      border: 1px solid #d1d5db;
      border-radius: var(--design-radius);
      background: var(--design-surface);
      box-shadow: var(--design-shadow);
      padding: 12px;
      min-height: 88px;
    }

    .design-preview-table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: var(--design-radius);
      font-size: .88rem;
    }

    .design-preview-table th {
      background: color-mix(in srgb, var(--design-accent) 16%, white);
      text-align: left;
      padding: 8px;
    }

    .design-preview-table td {
      border-top: 1px solid #e5e7eb;
      padding: 8px;
    }

    body.design-theme-active {
      --bbs-paper: var(--live-design-surface, #ffffff);
      --card: var(--live-design-surface, #ffffff);
      --text: var(--live-design-text, #111827);
      --accent: var(--live-design-accent, #16a34a);
      font-size: var(--live-design-font-size, 16px);
    }

    body.design-theme-active.employee-view {
      --bbs-worker: var(--live-design-accent, #16a34a);
    }

    body.design-theme-active.admin-view {
      --bbs-admin: var(--live-design-accent, #28313d);
    }

    body.design-theme-active button:not(.danger):not(.secondary):not(.light):not(.view-switch):not(.password-eye-button):not(.dot-menu-button):not(.camera-capture-button):not(.camera-close-button):not(.camera-done-button):not(.camera-flash-button):not(.camera-switch-button):not(.camera-finish-arrow) {
      border-radius: var(--live-design-radius, 8px);
      background: var(--live-design-accent, #16a34a);
    }

    body.design-theme-active .toolbar,
    body.design-theme-active .form-panel,
    body.design-theme-active .project-platform,
    body.design-theme-active .planner-wrap,
    body.design-theme-active .home-card,
    body.design-theme-active .time-card,
    body.design-theme-active .account-box,
    body.design-theme-active .file-card,
    body.design-theme-active .settings-menu,
    body.design-theme-active .data-row,
    body.design-theme-active .chat-shell,
    body.design-theme-active .summary-tile,
    body.design-theme-active .design-mode-panel {
      border-radius: var(--live-design-radius, 8px);
      background: color-mix(in srgb, var(--live-design-surface, #ffffff) 94%, white);
      color: var(--live-design-text, #111827);
      box-shadow: var(--live-design-shadow, 0 10px 24px rgba(15,23,42,.10));
    }

    body.design-theme-active .settings-menu button.active,
    body.design-theme-active .project-section-switch button.active {
      background: var(--live-design-accent, #16a34a);
    }

    body.design-theme-active input,
    body.design-theme-active select,
    body.design-theme-active textarea {
      border-radius: max(4px, calc(var(--live-design-radius, 8px) - 2px));
    }

    body.design-theme-active table th {
      background: color-mix(in srgb, var(--live-design-accent, #16a34a) 14%, white);
    }

    .design-version-list {
      display: grid;
      gap: 8px;
    }

    .design-version-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 10px;
      background: #fff;
    }

    .design-status-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: .78rem;
      font-weight: 800;
      background: #e5e7eb;
      color: #374151;
    }

    .design-status-pill.live {
      background: #dcfce7;
      color: #166534;
    }

    .data-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 8px;
      margin-top: 8px;
      background: white;
      font-size: 13px;
      font-weight: 800;
    }

    .data-row.sortable-row {
      cursor: grab;
      user-select: none;
    }

    .data-row.sortable-row:active {
      cursor: grabbing;
    }

    .data-row.dragging {
      opacity: 0.55;
      border-color: var(--accent);
      background: #eef4ff;
    }

    .data-row.drop-target {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .drag-hint {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .data-row.active {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .data-row.inactive {
      opacity: 0.55;
      background: #f3f4f6;
    }

    .data-row.employee-row {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .data-row-main {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .row-actions {
      display: inline-flex;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .data-row button {
      padding: 5px 8px;
      font-size: 11px;
      border-radius: 6px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 700;
      background: #dcfce7;
      color: #166534;
      margin-left: 6px;
    }

    .status-pill.inactive {
      background: #e5e7eb;
      color: #4b5563;
    }

    .vehicle-thumb {
      width: 28px;
      height: 22px;
      object-fit: cover;
      border-radius: 5px;
      border: 1px solid var(--soft-border);
      vertical-align: middle;
      margin-right: 5px;
      background: white;
    }

    .vehicle-card {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: 7px;
      padding: 4px 6px;
      margin-top: 4px;
      max-width: 100%;
      font-size: 12px;
      font-weight: 800;
    }

    .vehicle-card.over-capacity {
      border: 2px solid #dc2626;
      background: #fef2f2;
      color: #7f1d1d;
    }

    .vehicle-card-text {
      display: inline-flex;
      flex-direction: column;
      line-height: 1.15;
      min-width: 0;
    }

    .vehicle-plate {
      font-size: 11px;
      color: var(--muted);
      font-weight: 900;
    }

    .vehicle-card.over-capacity .vehicle-plate {
      color: #991b1b;
    }

    .check-pill.disabled {
    opacity: 0.48;
    cursor: not-allowed;
  }

  .vehicle-selection {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 46px;
      align-items: center;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 8px;
      background: white;
    }

    .vehicle-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }

    .vehicle-overview-stack {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 5px;
    }

    .vehicle-overview-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      min-width: 38px;
      height: 32px;
      min-height: 32px;
      padding: 3px;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      background: #eff6ff;
      box-sizing: border-box;
      overflow: hidden;
    }

    .vehicle-overview-icon .vehicle-thumb {
      width: 100%;
      height: 100%;
      margin: 0;
      border: 0;
      object-fit: contain;
    }

    .vehicle-overview-icon.over-capacity {
      border-color: #dc2626;
      background: #fef2f2;
    }

    .capacity-warning {
      display: inline-block;
      margin-top: 4px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #fee2e2;
      color: #991b1b;
      font-size: 12px;
      font-weight: 900;
    }

    .request-card {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 12px;
      background: #f9fafb;
      margin-top: 8px;
    }

    .request-split-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 12px;
      align-items: start;
    }

    .admin-task-layout {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }

    .admin-task-menu {
      position: sticky;
      top: 12px;
    }

    .admin-task-content {
      min-width: 0;
    }

    .admin-task-section {
      display: none;
      min-width: 0;
    }

    .admin-task-section.active {
      display: block;
    }

    .admin-task-count {
      float: right;
      min-width: 24px;
      border-radius: 999px;
      padding: 2px 7px;
      text-align: center;
      font-size: 12px;
      background: rgba(255,255,255,0.8);
      color: inherit;
    }

    .task-platform-grid {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .task-compose,
    .task-card {
      border: 1px solid var(--soft-border);
      border-radius: 10px;
      background: #fff;
      padding: 14px;
    }

    .task-compose {
      position: sticky;
      top: 12px;
    }

    .task-compose.hidden {
      display: none;
    }

    .task-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .task-add-floating {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      height: 54px !important;
      min-height: 54px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: #16a34a !important;
      color: #ffffff !important;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 1;
      box-shadow: 0 8px 20px rgba(22, 163, 74, 0.24) !important;
      flex: 0 0 auto;
    }

    .task-global-add-fab {
      display: none !important;
    }

    .task-list {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .task-card {
      display: grid;
      gap: 8px;
    }

    .task-card.task-list-row {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px 14px;
      padding: 11px 12px;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .task-card.task-list-row .task-card-head {
      grid-column: 1;
      grid-row: 1;
      justify-content: flex-start;
    }

    .task-card.task-list-row > .small-info,
    .task-card.task-list-row .task-card-description,
    .task-card.task-list-row .task-card-meta,
    .task-card.task-list-row details {
      grid-column: 1 / -1;
    }

    .task-card.task-list-row .task-card-actions {
      grid-column: 2;
      grid-row: 1 / span 2;
      justify-content: flex-end;
      align-self: start;
    }

    .task-card.task-list-row .task-card-image {
      width: 72px;
      height: 54px;
      max-height: 54px;
      object-fit: cover;
      grid-column: 1 / -1;
    }

    @media (max-width: 700px) {
      .task-card.task-list-row {
        grid-template-columns: 1fr;
      }

      .task-card.task-list-row .task-card-actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
      }
    }

    .task-card-head,
    .task-card-meta,
    .task-card-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .task-card-image {
      display: block;
      width: min(100%, 360px);
      max-height: 220px;
      object-fit: contain;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid var(--soft-border);
    }

    .task-status {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      background: #fef3c7;
      color: #92400e;
    }

    .task-status.in-progress { background: #dbeafe; color: #1d4ed8; }
    .task-status.done { background: #dcfce7; color: #166534; }

    .task-filter-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .task-filter-row select {
      width: auto;
      min-width: 150px;
    }

    .task-image-preview {
      max-width: 100%;
      max-height: 140px;
      object-fit: contain;
      margin-top: 8px;
      border-radius: 8px;
      border: 1px solid var(--soft-border);
    }

    .task-card-images {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      grid-column: 1 / -1;
      scrollbar-width: thin;
    }

    .task-card-images .task-card-image {
      flex: 0 0 82px;
      width: 82px !important;
      height: 62px !important;
      object-fit: cover;
    }

    .task-card.task-list-row.task-card-compact {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      cursor: pointer;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      transition: border-color 0.16s ease, background 0.16s ease;
    }

    .task-card.task-list-row.task-card-compact:hover,
    .task-card.task-list-row.task-card-compact:focus-visible {
      border-color: #86c996;
      background: #fbfefb;
      outline: none;
    }

    .task-card-compact .task-card-head {
      min-width: 0;
      flex-wrap: nowrap;
    }

    .task-card-compact .task-card-head strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .task-card-compact .task-status {
      width: 15px;
      min-width: 15px;
      height: 15px;
      min-height: 15px;
      flex: 0 0 15px;
      padding: 0;
      border: 2px solid #ffffff;
      border-radius: 999px;
      background: #dc2626;
      color: transparent;
      font-size: 0;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    }

    .task-card-compact .task-status.in-progress { background: #f59e0b; }
    .task-card-compact .task-status.done { background: #16a34a; }

    .task-countdown {
      display: block;
      color: #168642;
      font-size: 13px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      line-height: 1.35;
    }

    .task-countdown.warning { color: #d97706; }
    .task-countdown.overdue { color: #dc2626; }
    .task-countdown.no-deadline { color: #64748b; }

    #editModal.task-detail-modal {
      align-items: center;
      padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px));
    }

    #editModal.task-detail-modal .edit-modal {
      width: min(100%, 680px);
      max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      padding: 20px;
      border-radius: 22px;
    }

    #editModal.task-detail-modal #editModalTitle {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 4px;
      font-size: 22px;
    }

    #editModal.task-detail-modal #editModalTitle > span:first-child {
      min-width: 0;
      flex: 1 1 auto;
    }

    .task-modal-title-actions {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 2px;
    }

    #editModal.task-detail-modal .task-modal-edit-icon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #168642 !important;
      box-shadow: none !important;
    }

    #editModal.task-detail-modal .task-modal-edit-icon svg {
      width: 21px;
      height: 21px;
      pointer-events: none;
    }

    #editModal.task-detail-modal .task-modal-close {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #334155 !important;
      box-shadow: none !important;
      font-size: 25px !important;
      line-height: 1 !important;
    }

    #editModal.task-detail-modal #editModalMessage {
      margin-bottom: 12px;
      color: #64748b;
      font-size: 13px;
    }

    #editModal.task-detail-modal #editModalFields {
      display: block;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .task-detail-content {
      display: grid;
      gap: 18px;
    }

    .task-detail-section {
      display: grid;
      gap: 8px;
    }

    .task-detail-section h3 {
      margin: 0;
      font-size: 15px;
      color: #334155;
    }

    .task-detail-description {
      margin: 0;
      color: #111827;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .task-detail-statuses {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .task-detail-images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
      gap: 9px;
    }

    .task-detail-image-button {
      min-width: 0 !important;
      min-height: 92px !important;
      padding: 0 !important;
      overflow: hidden;
      border: 0 !important;
      border-radius: 12px !important;
      background: #eef2f7 !important;
      box-shadow: none !important;
    }

    .task-detail-image-button img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 92px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .task-comment-list {
      display: grid;
      gap: 8px;
    }

    .task-comment {
      padding: 10px 11px;
      border-left: 3px solid #58ad70;
      border-radius: 0 10px 10px 0;
      background: #f7fbf8;
    }

    .task-comment p {
      margin: 3px 0 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .task-comment-compose {
      display: grid;
      gap: 8px;
    }

    .task-comment-compose textarea {
      min-height: 76px;
      resize: vertical;
    }

    .task-comment-compose button {
      justify-self: end;
      width: auto;
      min-height: 44px;
      background: #169447 !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    .task-image-viewer {
      position: fixed;
      inset: 0;
      z-index: 350000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
      background: rgba(0, 0, 0, 0.92);
    }

    .task-image-viewer.active { display: flex; }

    .task-image-viewer img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .task-image-viewer-close {
      position: fixed;
      top: max(12px, env(safe-area-inset-top, 0px));
      right: max(12px, env(safe-area-inset-right, 0px));
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.92) !important;
      color: #111827 !important;
      font-size: 25px !important;
      box-shadow: none !important;
    }

    @media (max-width: 700px) {
      .task-card.task-list-row.task-card-compact { grid-template-columns: minmax(0, 1fr); }
      #editModal.task-detail-modal .edit-modal { padding: 17px; }
      .task-detail-images { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .task-detail-image-button,
      .task-detail-image-button img { min-height: 76px !important; }
    }

    #editModal.task-create-modal {
      align-items: center;
      padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    }

    #editModal.task-create-modal .edit-modal {
      width: min(100%, 390px);
      max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
      padding: 20px;
      border-radius: 22px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    #editModal.task-create-modal #editModalTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      font-size: 21px;
      font-weight: 500;
      line-height: 1.2;
    }

    #editModal.task-create-modal .task-modal-close {
      flex: 0 0 44px;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #344054 !important;
      box-shadow: none !important;
      margin: 0 !important;
      font-size: 0;
      font-weight: 400;
      line-height: 1;
      display: grid !important;
      place-items: center;
    }

    #editModal.task-create-modal .task-modal-close span {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #344054;
      font-size: 21px;
      line-height: 1;
    }

    #editModal.task-create-modal .task-modal-close:focus,
    #editModal.task-create-modal .task-modal-close:focus-visible,
    #editModal.task-create-modal .task-modal-close:active {
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #editModal.task-create-modal #editModalMessage {
      margin: 0 0 14px;
      color: #667085;
      font-size: 14px;
    }

    #editModal.task-create-modal #editModalFields {
      display: grid;
      gap: 19px;
    }

    .task-create-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: end;
      justify-content: space-between;
    }

    .task-create-field label {
      display: block;
      margin-bottom: 5px;
      color: #344054;
      font-size: 13px;
      font-weight: 700;
    }

    .task-field-heading {
      display: inline-flex !important;
      align-items: center;
      gap: 7px;
      margin-bottom: 7px !important;
    }

    .task-field-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      fill: none;
      stroke: #169447;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .task-due-compact {
      flex: 0 0 138px;
      width: 138px;
    }

    .task-due-compact input {
      width: 138px;
      min-height: 40px !important;
      padding: 7px 8px !important;
      border-radius: 10px;
      font-size: 13px !important;
    }

    .task-status-field {
      flex: 1 1 180px;
      min-width: 0;
    }

    .task-status-options {
      display: flex;
      gap: 6px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .task-status-choice {
      flex: 0 0 auto;
      min-width: 0 !important;
      min-height: 34px !important;
      padding: 6px 10px !important;
      border: 1px solid transparent !important;
      border-radius: 9px !important;
      box-shadow: none !important;
      font-size: 11.5px !important;
      font-weight: 700 !important;
      white-space: nowrap;
    }

    .task-status-choice.open {
      background: #fef2f2 !important;
      color: #c62828 !important;
    }

    .task-status-choice.in-progress {
      background: #fff7ed !important;
      color: #c25b0a !important;
    }

    .task-status-choice.done {
      background: #ecfdf3 !important;
      color: #15803d !important;
    }

    .task-status-choice.open.selected { border-color: #dc2626 !important; box-shadow: inset 0 0 0 1px #dc2626 !important; }
    .task-status-choice.in-progress.selected { border-color: #f59e0b !important; box-shadow: inset 0 0 0 1px #f59e0b !important; }
    .task-status-choice.done.selected { border-color: #16a34a !important; box-shadow: inset 0 0 0 1px #16a34a !important; }

    .task-assignee-compact select {
      min-height: 42px;
      font-size: 14px;
    }

    .task-description-shell {
      position: relative;
      width: 100%;
      min-width: 0;
    }

    .task-description-shell textarea {
      width: 100%;
      max-width: 100%;
      min-height: 118px;
      padding: 12px 14px;
      border: 1px solid #d0d5dd;
      border-radius: 14px;
      background: #ffffff;
      box-sizing: border-box;
      display: block;
      font-size: 16px;
      line-height: 1.4;
      resize: vertical;
    }

    #editModal.task-create-modal .task-description-shell textarea:focus-visible,
    #editModal.task-edit-modal .task-description-shell textarea:focus-visible {
      outline-offset: -3px;
      box-shadow: none;
    }

    .task-description-tools {
      display: flex;
      justify-content: flex-start;
      margin-top: 3px;
    }

    .task-description-tool.ai {
      width: auto !important;
      min-width: 0 !important;
      min-height: 44px !important;
      padding: 8px 2px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #15803d !important;
      box-shadow: none !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    .task-description-tool[aria-busy="true"] {
      color: #15803d !important;
      opacity: 1;
    }

    .task-ai-title-preview {
      margin-top: 2px;
      color: #166534;
      font-size: 12px;
      font-weight: 800;
    }

    #editModal.task-create-modal button.task-description-tool.ai,
    #editModal.task-create-modal button.task-description-tool.ai:hover,
    #editModal.task-create-modal button.task-description-tool.ai:focus,
    #editModal.task-create-modal button.task-description-tool.ai:focus-visible,
    #editModal.task-create-modal button.task-description-tool.ai:active,
    #editModal.task-create-modal button.task-description-tool.ai:disabled,
    #editModal.task-create-modal button.task-description-tool.ai[aria-busy="true"] {
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      color: #15803d !important;
      box-shadow: none !important;
      filter: none !important;
      opacity: 1 !important;
      -webkit-tap-highlight-color: transparent;
    }

    .task-image-picker {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding: 2px 1px 5px;
      scrollbar-width: thin;
    }

    .task-photo-panel {
      display: grid;
      gap: 10px;
      padding: 11px;
      border: 1px solid #dce8df;
      border-radius: 14px;
      background: #ffffff;
    }

    .task-photo-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .task-photo-action {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-height: 44px !important;
      padding: 8px 9px !important;
      border: 1px solid #b9d8c2 !important;
      border-radius: 11px !important;
      background: #ffffff !important;
      color: #146c36 !important;
      box-shadow: none !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      white-space: nowrap;
    }

    .task-photo-action .task-field-icon {
      width: 17px;
      height: 17px;
      flex-basis: 17px;
    }

    .task-image-tile {
      position: relative;
      flex: 0 0 78px;
      width: 78px !important;
      min-width: 78px !important;
      height: 78px !important;
      min-height: 78px !important;
      padding: 0 !important;
      border-radius: 14px !important;
      overflow: hidden;
      box-shadow: none !important;
    }

    .task-image-tile {
      border: 2px solid #16a34a !important;
      background: #f3f4f6 !important;
    }

    .task-image-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .task-image-remove {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 24px !important;
      min-width: 24px !important;
      height: 24px !important;
      min-height: 24px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(17,24,39,.82) !important;
      color: #ffffff !important;
      font-size: 17px;
      line-height: 1;
    }

    #editModal.task-create-modal #editModalActions {
      display: grid;
      position: static !important;
      margin: 10px 0 0 !important;
      padding: 0 !important;
      border-top: 0 !important;
      background: transparent !important;
    }

    .task-create-save {
      width: 100%;
      min-height: 52px;
      border: 0;
      border-radius: 14px;
      background: #169447 !important;
      color: #ffffff !important;
      box-shadow: none !important;
      opacity: .45;
    }

    .task-create-save.active:not(:disabled) {
      background: #169447 !important;
      color: #ffffff !important;
      opacity: 1;
    }

    @media (max-width: 420px) {
      #editModal.task-create-modal .edit-modal { padding: 16px; }
      .task-due-compact { flex-basis: 132px; width: 132px; }
      .task-due-compact input { width: 132px; }
    }

    .task-example-card {
      border-style: dashed;
      background: #f9fafb;
    }

    .task-done-folder {
      margin-top: 12px;
      border: 1px solid var(--soft-border);
      border-radius: 10px;
      background: #f8fafc;
      overflow: hidden;
    }

    .task-done-folder summary {
      cursor: pointer;
      list-style: none;
      padding: 12px 14px;
      font-weight: 850;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .task-done-folder summary::-webkit-details-marker {
      display: none;
    }

    .task-done-folder summary::after {
      content: "›";
      font-size: 18px;
      transform: rotate(90deg);
      transition: transform 0.16s ease;
    }

    .task-done-folder[open] summary::after {
      transform: rotate(-90deg);
    }

    .task-done-folder .task-list {
      padding: 0 10px 10px;
    }

    @media (max-width: 760px) {
      .task-platform-grid { grid-template-columns: 1fr; }
      .task-compose { position: static; }
      .task-card-actions button { padding: 7px 9px; font-size: 12px; }

      #projectPlatform .project-main-area.project-section-tasks .task-add-floating {
        position: fixed !important;
        right: calc(18px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1200;
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        margin: 0 !important;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24) !important;
      }

      #editModal.task-edit-modal {
        align-items: flex-end;
        padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px));
      }

      #editModal.task-edit-modal .edit-modal {
        width: 100%;
        max-height: calc(100dvh - 128px - env(safe-area-inset-bottom, 0px));
        border-radius: 18px;
      }

      #editModal.task-edit-modal #editModalFields {
        grid-template-columns: 1fr !important;
      }

      #editModal.task-edit-modal #editModalFields textarea {
        min-height: 96px;
      }

      #editModal.task-edit-modal #editModalActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
    }

    .request-note-input {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      resize: vertical;
    }

    .request-section-card {
      border: 1px solid var(--soft-border);
      border-radius: 10px;
      background: #ffffff;
      padding: 12px;
      margin-top: 0;
      min-width: 0;
    }

    .request-section-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .request-section-card.vacation-section {
      border-left: 5px solid #22c55e;
      background: #f7fdf8;
    }

    .request-section-card.sick-section {
      border-left: 5px solid #dc2626;
      background: #fff7f7;
    }

    .request-section-card.feedback-section {
      border-left: 5px solid #94a3b8;
      background: #f8fafc;
    }

    .mobile-requests-nav {
      display: none;
    }

    .request-card.done {
      opacity: 0.55;
    }

    .request-card.org-approved {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .leave-status {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 9px;
      background: #e5e7eb;
      font-size: 12px;
      font-weight: 900;
      margin-top: 8px;
    }

    .leave-status.open {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .leave-status.org-approved {
      background: #fef3c7;
      color: #92400e;
    }

    .leave-status.approved {
      background: #dcfce7;
      color: #166534;
    }

    .leave-status.rejected {
      background: #fee2e2;
      color: #991b1b;
    }

    .chat-shell {
      display: grid;
      grid-template-columns: minmax(180px, 260px) 1fr;
      gap: 12px;
      min-height: 420px;
    }

    .chat-people {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f9fafb;
      padding: 8px;
      max-height: 480px;
      overflow: auto;
    }

    .chat-person {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      border: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      padding: 9px;
      border-radius: 7px;
      font-size: 13px;
    }

    .chat-person-main {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .chat-person.active {
      background: var(--accent);
      color: white;
    }

    .chat-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      overflow: hidden;
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid var(--soft-border);
      font-size: 12px;
      font-weight: 900;
    }

    .chat-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .chat-window {
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: white;
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 420px;
      overflow: hidden;
    }

    .chat-title {
      padding: 12px;
      border-bottom: 1px solid var(--soft-border);
      font-weight: 900;
    }

    .chat-messages {
      padding: 14px;
      overflow: auto;
      max-height: 360px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(236, 253, 245, 0.68)),
        #f8fafc;
    }

    .chat-bubble {
      max-width: min(620px, 82%);
      padding: 10px 34px 18px 12px;
      border-radius: 13px 13px 13px 4px;
      background: white;
      border: 1px solid var(--soft-border);
      font-weight: 650;
      font-size: 14px;
      line-height: 1.35;
      position: relative;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
      white-space: pre-wrap;
    }

    .chat-message-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      position: relative;
    }

    .chat-message-row.mine {
      justify-content: flex-end;
    }

    .chat-bubble.mine {
      align-self: flex-end;
      background: #dcfce7;
      border-color: #86efac;
      border-radius: 13px 13px 4px 13px;
    }

    .chat-meta {
      position: absolute;
      right: 10px;
      bottom: 5px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 800;
    }

    .chat-author {
      margin: 0 22px 4px 0;
      font-size: 11px;
      color: #475569;
      font-weight: 900;
    }

    .chat-text {
      overflow-wrap: anywhere;
    }

    .chat-day-separator {
      align-self: center;
      margin: 6px 0;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      color: #475569;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 1px 5px rgba(15, 23, 42, 0.1);
    }

    .chat-message-menu {
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 20;
    }

    .chat-message-menu .dot-menu-button {
      pointer-events: auto;
      background: rgba(255, 255, 255, 0.72);
    }

    .chat-compose {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 10px;
      border-top: 1px solid var(--soft-border);
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(17, 24, 39, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 250000;
    }

    .modal-backdrop.active {
      display: flex;
    }

    .success-check-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      pointer-events: none;
      background: rgba(15, 23, 42, 0.08);
      backdrop-filter: blur(1px);
    }

    .success-check-overlay.active {
      display: flex;
      animation: successOverlayFade 1.35s ease both;
    }

    .success-check-card {
      min-width: 156px;
      max-width: min(320px, 82vw);
      padding: 24px 26px 22px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
      border: 1px solid rgba(34, 197, 94, 0.22);
      display: grid;
      justify-items: center;
      gap: 12px;
      transform: scale(0.9);
      animation: successCardPop 1.25s cubic-bezier(.2, .9, .2, 1) both;
    }

    .success-check-mark {
      width: 86px;
      height: 86px;
      border-radius: 28px;
      background: linear-gradient(135deg, #22c55e, #15803d);
      color: #ffffff;
      display: grid;
      place-items: center;
      box-shadow: 0 14px 30px rgba(21, 128, 61, 0.32);
    }

    .success-check-mark svg {
      width: 58px;
      height: 58px;
      overflow: visible;
    }

    .success-check-path {
      fill: none;
      stroke: currentColor;
      stroke-width: 8;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 70;
      stroke-dashoffset: 70;
      animation: successCheckDraw 0.46s ease 0.2s forwards;
    }

    .success-check-text {
      color: #14532d;
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      line-height: 1.2;
    }

    .top-info-notice {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 14px);
      left: 50%;
      z-index: 260000;
      width: min(560px, calc(100vw - 28px));
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(34, 197, 94, 0.22);
      box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
      color: var(--ink);
      display: grid;
      gap: 4px;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -14px);
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .top-info-notice.active {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .top-info-notice strong {
      font-size: 14px;
      line-height: 1.2;
    }

    .top-info-notice span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .server-save-status {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 259000;
      display: flex;
      align-items: center;
      gap: 9px;
      max-width: min(420px, calc(100vw - 32px));
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid #bbf7d0;
      border-radius: 999px;
      background: rgba(240, 253, 244, 0.97);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
      color: #166534;
      font-size: 13px;
      font-weight: 900;
    }

    .server-save-status.hidden {
      display: none;
    }

    .server-save-status.saving {
      border-color: #bfdbfe;
      background: rgba(239, 246, 255, 0.97);
      color: #1d4ed8;
    }

    .server-save-status.error,
    .server-save-status.conflict {
      border-color: #fecaca;
      background: rgba(254, 242, 242, 0.98);
      color: #b91c1c;
      border-radius: 16px;
    }

    .server-save-status-dot {
      width: 10px;
      height: 10px;
      flex: 0 0 10px;
      border-radius: 999px;
      background: currentColor;
    }

    .server-save-status.saving .server-save-status-dot {
      animation: serverSavePulse 0.9s ease-in-out infinite alternate;
    }

    .server-save-status button {
      min-width: 0 !important;
      min-height: 34px !important;
      padding: 6px 10px !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
    }

    @keyframes serverSavePulse {
      from { opacity: 0.35; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1.15); }
    }

    @media (max-width: 760px) {
      .server-save-status {
        display: none !important;
      }
    }

    body.real-mobile-app .server-save-status,
    body.force-mobile-preview .server-save-status {
      display: none !important;
    }

    @keyframes successCheckDraw {
      to { stroke-dashoffset: 0; }
    }

    @keyframes successCardPop {
      0% { opacity: 0; transform: scale(0.88) translateY(12px); }
      18% { opacity: 1; transform: scale(1.04) translateY(0); }
      32% { transform: scale(1); }
      78% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.96) translateY(-8px); }
    }

    @keyframes successOverlayFade {
      0% { opacity: 0; }
      12% { opacity: 1; }
      78% { opacity: 1; }
      100% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .success-check-overlay.active,
      .success-check-card,
      .success-check-path,
      .top-info-notice {
        animation-duration: 0.25s;
        transition-duration: 0.01ms;
      }
    }

    .edit-modal {
      width: min(720px, 100%);
      background: white;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 18px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
    }

    .edit-modal h2 {
      margin: 0 0 14px;
      font-size: 20px;
    }

    .modal-message {
      margin-bottom: 14px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.45;
      white-space: pre-line;
    }

    .edit-modal .grid {
      grid-template-columns: repeat(2, minmax(180px, 1fr));
    }


    /* Dialoge bleiben immer im sichtbaren Bildschirm: Inhalt scrollt, Buttons bleiben erreichbar. */
    .modal-backdrop {
      overflow: hidden;
    }

    .edit-modal {
      max-height: calc(100dvh - 36px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .edit-modal h2 {
      flex: 0 0 auto;
    }

    .edit-modal .modal-message,
    .edit-modal .grid {
      min-height: 0;
      overflow: auto;
    }

    .edit-modal .modal-message {
      max-height: min(58dvh, 620px);
    }

    .edit-modal .form-actions {
      flex: 0 0 auto;
      position: sticky;
      bottom: 0;
      z-index: 3;
      background: white;
      margin: 10px -18px -18px;
      padding: 12px 18px 18px;
      border-top: 1px solid var(--soft-border);
    }

    @media (max-width: 760px) {
      .modal-backdrop.active {
        z-index: 250000 !important;
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      }

      .modal-backdrop.active:not(.camera-fullscreen):not(.mobile-pdf-fullscreen) .edit-modal {
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
      }

      .modal-backdrop.active:not(.camera-fullscreen):not(.mobile-pdf-fullscreen) #editModalActions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: 10px -18px -18px;
        padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--soft-border);
        background: #ffffff;
      }

      .modal-backdrop.active:not(.camera-fullscreen):not(.mobile-pdf-fullscreen) #editModalActions:empty {
        display: none;
      }
    }

    .modal-backdrop.file-modal .edit-modal {
      max-height: calc(100dvh - 24px);
      height: calc(100dvh - 24px);
    }

    /* Lieferscheinprüfung: Vorschau und Felder bleiben innerhalb des Dialogs. */
    .edit-modal.delivery-edit-modal #editModalFields {
      flex: 1 1 auto;
      min-height: 0;
      overflow: visible;
      display: block;
      gap: 10px;
      align-content: start;
    }

    .edit-modal.delivery-edit-modal #editModalFields > div {
      width: 100%;
      margin-bottom: 10px;
    }

    .delivery-edit-preview {
      min-height: 150px;
      max-height: min(30dvh, 280px);
      padding: 8px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #f8fafc;
      display: grid;
      place-items: center;
      overflow: hidden;
      margin-bottom: 10px;
    }

    .delivery-edit-preview img {
      cursor: zoom-in;
    }

    .delivery-edit-preview img,
    .delivery-edit-preview iframe {
      display: block;
      width: 100%;
      max-height: min(28dvh, 260px);
      height: min(28dvh, 260px);
      object-fit: contain;
      border: 0;
      border-radius: 4px;
      background: #ffffff;
    }

    .delivery-image-zoom-layer {
      position: fixed;
      inset: 0;
      z-index: 10010;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 14px;
      background: rgba(15, 23, 42, 0.94);
      backdrop-filter: blur(3px);
    }

    .delivery-image-zoom-layer.active {
      display: flex;
    }

    .delivery-image-zoom-layer img {
      max-width: min(100dvw - 24px, 1300px);
      max-height: min(100dvh - 24px, 980px);
      object-fit: contain;
      border-radius: 8px;
      border: 1px solid var(--soft-border);
      background: #fff;
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
    }

    .delivery-image-zoom-close {
      position: fixed;
      top: max(10px, env(safe-area-inset-top));
      right: max(10px, env(safe-area-inset-right));
      z-index: 10011;
      width: 38px;
      height: 38px;
      min-width: 38px;
      border-radius: 999px;
      border: 0;
      background: rgba(17, 24, 39, 0.9);
      color: #fff;
      font-size: 24px;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .delivery-image-zoom-close:hover {
      filter: brightness(1.1);
    }

    .modal-backdrop.mobile-image-fullscreen {
      z-index: 260000 !important;
      padding: 0 !important;
      background: #000;
    }

    .modal-backdrop.mobile-image-fullscreen .edit-modal {
      width: 100dvw !important;
      height: 100dvh !important;
      max-width: 100dvw !important;
      max-height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: #000 !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

    .modal-backdrop.mobile-image-fullscreen #editModalTitle,
    .modal-backdrop.mobile-image-fullscreen #editModalFields,
    .modal-backdrop.mobile-image-fullscreen #editModalActions {
      display: none !important;
    }

    .modal-backdrop.mobile-image-fullscreen #editModalMessage {
      max-height: none !important;
      height: 100dvh !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #000;
    }

    .mobile-image-fullscreen-stage {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      min-width: 100dvw;
      min-height: 100dvh;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #000 !important;
      touch-action: none;
      user-select: none;
    }

    .mobile-image-fullscreen-stage .bbs-image-load-frame--viewer {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      min-height: 0;
      display: grid;
      place-items: center;
      border-radius: 0;
      background: #000 !important;
    }

    .mobile-image-fullscreen-stage .bbs-image-load-frame--viewer img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      margin: 0;
      border-radius: 0;
      object-fit: contain !important;
      object-position: center center;
      background: #000;
      transform-origin: center center;
      will-change: transform;
      touch-action: none;
    }

    .mobile-image-fullscreen-stage .bbs-image-load-status {
      color: #ffffff;
      background: #000;
      animation: none;
    }

    .mobile-image-fullscreen-stage .bbs-image-load-spinner {
      border-color: rgba(255, 255, 255, 0.28);
      border-top-color: #ffffff;
    }

    .mobile-image-admin-overlay {
      position: absolute;
      z-index: 8;
      right: max(12px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
      left: max(12px, env(safe-area-inset-left));
      display: grid;
      gap: 8px;
      max-width: 520px;
      margin: 0 auto;
      pointer-events: auto;
    }

    .mobile-image-admin-overlay .doc-image-security-panel {
      margin: 0;
      background: rgba(240, 253, 244, 0.94);
      backdrop-filter: blur(8px);
    }

    .mobile-image-fullscreen-close,
    .mobile-image-fullscreen-delete,
    .mobile-image-fullscreen-nav {
      position: absolute;
      z-index: 2;
      border: 0 !important;
      color: #fff !important;
      background: rgba(15, 23, 42, 0.72) !important;
      backdrop-filter: blur(8px);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      box-shadow: none !important;
    }

    .mobile-image-fullscreen-close {
      top: calc(12px + env(safe-area-inset-top, 0px));
      right: calc(12px + env(safe-area-inset-right, 0px));
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      border-radius: 50% !important;
      font-size: 25px;
      line-height: 1;
    }

    .mobile-image-fullscreen-delete {
      top: calc(12px + env(safe-area-inset-top, 0px));
      left: calc(12px + env(safe-area-inset-left, 0px));
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      border-radius: 50% !important;
      color: #fff !important;
    }

    .mobile-image-fullscreen-delete svg {
      width: 20px;
      height: 20px;
    }

    .mobile-image-fullscreen-nav {
      top: 50%;
      width: 42px !important;
      min-width: 42px !important;
      max-width: 42px !important;
      height: 58px !important;
      min-height: 58px !important;
      transform: translateY(-50%);
      border-radius: 999px !important;
      font-size: 34px;
    }

    .mobile-image-fullscreen-nav.prev {
      left: calc(8px + env(safe-area-inset-left, 0px));
    }

    .mobile-image-fullscreen-nav.next {
      right: calc(8px + env(safe-area-inset-right, 0px));
    }

    .mobile-image-fullscreen-counter {
      position: absolute;
      left: 50%;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      z-index: 2;
      color: #fff;
      background: rgba(15, 23, 42, 0.58);
      border-radius: 999px;
      padding: 6px 11px;
      font-size: 13px;
      font-weight: 800;
    }

    .edit-modal.delivery-edit-modal #editModalActions {
      flex: 0 0 auto;
      position: static;
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .edit-modal.delivery-edit-modal {
      width: min(560px, 100%);
    }

    #editModal.delivery-edit-modal .edit-modal {
      width: min(560px, 100%);
    }

    #editModal.delivery-edit-modal #editModalFields {
      flex: 1 1 auto;
      min-height: 0;
      overflow: visible;
      display: block;
      gap: 10px;
      align-content: start;
    }

    #editModal.delivery-edit-modal #editModalActions {
      flex: 0 0 auto;
      position: static;
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .edit-modal.delivery-edit-modal.delivery-scan-mode #editModalMessage,
    .edit-modal.delivery-edit-modal.delivery-scan-mode #editModalFields {
      pointer-events: none;
      filter: grayscale(0.18);
      opacity: 0.82;
    }

    #editModal.delivery-edit-modal.delivery-scan-mode #editModalMessage,
    #editModal.delivery-edit-modal.delivery-scan-mode #editModalFields {
      pointer-events: none;
      filter: grayscale(0.18);
      opacity: 0.82;
    }

    .edit-modal.delivery-edit-modal.delivery-scan-mode #editModalActions .delivery-scan-close {
      pointer-events: auto;
      opacity: 1;
    }

    #editModal.delivery-edit-modal.delivery-scan-mode #editModalActions .delivery-scan-close {
      pointer-events: auto;
      opacity: 1;
    }

    .edit-modal.delivery-edit-modal.delivery-scan-mode #editModalActions button:not(.delivery-scan-close) {
      pointer-events: none;
      opacity: 0.45;
      filter: grayscale(0.3);
      cursor: not-allowed;
    }

    #editModal.delivery-edit-modal.delivery-scan-mode #editModalActions button:not(.delivery-scan-close) {
      pointer-events: none;
      opacity: 0.45;
      filter: grayscale(0.3);
      cursor: not-allowed;
    }

    .delivery-scan-overlay {
      margin-top: 6px;
      margin-bottom: 6px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(8, 145, 178, 0.25);
      background: rgba(8, 145, 178, 0.08);
      border-radius: 999px;
      padding: 6px 10px;
      color: #0f766e;
      font-size: 13px;
      line-height: 1.2;
      width: min(100%, 420px);
      min-height: 32px;
    }

    .delivery-scan-overlay-icon,
    .delivery-scan-overlay::before {
      content: "";
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #0f766e;
      border-right-color: transparent;
      animation: deliveryScanSpin 0.8s linear infinite;
      box-sizing: border-box;
    }

    .delivery-scan-overlay-icon {
      display: inline-block;
      margin-right: 2px;
      flex-shrink: 0;
    }

    .delivery-global-scan {
      position: fixed;
      inset: 0;
      z-index: 11800;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: grayscale(0.2) blur(4px);
      -webkit-backdrop-filter: grayscale(0.2) blur(4px);
      pointer-events: all;
    }

    .delivery-global-scan.active {
      display: flex;
    }

    .delivery-global-scan-card {
      width: min(330px, 100%);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
      padding: 26px 24px 24px;
      display: grid;
      place-items: center;
      gap: 18px;
      color: #0f172a;
      text-align: center;
    }

    .delivery-scan-animation {
      position: relative;
      width: 154px;
      height: 142px;
      overflow: hidden;
    }

    .delivery-scan-document {
      position: absolute;
      left: 41px;
      top: 16px;
      width: 74px;
      height: 106px;
      border-radius: 7px;
      background: linear-gradient(145deg, #ffffff 0%, #e2e8f0 100%);
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
      overflow: hidden;
    }

    .delivery-scan-document::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0 38%, rgba(59, 130, 246, 0.16) 50%, transparent 62%);
      background-size: 100% 210%;
      animation: deliveryDocumentGlow 1.65s ease-in-out infinite;
    }

    .delivery-scan-fold {
      position: absolute;
      right: 0;
      top: 0;
      width: 22px;
      height: 22px;
      background: #cbd5e1;
      clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    .delivery-scan-line {
      position: absolute;
      left: 14px;
      right: 14px;
      height: 4px;
      border-radius: 999px;
      background: #94a3b8;
    }

    .delivery-scan-line.line-one { top: 40px; right: 25px; }
    .delivery-scan-line.line-two { top: 54px; }
    .delivery-scan-line.line-three { top: 68px; right: 24px; }
    .delivery-scan-line.line-four { top: 82px; }

    .delivery-scan-corner {
      position: absolute;
      width: 32px;
      height: 32px;
      border-color: #3b82f6;
      border-style: solid;
      animation: deliveryCornerPulse 1.65s ease-in-out infinite;
    }

    .delivery-scan-corner.top-left {
      left: 18px;
      top: 3px;
      border-width: 5px 0 0 5px;
      border-radius: 9px 0 0;
    }

    .delivery-scan-corner.top-right {
      right: 18px;
      top: 3px;
      border-width: 5px 5px 0 0;
      border-radius: 0 9px 0 0;
    }

    .delivery-scan-corner.bottom-left {
      left: 18px;
      bottom: 3px;
      border-width: 0 0 5px 5px;
      border-radius: 0 0 0 9px;
    }

    .delivery-scan-corner.bottom-right {
      right: 18px;
      bottom: 3px;
      border-width: 0 5px 5px 0;
      border-radius: 0 0 9px;
    }

    .delivery-scan-beam {
      position: absolute;
      z-index: 3;
      left: 26px;
      right: 26px;
      top: 25px;
      height: 4px;
      border-radius: 999px;
      background: #2563eb;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75), 0 0 14px rgba(37, 99, 235, 0.75);
      animation: deliveryScanBeam 1.65s ease-in-out infinite;
    }

    .delivery-global-scan-copy {
      display: grid;
      gap: 7px;
      max-width: 270px;
    }

    .delivery-global-scan-title {
      font-size: 18px;
      line-height: 1.25;
      font-weight: 900;
    }

    .delivery-global-scan-detail {
      color: #64748b;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 700;
    }

    .delivery-global-scan-dots::after {
      content: "";
      display: inline-block;
      width: 1.4em;
      text-align: left;
      animation: deliveryScanDots 1.4s steps(4, end) infinite;
    }

    @keyframes deliveryScanBeam {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(88px); }
    }

    @keyframes deliveryDocumentGlow {
      0%, 100% { background-position: 0 -50%; }
      50% { background-position: 0 115%; }
    }

    @keyframes deliveryCornerPulse {
      0%, 100% { opacity: 0.62; }
      50% { opacity: 1; }
    }

    @keyframes deliveryScanDots {
      0% { content: ""; }
      25% { content: "."; }
      50% { content: ".."; }
      75%, 100% { content: "..."; }
    }

    @media (prefers-reduced-motion: reduce) {
      .delivery-scan-beam,
      .delivery-scan-document::after,
      .delivery-scan-corner,
      .delivery-global-scan-dots::after {
        animation: none;
      }

      .delivery-scan-beam { transform: translateY(44px); }
      .delivery-global-scan-dots::after { content: "..."; }
    }

    .delivery-preview-open {
      width: 100%;
      min-height: 90px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      color: var(--text);
      display: grid;
      place-items: center;
      gap: 6px;
      padding: 10px;
      font-weight: 900;
      cursor: pointer;
    }

    .delivery-preview-open small {
      color: #64748b;
      font-weight: 800;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
      width: 100%;
      padding: 2px 1px 0;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid > div {
      margin: 0;
      width: 100%;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid label {
      display: inline-block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.2;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid input,
    .edit-modal.delivery-edit-modal .delivery-edit-grid textarea,
    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid input,
    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid textarea {
      box-sizing: border-box;
      width: 100%;
      min-height: 40px;
      margin: 0;
      border: 1px solid var(--soft-border);
      padding: 9px 10px;
      font-size: 14px;
      line-height: 1.25;
      border-radius: 8px;
      background: #fff;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid input:focus,
    .edit-modal.delivery-edit-modal .delivery-edit-grid textarea:focus,
    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid input:focus,
    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid textarea:focus {
      outline: none;
      border-color: rgba(16, 185, 129, 0.65);
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.16);
    }

    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid label {
      display: inline-block;
      margin-bottom: 6px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.2;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-grid input[type="date"] {
      width: 100%;
      inline-size: 100%;
      min-width: 0;
      text-align: left;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      margin-top: 2px;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid > div {
      margin: 0;
      width: 100%;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.35;
    }

    .edit-modal.delivery-edit-modal .delivery-edit-claim-grid .delivery-claim-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    @media (max-width: 960px) {
      .edit-modal.delivery-edit-modal .delivery-edit-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      .modal-backdrop {
        padding: 10px;
      }

      .edit-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
      }

      .edit-modal .grid {
        grid-template-columns: 1fr;
      }

      .edit-modal .form-actions {
        margin-left: 0;
        margin-right: 0;
      }

      #editModal.delivery-edit-modal {
        align-items: stretch;
        justify-content: flex-start;
        padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(92px + env(safe-area-inset-bottom, 0px));
      }

      #editModal.delivery-edit-modal .edit-modal {
        width: 100%;
        max-height: calc(100dvh - 112px - env(safe-area-inset-bottom, 0px));
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 14px;
        border-radius: 16px;
      }

      #editModal.delivery-edit-modal #editModalTitle {
        flex: 0 0 auto;
        margin-bottom: 8px;
        font-size: 19px;
        line-height: 1.15;
      }

      #editModal.delivery-edit-modal #editModalMessage,
      #editModal.delivery-edit-modal #editModalFields {
        flex: 0 1 auto;
        overflow: auto;
        min-height: 0;
      }

      #editModal.delivery-edit-modal #editModalMessage {
        max-height: 38dvh;
        margin-bottom: 8px;
      }

      #editModal.delivery-edit-modal .delivery-edit-preview {
        min-height: 96px;
        max-height: 24dvh;
        padding: 6px;
      }

      #editModal.delivery-edit-modal .delivery-edit-preview img,
      #editModal.delivery-edit-modal .delivery-edit-preview iframe {
        height: 22dvh;
        max-height: 22dvh;
      }

      #editModal.delivery-edit-modal .delivery-edit-grid {
        gap: 8px;
      }

      #editModal.delivery-edit-modal .delivery-edit-grid input {
        min-height: 38px;
        padding: 8px 10px;
      }

      #editModal.delivery-edit-modal #editModalActions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 10px -14px -14px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        background: #ffffff;
        border-top: 1px solid var(--soft-border);
      }

      #editModal.delivery-edit-modal #editModalActions button {
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
      }
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 12px;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 5px;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 10px;
      background: white;
    }

    .unit-input {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      background: #ffffff;
      padding: 0 10px 0 0;
      min-height: 42px;
    }

    .unit-input input {
      border: 0;
      border-radius: 8px;
      background: transparent;
      min-height: 40px;
      padding: 10px;
    }

    .unit-input input:focus {
      outline: 2px solid rgba(37, 99, 235, 0.22);
      outline-offset: -2px;
    }

    .unit-input span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    textarea {
      min-height: 42px;
      resize: vertical;
    }

    .check-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      padding: 8px;
      min-height: 42px;
    }

    .check-pill {
      display: flex;
      gap: 5px;
      align-items: center;
      background: #f3f4f6;
      padding: 6px 8px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
    }

    .check-pill.busy {
      background: #d1d5db;
      color: #4b5563;
    }

    .check-pill.busy input {
      accent-color: #6b7280;
    }

    .check-pill.unassigned {
      background: #fff1f2;
      color: #b91c1c;
      box-shadow: inset 0 0 0 1px #fecaca;
    }

    .check-pill.unassigned input {
      accent-color: #dc2626;
    }

    .check-pill input {
      width: auto;
    }

    .settings-content .grid > .check-pill {
      align-self: end;
      margin: 0;
      min-height: 42px;
      padding: 10px 12px;
      border-radius: 8px;
      line-height: 1.35;
    }

    .check-pill.ceiling-check {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      justify-content: flex-start;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 4px 0;
      box-shadow: none;
      color: var(--text);
      font-weight: 700;
      gap: 8px;
      white-space: nowrap;
    }

    .check-pill.ceiling-check.busy {
      background: transparent;
      color: var(--muted);
      opacity: 0.55;
    }

    .check-pill.ceiling-check input {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      min-width: 22px;
      margin: 0;
    }

    .employee-small-name {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      max-width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .form-actions {
      margin-top: 12px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mobile-view {
      display: none;
    }

    .month-view {
      display: none;
      background: white;
      border: 1px solid var(--soft-border);
      border-radius: 8px;
      overflow: hidden;
    }

    .month-view.active {
      display: block;
    }

    .month-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(130px, 1fr));
      border-top: 1px solid #333;
      border-left: 1px solid #333;
    }

    .month-week {
      position: relative;
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(7, minmax(130px, 1fr));
    }

    .month-head,
    .month-day {
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
      padding: 8px;
    }

    .month-head {
      background: #f3f4f6;
      font-weight: 900;
      text-align: center;
    }

    .month-day {
      position: relative;
      min-height: 120px;
      background: white;
    }

    .month-project-track-space {
      height: calc(var(--project-track-count, 0) * 14px);
      pointer-events: none;
    }

    .month-project-timeline {
      position: absolute;
      z-index: 2;
      top: 32px;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(7, minmax(130px, 1fr));
      grid-auto-rows: 12px;
      row-gap: 2px;
      pointer-events: none;
    }

    .month-project-range {
      appearance: none;
      align-self: center;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 0;
      height: 12px !important;
      min-height: 12px !important;
      margin: 0 2px;
      padding: 0 4px !important;
      overflow: hidden;
      border: 0 !important;
      border-radius: 999px !important;
      background-color: var(--project-range-color, #16a34a) !important;
      background-image: none !important;
      box-shadow: none !important;
      color: #fff !important;
      cursor: pointer;
      font-size: 7px;
      font-weight: 950;
      line-height: 1;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .month-project-range.light-text {
      color: #172033 !important;
    }

    .project-duration-info {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }

    .project-color-dot {
      width: 10px;
      height: 10px;
      flex: 0 0 10px;
      border: 1px solid rgba(15, 23, 42, 0.18);
      border-radius: 50%;
      background: var(--project-dot-color, #16a34a);
    }

    #adminDesktopViewToggle,
    .admin-desktop-planning-only {
      display: none;
    }

    #editModal.quick-project-modal .edit-modal {
      width: min(860px, 100%);
    }

    #editModal.quick-project-modal .quick-project-color-field {
      align-content: start;
    }

    #editModal.quick-project-modal .quick-project-color-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    #editModal.quick-project-modal input[type="color"] {
      width: 84px !important;
      min-width: 84px;
      height: 46px;
      padding: 3px !important;
      border: 2px solid #94a3b8;
      border-radius: 8px;
      cursor: pointer;
    }

    #newProjectColor {
      width: 84px !important;
      min-width: 84px;
      height: 46px;
      padding: 3px !important;
      border: 2px solid #94a3b8;
      border-radius: 8px;
      cursor: pointer;
    }

    @media (min-width: 761px) {
      body.admin-view:not(.force-mobile-preview) #viewMode {
        display: none !important;
      }

      body.admin-view:not(.force-mobile-preview) #adminDesktopViewToggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      body.admin-view:not(.force-mobile-preview) .admin-desktop-planning-only.visible {
        display: inline-flex;
      }
    }

    .month-day.outside {
      background: #f9fafb;
      color: var(--muted);
    }

    .month-day.today {
      box-shadow: inset 0 0 0 3px #2563eb;
    }

    .leave-check-panel {
      border: 1px solid #f59e0b;
      border-left: 5px solid #f59e0b;
      border-radius: 10px;
      background: #fffbeb;
      color: #78350f;
      padding: 12px;
      margin: 0 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .leave-check-panel strong {
      color: #78350f;
    }
    .month-day.leave-check-day {
      background: #fff7ed;
      box-shadow: inset 0 0 0 3px #f59e0b;
    }

    .month-date {
      font-weight: 900;
      margin-bottom: 6px;
    }

    .month-item {
      border: 1px solid var(--soft-border);
      border-radius: 6px;
      padding: 5px;
      margin-top: 5px;
      font-size: 12px;
      line-height: 1.25;
      background: #f8fafc;
    }

    .month-item.leave-check-item,
    .provisional-leave {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #92400e;
      font-weight: 900;
    }

    .day-cell.leave-check-day {
      background: #fff7ed;
      box-shadow: inset 0 0 0 2px #f59e0b;
    }

    .provisional-leave {
      border: 1px dashed #f59e0b;
      border-radius: 6px;
      padding: 5px;
      margin-top: 5px;
      font-size: 12px;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .day-card {
      background: white;
      border: 1px solid var(--soft-border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .day-card h3 {
      margin: 0;
      padding: 12px;
      background: #111827;
      color: white;
      font-size: 18px;
    }

    .assignment-card {
      padding: 12px;
      border-bottom: 1px solid var(--soft-border);
    }

    .assignment-card:last-child {
      border-bottom: 0;
    }

    .assignment-title {
      font-weight: 900;
      font-size: 16px;
      margin-bottom: 4px;
    }

    .assignment-sub {
      color: var(--muted);
      margin-bottom: 8px;
    }

    .chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .chip {
      background: #e5e7eb;
      padding: 5px 8px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
    }

    .small-info {
      font-size: 13px;
      color: var(--muted);
      margin-top: 6px;
    }

    .legend {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
    }

    .hidden {
      display: none !important;
    }

    @media print {
      header, .toolbar, .form-panel, .legend {
        display: none !important;
      }

      body {
        background: white;
      }

      main {
        padding: 0;
        max-width: none;
      }

      .planner-wrap {
        border: 0;
        border-radius: 0;
        overflow: visible;
      }

      table.planner {
        min-width: 0;
        font-size: 11px;
      }

      .planner th,
      .planner td {
        padding: 4px;
      }
    }

    @media (max-width: 850px) {
      main {
        padding: 12px;
      }



    .grid {
        grid-template-columns: 1fr;
      }

      .planner-wrap {
        display: none;
      }

      .mobile-view.active {
        display: block;
      }

      .mobile-view {
        display: block;
      }

      .desktop-only {
        display: none;
      }

      header h1 {
        font-size: 20px;
      }

      .toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .toolbar-left, .toolbar-right {
        width: 100%;
      }

      .toolbar-right {
        justify-content: stretch;
      }

      .toolbar button, .toolbar select, .toolbar input {
        flex: 1;
        max-width: none;
      }

      .account-layout {
        grid-template-columns: 1fr;
      }

      .account-profile-head {
        align-items: flex-start;
      }

      .account-avatar {
        width: 88px;
        height: 88px;
      }

      .settings-layout {
        grid-template-columns: 1fr;
      }

      .admin-task-layout {
        grid-template-columns: 1fr;
      }

      .admin-task-menu {
        position: static;
      }

    .time-layout {
      grid-template-columns: 1fr;
    }

      .main-home-panel {
        grid-template-columns: 1fr;
      }

      .time-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }
    }
    .chat-person.active {
      background: var(--bbs-orange);
      color: #17120d;
    }

    body.admin-view .chat-person.active {
      background: var(--bbs-admin);
      color: #ffffff;
    }

    .chat-window {
      border-color: var(--bbs-line);
      border-radius: 8px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    }

    .chat-title {
      background: #fbfaf7;
      color: #17120d;
    }

    body.admin-view .chat-title {
      background: #edf1f5;
      color: var(--bbs-admin);
    }

    .chat-messages {
      background:
        linear-gradient(135deg, rgba(255,244,227,0.86), rgba(255,255,255,0.9)),
        repeating-linear-gradient(45deg, rgba(244,154,34,0.06) 0 1px, transparent 1px 16px);
    }

    body.admin-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(237,241,245,0.94), rgba(255,255,255,0.9)),
        repeating-linear-gradient(45deg, rgba(40,49,61,0.05) 0 1px, transparent 1px 16px);
    }

    .chat-bubble.mine {
      background: #fff1d9;
      border-color: #f7c47e;
    }

    body.admin-view .chat-bubble.mine {
      background: #e9eef4;
      border-color: #bdc9d6;
    }

    .chat-avatar {
      background: #fff1d9;
      color: #8a4b08;
      border-color: #f7c47e;
    }

    body.admin-view .chat-avatar {
      background: #e9eef4;
      color: var(--bbs-admin);
      border-color: #bdc9d6;
    }

    .planner-wrap,
    .project-platform,
    .form-panel,
    .time-card,
    .home-card,
    .account-box,
    .settings-menu,
    .data-row,
    .file-card {
      border-radius: 8px;
    }

    .planner th {
      background: #f7f3ec;
      color: #17120d;
    }

    body.admin-view .planner th {
      background: #edf1f5;
      color: var(--bbs-admin);
    }

    .toolbar,
    .form-panel,
    .time-card,
    .home-card {
      border-left: 5px solid var(--bbs-orange);
    }

    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .time-card,
    body.admin-view .home-card {
      border-left-color: var(--bbs-admin);
    }

    #timeCheckCard {
      border-left-color: var(--bbs-orange);
    }

    .summary-tile {
      background: #fbfaf7;
    }

    body.admin-view .summary-tile {
      background: #f7f9fb;
    }

    /* BBS Gruen-Feinschliff: viel Weiss, milde Akzente, kleinere Buttons */
    :root {
      --bbs-green: #7b9b5d;
      --bbs-green-dark: #5f7f45;
      --bbs-green-soft: #eef5e8;
      --bbs-admin: #3f5567;
      --bbs-admin-soft: #eef3f6;
      --bbs-worker: var(--bbs-green);
      --bbs-worker-soft: var(--bbs-green-soft);
      --bbs-line: #e2e7dd;
      --bbs-stone: #f7f8f5;
      --accent: var(--bbs-green);
      --bg: var(--bbs-stone);
      --soft-border: var(--bbs-line);
    }

    body,
    body.employee-view,
    body.admin-view {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,248,245,0.98)),
        repeating-linear-gradient(45deg, rgba(123,155,93,0.025) 0 1px, transparent 1px 22px);
    }

    header,
    body.employee-view header {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.74)),
        linear-gradient(90deg, rgba(123,155,93,0.92), rgba(123,155,93,0.62));
      color: #1f2a18;
      border-bottom: 1px solid rgba(123,155,93,0.35);
      box-shadow: 0 8px 24px rgba(31,42,24,0.08);
    }

    body.admin-view header {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78)),
        linear-gradient(90deg, rgba(63,85,103,0.88), rgba(123,155,93,0.44));
      color: #1e2a32;
      border-bottom-color: rgba(63,85,103,0.28);
    }

    header h1 {
      font-size: 23px;
      color: inherit;
      text-transform: none;
    }

    header .sub,
    body.admin-view header .sub {
      color: rgba(31,42,24,0.76);
      font-weight: 750;
    }

    button,
    body.employee-view button,
    .home-punch-button,
    .home-punch-button.secondary {
      background: #edf4e8;
      color: #324a24;
      border: 1px solid #cbdcbe;
      padding: 8px 11px;
      min-height: 34px;
      border-radius: 6px;
      font-size: 14px;
      box-shadow: none;
    }

    body.admin-view button {
      background: #eef3f6;
      color: #2e4353;
      border: 1px solid #cbd8df;
      box-shadow: none;
    }

    button:hover,
    .home-punch-button:hover,
    .home-punch-button.secondary:hover {
      background: #e3eedb;
      border-color: #b9d1a9;
      filter: none;
    }

    body.admin-view button:hover {
      background: #e2ebf0;
      border-color: #b8c8d2;
    }

    button.secondary,
    body.admin-view button.secondary {
      background: #f4f6f2;
      color: #3c4637;
      border-color: #d9dfd3;
    }

    button.light,
    body.admin-view button.light {
      background: #ffffff;
      color: #2f3a2a;
      border: 1px solid #dde5d7;
    }

    button.danger {
      background: #f8e8e6;
      color: #9b2f28;
      border-color: #e8c2bd;
    }

    .toolbar button,
    .toolbar select,
    .toolbar input,
    .data-row button,
    .time-mini-actions button {
      min-height: 30px;
      padding: 5px 8px;
      font-size: 12px;
      border-radius: 5px;
    }

    .toolbar,
    .form-panel,
    .time-card,
    .home-card {
      border-left: 3px solid var(--bbs-green);
    }

    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .time-card,
    body.admin-view .home-card {
      border-left-color: #8fa2ae;
    }

    .project-section-switch {
      border-left: 3px solid var(--bbs-green);
    }

    body.admin-view .project-section-switch {
      border-left-color: #8fa2ae;
    }

    .project-section-switch button.active,
    .settings-menu button.active,
    .chat-person.active {
      background: #dfead6;
      color: #2f4722;
      border-color: #c5d8b5;
    }

    body.admin-view .project-section-switch button.active,
    body.admin-view .settings-menu button.active,
    body.admin-view .chat-person.active {
      background: #dfe8ed;
      color: #2e4353;
      border-color: #c7d5dd;
    }

    .home-time-clock,
    .home-time-category,
    .home-pause-panel,
    .home-pause-clock {
      color: var(--bbs-green-dark);
    }

    .home-project-button {
      background: #f3f8ef;
      color: #476936;
      border-color: #d8e7ce;
    }

    .time-clock-card {
      border-top: 3px solid var(--bbs-green);
      background: #ffffff;
    }

    .planner th,
    .time-month-table th,
    .chat-title {
      background: #f6f8f3;
      color: #2d3c25;
    }

    body.admin-view .planner th,
    body.admin-view .time-month-table th,
    body.admin-view .chat-title {
      background: #f3f6f8;
      color: #2e4353;
    }

    .project-floor,
    .platform-pill,
    .status-pill {
      background: #eef5e8;
      color: #476936;
    }

    body.admin-view .project-floor,
    body.admin-view .platform-pill,
    body.admin-view .status-pill {
      background: #edf3f6;
      color: #2e4353;
    }

    .chat-messages,
    body.admin-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,243,0.92)),
        repeating-linear-gradient(45deg, rgba(123,155,93,0.035) 0 1px, transparent 1px 18px);
    }

    .chat-bubble.mine {
      background: #eef6e9;
      border-color: #c9ddb9;
    }

    body.admin-view .chat-bubble.mine {
      background: #edf3f6;
      border-color: #c7d5dd;
    }

    .chat-avatar {
      background: #eef6e9;
      color: #476936;
      border-color: #c9ddb9;
    }

    body.admin-view .chat-avatar {
      background: #edf3f6;
      color: #2e4353;
      border-color: #c7d5dd;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid rgba(123,155,93,0.2);
      border-color: var(--bbs-green);
    }

    body.admin-view input:focus,
    body.admin-view select:focus,
    body.admin-view textarea:focus {
      outline-color: rgba(63,85,103,0.16);
      border-color: #8fa2ae;
    }

    .time-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .time-card-head h3 {
      margin: 0;
    }

    .collapse-button {
      width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
    }

    #timeCheckCard.collapsed {
      padding: 10px 12px;
    }

    #timeCheckCard.collapsed > :not(.time-card-head) {
      display: none !important;
    }

    /* Mehr Farbtiefe: Mitarbeiter farbiger, Admin dunkel schwarz-blau */
    :root {
      --worker-bg-a: #eaf3df;
      --worker-bg-b: #f7efd8;
      --worker-bg-c: #dcebcf;
      --worker-panel: #fffdf7;
      --worker-panel-2: #f1f7eb;
      --worker-green: #6f9254;
      --worker-green-strong: #52733e;
      --worker-sage: #9ab985;
      --worker-line: #c7d8b8;
      --admin-bg: #07111f;
      --admin-bg-2: #0d1c2d;
      --admin-card: #122235;
      --admin-card-2: #172b42;
      --admin-line: #31445c;
      --admin-text: #edf5ff;
      --admin-muted: #aebfd1;
      --admin-blue: #4e79a8;
      --admin-blue-soft: #203b59;
    }

    body.employee-view {
      background:
        radial-gradient(circle at 12% 4%, rgba(154,185,133,0.45), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(247,239,216,0.85), transparent 30%),
        linear-gradient(135deg, var(--worker-bg-a), #ffffff 42%, var(--worker-bg-b));
    }

    body.admin-view {
      background:
        radial-gradient(circle at 14% 4%, rgba(78,121,168,0.24), transparent 30%),
        radial-gradient(circle at 90% 6%, rgba(42,66,96,0.28), transparent 34%),
        linear-gradient(135deg, var(--admin-bg), var(--admin-bg-2));
      color: var(--admin-text);
    }

    body.employee-view header {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.58)),
        linear-gradient(90deg, #719756, #a4bd82);
      color: #203217;
      border-bottom: 4px solid #719756;
    }

    body.admin-view header {
      background: linear-gradient(100deg, #030813, #102137 58%, #183453);
      color: var(--admin-text);
      border-bottom: 4px solid var(--admin-blue);
      box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    }

    body.admin-view header .sub {
      color: var(--admin-muted);
    }

    body.employee-view .toolbar,
    body.employee-view .form-panel,
    body.employee-view .project-platform,
    body.employee-view .planner-wrap,
    body.employee-view .home-card,
    body.employee-view .time-card,
    body.employee-view .account-box,
    body.employee-view .file-card,
    body.employee-view .settings-menu,
    body.employee-view .data-row,
    body.employee-view .chat-shell {
      background: linear-gradient(180deg, rgba(255,253,247,0.96), rgba(241,247,235,0.96));
      border-color: var(--worker-line);
      box-shadow: 0 16px 34px rgba(82,115,62,0.12);
    }

    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .project-platform,
    body.admin-view .planner-wrap,
    body.admin-view .home-card,
    body.admin-view .time-card,
    body.admin-view .account-box,
    body.admin-view .file-card,
    body.admin-view .settings-menu,
    body.admin-view .data-row,
    body.admin-view .chat-shell {
      background: linear-gradient(180deg, rgba(18,34,53,0.98), rgba(13,28,45,0.98));
      border-color: var(--admin-line);
      color: var(--admin-text);
      box-shadow: 0 18px 44px rgba(0,0,0,0.28);
    }

    body.employee-view .toolbar,
    body.employee-view .form-panel,
    body.employee-view .time-card,
    body.employee-view .home-card,
    body.employee-view .project-section-switch {
      border-left-color: var(--worker-green);
    }

    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .time-card,
    body.admin-view .home-card,
    body.admin-view .project-section-switch {
      border-left-color: var(--admin-blue);
    }

    body.employee-view button {
      background: #dfebd5;
      color: #26391d;
      border-color: #b9d0a7;
    }

    body.employee-view button:hover {
      background: #d4e4c7;
      border-color: #a7c392;
    }

    body.admin-view button {
      background: #203b59;
      color: var(--admin-text);
      border-color: #3b5b7d;
    }

    body.admin-view button:hover {
      background: #28496e;
      border-color: #4e79a8;
    }

    body.admin-view button.light,
    body.admin-view button.secondary {
      background: #172b42;
      color: var(--admin-text);
      border-color: #31445c;
    }

    body.admin-view button.danger {
      background: #4a1e25;
      color: #ffe8e8;
      border-color: #7b3440;
    }

    body.admin-view input,
    body.admin-view select,
    body.admin-view textarea {
      background: #0c1929;
      border-color: #31445c;
      color: var(--admin-text);
    }

    body.admin-view input::placeholder,
    body.admin-view textarea::placeholder {
      color: #8397aa;
    }

    body.admin-view .small-info,
    body.admin-view .project-meta,
    body.admin-view .note,
    body.admin-view .legend {
      color: var(--admin-muted);
    }

    body.admin-view .form-panel h2,
    body.admin-view .settings-head h2,
    body.admin-view .home-card h2,
    body.admin-view .home-card h3,
    body.admin-view .file-card h3,
    body.admin-view .table-area-title h2,
    body.admin-view .project-no,
    body.admin-view .account-profile-name {
      color: var(--admin-text);
    }

    body.employee-view .planner th,
    body.employee-view .time-month-table th,
    body.employee-view .chat-title,
    body.employee-view .day-card h3 {
      background: #dfead6;
      color: #26391d;
    }

    body.admin-view .planner th,
    body.admin-view .time-month-table th,
    body.admin-view .chat-title,
    body.admin-view .day-card h3 {
      background: #0b1726;
      color: var(--admin-text);
      border-color: var(--admin-line);
    }

    body.admin-view .planner td,
    body.admin-view .time-month-table td {
      background: #122235;
      color: var(--admin-text);
      border-color: #2b3e54;
    }

    body.employee-view .project-cell {
      background: #fffdf7;
    }

    body.admin-view .project-cell {
      background: #122235;
    }

    body.admin-view .project-name {
      color: #dbe7f5;
    }

    body.employee-view .project-section-switch button.active,
    body.employee-view .settings-menu button.active,
    body.employee-view .chat-person.active {
      background: #bfd6ac;
      color: #1f3217;
      border-color: #9fbe89;
    }

    body.admin-view .project-section-switch button.active,
    body.admin-view .settings-menu button.active,
    body.admin-view .chat-person.active {
      background: var(--admin-blue-soft);
      color: var(--admin-text);
      border-color: var(--admin-blue);
    }

    body.employee-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(234,243,223,0.92), rgba(255,253,247,0.88)),
        repeating-linear-gradient(45deg, rgba(111,146,84,0.07) 0 1px, transparent 1px 18px);
    }

    body.admin-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(7,17,31,0.96), rgba(18,34,53,0.9)),
        repeating-linear-gradient(45deg, rgba(78,121,168,0.08) 0 1px, transparent 1px 18px);
    }

    body.admin-view .chat-bubble {
      background: #0c1929;
      border-color: #31445c;
      color: var(--admin-text);
    }

    body.admin-view .chat-bubble.mine {
      background: #203b59;
      border-color: #4e79a8;
    }

    body.admin-view .chat-author,
    body.admin-view .chat-meta {
      color: var(--admin-muted);
    }

    body.admin-view .summary-tile,
    body.admin-view .admin-block,
    body.admin-view .request-card,
    body.admin-view .month-item {
      background: #0c1929;
      border-color: #31445c;
      color: var(--admin-text);
    }

    body.employee-view .summary-tile,
    body.employee-view .admin-block,
    body.employee-view .request-card,
    body.employee-view .month-item {
      background: #f6faef;
      border-color: #d4e3c8;
    }

    /* Design-Reset auf die urspruengliche ruhige App-Optik */
    :root {
      --bg: #f3f4f6;
      --card: #ffffff;
      --border: #222;
      --soft-border: #d1d5db;
      --text: #111827;
      --muted: #6b7280;
      --green: #dff4d8;
      --blue: #e0f2fe;
      --yellow: #fef3c7;
      --danger: #ef4444;
      --accent: #111827;
    }

    body,
    body.employee-view,
    body.admin-view {
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    body.admin-view {
      background: #eef2f7;
    }

    body.employee-view {
      background: #f0fdf4;
    }

    header,
    body.admin-view header,
    body.employee-view header {
      background: var(--accent);
      color: #ffffff;
      border-bottom: 4px solid #2563eb;
      box-shadow: none;
    }

    body.employee-view header {
      background: #14532d;
      border-bottom-color: #22c55e;
    }

    header h1 {
      color: #ffffff;
      text-transform: none;
      font-size: 24px;
      font-weight: 900;
    }

    header .sub,
    body.admin-view header .sub,
    body.employee-view header .sub {
      color: rgba(255,255,255,0.85);
      font-weight: 700;
    }

    button,
    body.admin-view button,
    body.employee-view button,
    .home-punch-button,
    .home-punch-button.secondary {
      border: 0;
      border-radius: 8px;
      padding: 10px 14px;
      min-height: auto;
      cursor: pointer;
      font-weight: 700;
      background: #2563eb;
      color: white;
      box-shadow: none;
      font-size: inherit;
    }

    button.secondary,
    body.admin-view button.secondary {
      background: #374151;
      color: #ffffff;
    }

    button.light,
    body.admin-view button.light {
      background: #e5e7eb;
      color: #111827;
      border: 0;
    }

    button.danger,
    body.admin-view button.danger {
      background: #dc2626;
      color: #ffffff;
      border: 0;
    }

    .toolbar button,
    .toolbar select,
    .toolbar input {
      min-height: 36px;
      padding: 7px 10px;
      border-radius: 7px;
      font-size: 14px;
    }

    .toolbar,
    .form-panel,
    .project-platform,
    .planner-wrap,
    .home-card,
    .time-card,
    .account-box,
    .file-card,
    .settings-menu,
    .data-row,
    .chat-shell,
    body.admin-view .toolbar,
    body.admin-view .form-panel,
    body.admin-view .project-platform,
    body.admin-view .planner-wrap,
    body.admin-view .home-card,
    body.admin-view .time-card,
    body.admin-view .account-box,
    body.admin-view .file-card,
    body.admin-view .settings-menu,
    body.admin-view .data-row,
    body.admin-view .chat-shell {
      background: #ffffff;
      border-color: var(--soft-border);
      color: var(--text);
      box-shadow: none;
      border-radius: 8px;
      border-left-width: 1px;
    }

    .planner th,
    body.admin-view .planner th,
    .time-month-table th,
    body.admin-view .time-month-table th {
      background: #f8fafc;
      color: #475569;
    }

    .planner td,
    body.admin-view .planner td,
    .time-month-table td,
    body.admin-view .time-month-table td {
      background: #ffffff;
      color: var(--text);
      border-color: #e5e7eb;
    }

    .project-cell,
    body.admin-view .project-cell {
      background: #ffffff;
    }

    .project-no,
    .project-name,
    body.admin-view .project-no,
    body.admin-view .project-name,
    .form-panel h2,
    .settings-head h2,
    .home-card h2,
    .home-card h3,
    .file-card h3,
    .table-area-title h2,
    body.admin-view .form-panel h2,
    body.admin-view .settings-head h2,
    body.admin-view .home-card h2,
    body.admin-view .home-card h3,
    body.admin-view .file-card h3,
    body.admin-view .table-area-title h2 {
      color: var(--text);
    }

    .small-info,
    body.admin-view .small-info,
    .project-meta,
    body.admin-view .project-meta,
    .note,
    body.admin-view .note,
    .legend,
    body.admin-view .legend {
      color: var(--muted);
    }

    .chat-title,
    body.admin-view .chat-title {
      background: #ffffff;
      color: var(--text);
    }

    .chat-messages,
    body.admin-view .chat-messages {
      background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(236, 253, 245, 0.68)),
        #f8fafc;
    }

    .chat-bubble,
    body.admin-view .chat-bubble {
      background: #ffffff;
      border-color: var(--soft-border);
      color: var(--text);
    }

    .chat-bubble.mine,
    body.admin-view .chat-bubble.mine {
      background: #dcfce7;
      border-color: #86efac;
    }

    .summary-tile,
    body.admin-view .summary-tile,
    body.employee-view .summary-tile,
    .admin-block,
    body.admin-view .admin-block,
    body.employee-view .admin-block,
    .request-card,
    body.admin-view .request-card,
    body.employee-view .request-card,
    .month-item,
    body.admin-view .month-item,
    body.employee-view .month-item {
      border: 1px solid var(--soft-border);
      background: #f8fafc;
      color: var(--text);
      box-shadow: none;
    }

    .summary-number,
    body.admin-view .summary-number,
    body.employee-view .summary-number {
      color: #111827;
    }

    .summary-tile.sick-summary,
    body.admin-view .summary-tile.sick-summary,
    body.employee-view .summary-tile.sick-summary {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .summary-tile.sick-summary .summary-number,
    body.admin-view .summary-tile.sick-summary .summary-number,
    body.employee-view .summary-tile.sick-summary .summary-number {
      color: #dc2626;
    }

    /* Gezielt zur alten Nutzbarkeit zurueck */
    #projectList .data-row.active {
      border-color: #86efac !important;
      background: #f0fdf4 !important;
      color: #111827 !important;
    }

    #projectList .data-row.inactive {
      opacity: 0.62;
      background: #f3f4f6 !important;
      color: #4b5563 !important;
      border-color: #d1d5db !important;
    }

    .target-day-head,
    body.admin-view .target-day-head,
    body.employee-view .target-day-head {
      background: #e5e7eb !important;
      color: #111827 !important;
      border: 0 !important;
    }

    .target-day-head:hover {
      background: #dfe3e8 !important;
      filter: none !important;
    }

    input,
    select,
    textarea,
    body.admin-view input,
    body.admin-view select,
    body.admin-view textarea {
      background: #ffffff;
      color: var(--text);
      border-color: var(--soft-border);
    }

    .time-compare-cell {
      overflow: visible !important;
      z-index: 2;
    }

    .time-compare-cell:hover {
      z-index: 2000;
    }

    .time-compare-popover {
      z-index: 9999 !important;
      left: 50% !important;
      right: auto !important;
      top: auto !important;
      bottom: calc(100% + 8px) !important;
      transform: translateX(-50%) !important;
      width: min(360px, 88vw) !important;
      max-width: 88vw !important;
      white-space: normal !important;
      pointer-events: none;
    }

    .time-compare-popover::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -7px;
      transform: translateX(-50%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid #ffffff;
    }

    .login-splash {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: none;
      place-items: center;
      background: radial-gradient(circle at 50% 42%, #ffffff 0%, #f8fafc 58%, #eef2f7 100%);
      color: #111827;
      overflow: hidden;
      opacity: 1;
    }

    body.login-splash-active {
      overflow: hidden;
    }

    body.login-transition-active #accountPanel {
      visibility: hidden;
    }

    .login-splash.active {
      display: grid;
    }

    .login-splash-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(92vw, 560px);
      padding: 28px;
      text-align: center;
    }

    .bbs-build-stage {
      position: relative;
      width: clamp(170px, 30vw, 250px);
      aspect-ratio: 1;
      margin-bottom: 22px;
      contain: layout paint;
      filter: drop-shadow(0 20px 34px rgba(22, 101, 52, .16));
    }

    .bbs-build-logo {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .splash-green-square {
      fill: #2fba55;
      opacity: 0;
      transform-origin: 100px 100px;
    }

    .splash-roof {
      fill: none;
      stroke: #ffffff;
      stroke-width: 12;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
    }

    .splash-snake {
      fill: none;
      stroke: #ffffff;
      stroke-width: 12;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 270;
      stroke-dashoffset: 270;
      opacity: 0;
    }

    .login-splash-title,
    .login-splash-subtitle {
      margin: 0;
      opacity: 0;
      transform: translateY(12px);
      will-change: opacity, transform;
    }

    .login-splash-title {
      font-size: clamp(29px, 5vw, 44px);
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: -.02em;
      color: #10233f;
    }

    .login-splash-subtitle {
      margin-top: 9px;
      font-size: clamp(13px, 2.4vw, 17px);
      line-height: 1.45;
      font-weight: 750;
      color: #64748b;
    }

    @media (max-width: 520px) {
      .login-splash-inner {
        padding: 20px;
      }

      .login-splash-subtitle {
        max-width: 330px;
      }
    }

  /* Admin-Abwesenheiten: Krankheit rot, Urlaub ruhig grau */
  body.admin-view .sick-row .project-cell,
  body.admin-view .sick-row .day-cell {
    background: #fee2e2 !important;
  }

  body.admin-view .sick-row .project-no,
  body.admin-view .sick-row .project-name {
    color: #b91c1c !important;
  }

  body.admin-view .vacation-row .project-cell,
  body.admin-view .vacation-row .day-cell {
    background: #e5e7eb !important;
  }

  body.admin-view .vacation-row .project-no,
  body.admin-view .vacation-row .project-name {
    color: #374151 !important;
  }

  /* Chat-Menüs bleiben sichtbar und werden nicht von Balken verdeckt */
  .chat-window,
  .chat-messages,
  .chat-message-row,
  .chat-bubble {
    overflow: visible !important;
  }

  .chat-message-menu .dot-menu {
    z-index: 99999 !important;
    min-width: 190px;
  }

  .sick-required {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
  }

  .sick-required-text {
    display: inline-block;
    color: #b91c1c;
    font-weight: 800;
    padding: 6px 0;
  }

  .workshop-row .project-cell,
  .workshop-row .day-cell {
    background: #f1f5f9;
  }

  .workshop-row .project-no,
  .workshop-row .project-name {
    color: #334155;
  }

  .workshop-task-card {
    border-left: 5px solid #64748b;
    background: #f8fafc;
  }

  .vehicle-outage-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(90px, 1fr));
    gap: 6px;
    margin-top: 10px;
  }

  .vehicle-outage-day {
    min-height: 72px;
    border: 1px solid var(--soft-border);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    font-size: 12px;
  }

  .vehicle-outage-day.has-outage {
    border-color: #64748b;
    background: #f8fafc;
  }

  .vehicle-outage-chip {
    display: block;
    margin-top: 4px;
    padding: 3px 5px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 800;
  }
  .sick-missing-row {
    border-left: 4px solid #dc2626;
    background: #fef2f2;
  }

    .mobile-menu-toggle,
    .mobile-menu-backdrop,
    .mobile-side-menu {
      display: none;
    }
    body.force-mobile-preview main {
      max-width: 430px;
      margin-left: auto;
      margin-right: auto;
      padding: 12px;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 24px 70px rgba(15, 23, 42, 0.22);
      background: var(--bg);
      min-height: 100vh;
    }

    body.force-mobile-preview .planner-wrap {
      display: none !important;
    }

    body.force-mobile-preview .mobile-view {
      display: block !important;
    }

    body.force-mobile-preview .desktop-only {
      display: none !important;
    }

    body.force-mobile-preview header {
      position: sticky;
      top: 0;
      z-index: 4500;
      max-width: 430px;
      margin-left: auto;
      margin-right: auto;
      padding: 10px 12px;
      align-items: center;
      gap: 8px;
    }

    body.force-mobile-preview.real-mobile-app header {
      padding-top: calc(18px + env(safe-area-inset-top, 0px));
      padding-bottom: 10px;
      min-height: calc(68px + env(safe-area-inset-top, 0px));
    }

    body.force-mobile-preview .brand-lockup {
      min-width: 0;
    }

    body.force-mobile-preview .app-logo {
      width: 38px;
      height: 38px;
    }

    body.force-mobile-preview header h1 {
      font-size: 17px;
      text-transform: none;
    }

    body.force-mobile-preview header .sub {
      display: none;
    }

    body.force-mobile-preview .top-actions {
      margin-left: auto;
      gap: 0;
    }

    body.force-mobile-preview .top-actions > button:not(.mobile-menu-toggle),
    body.force-mobile-preview .top-actions > .project-menu-wrap {
      display: none !important;
    }

    body.force-mobile-preview .mobile-menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.22);
      font-size: 24px;
      padding: 0;
    }

    body.force-mobile-preview .mobile-menu-backdrop.active {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 5000;
      background: rgba(15, 23, 42, 0.35);
    }

    body.force-mobile-preview .mobile-side-menu {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 5001;
      display: flex;
      flex-direction: column;
      width: min(82vw, 310px);
      background: #fff;
      box-shadow: -22px 0 50px rgba(15,23,42,0.18);
      transform: translateX(105%);
      transition: transform 180ms ease;
      padding: 12px 0;
    }

    body.force-mobile-preview.real-mobile-app .mobile-side-menu {
      padding-top: calc(54px + env(safe-area-inset-top, 0px));
    }

    body.force-mobile-preview .mobile-side-menu.active {
      transform: translateX(0);
    }

    body.force-mobile-preview .mobile-menu-item {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 13px 4px;
      border: 0 !important;
      border-bottom: 1px solid #f1f5f9 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #6b7280 !important;
      box-shadow: none !important;
      font-size: 16px;
      font-weight: 800;
      text-align: left;
      appearance: none;
    }

    body.force-mobile-preview .mobile-menu-item:hover,
    body.force-mobile-preview .mobile-menu-item:focus-visible,
    body.force-mobile-preview .mobile-menu-item:active {
      background: transparent !important;
      color: #4b5563 !important;
      box-shadow: none !important;
      outline: none;
    }

    body.force-mobile-preview .mobile-menu-item.active,
    body.force-mobile-preview .mobile-menu-item.active span,
    body.force-mobile-preview .mobile-menu-item.active .mobile-menu-icon,
    body.force-mobile-preview .mobile-menu-item.active .mobile-menu-icon svg {
      color: #16a34a !important;
      stroke: #16a34a !important;
    }

    body.force-mobile-preview .mobile-menu-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      font-size: 19px;
      text-align: center;
    }

    body.force-mobile-preview .mobile-menu-icon svg,
    .mobile-menu-icon svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.force-mobile-preview #timeTrackingPanel {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    body.force-mobile-preview #timeTrackingPanel > .settings-head,
    body.force-mobile-preview #timeCalendarCard .settings-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: flex-start;
      gap: 10px;
    }

    body.force-mobile-preview #timeTrackingPanel .time-layout,
    body.force-mobile-preview #timeTrackingPanel .time-card,
    body.force-mobile-preview #timeTrackingPanel .data-list,
    body.force-mobile-preview #timeTrackingPanel .settings-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    body.force-mobile-preview #timeTrackingPanel .time-menu,
    body.force-mobile-preview #timeTrackingPanel .grid {
      display: grid;
      grid-template-columns: 1fr !important;
      width: 100%;
    }

    body.force-mobile-preview #timeEntryCard .grid {
      grid-template-columns: 1fr !important;
      align-items: start;
    }

    body.force-mobile-preview #timeEntryCard .form-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
    }

    body.force-mobile-preview #timeSaveBtn {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      min-height: 44px;
    }

    body.force-mobile-preview #timeAddEntryBtn {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      position: relative;
      width: 42px;
      height: 42px;
      min-width: 42px;
      padding: 0;
      font-size: 0;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
    }

    body.force-mobile-preview #timeAddEntryBtn::before {
      content: "+";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      line-height: 1;
      font-weight: 700;
    }

    body.force-mobile-preview #timeClearBtn {
      display: none !important;
    }

    body.force-mobile-preview .time-planned-restore {
      width: 100%;
      justify-content: center;
      border-style: dashed;
      padding: 10px 12px;
      font-weight: 700;
    }

    body.force-mobile-preview #timeCalendarCard .settings-head .form-actions {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      width: 100%;
      align-items: center;
    }

    body.force-mobile-preview .time-calendar {
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
      width: 100%;
      max-width: 100%;
      gap: 4px;
    }

    body.force-mobile-preview .time-day {
      min-width: 0;
      min-height: 38px;
      padding: 4px;
      overflow: hidden;
    }

    body.force-mobile-preview .time-day-date {
      margin-bottom: 0;
      font-size: 11px;
      line-height: 1.1;
    }

    body.force-mobile-preview .time-calendar-head {
      font-size: 10px;
      line-height: 1;
    }

    body.force-mobile-preview .time-entry-dots {
      display: flex;
      gap: 2px;
      margin-top: 4px;
    }

    body.force-mobile-preview .time-day-details {
      display: none !important;
    }

    body.force-mobile-preview .time-entry-dot {
      width: 4px;
      height: 4px;
    }

    body.force-mobile-preview .time-entry-pill {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
    }

    body.force-mobile-preview #monthView {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    body.force-mobile-preview .month-grid {
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
      width: 100%;
      max-width: 100%;
      border-color: #d1d5db;
      font-size: 10px;
    }

    body.force-mobile-preview .month-head,
    body.force-mobile-preview .month-day {
      min-width: 0;
      padding: 4px;
      border-color: #d1d5db;
    }

    body.force-mobile-preview .month-head {
      font-size: 9px;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.force-mobile-preview .month-day {
      min-height: 46px;
      max-height: 64px;
      overflow: hidden;
    }

    body.force-mobile-preview .month-date {
      margin-bottom: 2px;
      font-size: 10px;
      line-height: 1.1;
    }

    body.force-mobile-preview .month-item {
      max-width: 100%;
      padding: 2px 3px;
      border-radius: 4px;
      font-size: 8px;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.force-mobile-preview .month-item strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mobile-preview-note {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f0fdf4;
      color: #14532d;
      font-size: 13px;
      font-weight: 700;
    }

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

      header {
        padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
        align-items: center;
        gap: 8px;
      }

      .brand-lockup {
        min-width: 0;
      }

      .app-logo {
        width: 38px;
        height: 38px;
      }

      header h1 {
        font-size: 17px;
        text-transform: none;
      }

      header .sub {
        display: none;
      }

      .top-actions {
        margin-left: auto;
        gap: 0;
      }

      .top-actions > button:not(.mobile-menu-toggle),
      .top-actions > .project-menu-wrap {
        display: none !important;
      }

      .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.35);
        background: rgba(255,255,255,0.12);
        color: #ffffff;
        font-size: 24px;
        line-height: 1;
      }

      .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 5000;
        background: rgba(15, 23, 42, 0.38);
      }

      .mobile-menu-backdrop.active {
        display: block;
      }

      .mobile-side-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5001;
        display: flex;
        flex-direction: column;
        width: min(82vw, 310px);
        padding: calc(18px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 18px;
        background: #ffffff;
        border-left: 1px solid var(--soft-border);
        box-shadow: -18px 0 48px rgba(15, 23, 42, 0.24);
        transform: translateX(105%);
        transition: transform 180ms ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      body.real-mobile-app .mobile-side-menu {
        padding-top: calc(54px + env(safe-area-inset-top, 0px));
      }

      .mobile-side-menu.active {
        transform: translateX(0);
      }

      .mobile-project-drawer .mobile-project-list {
        display: flex;
        flex-direction: column;
        margin-top: 6px;
      }

      .mobile-project-item {
        appearance: none;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        min-height: 54px;
        padding: 14px 0;
        text-align: left;
        color: #111827 !important;
        line-height: 1.2;
      }

      .mobile-project-item:active {
        background: transparent !important;
      }

      .mobile-project-code-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        color: #374151;
        font-weight: 800;
        font-size: 16px;
        line-height: 1.2;
      }

      .mobile-project-copy {
        display: block !important;
        min-width: 0;
        margin: 0 !important;
        display: grid !important;
        gap: 4px;
      }

      .mobile-project-copy strong {
        display: block;
        color: #374151;
        font-size: 17px;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }

      .mobile-project-name,
      .mobile-project-address,
      .mobile-project-meta {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .mobile-project-address,
      .mobile-project-meta {
        color: #6b7280;
        font-size: 13px;
      }

      .mobile-project-copy small {
        display: block;
        margin-top: 2px;
        color: #6b7280;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.3;
        overflow-wrap: anywhere;
      }

      .mobile-project-open {
        align-self: flex-end;
        display: inline-flex;
        color: #16a34a !important;
        font-weight: 800;
        font-size: 14px;
        line-height: 1.2;
      }

      .mobile-project-item:hover .mobile-project-copy strong,
      .mobile-project-item:focus-visible .mobile-project-copy strong,
      .mobile-project-item:hover .mobile-project-open,
      .mobile-project-item:focus-visible .mobile-project-open {
        color: #16a34a !important;
      }

      .mobile-project-item::after {
        content: none;
      }

      .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
        color: #111827;
      }

      .mobile-menu-close {
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #64748b;
        font-size: 26px;
      }

      .mobile-menu-item {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 13px 4px;
        border: 0;
        border-bottom: 1px solid #f1f5f9;
        border-radius: 0;
        background: transparent !important;
        color: #6b7280 !important;
        box-shadow: none;
        font-size: 16px;
        font-weight: 800;
        text-align: left;
      }

      .mobile-menu-item:hover,
      .mobile-menu-item:focus-visible {
        background: transparent !important;
        color: #4b5563 !important;
      }

      .mobile-menu-item.active {
        color: #16a34a !important;
      }

      .mobile-menu-item.active .mobile-menu-icon {
        color: #16a34a;
      }

      .mobile-menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        font-size: 19px;
        text-align: center;
      }

      .mobile-menu-item .message-badge {
        position: static;
        display: inline-flex;
        min-width: 20px;
        height: 20px;
        align-items: center;
        justify-content: center;
        font-size: 11px;
      }


      header {
        position: sticky;
        top: 0;
        z-index: 4500;
      }

      body.real-mobile-app header {
        padding-top: calc(18px + env(safe-area-inset-top, 0px));
        padding-bottom: 10px;
        min-height: calc(68px + env(safe-area-inset-top, 0px));
      }

      .mobile-menu-item,
      .mobile-menu-item:hover,
      .mobile-menu-item:focus-visible,
      .mobile-menu-item:active {
        appearance: none;
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
      }

      .mobile-menu-item.active,
      .mobile-menu-item.active span,
      .mobile-menu-item.active .mobile-menu-icon,
      .mobile-menu-item.active .mobile-menu-icon svg {
        color: #16a34a !important;
        stroke: #16a34a !important;
      }

      .mobile-week-panel {
        display: grid;
        gap: 10px;
        margin: 10px 0 12px;
      }

      .mobile-open-week {
        width: 100%;
        background: linear-gradient(135deg, #16a34a, #22c55e) !important;
        color: #fff !important;
        border: 0;
        border-radius: 12px;
        padding: 14px 16px;
        font-size: 16px;
        font-weight: 950;
        box-shadow: 0 12px 24px rgba(22, 163, 74, 0.28);
        border: 2px solid rgba(255, 255, 255, 0.65);
      }

      .mobile-open-week small {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        font-weight: 800;
        opacity: 0.9;
      }

      #monthView {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .month-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100%;
        max-width: 100%;
        border-color: #d1d5db;
        font-size: 10px;
      }

      .month-week,
      .month-project-timeline {
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }

      .month-project-timeline {
        top: 18px;
        grid-auto-rows: 9px;
        row-gap: 1px;
      }

      .month-project-track-space {
        height: calc(var(--project-track-count, 0) * 10px);
      }

      .month-project-range {
        height: 7px !important;
        min-height: 7px !important;
        margin: 0 1px;
        padding: 0 2px !important;
        font-size: 6px;
        line-height: 7px;
      }

      .month-head,
      .month-day {
        min-width: 0;
        padding: 4px;
        border-color: #d1d5db;
      }

      .month-head {
        font-size: 9px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .month-day {
        min-height: 46px;
        max-height: 64px;
        overflow: hidden;
      }

      .month-date {
        margin-bottom: 2px;
        font-size: 10px;
        line-height: 1.1;
      }

      .month-item {
        max-width: 100%;
        padding: 2px 3px;
        border-radius: 4px;
        font-size: 8px;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .month-item strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-day-controls {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 8px;
        align-items: center;
      }

      .mobile-day-controls button,
      .mobile-day-controls input,
      .mobile-day-date-picker {
        min-height: 40px;
        border-radius: 9px;
        font-size: 15px;
      }

      .mobile-day-controls .mobile-day-step {
        width: 42px;
        min-width: 42px;
        padding: 0;
        font-size: 24px;
        line-height: 1;
        display: inline-grid;
        place-items: center;
      }

      .mobile-day-controls input {
        border: 1px solid #d1d5db;
        padding: 8px 10px;
        background: #fff;
        text-align: center;
        min-width: 0;
      }

      .mobile-day-date-picker {
        position: relative;
        display: grid;
        place-items: center;
        width: 100%;
        min-width: 0;
        border: 1px solid #d1d5db;
        background: #fff;
        color: #111827;
        font-weight: 700;
        overflow: hidden;
      }

      .mobile-day-date-picker input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        padding: 0;
      }

      .mobile-day-date-picker span {
        pointer-events: none;
        text-align: center;
        white-space: nowrap;
        width: 100%;
        padding: 0 8px;
      }

      .mobile-day-card h3 {
        margin-top: 0;
      }

      .mobile-week-overlay {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 10000;
        display: none;
        background: #ffffff;
        overflow: hidden;
        transform-origin: top left;
      }

      .mobile-week-overlay.active {
        display: block;
      }

      .mobile-week-overlay.landscape-fit {
        background: #ffffff;
      }

      .mobile-week-close {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        z-index: 10002;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.82) !important;
        color: #fff !important;
        font-size: 24px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
      }

      .mobile-week-tools-button {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        right: calc(max(8px, env(safe-area-inset-right)) + 42px);
        z-index: 10002;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: rgba(22, 163, 74, 0.92) !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
      }

      .mobile-week-tools-button svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .mobile-week-floating-controls {
        position: fixed;
        right: max(8px, env(safe-area-inset-right));
        top: calc(max(8px, env(safe-area-inset-top)) + 42px);
        z-index: 10002;
        display: none;
        width: min(300px, calc(100vw - 16px));
        padding: 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
        backdrop-filter: blur(10px);
      }

      .mobile-week-floating-controls,
      .mobile-week-floating-controls * {
        box-sizing: border-box;
      }

      .mobile-week-floating-controls.open {
        display: grid;
        gap: 8px;
        align-items: stretch;
      }

      .mobile-week-assignment-popover {
        position: fixed;
        top: calc(max(10px, env(safe-area-inset-top)) + 4px);
        left: 50%;
        z-index: 10004;
        display: none;
        width: min(86vw, 520px);
        max-width: calc(100vw - 92px);
        transform: translateX(-50%);
        padding: 14px 16px;
        color: #111827;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(34, 197, 94, 0.28);
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
        pointer-events: auto;
      }

      .mobile-week-assignment-popover.active {
        display: block;
      }

      .mobile-week-assignment-popover h3 {
        margin: 0 0 8px;
        font-size: 18px;
        line-height: 1.2;
      }

      .mobile-week-assignment-popover p {
        margin: 0;
        color: #374151;
        font-size: 15px;
        line-height: 1.35;
      }

      .mobile-week-assignment-popover button {
        margin-top: 12px;
        padding: 9px 14px;
        border: 0;
        border-radius: 10px;
        background: #e5e7eb;
        color: #111827;
        font-weight: 800;
      }

      .mobile-week-tool-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 8px;
      }

      .mobile-week-tool-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .mobile-week-tool-actions {
        display: flex;
        justify-content: flex-end;
      }

      .mobile-week-tool-actions button {
        min-width: 76px;
        background: #16a34a !important;
        border-color: #16a34a !important;
        color: #ffffff !important;
      }

      .mobile-week-kw {
        text-align: center;
        font-size: 13px;
        font-weight: 950;
        color: #111827;
      }

      .mobile-week-floating-controls button,
      .mobile-week-floating-controls select,
      .mobile-week-floating-controls input {
        min-height: 32px;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid #d1d5db !important;
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 12px;
        font-weight: 800;
        box-shadow: none !important;
      }

      .mobile-week-floating-controls button {
        background: #e5e7eb !important;
      }

      .mobile-week-floating-controls select,
      .mobile-week-floating-controls input[type="date"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .mobile-week-tool-label {
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
      }

      .mobile-week-floating-controls label {
        display: block;
        min-width: 0;
        width: 100%;
      }

      .mobile-week-viewport {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: #fff;
        touch-action: none;
      }

      .mobile-week-scale {
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: top left;
      }

      .mobile-week-scale .planner {
        width: 1180px;
        min-width: 1180px;
        margin: 0;
        border-radius: 0;
      }

      .mobile-week-scale .planner th,
      .mobile-week-scale .planner td {
        padding: 5px 4px;
      }

      html.mobile-week-open,
      body.mobile-week-open {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
      }

      body.mobile-menu-open {
        overflow: hidden;
      }

      #timeTrackingPanel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
      }

      #timeTrackingPanel .settings-head {
        align-items: flex-start;
        gap: 10px;
      }

      #timeTrackingPanel > .settings-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      #timeTrackingPanel > .settings-head .form-actions {
        width: 100%;
        justify-content: flex-start;
      }

      #timeTrackingPanel .time-layout,
      #timeTrackingPanel .time-card,
      #timeTrackingPanel .data-list,
      #timeTrackingPanel .settings-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
      }

      #timeTrackingPanel .time-menu {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }

      #timeTrackingPanel .time-menu button {
        width: 100%;
        text-align: left;
      }

      #timeTrackingPanel .grid {
        grid-template-columns: 1fr !important;
      }

      #timeEntryCard .grid {
        grid-template-columns: 1fr !important;
        align-items: start;
      }

      #timeEntryCard .form-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
      }

      #timeSaveBtn {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-height: 44px;
      }

      #timeAddEntryBtn {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        position: relative;
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
      }

      #timeAddEntryBtn::before {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        line-height: 1;
        font-weight: 700;
      }

      #timeClearBtn {
        display: none !important;
      }

      .time-planned-restore {
        width: 100%;
        justify-content: center;
        border-style: dashed;
        padding: 10px 12px;
        font-weight: 700;
      }

      #timeCalendarCard .settings-head {
        display: grid;
        grid-template-columns: 1fr;
      }

      #timeCalendarCard .settings-head.time-legend-head,
      body.force-mobile-preview #timeCalendarCard .settings-head.time-legend-head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
      }

      #timeCalendarCard .time-legend-info,
      body.employee-view #timeCalendarCard .time-legend-info,
      body.admin-view #timeCalendarCard .time-legend-info {
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 50%;
        justify-self: end;
      }

      #timeCalendarCard .settings-head .form-actions {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        width: 100%;
        align-items: center;
      }

      #timeCalendarCard .settings-head .form-actions button {
        min-width: 0;
        padding: 8px 10px;
      }

      #timeCalendarCard .settings-head .form-actions strong {
        text-align: center;
        white-space: nowrap;
      }

      .time-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100%;
        max-width: 100%;
        gap: 4px;
      }

      .time-day {
        min-width: 0;
        min-height: 38px;
        padding: 4px;
        overflow: hidden;
      }

      .time-day-date {
        margin-bottom: 0;
        font-size: 11px;
        line-height: 1.1;
      }

      .time-calendar-head {
        font-size: 10px;
        line-height: 1;
      }

      .time-entry-dots {
        display: flex;
        gap: 2px;
        margin-top: 4px;
      }

      .time-day-details {
        display: none !important;
      }

      .time-entry-dot {
        width: 4px;
        height: 4px;
      }

      .time-entry-pill {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
      }

      #editModal.time-color-legend-modal .edit-modal {
        width: min(94vw, 560px);
        height: min(720px, calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)));
        max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
        padding: 20px;
      }

      #editModal.time-color-legend-modal #editModalTitle {
        margin-bottom: 12px;
        line-height: 1.2;
      }

      #editModal.time-color-legend-modal #editModalMessage {
        flex: 0 0 auto;
        margin-bottom: 14px;
        overflow: visible;
      }

      #editModal.time-color-legend-modal #editModalFields {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 4px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }

      #editModal.time-color-legend-modal .time-color-legend {
        gap: 12px;
        margin: 2px 0 8px;
      }

      #editModal.time-color-legend-modal .time-color-legend-row {
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        font-size: 15px;
        line-height: 1.4;
      }

      #editModal.time-color-legend-modal .time-color-dot {
        width: 18px;
        height: 18px;
        margin-top: 1px;
      }

      #editModal.time-color-legend-modal #editModalActions {
        margin: 12px -20px -20px;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
      }
    }
  body.employee-view button.mobile-menu-item,
  body.admin-view button.mobile-menu-item,
  body.force-mobile-preview.employee-view button.mobile-menu-item,
  body.force-mobile-preview.admin-view button.mobile-menu-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #6b7280 !important;
    filter: none !important;
  }

  body.employee-view button.mobile-menu-item:hover,
  body.admin-view button.mobile-menu-item:hover,
  body.employee-view button.mobile-menu-item:focus-visible,
  body.admin-view button.mobile-menu-item:focus-visible,
  body.employee-view button.mobile-menu-item:active,
  body.admin-view button.mobile-menu-item:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #4b5563 !important;
    filter: none !important;
  }

  body.employee-view button.mobile-menu-item.active,
  body.admin-view button.mobile-menu-item.active,
  body.employee-view button.mobile-menu-item.active span,
  body.admin-view button.mobile-menu-item.active span,
  body.employee-view button.mobile-menu-item.active .mobile-menu-icon,
  body.admin-view button.mobile-menu-item.active .mobile-menu-icon,
  body.employee-view button.mobile-menu-item.active .mobile-menu-icon svg,
  body.admin-view button.mobile-menu-item.active .mobile-menu-icon svg {
    color: #16a34a !important;
    stroke: #16a34a !important;
  }

  /* Handy-App: Drawer und kleine Icon-Buttons sauber ausmitteln */
  body.force-mobile-preview .mobile-side-menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.force-mobile-preview .mobile-menu-head {
    padding: 0 18px 14px 22px !important;
    margin: 0 0 10px 0 !important;
    gap: 14px !important;
  }

  body.force-mobile-preview.real-mobile-app .mobile-menu-head {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }

  body.force-mobile-preview .mobile-menu-head strong {
    min-width: 0;
    line-height: 1.15;
  }

  body.force-mobile-preview .mobile-menu-close {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin-right: 2px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    line-height: 1 !important;
  }

  body.force-mobile-preview .mobile-menu-item {
    padding-left: 22px !important;
    padding-right: 18px !important;
  }

  body.force-mobile-preview .collapse-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body.force-mobile-preview #planningToolbar {
    display: none !important;
  }

  body.force-mobile-preview #accountPanel .account-dashboard-box {
    display: none !important;
  }

  body.force-mobile-preview #accountPanel .account-mobile-role-control:not(.hidden) {
    display: block;
  }

  body.force-mobile-preview #accountPanel .account-mobile-role-control select {
    width: 100%;
    max-width: 100%;
  }

  @media (max-width: 760px) {
    #planningToolbar {
      display: none !important;
    }
  }
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    input,
    select,
    textarea {
      max-width: 100%;
      box-sizing: border-box;
    }

    .grid > *,
    .form-grid > *,
    .settings-grid > *,
    .toolbar-right > *,
    .mobile-week-floating-controls > *,
    .mobile-week-floating-controls label {
      min-width: 0;
    }

    .mobile-week-floating-controls input,
    .mobile-week-floating-controls select {
      display: block;
      inline-size: 100%;
      max-inline-size: 100%;
    }

    @media (max-width: 760px) {
      body.employee-view #mainHomePanel,
      body.admin-view #mainHomePanel,
      body.force-mobile-preview #mainHomePanel {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      body.employee-view #mainHomePanel .home-card,
      body.admin-view #mainHomePanel .home-card,
      body.force-mobile-preview #mainHomePanel .home-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      body.employee-view #mainHomePanel .leave-summary,
      body.admin-view #mainHomePanel .leave-summary,
      body.force-mobile-preview #mainHomePanel .leave-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
      }

      body.employee-view #mainHomePanel .summary-tile,
      body.admin-view #mainHomePanel .summary-tile,
      body.force-mobile-preview #mainHomePanel .summary-tile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      body.content-focused #mainHomePanel,
      body.content-focused.force-mobile-preview #mainHomePanel {
        display: none !important;
      }

      #accountPanel .account-dashboard-box {
        display: none !important;
      }

      #accountPanel .account-mobile-role-control:not(.hidden) {
        display: block;
      }

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
      }

      main,
      .main-home-panel,
      .mobile-view,
      .mobile-view.active,
      .form-panel,
      .home-card,
      .time-card,
      .account-box,
      .project-platform,
      .mobile-week-panel,
      .mobile-day-card,
      .mobile-day-controls,
      .grid,
      .leave-summary,
      .summary-tile,
      .summary-grid,
      .data-list,
      .settings-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
      }

      main {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-x: clip;
      }

      main > * {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .main-home-panel,
      .leave-summary {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
      }

      .summary-tile {
        min-width: 0 !important;
        width: 100%;
      }

      .home-time-clock {
        max-width: 100%;
        font-size: clamp(42px, 15vw, 64px);
        word-break: keep-all;
      }

      .form-panel,
      .home-card,
      .time-card,
      .account-box,
      .project-platform,
      .mobile-day-card {
        overflow: hidden;
      }

      .mobile-day-controls {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 7px;
      }

      .mobile-day-controls button,
      .mobile-day-controls input,
      .mobile-day-date-picker,
      .form-panel input,
      .form-panel select,
      .form-panel textarea,
      .time-card input,
      .time-card select,
      .time-card textarea {
        max-width: 100%;
        min-width: 0;
      }

      .mobile-day-controls button {
        width: 38px;
        min-width: 38px;
        padding-left: 6px;
        padding-right: 6px;
        white-space: nowrap;
      }

      .mobile-day-controls input[type="date"] {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        text-align: center;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 15px;
        appearance: none;
        -webkit-appearance: none;
      }

      .mobile-day-date-picker {
        grid-column: 2;
        grid-row: 1;
      }

      .mobile-day-controls button:first-child {
        grid-column: 1;
        grid-row: 1;
      }

      .mobile-day-controls button:last-child {
        grid-column: 3;
        grid-row: 1;
      }
    }

    @media (max-width: 380px) {
      .mobile-day-controls {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 6px;
      }

      .mobile-day-controls button {
        font-size: 14px;
        width: 34px;
        min-width: 34px;
        padding-left: 4px;
        padding-right: 4px;
      }

      .mobile-day-controls input[type="date"],
      .mobile-day-date-picker {
        font-size: 13px;
        padding-left: 4px;
        padding-right: 4px;
      }
    }

    @media (max-width: 760px) {
      #employeeMessagePanel,
      #adminMessagePanel {
        padding: 16px 14px;
      }

      #employeeMessagePanel > .settings-head,
      #adminMessagePanel > .settings-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      #employeeMessagePanel > .settings-head .form-actions,
      #adminMessagePanel > .settings-head .form-actions {
        display: none;
      }

      .chat-shell,
      #employeeChatShell,
      #adminChatShell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        background: #ffffff;
      }

      .chat-people {
        display: flex;
        gap: 8px;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        border-radius: 12px;
        background: #f8fafc;
        -webkit-overflow-scrolling: touch;
      }

      .chat-person {
        flex: 0 0 auto;
        width: min(190px, 62vw);
        min-height: 58px;
        padding: 8px 10px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
      }

      .chat-person.active {
        background: #e9f7e8 !important;
        color: #14532d !important;
        border-color: #9bd49a;
      }

      .chat-person-main {
        min-width: 0;
      }

      .chat-person-main > span:last-child {
        min-width: 0;
        overflow: hidden;
      }

      .chat-person-main strong,
      .chat-person-main .small-info {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .chat-window {
        min-height: min(64vh, 620px);
        height: min(64vh, 620px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        border-radius: 14px;
        overflow: hidden !important;
        background: #ffffff;
      }

      .chat-title {
        padding: 12px 14px;
        font-size: 16px;
        line-height: 1.2;
        background: #dfead6 !important;
        color: #26391d !important;
      }

      .chat-messages {
        max-height: none !important;
        min-height: 0;
        padding: 12px 10px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        gap: 8px;
        background: #f3f4f6 !important;
      }

      .chat-message-row {
        width: 100%;
        max-width: 100%;
        gap: 6px;
        align-items: flex-end;
      }

      .chat-message-row.mine {
        justify-content: flex-end;
      }

      .chat-bubble,
      body.admin-view .chat-bubble,
      body.employee-view .chat-bubble {
        min-width: 0 !important;
        max-width: calc(100% - 48px) !important;
        width: auto !important;
        padding: 9px 32px 18px 11px !important;
        border-radius: 16px 16px 16px 5px !important;
        font-size: 14px;
        line-height: 1.35;
        overflow-wrap: break-word;
        word-break: normal;
      }

      .chat-bubble.mine,
      body.admin-view .chat-bubble.mine,
      body.employee-view .chat-bubble.mine {
        border-radius: 16px 16px 5px 16px !important;
        background: #e5e7eb !important;
        border-color: #cbd5e1 !important;
      }

      .chat-author {
        display: none;
      }

      .chat-text {
        overflow-wrap: break-word;
        word-break: normal;
        white-space: pre-wrap;
      }

      .chat-avatar {
        width: 32px;
        height: 32px;
        font-size: 11px;
      }

      .chat-message-menu {
        right: 5px;
        top: 4px;
      }

      .chat-message-menu .dot-menu-button {
        width: 24px;
        min-width: 24px;
        height: 24px;
        padding: 0;
        color: #64748b;
      }

      .chat-compose {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
        background: #ffffff;
      }

      .chat-compose input {
        min-width: 0;
        width: 100%;
        border-radius: 999px;
        padding: 10px 12px;
      }

      .chat-compose button {
        border-radius: 999px;
        padding: 10px 14px;
        white-space: nowrap;
        background: #16a34a !important;
        color: #ffffff !important;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-window {
        display: none !important;
      }

      .chat-shell.mobile-chat-conversation .chat-people {
        display: none !important;
      }

      .chat-shell:not(.mobile-chat-conversation) {
        min-height: calc(100dvh - 170px);
        align-content: start;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-people {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100dvh - 210px);
        padding: 8px;
        background: #ffffff;
        border: 0;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-person {
        width: 100%;
        min-height: 72px;
        justify-content: flex-start;
        padding: 12px;
        border-radius: 16px;
        border-color: #d7e7d1;
        background: #f8fbf6;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-person.active {
        background: #e9f7e8 !important;
        color: #14532d !important;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-avatar {
        width: 44px;
        height: 44px;
        font-size: 13px;
      }

      .chat-shell:not(.mobile-chat-conversation) .chat-person-main strong {
        font-size: 17px;
        line-height: 1.15;
      }

      .chat-shell.mobile-chat-conversation {
        min-height: 0;
      }

      .chat-shell.mobile-chat-conversation .chat-window {
        height: calc(100dvh - 230px);
        min-height: 360px;
        max-height: 640px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .chat-shell.mobile-chat-conversation .chat-title {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        background: #14532d !important;
        color: #ffffff !important;
        border-radius: 14px 14px 0 0;
      }

      .chat-back-button {
        min-height: 34px;
        padding: 7px 10px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        font-size: 13px;
        font-weight: 900;
        white-space: nowrap;
      }

      .chat-shell.mobile-chat-conversation .chat-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }

      .chat-shell.mobile-chat-conversation .chat-messages {
        padding: 14px 10px 12px;
        background:
          linear-gradient(180deg, rgba(240,253,244,0.92), rgba(248,250,252,0.96)),
          #f8fafc !important;
      }

      .chat-shell.mobile-chat-conversation .chat-bubble,
      body.admin-view .chat-shell.mobile-chat-conversation .chat-bubble,
      body.employee-view .chat-shell.mobile-chat-conversation .chat-bubble {
        display: inline-block !important;
        width: fit-content !important;
        min-width: 0 !important;
        max-width: 78% !important;
        padding: 8px 28px 17px 12px !important;
        border: 0 !important;
        background: #e5e7eb !important;
        color: #111827 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
      }

      .chat-shell.mobile-chat-conversation .chat-bubble.mine,
      body.admin-view .chat-shell.mobile-chat-conversation .chat-bubble.mine,
      body.employee-view .chat-shell.mobile-chat-conversation .chat-bubble.mine {
        background: #16a34a !important;
        color: #ffffff !important;
      }

      .chat-shell.mobile-chat-conversation .chat-bubble.mine .chat-meta {
        color: rgba(255, 255, 255, 0.82);
      }

      .chat-shell.mobile-chat-conversation .chat-message-menu {
        display: none !important;
      }

      .chat-shell.mobile-chat-conversation .chat-compose {
        border-top: 1px solid #e5e7eb;
        padding: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      }
    }

    @media (max-width: 760px) {
      .chat-shell.mobile-chat-conversation .chat-message-row,
      body.admin-view .chat-shell.mobile-chat-conversation .chat-message-row,
      body.employee-view .chat-shell.mobile-chat-conversation .chat-message-row {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: flex-end !important;
        gap: 6px !important;
        margin: 3px 0 !important;
        overflow: visible !important;
      }

      .chat-shell.mobile-chat-conversation .chat-message-row.mine {
        justify-content: flex-end !important;
      }

      .chat-shell.mobile-chat-conversation .chat-message-row:not(.mine) {
        justify-content: flex-start !important;
      }

      .chat-shell.mobile-chat-conversation .chat-bubble,
      body.admin-view .chat-shell.mobile-chat-conversation .chat-bubble,
      body.employee-view .chat-shell.mobile-chat-conversation .chat-bubble {
        flex: 0 1 auto !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 74% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 12px 7px !important;
        border: 0 !important;
        border-radius: 18px 18px 18px 6px !important;
        background: #e5e7eb !important;
        color: #111827 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
        font-size: 15px !important;
        font-weight: 650 !important;
        line-height: 1.28 !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
      }

      .chat-shell.mobile-chat-conversation .chat-bubble.mine,
      body.admin-view .chat-shell.mobile-chat-conversation .chat-bubble.mine,
      body.employee-view .chat-shell.mobile-chat-conversation .chat-bubble.mine {
        border-radius: 18px 18px 6px 18px !important;
        background: #16a34a !important;
        color: #ffffff !important;
      }

      .chat-shell.mobile-chat-conversation .chat-text {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
      }

      .chat-shell.mobile-chat-conversation .chat-author {
        display: none !important;
      }

      .chat-shell.mobile-chat-conversation .chat-meta {
        position: static !important;
        display: block !important;
        width: auto !important;
        margin-top: 4px !important;
        padding: 0 !important;
        text-align: right !important;
        font-size: 10px !important;
        line-height: 1 !important;
        color: #64748b !important;
        opacity: 0.9 !important;
      }

      .chat-shell.mobile-chat-conversation .chat-bubble.mine .chat-meta {
        color: rgba(255, 255, 255, 0.82) !important;
      }

      .chat-shell.mobile-chat-conversation .chat-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 11px !important;
      }

      .chat-shell.mobile-chat-conversation .chat-message-menu {
        display: none !important;
      }

      #editModal.chat-action-sheet .edit-modal {
        width: min(360px, calc(100vw - 28px)) !important;
        max-height: calc(100dvh - 40px) !important;
        padding: 14px !important;
        border-radius: 18px !important;
      }

      #editModal.chat-action-sheet #editModalTitle {
        margin: 0 0 8px !important;
        font-size: 18px !important;
      }

      #editModal.chat-action-sheet #editModalMessage {
        display: none !important;
      }

      #editModal.chat-action-sheet #editModalFields {
        display: block !important;
        margin: 0 !important;
      }

      #editModal.chat-action-sheet .chat-action-preview {
        max-height: 92px;
        overflow: auto;
        padding: 10px 12px;
        border: 1px solid #d8e1d2;
        border-radius: 12px;
        background: #f6faf4;
        color: #334155;
        font-size: 14px;
        line-height: 1.35;
        white-space: pre-wrap;
      }

      #editModal.chat-action-sheet #editModalActions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
      }

      #editModal.chat-action-sheet #editModalActions button {
        width: 100% !important;
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
      }

      #editModal.account-photo-sheet .edit-modal {
        width: min(360px, calc(100vw - 28px)) !important;
        padding: 14px !important;
        border-radius: 18px !important;
      }

      #editModal.account-photo-sheet #editModalTitle {
        margin: 0 0 8px !important;
        font-size: 18px !important;
      }

      #editModal.account-photo-sheet #editModalMessage {
        color: #64748b;
        font-size: 13px;
      }

      #editModal.account-photo-sheet #editModalFields {
        display: none !important;
      }

      #editModal.account-photo-sheet #editModalActions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
      }

      #editModal.account-photo-sheet #editModalActions button {
        width: 100% !important;
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
      }

      #leaveRequestPanel,
      #leaveRequestPanel .request-section-card,
      #leaveRequestPanel .grid,
      #leaveRequestPanel .grid > div {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }

      #leaveRequestPanel {
        padding: 14px !important;
      }

      #leaveRequestPanel .settings-head {
        margin-bottom: 10px !important;
      }

      #leaveRequestPanel .settings-head h2 {
        font-size: 22px !important;
      }

      #leaveRequestPanel .mobile-requests-nav {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 10px;
      }

      #leaveRequestPanel .mobile-request-tab {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        min-height: 66px;
        padding: 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 16px;
        background: rgba(248, 250, 252, 0.9);
        color: #64748b;
        box-shadow: none;
        text-align: left;
      }

      #leaveRequestPanel .mobile-request-tab .tab-icon {
        font-size: 17px;
        line-height: 1;
        margin-bottom: 6px;
      }

      #leaveRequestPanel .mobile-request-tab .tab-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 900;
        line-height: 1.1;
      }

      #leaveRequestPanel .mobile-request-tab.active {
        border-color: rgba(34, 197, 94, 0.35);
        background: rgba(220, 252, 231, 0.72);
        color: #159447;
      }

      #leaveRequestPanel[data-mobile-request-tab="vacation"] .request-section-card:not(.vacation-section),
      #leaveRequestPanel[data-mobile-request-tab="sick"] .request-section-card:not(.sick-section),
      #leaveRequestPanel[data-mobile-request-tab="feedback"] .request-section-card:not(.feedback-section) {
        display: none !important;
      }

      #leaveRequestPanel .request-section-card {
        padding: 12px !important;
        border-radius: 18px !important;
        margin-top: 0 !important;
      }

      #leaveRequestPanel .request-section-card h3 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
      }

      #leaveRequestPanel .vacation-section .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }

      #leaveRequestPanel #leaveEmployeeField,
      #leaveRequestPanel .vacation-section .grid > div:nth-child(4) {
        grid-column: 1 / -1 !important;
      }

      #leaveStartInput,
      #leaveEndInput {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 8px 6px !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        appearance: none !important;
        -webkit-appearance: none !important;
      }

      #leaveNoteInput {
        width: 100% !important;
        min-width: 0 !important;
      }

      #leaveRequestPanel .form-actions {
        gap: 8px !important;
      }

      #leaveRequestPanel .form-actions button {
        min-height: 40px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
      }

      #leaveRequestPanel .sick-section .form-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }

      #leaveRequestPanel .sick-section .form-actions button {
        width: 100% !important;
        justify-content: center !important;
      }
    }

    @media (max-width: 380px) {
      #leaveRequestPanel .vacation-section .grid {
        gap: 7px !important;
      }

      #leaveStartInput,
      #leaveEndInput {
        font-size: 12px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
      }
    }

    /* Final layout guard: date and time inputs stay compact on every page. */
    input[type="date"],
    .form-panel input[type="date"],
    .settings-panel input[type="date"],
    .edit-modal input[type="date"],
    #timeTrackingPanel input[type="date"],
    #leaveStartInput,
    #leaveEndInput,
    #dayInput,
    #sickEndInput,
    #dateSearch,
    #newEmployeeStartDate,
    #vehicleOutageStart,
    #vehicleOutageEnd,
    #timeReleaseUntil {
      width: min(170px, 100%) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      inline-size: min(170px, 100%) !important;
      text-align: center !important;
    }

    input[type="time"],
    .form-panel input[type="time"],
    .settings-panel input[type="time"],
    .edit-modal input[type="time"],
    #timeTrackingPanel input[type="time"],
    #startInput,
    #endInput,
    #vehicleOutageStartTime,
    #vehicleOutageEndTime {
      width: min(125px, 100%) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      inline-size: min(125px, 100%) !important;
      text-align: center !important;
    }
    .mobile-week-overlay {
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      right: auto !important;
      bottom: auto !important;
      width: var(--mobile-week-current-width, 100vw) !important;
      height: var(--mobile-week-current-height, 100dvh) !important;
      z-index: 100000 !important;
      display: none;
      background: #ffffff !important;
      overflow: hidden !important;
      transform-origin: top left;
    }

    .mobile-week-overlay.active {
      display: block !important;
    }

    .mobile-week-close {
      position: fixed !important;
      top: max(8px, env(safe-area-inset-top)) !important;
      right: max(8px, env(safe-area-inset-right)) !important;
      z-index: 100002 !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(17, 24, 39, 0.86) !important;
      color: #fff !important;
      font-size: 24px !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22) !important;
    }

    .mobile-week-tools-button {
      position: fixed !important;
      top: max(8px, env(safe-area-inset-top)) !important;
      right: calc(max(8px, env(safe-area-inset-right)) + 42px) !important;
      z-index: 100002 !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      min-height: 34px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(22, 163, 74, 0.92) !important;
      color: #fff !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2) !important;
    }

    .mobile-week-tools-button svg {
      width: 18px !important;
      height: 18px !important;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mobile-week-floating-controls {
      position: fixed !important;
      left: 50% !important;
      right: auto !important;
      top: calc(max(8px, env(safe-area-inset-top)) + 52px) !important;
      z-index: 100002 !important;
      display: none !important;
      width: min(360px, calc(var(--mobile-week-current-width, 100vw) - 24px)) !important;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
      padding: 16px !important;
      border: 1px solid rgba(22, 163, 74, 0.2) !important;
      border-radius: 20px !important;
      background: rgba(255, 255, 255, 0.98) !important;
      box-shadow: 0 18px 46px rgba(15, 23, 42, 0.24) !important;
      backdrop-filter: blur(14px);
      box-sizing: border-box !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      transform: translateX(-50%) !important;
    }

    .mobile-week-floating-controls.open {
      display: grid !important;
      gap: 12px !important;
      align-items: stretch !important;
    }

    .mobile-week-tool-heading {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      min-width: 0 !important;
      color: #111827 !important;
      font-size: 17px !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
    }

    .mobile-week-tool-heading span:last-child {
      color: #15803d !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      white-space: nowrap !important;
    }

    .mobile-week-assignment-popover {
      position: fixed !important;
      top: calc(max(10px, env(safe-area-inset-top)) + 4px) !important;
      left: 50% !important;
      z-index: 100004 !important;
      display: none !important;
      width: min(86vw, 520px) !important;
      max-width: calc(100vw - 92px) !important;
      transform: translateX(-50%) !important;
      padding: 14px 16px !important;
      color: #111827 !important;
      background: rgba(255, 255, 255, 0.97) !important;
      border: 1px solid rgba(34, 197, 94, 0.28) !important;
      border-radius: 16px !important;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24) !important;
      pointer-events: auto !important;
    }

    .mobile-week-assignment-popover.active {
      display: block !important;
    }

    .mobile-week-assignment-popover h3 {
      margin: 0 0 8px !important;
      font-size: 18px !important;
      line-height: 1.2 !important;
    }

    .mobile-week-assignment-popover p {
      margin: 0 !important;
      color: #374151 !important;
      font-size: 15px !important;
      line-height: 1.35 !important;
    }

    .mobile-week-assignment-popover button {
      margin-top: 12px !important;
      padding: 9px 14px !important;
      border: 0 !important;
      border-radius: 10px !important;
      background: #e5e7eb !important;
      color: #111827 !important;
      font-weight: 800 !important;
    }

    .mobile-week-tool-row {
      display: grid !important;
      grid-template-columns: 44px minmax(0, 1fr) 44px !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    .mobile-week-tool-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 11px !important;
    }

    .mobile-week-tool-actions {
      display: block !important;
      width: 100% !important;
    }

    .mobile-week-floating-controls .mobile-week-tool-actions button {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 48px !important;
      border: 0 !important;
      border-radius: 13px !important;
      background: #16a34a !important;
      border-color: #16a34a !important;
      color: #ffffff !important;
      font-size: 15px !important;
      font-weight: 900 !important;
    }

    .mobile-week-kw {
      text-align: center !important;
      min-width: 0 !important;
      font-size: 15px !important;
      font-weight: 950 !important;
      color: #111827 !important;
      white-space: nowrap !important;
    }

    .mobile-week-floating-controls button,
    .mobile-week-floating-controls select,
    .mobile-week-floating-controls input {
      min-height: 46px !important;
      padding: 9px 12px !important;
      border-radius: 12px !important;
      border: 1px solid #d1d5db !important;
      background: #ffffff !important;
      color: #111827 !important;
      font-size: 14px !important;
      font-weight: 800 !important;
      box-shadow: none !important;
      box-sizing: border-box !important;
      max-width: 100% !important;
    }

    .mobile-week-tool-row button {
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 1px solid #d7dee7 !important;
      border-radius: 999px !important;
      background: #f5f7fa !important;
      color: #344054 !important;
      font-size: 20px !important;
      line-height: 1 !important;
    }

    .mobile-week-floating-controls select,
    .mobile-week-floating-controls input[type="date"] {
      width: 100% !important;
      min-width: 0 !important;
    }

    .mobile-week-tool-label {
      display: block !important;
      margin-bottom: 5px !important;
      color: #475467 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
    }

    .mobile-week-floating-controls label {
      display: block !important;
      min-width: 0 !important;
      width: 100% !important;
    }

    @media (max-width: 340px) {
      .mobile-week-floating-controls {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        padding: 13px !important;
        border-radius: 17px !important;
      }

      .mobile-week-tool-row {
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        gap: 6px !important;
      }

      .mobile-week-kw {
        font-size: 14px !important;
      }
    }

    .mobile-week-viewport {
      position: absolute !important;
      inset: 0 !important;
      overflow: hidden !important;
      background: #fff !important;
      touch-action: none !important;
    }

    .mobile-week-scale {
      position: absolute !important;
      left: 0;
      top: 0;
      transform-origin: top left;
    }

    .mobile-week-scale .planner {
      width: 1180px !important;
      min-width: 1180px !important;
      margin: 0 !important;
      border-radius: 0 !important;
    }

    html.mobile-week-open,
    body.mobile-week-open {
      overflow: hidden !important;
      overscroll-behavior: none !important;
      touch-action: none !important;
    }

    .project-nav-button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .project-nav-pin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      color: #16a34a;
      font-size: 18px;
      line-height: 1;
    }

    .mobile-project-section-toggle,
    .project-section-backdrop {
      display: none;
    }

    .file-security-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }

    .file-security-badge.verified {
      color: #166534;
      background: #dcfce7;
      border: 1px solid #86efac;
    }

    .file-security-badge.unverified {
      color: #92400e;
      background: #fef3c7;
      border: 1px solid #facc15;
    }

    .file-security-badge.failed {
      color: #991b1b;
      background: #fee2e2;
      border: 1px solid #fca5a5;
    }

    .doc-image-security-panel {
      display: grid;
      gap: 3px;
      margin: 10px 0 0;
      padding: 10px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #f8fafc;
      color: #475569;
      font-size: 13px;
      line-height: 1.35;
    }

    .doc-image-security-panel.verified {
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }

    .doc-image-security-panel.failed {
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-main-folder {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-main-toggle {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 11px 0 !important;
      border-radius: 0 !important;
      color: #4b5563 !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-main-folder.expanded .plan-main-toggle strong {
      color: #16a34a !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-subfolder {
      margin: 4px 0 12px !important;
      padding: 6px 0 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-subfolder.active {
      background: transparent !important;
      border: 0 !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-subfolder-title {
      pointer-events: auto;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      color: #111827 !important;
    }

    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-subfolder-title strong,
    body.force-mobile-preview #projectPlatform .project-file-section-plans .plan-subfolder.active .plan-subfolder-title strong {
      color: #111827 !important;
    }

    @media (min-width: 901px) {
      #projectPlatformContent {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 18px;
        align-items: start;
      }

      #projectPlatform .project-section-switch {
        position: sticky;
        top: 96px;
        display: grid;
        gap: 8px;
        align-self: start;
        width: 100%;
        padding: 12px;
        border: 1px solid #d7e5d0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
      }

      #projectPlatform .project-section-switch strong {
        display: block;
        margin-bottom: 4px;
        color: #334155;
      }

      #projectPlatform .project-section-switch button {
        justify-content: flex-start;
        width: 100%;
        min-height: 38px;
        padding: 9px 12px;
        border-radius: 8px;
        text-align: left;
      }

      #projectPlatform .project-section-switch button.active {
        background: #dff3df;
        color: #166534;
        border-color: #9fd19f;
      }

      #projectPlatform .project-main-area,
      #projectPlatform .file-card,
      #projectPlatform .project-file-section {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      #projectPlatform .delivery-mobile-list {
        display: none !important;
      }

      #projectPlatform .delivery-table-wrap {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow: auto;
      }

      #projectPlatform .project-file-section-plans .folder-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
      }

      #projectPlatform .project-file-section-plans .folder-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        overflow: hidden;
      }

      #projectPlatform .project-file-section-plans .folder-open {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        text-align: left;
        overflow: hidden;
      }

      #projectPlatform .project-file-section-plans .folder-open strong,
      #projectPlatform .project-file-section-plans .folder-open .file-meta {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #projectPlatform .project-file-section-plans .folder-actions {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        min-width: max-content;
      }

      #projectPlatform .project-file-section-plans .folder-actions button {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 13px;
        line-height: 1;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files > .file-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px 12px;
        border: 1px solid var(--soft-border);
        border-radius: 8px;
        background: #ffffff;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files > .file-row > div {
        min-width: 0;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files .file-title,
      #projectPlatform .project-file-section-plans .selected-folder-files .file-meta {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files .file-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: nowrap;
        min-width: max-content;
      }

      #projectPlatform .project-file-section-plans .selected-folder-files .file-actions button {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 13px;
        line-height: 1;
      }
    }

    @media (max-width: 900px) {
      #projectPlatform .project-close-button {
        display: none !important;
      }

      .mobile-project-section-toggle {
        display: none !important;
      }

      #projectPlatform .project-section-switch {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: var(--bbs-project-nav-bottom, 0px);
        top: auto;
        z-index: 5201;
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
        gap: 0;
        height: calc(76px + env(safe-area-inset-bottom, 0px));
        min-height: calc(76px + env(safe-area-inset-bottom, 0px));
        padding: 7px max(6px, env(safe-area-inset-left, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
        margin: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 18px 18px 0 0 !important;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(14px);
        transform: none !important;
        overflow: visible;
        align-items: start;
      }

      #projectPlatform .project-section-switch button {
        position: relative;
        display: grid !important;
        place-items: center !important;
        gap: 3px !important;
        min-width: 0 !important;
        min-height: 62px !important;
        height: 62px !important;
        width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 5px 2px !important;
        border-bottom: 0 !important;
        border-radius: 14px !important;
        color: #6b7280 !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        white-space: normal !important;
        justify-content: center !important;
        touch-action: manipulation;
      }

      #projectPlatform .project-section-switch button.active {
        color: #16a34a !important;
        background: #ecfdf3 !important;
      }

      #projectPlatform .project-section-switch button::before {
        content: "";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        background: #f3f4f6;
        color: currentColor;
        font-size: 16px;
        font-weight: 950;
        box-sizing: border-box;
      }

      #projectPlatform .project-section-switch button::after {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        color: currentColor;
        box-sizing: border-box;
        pointer-events: none;
      }

      #projectPlatform .project-section-switch button[data-project-section="plans"]::before {
        content: "";
      }

      #projectPlatform .project-section-switch button[data-project-section="plans"]::after {
        width: 17px;
        height: 20px;
        border: 2px solid currentColor;
        border-radius: 3px;
        background:
          linear-gradient(currentColor, currentColor) 4px 5px / 9px 2px no-repeat,
          linear-gradient(currentColor, currentColor) 4px 10px / 7px 2px no-repeat,
          linear-gradient(135deg, transparent 0 46%, currentColor 47% 55%, transparent 56% 100%) 3px 3px / 11px 11px no-repeat;
      }

      #projectPlatform .project-section-switch button[data-project-section="photos"]::before {
        content: "";
      }

      #projectPlatform .project-section-switch button[data-project-section="photos"]::after {
        width: 18px;
        height: 18px;
        border: 2px solid currentColor;
        border-radius: 3px;
        background:
          linear-gradient(currentColor, currentColor) 50% 0 / 2px 100% no-repeat,
          linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat;
      }

      #projectPlatform .project-section-switch button[data-project-section="delivery"]::before {
        content: "";
      }

      #projectPlatform .project-section-switch button[data-project-section="delivery"]::after {
        width: 18px;
        height: 18px;
        border: 2px solid currentColor;
        border-radius: 3px;
        background:
          linear-gradient(currentColor, currentColor) 4px 5px / 10px 2px no-repeat,
          linear-gradient(currentColor, currentColor) 4px 10px / 10px 2px no-repeat;
      }

      #projectPlatform .project-section-switch button[data-project-section="chat"]::before {
        content: "";
      }

      #projectPlatform .project-section-switch button[data-project-section="chat"]::after {
        width: 20px;
        height: 15px;
        top: 14px;
        border: 2px solid currentColor;
        border-radius: 4px;
        background:
          linear-gradient(35deg, transparent 0 43%, currentColor 44% 52%, transparent 53% 100%) left top / 50% 100% no-repeat,
          linear-gradient(-35deg, transparent 0 43%, currentColor 44% 52%, transparent 53% 100%) right top / 50% 100% no-repeat;
      }

      #projectPlatform .project-section-switch button[data-project-section="tasks"]::before {
        content: "✓";
        font-size: 18px;
        line-height: 1;
      }

      #projectPlatform .project-section-switch button[data-project-section="tasks"]::after {
        content: none;
      }

      #projectPlatform .project-section-switch button[data-project-section="timeproof"]::before {
        content: "";
      }

      #projectPlatform .project-section-switch button[data-project-section="timeproof"]::after {
        width: 18px;
        height: 18px;
        border: 2px solid currentColor;
        border-radius: 999px;
        background:
          linear-gradient(currentColor, currentColor) 50% 3px / 2px 7px no-repeat,
          linear-gradient(currentColor, currentColor) 50% 50% / 6px 2px no-repeat;
      }

      #projectPlatform .project-section-switch strong {
        display: none !important;
      }

      #projectPlatform .project-file-section-plans .plan-main-folder {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
      }

      #projectPlatform .project-file-section-plans .plan-main-toggle {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 11px 0 !important;
        border-radius: 0 !important;
        color: #4b5563 !important;
      }

      #projectPlatform .project-file-section-plans .plan-main-folder.expanded .plan-main-toggle strong {
        color: #16a34a !important;
      }

      #projectPlatform .project-file-section-plans .plan-subfolder {
        margin: 4px 0 12px !important;
        padding: 6px 0 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      #projectPlatform .project-file-section-plans .plan-subfolder.active {
        background: transparent !important;
        border: 0 !important;
      }

      #projectPlatform .project-file-section-plans .plan-subfolder-head {
        margin: 0 0 5px !important;
      }

      #projectPlatform .project-file-section-plans .plan-subfolder-title {
        pointer-events: auto;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: #111827 !important;
      }

      #projectPlatform .project-file-section-plans .plan-subfolder-title strong,
      #projectPlatform .project-file-section-plans .plan-subfolder.active .plan-subfolder-title strong {
        color: #111827 !important;
      }

      #projectPlatform {
        width: 100vw !important;
        width: 100dvw !important;
        max-width: 100vw !important;
        max-width: 100dvw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50dvw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50dvw) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
      }

      #projectPlatform .project-nav-button {
        min-width: 0;
        padding: 8px 10px;
        border-radius: 999px;
      }

      #projectPlatform .project-nav-button span:last-child {
        font-size: 0;
      }

      #projectPlatform .project-nav-button span:last-child::after {
        content: "Navigation";
        font-size: 13px;
      }

      #projectPlatform > .settings-head {
        width: calc(100% - 18px) !important;
        max-width: 520px !important;
        margin: 8px auto 12px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(20, 83, 45, 0.16);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
      }

      #projectPlatform > .settings-head h2 {
        font-size: 24px;
        line-height: 1.08;
        margin-bottom: 6px;
      }

      #projectPlatform > .settings-head .small-info {
        font-size: 13px;
        line-height: 1.35;
      }

      #projectPlatformContent,
      #projectPlatform .project-main-area,
      #projectPlatform .project-main-area > *,
      #projectPlatform .file-card,
      #projectPlatform .project-file-section,
      #projectPlatform .project-chat-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
      }

      #projectPlatform {
        overflow-x: hidden !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
      }

      #projectPlatformContent {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        overflow-x: hidden !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
      }

      #projectPlatform .project-main-area {
        grid-column: 1 / -1 !important;
      }

      #projectPlatform .file-card {
        padding: 14px !important;
      }

      #projectPlatform .file-card h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      #projectPlatform .project-main-area.project-section-photos .project-file-section-plans,
      #projectPlatform .project-main-area.project-section-delivery .project-file-section-plans {
        display: none !important;
      }

      #projectPlatform .project-main-area.project-section-photos {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #projectPlatform .project-main-area.project-section-photos .photo-doc-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        padding: 12px;
      }

      #projectPlatform .project-main-area.project-section-photos .photo-doc-card h3 {
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      #projectPlatform .photo-doc-card .doc-toolbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px;
        align-items: center;
        width: 100%;
      }

      #projectPlatform .photo-doc-card .doc-toolbar input[type="date"] {
        grid-column: 2;
        grid-row: 2;
        width: 138px;
        justify-self: center;
        min-height: 32px;
        padding: 4px 8px;
        font-size: 13px;
      }

      #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 999px;
        font-size: 24px;
        line-height: 1;
      }

      #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn:first-child {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
      }

      #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn:last-child {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }

      #projectPlatform .photo-doc-card .doc-toolbar strong {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
        white-space: nowrap;
        font-size: 14px;
      }

      #projectPlatform .photo-doc-card .doc-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        column-gap: clamp(6px, 1.6vw, 8px) !important;
        row-gap: clamp(7px, 1.8vw, 9px) !important;
        width: calc(100% - 2px);
        max-width: 100%;
        margin-inline: auto;
      }

      #projectPlatform .photo-doc-card .doc-calendar-head {
        min-width: 0;
        text-align: center;
        color: #64748b;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
        padding: 2px 0;
      }

      #projectPlatform .photo-doc-card .doc-calendar > div {
        min-width: 0;
      }

      #projectPlatform .photo-doc-card .doc-day {
        min-width: 0;
        min-height: clamp(40px, 12vw, 52px);
        aspect-ratio: 1.12 / 1;
        padding: clamp(3px, 1vw, 5px);
        gap: 2px;
        border: 1px solid #d5dbe3 !important;
        border-radius: clamp(6px, 1.8vw, 9px);
        background: #f8fafc !important;
        box-shadow: none !important;
        overflow: hidden;
      }

      #projectPlatform .photo-doc-card .doc-day:not(.has-content):hover,
      #projectPlatform .photo-doc-card .doc-day:not(.has-content):focus {
        background: #f1f5f9 !important;
      }

      #projectPlatform .photo-doc-card .doc-day.has-content {
        border: 2px solid #16a34a !important;
        background: #f0fdf4 !important;
        box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.22) !important;
      }

      #projectPlatform .photo-doc-card .doc-day-number {
        font-size: clamp(9px, 2.8vw, 11px);
        line-height: 1;
      }

      #projectPlatform .photo-doc-card .doc-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        width: 100%;
      }

      #projectPlatform .photo-doc-card .doc-thumbs img {
        border-radius: 2px;
        aspect-ratio: 1;
      }

      #projectPlatform .photo-doc-card .project-upload-button {
        display: none !important;
      }

      #projectPlatform .project-main-area.project-section-photos .doc-overview-add {
        position: fixed !important;
        right: calc(18px + env(safe-area-inset-right)) !important;
        bottom: calc(112px + env(safe-area-inset-bottom));
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 50% !important;
        background: #16a34a !important;
        color: #ffffff !important;
        z-index: 1200;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24) !important;
      }

      #projectPlatform .project-chat-card {
        padding: 0 !important;
        overflow: hidden;
      }

      #projectPlatform .project-chat-shell {
        display: block !important;
        min-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
      }

      #projectPlatform .project-chat-shell .chat-window {
        height: calc(100dvh - 250px);
        min-height: 360px;
        max-height: 650px;
        border: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
      }

      #projectPlatform .project-chat-shell .chat-messages {
        max-height: none !important;
      }

      #projectPlatform .delivery-table-wrap {
        display: none !important;
      }

      #projectPlatform .delivery-mobile-list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
      }

      #projectPlatform .delivery-mobile-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 0;
        background: transparent;
        min-width: 0;
      }

      #projectPlatform .delivery-mobile-card strong {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      #projectPlatform .delivery-mobile-card .time-mini-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      #projectPlatform .delivery-mobile-card .delivery-action-link {
        font-size: 11px;
      }

      #projectPlatform .delivery-filter-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        box-sizing: border-box;
      }

      #projectPlatform .delivery-filter-bar > div {
        min-width: 0;
        width: 100%;
      }

      #projectPlatform .delivery-filter-bar input,
      #projectPlatform .delivery-filter-bar select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      #projectPlatform .photo-doc-card .doc-day .file-meta,
      #projectPlatform .photo-doc-card .doc-day-note,
      #projectPlatform .photo-doc-card .doc-note-mark {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos .project-file-section-plans,
    body.force-mobile-preview #projectPlatform .project-main-area.project-section-delivery .project-file-section-plans {
      display: none !important;
    }

    body.force-mobile-preview #projectPlatform,
    body.force-mobile-preview #projectPlatformContent,
    body.force-mobile-preview #projectPlatform .project-main-area,
    body.force-mobile-preview #projectPlatform .project-main-area > *,
    body.force-mobile-preview #projectPlatform .file-card,
    body.force-mobile-preview #projectPlatform .project-file-section,
    body.force-mobile-preview #projectPlatform .project-chat-card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;
    }

    body.force-mobile-preview #projectPlatform {
      width: 100vw !important;
      width: 100dvw !important;
      max-width: 100vw !important;
      max-width: 100dvw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-left: calc(50% - 50dvw) !important;
      margin-right: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50dvw) !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-radius: 0 !important;
      overflow-x: hidden !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.force-mobile-preview #projectPlatform > .settings-head {
      width: calc(100% - 18px) !important;
      max-width: 520px !important;
      margin: 8px auto 12px !important;
      padding: 12px 14px !important;
      border: 1px solid rgba(20, 83, 45, 0.16);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    }

    body.force-mobile-preview #projectPlatform > .settings-head h2 {
      font-size: 24px;
      line-height: 1.08;
      margin-bottom: 6px;
    }

    body.force-mobile-preview #projectPlatform > .settings-head .small-info {
      font-size: 13px;
      line-height: 1.35;
    }

    body.force-mobile-preview #projectPlatform .project-section-switch {
      height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
      min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
      bottom: var(--bbs-project-nav-bottom, 0px) !important;
      transform: none !important;
      align-items: start !important;
    }

    body.force-mobile-preview #projectPlatform .project-section-switch button {
      min-height: 62px !important;
      height: 62px !important;
    }

    body.force-mobile-preview #projectPlatformContent {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
      overflow-x: hidden !important;
    }

    body.force-mobile-preview #projectPlatform .project-main-area {
      grid-column: 1 / -1 !important;
    }

    body.force-mobile-preview #projectPlatform .file-card {
      padding: 14px !important;
    }

    body.force-mobile-preview #projectPlatform .file-card h3 {
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos .photo-doc-card {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding: 12px;
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos .photo-doc-card h3 {
      font-size: 22px;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      gap: 6px;
      align-items: center;
      width: 100%;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar input[type="date"] {
      grid-column: 2;
      grid-row: 2;
      width: 138px;
      justify-self: center;
      min-height: 32px;
      padding: 4px 8px;
      font-size: 13px;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn {
      width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 999px;
      font-size: 24px;
      line-height: 1;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn:first-child {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar .doc-month-btn:last-child {
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-toolbar strong {
      grid-column: 2;
      grid-row: 1;
      text-align: center;
      white-space: nowrap;
      font-size: 14px;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-calendar {
      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
      column-gap: clamp(6px, 1.6vw, 8px) !important;
      row-gap: clamp(7px, 1.8vw, 9px) !important;
      width: calc(100% - 2px);
      max-width: 100%;
      margin-inline: auto;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-calendar-head {
      min-width: 0;
      text-align: center;
      color: #64748b;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      padding: 2px 0;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day {
      min-width: 0;
      min-height: clamp(40px, 12vw, 52px);
      aspect-ratio: 1.12 / 1;
      padding: clamp(3px, 1vw, 5px);
      gap: 2px;
      border: 1px solid #d5dbe3 !important;
      border-radius: clamp(6px, 1.8vw, 9px);
      background: #f8fafc !important;
      box-shadow: none !important;
      overflow: hidden;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day:not(.has-content):hover,
    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day:not(.has-content):focus {
      background: #f1f5f9 !important;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day.has-content {
      border: 2px solid #16a34a !important;
      background: #f0fdf4 !important;
      box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.22) !important;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day-number {
      font-size: clamp(9px, 2.8vw, 11px);
      line-height: 1;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-thumbs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      width: 100%;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-thumbs img {
      border-radius: 2px;
      aspect-ratio: 1;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .project-upload-button {
      display: none !important;
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos .doc-overview-add {
      position: fixed !important;
      right: calc(18px + env(safe-area-inset-right)) !important;
      bottom: calc(112px + env(safe-area-inset-bottom));
      width: 56px !important;
      min-width: 56px !important;
      max-width: 56px !important;
      height: 56px !important;
      min-height: 56px !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box;
      border: 0 !important;
      border-radius: 50% !important;
      background: #16a34a !important;
      color: #ffffff !important;
      z-index: 1200;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24) !important;
    }

    body.force-mobile-preview #projectPlatform .project-main-area.project-section-tasks .task-add-floating {
      position: fixed !important;
      right: calc(18px + env(safe-area-inset-right, 0px)) !important;
      bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
      width: 56px !important;
      min-width: 56px !important;
      max-width: 56px !important;
      height: 56px !important;
      min-height: 56px !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box;
      border: 0 !important;
      border-radius: 50% !important;
      background: #16a34a !important;
      color: #ffffff !important;
      z-index: 1200;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24) !important;
    }

    body.force-mobile-preview #tasksPanel .task-global-add-fab,
    body.real-mobile-app #tasksPanel .task-global-add-fab {
      position: fixed !important;
      right: calc(18px + env(safe-area-inset-right, 0px)) !important;
      bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
      z-index: 1200;
      display: inline-flex !important;
    }

    body.force-mobile-preview #projectPlatform .project-chat-card {
      padding: 0 !important;
      overflow: hidden;
    }

    body.force-mobile-preview #projectPlatform .project-chat-shell {
      display: block !important;
      min-height: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    body.force-mobile-preview #projectPlatform .project-chat-shell .chat-window {
      height: calc(100dvh - 250px);
      min-height: 360px;
      max-height: 650px;
      border: 0 !important;
      border-radius: 16px !important;
      overflow: hidden !important;
    }

    body.force-mobile-preview #projectPlatform .project-chat-shell .chat-messages {
      max-height: none !important;
    }

    body.force-mobile-preview #projectPlatform .delivery-table-wrap {
      display: none !important;
    }

    body.force-mobile-preview #projectPlatform .delivery-mobile-list {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    body.force-mobile-preview #projectPlatform .delivery-mobile-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
      padding: 10px 0;
      border: 0;
      border-bottom: 1px solid #e5e7eb;
      border-radius: 0;
      background: transparent;
      min-width: 0;
    }

    body.force-mobile-preview #projectPlatform .delivery-mobile-card strong {
      display: block;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    body.force-mobile-preview #projectPlatform .delivery-mobile-card .time-mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    body.force-mobile-preview #projectPlatform .delivery-mobile-card .delivery-action-link {
      font-size: 11px;
    }

    body.force-mobile-preview #projectPlatform .delivery-filter-bar {
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }

    body.force-mobile-preview #projectPlatform .delivery-filter-bar > div {
      min-width: 0;
      width: 100%;
    }

    body.force-mobile-preview #projectPlatform .delivery-filter-bar input,
    body.force-mobile-preview #projectPlatform .delivery-filter-bar select {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day .file-meta,
    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day-note,
    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-note-mark {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .storage-overview {
      display: grid;
      gap: 12px;
    }

    .storage-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }

    .storage-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 14px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .storage-card strong {
      display: block;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .storage-size {
      display: block;
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 4px;
    }

    .storage-warning {
      border-color: rgba(220, 38, 38, 0.24);
      background: #fff7f7;
    }
    header {
      position: relative;
    }

    .top-actions {
      position: relative;
      justify-content: flex-end;
    }

    .view-switch {
      height: 30px;
      min-width: 0 !important;
      width: auto;
      max-width: 145px;
      padding: 4px 24px 4px 8px;
      border-radius: 10px;
      line-height: 1.1;
      font-size: 11px;
      margin-left: 4px;
    }

    .top-role-switch {
      position: static;
      flex: 0 0 auto;
    }

    body.force-mobile-preview .top-role-switch {
      display: none !important;
    }

    @media (min-width: 781px) {
      header {
        flex-wrap: nowrap;
        gap: clamp(6px, 1vw, 18px);
        padding: clamp(10px, 1.1vw, 18px) clamp(10px, 1.1vw, 22px);
      }

      .brand-lockup {
        flex: 0 1 clamp(150px, 24vw, 360px);
        width: clamp(150px, 24vw, 360px);
        min-width: 0;
        gap: clamp(6px, 0.7vw, 12px);
      }

      .app-logo {
        width: clamp(32px, 2.6vw, 52px);
        height: clamp(32px, 2.6vw, 52px);
        border-radius: clamp(8px, 0.6vw, 12px);
      }

      header h1 {
        font-size: clamp(14px, 1.2vw, 24px);
        line-height: 1.1;
        white-space: nowrap;
      }

      header .sub {
        font-size: clamp(10px, 0.7vw, 14px);
        line-height: 1.2;
        white-space: nowrap;
      }

      .top-actions {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: clamp(3px, 0.8vw, 16px);
        justify-content: space-between;
      }

      body header .top-actions > button:not(.mobile-menu-toggle) {
        appearance: none;
        min-width: 0 !important;
        min-height: 30px !important;
        flex: 0 1 auto;
        padding: 4px 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: #d1d5db !important;
        font-size: clamp(8px, 0.72vw, 14px);
        line-height: 1.2;
        white-space: nowrap !important;
      }

      body header .top-actions > button:not(.mobile-menu-toggle):hover {
        background: transparent !important;
        color: #ffffff !important;
      }

      body.employee-view header .top-actions > button.top-nav-active:not(.mobile-menu-toggle) {
        color: #69ed91 !important;
      }

    body.admin-view header .top-actions > button.top-nav-active:not(.mobile-menu-toggle) {
      color: #f6c65b !important;
    }

    .admin-undo-icon {
      width: 34px;
      min-width: 34px !important;
      height: 34px;
      padding: 0 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
    }

    .top-actions .message-badge {
      position: static;
      display: inline-flex;
      margin-left: 3px;
        vertical-align: middle;
        transform: none;
      }

      .top-actions .message-badge.hidden {
        display: none !important;
      }

      .top-role-switch {
        flex: 0 1 auto;
        width: clamp(88px, 7.3vw, 145px);
        max-width: clamp(88px, 7.3vw, 145px);
        margin-left: clamp(2px, 0.25vw, 4px);
        padding-left: clamp(5px, 0.45vw, 8px);
        padding-right: clamp(18px, 1.2vw, 24px);
        font-size: clamp(8px, 0.58vw, 11px);
        border-color: rgba(255, 255, 255, 0.6);
      }
    }

    @media (min-width: 781px) and (max-width: 1400px) {
      header .sub {
        display: none;
      }
    }

    @media (max-width: 780px) {
      .top-role-switch {
        display: none !important;
      }

      #timeExportEmployeeList {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }
    }

    @media (max-width: 760px) {
      .mobile-project-drawer .mobile-project-list,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-list {
        background: #ffffff !important;
      }

      .mobile-project-drawer .mobile-project-item,
      .mobile-project-drawer .mobile-project-item:hover,
      .mobile-project-drawer .mobile-project-item:focus,
      .mobile-project-drawer .mobile-project-item:active,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item:hover,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item:focus,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item:active {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
      }

      .mobile-project-drawer .mobile-project-item.current-project,
      .mobile-project-drawer .mobile-project-item.current-project:hover,
      .mobile-project-drawer .mobile-project-item.current-project:focus,
      .mobile-project-drawer .mobile-project-item.current-project:active,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item.current-project,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item.current-project:hover,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item.current-project:focus,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item.current-project:active {
        border-left: 4px solid #16a34a !important;
        background: #ecfdf5 !important;
        background-image: none !important;
        padding-left: 12px;
      }

      .mobile-project-drawer .mobile-project-item.current-project .mobile-project-copy strong {
        color: #15803d !important;
      }

      .mobile-project-drawer .mobile-project-item:not(.current-project):hover .mobile-project-copy strong,
      .mobile-project-drawer .mobile-project-item:not(.current-project):focus .mobile-project-copy strong,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item:not(.current-project):hover .mobile-project-copy strong,
      body.force-mobile-preview .mobile-project-drawer .mobile-project-item:not(.current-project):focus .mobile-project-copy strong {
        color: #374151 !important;
      }

      .project-overview-desktop {
        display: none;
      }

      .project-overview-mobile {
        display: block;
      }

      .project-overview-list {
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .project-overview-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        min-height: 44px;
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid var(--soft-border);
        border-radius: 0;
        background: transparent;
        color: var(--text);
        text-align: left;
        box-shadow: none;
      }

      .project-overview-row:hover {
        background: transparent;
      }

      .project-overview-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .project-overview-code-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
      }

      .project-overview-title,
      .project-overview-address,
      .project-overview-meta {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .project-overview-title {
        -webkit-line-clamp: 2;
        color: var(--text);
      }

      .project-overview-address,
      .project-overview-meta {
        -webkit-line-clamp: 2;
        color: var(--muted);
      }

      .project-overview-action {
        align-self: flex-end;
        color: var(--accent);
        text-decoration: none;
        font-weight: 800;
        padding-top: 2px;
      }
    }

    body.force-mobile-preview .project-overview-desktop {
      display: none;
    }

    body.force-mobile-preview .project-overview-mobile {
      display: block;
    }

    body.force-mobile-preview .project-overview-list {
      display: block;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    body.force-mobile-preview .project-overview-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      width: 100%;
      min-height: 44px;
      padding: 12px 0;
      border: 0;
      border-bottom: 1px solid var(--soft-border);
      border-radius: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      box-shadow: none;
    }

    body.force-mobile-preview .project-overview-row:hover {
      background: transparent;
    }

    body.force-mobile-preview .project-overview-main {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    body.force-mobile-preview .project-overview-code-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    body.force-mobile-preview .project-overview-title,
    body.force-mobile-preview .project-overview-address,
    body.force-mobile-preview .project-overview-meta {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    body.force-mobile-preview .project-overview-title {
      -webkit-line-clamp: 2;
      color: var(--text);
    }

    body.force-mobile-preview .project-overview-address,
    body.force-mobile-preview .project-overview-meta {
      -webkit-line-clamp: 2;
      color: var(--muted);
    }

    body.force-mobile-preview .project-overview-action {
      align-self: flex-end;
      color: var(--accent);
      text-decoration: none;
      font-weight: 800;
      padding-top: 2px;
    }

    /*
     * UI component system
     * Shared, final layout layer for forms, cards and actions. It intentionally
     * leaves the established BBS colours and feature-specific views untouched.
     */
    :root {
      --ui-space-1: 4px;
      --ui-space-2: 8px;
      --ui-space-3: 12px;
      --ui-space-4: 16px;
      --ui-space-6: 24px;
      --ui-space-8: 32px;
      --ui-control-height: 40px;
      --ui-control-radius: 8px;
      --ui-card-padding: 24px;
      --ui-field-short: 150px;
      --ui-field-date: 176px;
      --ui-field-time: 132px;
      --ui-field-select: 220px;
      --ui-field-name: 260px;
      --ui-field-email: 340px;
      --ui-field-password: 300px;
      --ui-field-search: 320px;
      --ui-field-long: 680px;
      --ui-focus-ring: 0 0 0 3px rgba(22, 163, 74, 0.18);
      --ui-danger: #dc2626;
      --ui-danger-hover: #b91c1c;
    }

    /* Reusable component aliases for new and existing markup. */
    .ui-card,
    .form-panel,
    .account-box,
    .time-card,
    .file-card,
    .storage-card {
      padding: var(--ui-card-padding);
    }

    .ui-form-group,
    .account-line,
    .auth-form-grid > div,
    .auth-register-grid > div,
    .form-panel .grid > div,
    .settings-content .grid > div,
    .edit-modal .grid > div {
      display: grid;
      align-content: start;
      gap: 7px;
      min-width: 0;
    }

    .ui-form-row,
    .auth-form-grid,
    .auth-register-grid,
    .form-panel > .grid,
    .settings-content > .grid,
    .edit-modal > .grid {
      column-gap: var(--ui-space-4);
      row-gap: var(--ui-space-4);
      align-items: start;
    }

    .ui-action-bar,
    .form-actions,
    .settings-head,
    .toolbar,
    .toolbar-left,
    .toolbar-right,
    .time-mini-actions {
      gap: var(--ui-space-3);
    }

    .form-panel,
    .project-platform,
    .main-home-panel,
    .settings-layout {
      margin-bottom: var(--ui-space-6);
    }

    .settings-layout {
      gap: var(--ui-space-6);
    }

    label {
      margin-bottom: 0;
      line-height: 1.35;
    }

    .small-info,
    .auth-field-note,
    .delivery-suggestion-hint {
      margin-top: var(--ui-space-2);
      line-height: 1.45;
    }

    .ui-text-input,
    .ui-select,
    .ui-date-input,
    .ui-password-input,
    .form-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .form-panel select,
    .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .settings-content select,
    .edit-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .edit-modal select,
    .account-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .account-box select {
      width: min(100%, var(--ui-field-current, var(--ui-field-name))) !important;
      min-width: 0;
      min-height: var(--ui-control-height);
      padding: 8px 11px;
      border-radius: var(--ui-control-radius);
      line-height: 1.25;
      justify-self: start;
    }

    .form-panel select,
    .settings-content select,
    .edit-modal select,
    .account-box select,
    .ui-select {
      width: min(100%, var(--ui-field-select)) !important;
    }

    input[type="date"],
    .ui-date-input {
      --ui-field-current: var(--ui-field-date);
      width: min(100%, var(--ui-field-date)) !important;
      inline-size: min(100%, var(--ui-field-date)) !important;
    }

    input[type="time"] {
      --ui-field-current: var(--ui-field-time);
      width: min(100%, var(--ui-field-time)) !important;
      inline-size: min(100%, var(--ui-field-time)) !important;
    }

    input[type="email"] {
      --ui-field-current: var(--ui-field-email);
    }

    input[type="search"],
    [role="searchbox"],
    [data-ui-width="search"] {
      --ui-field-current: var(--ui-field-search);
    }

    input[data-ui-width="short"],
    input[id*="Code"],
    input[id*="code"] {
      --ui-field-current: var(--ui-field-short);
    }

    textarea,
    [data-ui-width="long"] {
      width: min(100%, var(--ui-field-long)) !important;
      max-width: var(--ui-field-long);
      min-height: 92px;
      line-height: 1.45;
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    button:focus-visible {
      outline: 2px solid #15803d;
      outline-offset: 2px;
      box-shadow: var(--ui-focus-ring);
    }

    /* PasswordInput */
    .password-toggle-wrap {
      width: min(100%, var(--ui-field-password));
      max-width: 100%;
      justify-self: start;
    }

    .password-toggle-wrap input,
    input[type="password"],
    input[data-password-toggle="true"] {
      --ui-field-current: var(--ui-field-password);
      width: min(100%, var(--ui-field-password)) !important;
      max-width: var(--ui-field-password);
      min-height: var(--ui-control-height);
      padding-right: 48px !important;
    }

    .password-eye-button,
    body.admin-view .password-eye-button,
    body.employee-view .password-eye-button {
      right: 6px;
      width: 36px;
      min-width: 36px !important;
      height: 36px;
      min-height: 36px;
      padding: 0 !important;
      border-radius: 8px;
      background: transparent !important;
      color: #64748b !important;
    }

    .password-eye-button:hover,
    .password-eye-button:focus-visible,
    .password-eye-button.visible,
    body.admin-view .password-eye-button:hover,
    body.employee-view .password-eye-button:hover {
      background: #eef2f7 !important;
      color: #14532d !important;
    }

    .password-eye-button svg {
      width: 20px;
      height: 20px;
      stroke-width: 2;
    }

    /* Checkbox */
    .ui-checkbox,
    input[type="checkbox"],
    input[type="radio"] {
      width: 20px;
      min-width: 20px;
      height: 20px;
      margin: 0;
      flex: 0 0 20px;
      align-self: center;
      accent-color: #15803d;
    }

    .check-pill,
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
      display: inline-flex;
      align-items: center;
      gap: var(--ui-space-2);
      min-height: 40px;
      width: fit-content;
      max-width: 100%;
    }

    /* Button */
    .ui-button,
    button:not(.password-eye-button):not(.mobile-menu-toggle):not(.mobile-menu-close):not(.admin-undo-icon):not(.doc-month-btn):not(.camera-capture-button):not(.camera-close-button):not(.camera-done-button):not(.camera-flash-button):not(.camera-switch-button):not(.camera-finish-arrow):not(.time-legend-info) {
      width: auto;
      min-width: min(96px, 100%);
      min-height: var(--ui-control-height);
      padding: 9px 16px;
      line-height: 1.25;
      white-space: normal;
    }

    button.danger,
    body.admin-view button.danger,
    body.employee-view button.danger {
      background: var(--ui-danger) !important;
      color: #ffffff !important;
    }

    button.danger:hover,
    body.admin-view button.danger:hover,
    body.employee-view button.danger:hover {
      background: var(--ui-danger-hover) !important;
    }

    .form-actions {
      margin-top: var(--ui-space-4);
      padding-inline: 0;
      align-items: center;
    }

    @media (min-width: 1180px) {
      .form-panel > .grid,
      .settings-content > .grid,
      .edit-modal > .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (min-width: 761px) and (max-width: 1179px) {
      .form-panel > .grid,
      .settings-content > .grid,
      .edit-modal > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .settings-layout {
        grid-template-columns: 210px minmax(0, 1fr);
      }
    }

    @media (max-width: 760px) {
      :root {
        --ui-control-height: 44px;
        --ui-card-padding: 16px;
        --ui-field-password: 100%;
      }

      main {
        padding-left: var(--ui-space-4);
        padding-right: var(--ui-space-4);
      }

      .ui-form-row,
      .auth-form-grid,
      .auth-register-grid,
      .form-panel > .grid,
      .settings-content > .grid,
      .edit-modal > .grid,
      .settings-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--ui-space-4);
      }

      .form-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      .form-panel select,
      .form-panel textarea,
      .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      .settings-content select,
      .settings-content textarea,
      .edit-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      .edit-modal select,
      .edit-modal textarea,
      .account-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      .account-box select,
      .password-toggle-wrap {
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
      }

      .form-panel .password-toggle-wrap input,
      .settings-content .password-toggle-wrap input,
      .edit-modal .password-toggle-wrap input,
      .account-box .password-toggle-wrap input {
        width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
      }

      .form-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
      }

      .form-actions > button {
        width: 100%;
        min-height: 44px;
      }

      .mobile-day-controls button {
        width: 38px !important;
        min-width: 38px !important;
        padding-inline: 6px !important;
      }

      #homeEmployeeName,
      #accountEmployeeName {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.18;
        overflow-wrap: anywhere;
      }

      .settings-head {
        align-items: stretch;
      }

      .settings-head > button {
        width: 100%;
      }
    }
    @media (max-width: 340px) {
      #projectPlatform .project-main-area.project-section-photos .photo-doc-card {
        padding: 10px;
      }

      #projectPlatform .project-main-area.project-section-photos .photo-doc-card h3 {
        font-size: 20px;
      }

      #projectPlatform .photo-doc-card .doc-toolbar input[type="date"] {
        width: 124px;
        font-size: 12px;
      }

      #projectPlatform .photo-doc-card .doc-calendar {
        column-gap: 6px !important;
        row-gap: 7px !important;
      }

      #projectPlatform .photo-doc-card .doc-calendar-head {
        font-size: 9px;
      }

      #projectPlatform .photo-doc-card .doc-day {
        min-height: 38px;
        padding: 3px;
        border-radius: 6px;
      }

      #projectPlatform .photo-doc-card .doc-day-number {
        font-size: 9px;
      }
    }

    body.force-mobile-preview.mobile-time-entry-open #timeEntryCard .time-entry-scroll-area > .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.force-mobile-preview.mobile-time-entry-open #timeEntryCard .form-actions {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    body.force-mobile-preview.mobile-time-entry-open #timeEntryCard #timeSaveBtn {
      grid-column: 1 / -1 !important;
      grid-row: 1 !important;
    }

    body.force-mobile-preview.mobile-time-entry-open #timeEntryCard #timeAddEntryBtn {
      display: none !important;
    }

    /* iOS keeps an intrinsic inline size for date inputs. This final guard
       ensures the week filter date stays inside its responsive sheet. */
    .mobile-week-floating-controls #mobileWeekDateDraft {
      display: block !important;
      width: 100% !important;
      inline-size: 100% !important;
      min-width: 0 !important;
      min-inline-size: 0 !important;
      max-width: 100% !important;
      max-inline-size: 100% !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      text-align: left !important;
    }

    /* Visuelle Projektdokumentation: Monat -> Woche -> Tagesdetail. */
    .doc-overview-wrap {
      position: relative;
      min-width: 0;
    }

    .doc-line-icon {
      width: 20px;
      height: 20px;
      min-width: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
    }

    .doc-calendar .doc-day {
      position: relative;
      display: grid;
      grid-template-rows: auto minmax(22px, 1fr) auto;
      align-content: stretch;
    }

    #projectPlatform .photo-doc-card .doc-day.has-content,
    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day.has-content {
      border: 1px solid #86d79d !important;
      background: #ffffff !important;
      box-shadow: none !important;
    }

    #projectPlatform .photo-doc-card .doc-day.has-critical,
    body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day.has-critical {
      box-shadow: inset 0 2px 0 #dc2626 !important;
    }

    .doc-day-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
    }

    .doc-critical-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #dc2626;
      box-shadow: 0 0 0 2px #fee2e2;
    }

    .doc-day-icons {
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      gap: 3px;
      min-width: 0;
      overflow: hidden;
    }

    .doc-mini-event {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      min-width: 0;
      color: #475467;
    }

    .doc-mini-event.critical {
      color: #b91c1c;
    }

    .doc-mini-event .doc-line-icon {
      width: 15px;
      height: 15px;
      min-width: 15px;
    }

    .doc-mini-event small,
    .doc-more-count {
      color: inherit;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .doc-month-events {
      margin-top: 18px;
      border-top: 1px solid #e4e7ec;
      padding-top: 14px;
    }

    .doc-month-events > h4 {
      margin: 0 0 8px;
      color: #101828;
      font-size: 17px;
    }

    .doc-month-event-list {
      display: grid;
    }

    .doc-month-event-row {
      display: grid;
      grid-template-columns: minmax(88px, auto) 24px minmax(0, 1fr);
      align-items: start;
      gap: 9px;
      width: 100%;
      min-height: 52px;
      padding: 10px 2px;
      border: 0;
      border-bottom: 1px solid #e4e7ec;
      border-radius: 0;
      background: transparent;
      color: #344054;
      box-shadow: none;
      text-align: left;
    }

    .doc-month-event-row:hover,
    .doc-month-event-row:focus-visible {
      background: #f8faf9;
    }

    .doc-month-event-row time {
      color: #667085;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .doc-month-event-row > span {
      min-width: 0;
    }

    .doc-month-event-row strong,
    .doc-month-event-row small {
      display: block;
      overflow-wrap: anywhere;
    }

    .doc-month-event-row strong {
      color: #101828;
      font-size: 14px;
      line-height: 1.35;
    }

    .doc-month-event-row small {
      margin-top: 2px;
      color: #667085;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.4;
    }

    .doc-month-event-empty {
      margin: 0;
      padding: 8px 0 2px;
      color: #98a2b3;
      font-size: 13px;
    }

    .doc-week-toolbar {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .doc-week-toolbar strong {
      text-align: center;
      font-size: 14px;
    }

    .doc-week-list {
      display: grid;
      gap: 10px;
      max-height: min(680px, 68dvh);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 2px;
    }

    .doc-week-day {
      border: 1px solid #dbe2ea;
      border-radius: 14px;
      background: #ffffff;
      padding: 12px;
      cursor: pointer;
    }

    .doc-week-day > header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .doc-week-day > header .doc-status-bars {
      width: min(110px, 38%);
    }

    .doc-week-items,
    .doc-detail-list,
    .doc-detail-deliveries {
      display: grid;
      gap: 6px;
    }

    .doc-week-event,
    .doc-week-counter,
    .doc-detail-event,
    .doc-detail-note,
    .doc-detail-deliveries > div {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      width: 100%;
      min-width: 0;
      padding: 9px 10px;
      border: 0;
      border-left: 3px solid #f59e0b;
      border-radius: 10px;
      background: #fff7ed;
      color: #344054;
      box-shadow: none;
      text-align: left;
    }

    .doc-week-event.important,
    .doc-detail-event.priority-important { border-left-color: #ef4444; }
    .doc-week-event.critical,
    .doc-detail-event.priority-critical { border-left-color: #dc2626; background: #fef2f2; }
    .doc-week-counter.photo { border-left-color: #22c55e; background: #f0fdf4; }
    .doc-week-counter.note,
    .doc-detail-note { border-left-color: #3b82f6; background: #eff6ff; }
    .doc-detail-note.important { border-left-color: #dc2626; }

    .doc-week-event span,
    .doc-detail-event span,
    .doc-detail-note span,
    .doc-detail-deliveries span {
      min-width: 0;
      flex: 1;
    }

    .doc-week-event strong,
    .doc-week-event small,
    .doc-detail-event strong,
    .doc-detail-event small,
    .doc-detail-note strong,
    .doc-detail-note small,
    .doc-detail-deliveries strong,
    .doc-detail-deliveries small {
      display: block;
      overflow-wrap: anywhere;
    }

    .doc-week-event small,
    .doc-detail-event small,
    .doc-detail-note small,
    .doc-detail-deliveries small {
      margin-top: 2px;
      color: #667085;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.35;
    }

    .doc-week-empty,
    .doc-detail-empty {
      padding: 9px 2px;
      color: #98a2b3;
      font-size: 13px;
    }

    .doc-add-menu {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 4px 0;
    }

    .doc-add-menu > button {
      display: grid;
      justify-items: center;
      gap: 8px;
      min-width: 0;
      min-height: 118px;
      padding: 16px 10px;
      border: 1px solid #dbe2ea;
      border-radius: 16px;
      background: #ffffff;
      color: #344054;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
      text-align: center;
    }

    .doc-add-menu .doc-line-icon {
      width: 30px;
      height: 30px;
      color: #16a34a;
    }

    .doc-add-menu strong,
    .doc-add-menu small {
      display: block;
    }

    .doc-add-menu small {
      margin-top: 3px;
      color: #667085;
      font-size: 11px;
      font-weight: 600;
    }

    #editModal.documentation-add-modal .edit-modal,
    #editModal.documentation-event-modal .edit-modal,
    #editModal.documentation-note-modal .edit-modal,
    #editModal.documentation-photo-edit-modal .edit-modal {
      width: min(680px, 100%);
      max-height: calc(100dvh - 28px);
      overflow-y: auto;
      border-radius: 20px;
    }

    #editModal.documentation-add-modal #editModalTitle,
    #editModal.documentation-event-modal #editModalTitle,
    #editModal.documentation-note-modal #editModalTitle,
    #editModal.documentation-photo-edit-modal #editModalTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    #editModal.documentation-add-modal .modal-x-button,
    #editModal.documentation-event-modal .modal-x-button,
    #editModal.documentation-note-modal .modal-x-button,
    #editModal.documentation-photo-edit-modal .modal-x-button {
      flex: 0 0 44px;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #344054 !important;
      box-shadow: none !important;
    }

    .doc-entry-form {
      display: grid;
      gap: 8px;
    }

    .doc-entry-form > label,
    .doc-entry-form .doc-form-grid label {
      margin-top: 6px;
      color: #344054;
      font-size: 13px;
      font-weight: 800;
    }

    .doc-entry-form label small {
      color: #98a2b3;
      font-weight: 600;
    }

    .doc-entry-form input,
    .doc-entry-form select,
    .doc-entry-form textarea {
      width: 100%;
      max-width: 100%;
      min-height: 46px;
      border: 1px solid #d0d5dd;
      border-radius: 12px;
      background: #ffffff;
    }

    .doc-entry-form textarea { min-height: 96px; }

    .doc-category-strip {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 1px 8px;
      scroll-snap-type: x proximity;
    }

    .doc-category-choice {
      display: grid;
      justify-items: center;
      gap: 5px;
      flex: 0 0 82px;
      min-height: 72px;
      padding: 10px 6px;
      border: 1px solid #dbe2ea;
      border-radius: 13px;
      color: #667085;
      background: #f8fafc;
      scroll-snap-align: start;
      cursor: pointer;
    }

    .doc-category-choice.active {
      border-color: #16a34a;
      color: #15803d;
      background: #f0fdf4;
      box-shadow: inset 0 0 0 1px #16a34a;
    }

    .doc-category-choice input { display: none; }
    .doc-category-choice span { font-size: 11px; font-weight: 800; text-align: center; }

    .doc-form-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      gap: 9px;
    }

    .doc-form-grid.note { grid-template-columns: 1.4fr 1fr; }

    #editModal.documentation-note-modal .doc-form-grid.note {
      grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
      gap: 12px;
      width: 100%;
      max-width: 100%;
    }

    #editModal.documentation-note-modal .doc-form-grid.note input {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      inline-size: 100% !important;
      min-inline-size: 0 !important;
      min-height: 42px;
      padding: 8px 10px;
      border-radius: 10px;
      box-sizing: border-box;
    }

    #editModal.documentation-note-modal .doc-form-grid.note > div {
      min-width: 0;
      max-width: 100%;
      overflow: visible;
    }

    #editModal.documentation-note-modal #editModalFields {
      display: block;
    }

    #editModal.documentation-note-modal .doc-entry-form {
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    .doc-modal-title-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
    }

    .doc-header-trash-button {
      display: inline-grid;
      place-items: center;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: #dc2626 !important;
      box-shadow: none !important;
    }

    .doc-header-trash-button:hover,
    .doc-header-trash-button:focus-visible {
      background: #fef2f2 !important;
    }

    .doc-header-trash-button .doc-line-icon {
      width: 20px;
      height: 20px;
    }

    .doc-photo-editor-visual {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 112px;
      align-items: stretch;
      gap: 10px;
      width: 100%;
      margin-bottom: 14px;
    }

    .doc-photo-editor-image {
      position: relative;
      min-width: 0;
      min-height: 220px;
      overflow: hidden;
      border-radius: 16px;
      background: #111827;
    }

    .doc-photo-editor-image .bbs-image-load-frame,
    .doc-photo-editor-image img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 220px;
      object-fit: contain;
    }

    .doc-photo-delete-icon {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px;
      min-height: 44px !important;
      padding: 0 !important;
      border: 1px solid rgba(255, 255, 255, 0.78) !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.94) !important;
      color: #b42318 !important;
      box-shadow: 0 7px 18px rgba(15, 23, 42, 0.2) !important;
    }

    .doc-photo-delete-icon .doc-line-icon {
      width: 20px;
      height: 20px;
    }

    .doc-photo-editor-add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-height: 112px;
      padding: 10px 6px;
      border: 1px dashed #aab2bd;
      border-radius: 16px;
      background: #f4f5f7;
      color: #344054;
      box-shadow: none;
    }

    .doc-photo-editor-add > span {
      font-size: 34px;
      font-weight: 300;
      line-height: 1;
    }

    .doc-photo-editor-add small {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
    }

    .doc-priority-choices {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .doc-priority-choices label,
    .doc-important-check {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 44px;
      padding: 8px;
      border: 1px solid #dbe2ea;
      border-radius: 12px;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 800;
    }

    .doc-important-check { justify-content: flex-start; }
    .doc-priority-choices input,
    .doc-important-check input { width: 18px; min-height: 18px; }

    #editModal.documentation-event-modal #editModalActions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
    }

    #editModal.documentation-event-modal .doc-primary-action {
      width: auto !important;
      min-width: 150px !important;
      min-height: 44px;
      padding: 9px 16px !important;
      border-radius: 12px;
      background: #16a34a !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    .doc-primary-action { background: #16a34a; color: #ffffff; }

    .doc-day-detail-content {
      display: grid;
      gap: 14px;
    }

    .doc-detail-section {
      min-width: 0;
      padding-top: 4px;
    }

    .doc-detail-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .doc-detail-heading > span {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .doc-detail-heading small {
      display: grid;
      place-items: center;
      min-width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #eef2f7;
      color: #667085;
      font-weight: 900;
    }

    .doc-detail-heading > button {
      display: grid;
      place-items: center;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px;
      min-height: 40px !important;
      padding: 0 !important;
      border-radius: 999px;
      background: #ecfdf3;
      color: #15803d;
      font-size: 24px;
      box-shadow: none;
    }

    .doc-detail-event,
    .doc-detail-note { cursor: pointer; }
    .doc-detail-note:disabled { opacity: 1; cursor: default; }
    .doc-detail-event .priority-icon { color: #dc2626; }

    .doc-entry-edit-icon {
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      margin-left: auto;
      border-radius: 999px;
      background: #ecfdf3;
      color: #15803d;
    }

    .doc-detail-event .doc-entry-edit-icon,
    .doc-detail-note .doc-entry-edit-icon {
      flex: 0 0 34px;
      min-width: 34px;
    }

    .doc-entry-edit-icon .doc-line-icon {
      width: 17px;
      height: 17px;
      min-width: 17px;
    }

    .doc-detail-deliveries { margin-top: 6px; }
    .doc-detail-deliveries > div { border-left-color: #f59e0b; }

    .doc-detail-admin-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }

    .doc-detail-admin-actions button {
      min-height: 40px;
      padding: 7px 10px;
      font-size: 12px;
    }

    .doc-photo-select {
      display: flex;
      align-items: center;
      gap: 4px;
      min-height: 32px;
      font-size: 11px;
      font-weight: 700;
    }

    .doc-photo-comment {
      margin: 5px 1px 0;
      color: #475467;
      font-size: 11px;
      line-height: 1.3;
    }

    .doc-photo-meta-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px;
      min-height: 40px !important;
      margin-top: 5px;
      margin-left: auto;
      padding: 5px;
      border: 0;
      border-radius: 999px;
      background: #ecfdf3;
      color: #15803d;
      box-shadow: none;
      font-size: 11px;
    }

    .doc-photo-meta-button .doc-line-icon { width: 15px; height: 15px; min-width: 15px; }
    .doc-photo-meta-button span { display: none; }

    .doc-day-floating-add {
      position: sticky;
      right: 0;
      bottom: 4px;
      z-index: 6;
      display: flex !important;
      margin: 12px 0 0 auto;
    }

    @media (max-width: 760px) {
      .doc-add-menu { grid-template-columns: 1fr; }
      .doc-add-menu > button {
        display: flex;
        justify-items: initial;
        align-items: center;
        min-height: 76px;
        padding: 12px 15px;
        text-align: left;
      }
      .doc-form-grid,
      .doc-form-grid.note { grid-template-columns: 1fr 1fr; }
      #editModal.documentation-note-modal .doc-form-grid.note {
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
        gap: 12px;
      }
      .doc-form-grid > div:first-child { grid-column: 1 / -1; }
      #editModal.documentation-note-modal .doc-form-grid.note > div:first-child { grid-column: auto; }
      .doc-priority-choices { grid-template-columns: 1fr; }
      #editModal.documentation-day-modal .edit-modal,
      #editModal.documentation-add-modal .edit-modal,
      #editModal.documentation-event-modal .edit-modal,
      #editModal.documentation-note-modal .edit-modal,
      #editModal.documentation-photo-edit-modal .edit-modal {
        width: min(100%, 430px);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
        padding: 16px;
        border-radius: 20px;
      }
      #editModal.documentation-day-modal #editModalMessage { overflow: visible; }
      #editModal.documentation-day-modal .doc-day-detail-content { padding-bottom: 2px; }
      .doc-day-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
      .doc-mini-event small { display: none; }
      .doc-mini-event .doc-line-icon { width: 14px; height: 14px; min-width: 14px; }
      .doc-day-icons { gap: 2px; }
      .doc-month-event-row { grid-template-columns: 78px 22px minmax(0, 1fr); gap: 7px; }
      .doc-photo-editor-visual { grid-template-columns: minmax(0, 1fr) 92px; }
      .doc-photo-editor-image,
      .doc-photo-editor-image .bbs-image-load-frame,
      .doc-photo-editor-image img { min-height: 190px; }
    }

    @media (max-width: 359px) {
      .doc-mini-event .doc-line-icon { width: 13px; height: 13px; min-width: 13px; }
      .doc-more-count { font-size: 8px; }
      .doc-day-gallery { gap: 5px; }
      .doc-photo-meta-button span { display: none; }
    }

    /* Gemeinsame responsive Mobilbasis. Sie steht bewusst am Ende des
       Stylesheets, damit ältere Einzelregeln nicht je nach Gerät gewinnen. */
    :root {
      --mobile-page-pad: clamp(8px, 3vw, 16px);
      --mobile-calendar-gap: clamp(2px, 0.8vw, 5px);
      --mobile-calendar-pad: clamp(3px, 1vw, 6px);
      --mobile-calendar-font: clamp(10px, 2.8vw, 12px);
    }

    html,
    body {
      max-width: 100%;
    }

    img,
    video,
    canvas,
    svg {
      max-width: 100%;
    }

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

      main,
      body.force-mobile-preview main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: max(var(--mobile-page-pad), env(safe-area-inset-left, 0px));
        padding-right: max(var(--mobile-page-pad), env(safe-area-inset-right, 0px));
      }

      main > *,
      .form-panel,
      .settings-content,
      .settings-layout,
      .time-layout,
      .time-card,
      .file-card,
      .photo-doc-card,
      #projectPlatformContent,
      #projectPlatform .project-main-area,
      #projectPlatform .project-main-area > * {
        min-width: 0;
        max-width: 100%;
      }

      #projectPlatform {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .modal-backdrop:not(.camera-fullscreen):not(.mobile-pdf-fullscreen) {
        padding-top: max(var(--mobile-page-pad), env(safe-area-inset-top, 0px));
        padding-right: max(var(--mobile-page-pad), env(safe-area-inset-right, 0px));
        padding-bottom: max(var(--mobile-page-pad), env(safe-area-inset-bottom, 0px));
        padding-left: max(var(--mobile-page-pad), env(safe-area-inset-left, 0px));
      }

      .modal-backdrop:not(.camera-fullscreen):not(.mobile-pdf-fullscreen) > .edit-modal {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: calc(100dvh - max(var(--mobile-page-pad), env(safe-area-inset-top, 0px)) - max(var(--mobile-page-pad), env(safe-area-inset-bottom, 0px)));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .time-calendar,
      #projectPlatform .photo-doc-card .doc-calendar,
      body.force-mobile-preview #projectPlatform .photo-doc-card .doc-calendar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        column-gap: var(--mobile-calendar-gap) !important;
        row-gap: var(--mobile-calendar-gap) !important;
      }

      .time-calendar > *,
      #projectPlatform .photo-doc-card .doc-calendar > *,
      body.force-mobile-preview #projectPlatform .photo-doc-card .doc-calendar > * {
        min-width: 0;
      }

      .time-calendar-head,
      #projectPlatform .photo-doc-card .doc-calendar-head,
      body.force-mobile-preview #projectPlatform .photo-doc-card .doc-calendar-head {
        padding: 2px 0;
        overflow: hidden;
        font-size: var(--mobile-calendar-font) !important;
        line-height: 1.1;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
      }

      .time-day,
      body.force-mobile-preview .time-day {
        min-width: 0;
        min-height: clamp(44px, 12vw, 56px) !important;
        padding: var(--mobile-calendar-pad) !important;
        border-width: 1px;
        border-radius: clamp(5px, 1.5vw, 8px);
        overflow: hidden;
        font-size: var(--mobile-calendar-font);
        touch-action: manipulation;
      }

      .time-day-date {
        margin-bottom: 0;
        overflow: hidden;
        font-size: var(--mobile-calendar-font) !important;
        line-height: 1.1;
        text-overflow: clip;
        white-space: nowrap;
      }

      .time-day-details {
        display: none !important;
      }

      #monthView {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
      }

      .month-grid,
      .month-week {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: var(--mobile-calendar-gap);
        border: 0;
      }

      .month-head,
      .month-day,
      body.force-mobile-preview .month-head,
      body.force-mobile-preview .month-day {
        min-width: 0;
        padding: var(--mobile-calendar-pad) !important;
        border: 1px solid #d1d5db;
        border-radius: clamp(4px, 1.2vw, 7px);
      }

      .month-head {
        padding-block: 4px;
        overflow: hidden;
        font-size: var(--mobile-calendar-font);
        line-height: 1;
        text-overflow: clip;
        white-space: nowrap;
      }

      .month-day,
      body.force-mobile-preview .month-day {
        min-height: clamp(46px, 13vw, 62px) !important;
        max-height: none !important;
        overflow: hidden;
        touch-action: manipulation;
      }

      .month-date {
        font-size: var(--mobile-calendar-font) !important;
        line-height: 1.1;
      }

      #projectPlatform .photo-doc-card .doc-day,
      body.force-mobile-preview #projectPlatform .photo-doc-card .doc-day {
        min-width: 0;
        min-height: clamp(42px, 12vw, 54px);
        aspect-ratio: auto !important;
        padding: var(--mobile-calendar-pad) !important;
        gap: 2px;
        border-width: 1px !important;
        border-radius: clamp(5px, 1.5vw, 8px);
        overflow: hidden;
        touch-action: manipulation;
      }

      #projectPlatform .photo-doc-card .doc-day-number {
        font-size: var(--mobile-calendar-font);
        line-height: 1;
      }
    }

    /* Die lokale Handy-Vorschau benutzt dieselbe Breitenlogik wie ein echtes
       Telefon, auch wenn sie in einem größeren Desktopfenster läuft. */
    body.force-mobile-preview #projectPlatform {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .material-requests-panel {
      position: relative;
      min-height: 420px;
      padding-bottom: 92px;
    }

    .material-page-head {
      align-items: flex-start;
    }

    .material-page-head .small-info {
      margin: 4px 0 0;
    }

    .material-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 12px 0 16px;
    }

    .material-filter-row label {
      display: grid;
      gap: 4px;
      min-width: min(220px, 100%);
      font-size: 13px;
      font-weight: 750;
      color: var(--muted);
    }

    .material-filter-row select {
      width: 100%;
      min-height: 44px;
    }

    .material-request-list {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--border);
    }

    .material-request-row {
      appearance: none;
      width: 100%;
      min-height: 82px;
      display: grid;
      grid-template-columns: 68px minmax(0, 1.5fr) minmax(110px, .6fr) minmax(120px, .65fr) auto;
      align-items: center;
      gap: 14px;
      padding: 12px 4px;
      margin: 0;
      border: 0;
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      box-shadow: none;
    }

    .material-request-row:hover,
    .material-request-row:focus-visible {
      background: color-mix(in srgb, var(--accent) 6%, transparent);
      transform: none;
    }

    .material-thumb {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--soft);
      color: var(--muted);
    }

    .material-thumb img,
    .material-photo-large img,
    .material-photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .material-thumb svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }

    .material-row-main,
    .material-row-meta {
      min-width: 0;
    }

    .material-row-main strong {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.25;
    }

    .material-row-main small,
    .material-row-meta small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
    }

    .material-status {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      background: #eef1f5;
      color: #334155;
    }

    .material-status.status-open { background: #eaf7ef; color: #08783d; }
    .material-status.status-review { background: #fff4d8; color: #895d00; }
    .material-status.status-ordered { background: #e8f1ff; color: #1759a8; }
    .material-status.status-partial { background: #f1ecff; color: #6044a5; }
    .material-status.status-delivered { background: #e6f7f2; color: #08735c; }
    .material-status.status-rejected { background: #fdeaea; color: #a51d26; }

    .material-due-overdue {
      color: #b42318 !important;
      font-weight: 800;
    }

    .material-priority-mark {
      color: #b42318;
      font-weight: 850;
    }

    .material-add-fab {
      position: fixed;
      right: max(24px, env(safe-area-inset-right));
      bottom: max(24px, env(safe-area-inset-bottom));
      z-index: 38;
    }

    .material-empty {
      padding: 28px 12px;
      color: var(--muted);
      text-align: center;
    }

    #editModal.material-request-modal .edit-modal {
      width: min(580px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 20px;
    }

    #editModal.material-request-modal #editModalTitle {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #editModal.material-request-modal #editModalMessage:empty {
      display: none;
    }

    #editModal.material-request-modal #editModalFields {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 2px 2px 10px;
      scrollbar-gutter: stable;
    }

    #editModal.material-request-modal .modal-x-button {
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--text) !important;
      font-size: 28px;
    }

    .material-form {
      display: grid;
      gap: 16px;
      width: 100%;
    }

    .material-form > label,
    .material-form-grid label,
    .material-admin-grid label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 800;
    }

    .material-form input,
    .material-form select,
    .material-form textarea,
    .material-admin-grid input,
    .material-admin-grid select,
    .material-admin-grid textarea {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    /* Verbindliche Formularregel: Bedienelemente und ihre Wrapper bleiben
       innerhalb der zugewiesenen Grid-/Flex-Spalte. */
    :where(.form-panel, .settings-content, .edit-modal, .account-box)
      :where(label, .grid > div, .ui-form-row > div, .material-form > *, .material-form-grid > *, .material-quick-fields > *) {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    :where(.form-panel, .settings-content, .edit-modal, .account-box)
      :where(input, select, textarea, button) {
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    #editModal.material-request-modal .material-form input,
    #editModal.material-request-modal .material-form select,
    #editModal.material-request-modal .material-form textarea {
      font-size: 16px !important;
    }

    #editModal.material-request-modal .material-form input,
    #editModal.material-request-modal .material-form select {
      min-height: 44px !important;
      height: 44px;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }

    .material-form-grid,
    .material-admin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .material-photo-picker {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .material-photo-preview {
      width: 72px;
      height: 72px;
      flex: 0 0 72px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 16px;
      background: var(--soft);
      color: var(--muted);
      padding: 0;
    }

    .material-camera-tile {
      width: 72px !important;
      min-width: 72px !important;
      height: 72px !important;
      min-height: 72px !important;
      display: grid !important;
      place-items: center !important;
      padding: 0 !important;
      overflow: hidden;
      border: 1px solid rgba(16, 143, 73, .22) !important;
      border-radius: 16px !important;
      background: #edf9f2 !important;
      color: var(--green) !important;
      box-shadow: none !important;
    }

    .material-camera-tile svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
    }

    .material-photo-copy {
      min-width: 0;
      display: grid;
      gap: 2px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.25;
    }

    .material-photo-copy strong { color: var(--text); font-size: 14px; }

    .material-description-shell {
      position: relative;
    }

    .material-description-shell textarea {
      min-height: 92px;
      padding-right: 54px;
      resize: vertical;
    }

    .material-ai-button {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: #e7f7ee !important;
      color: var(--green) !important;
      box-shadow: none !important;
      font-size: 18px;
    }

    .material-ai-button[aria-busy="true"] { animation: serverSavePulse .75s ease-in-out infinite alternate; }

    .material-ai-result {
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .material-ai-result.success { color: #08783d; }
    .material-ai-result.error { color: #a51d26; }

    .material-quick-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .material-quick-fields > label {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: visible;
      box-sizing: border-box;
    }

    #editModal.material-request-modal #materialNeededByInput {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      inline-size: 100% !important;
      max-inline-size: 100% !important;
      box-sizing: border-box !important;
      -webkit-appearance: none;
      appearance: none;
    }

    #editModal.material-request-modal #materialNeededByInput::-webkit-date-and-time-value {
      min-width: 0;
      width: 100%;
      text-align: center;
    }

    .material-remark-details {
      border: 0;
      padding: 0;
    }

    .material-remark-details summary {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      cursor: pointer;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      list-style: none;
    }

    .material-remark-details summary::-webkit-details-marker { display: none; }
    .material-remark-details textarea { margin-top: 10px; min-height: 76px; }

    #editModal.material-request-modal #editModalActions {
      position: static !important;
      inset: auto !important;
      z-index: auto !important;
      flex: 0 0 auto;
      display: flex !important;
      align-items: center;
      justify-content: flex-end !important;
      width: 100%;
      min-height: 60px;
      margin: 0 !important;
      padding: 8px 2px 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .material-send-button {
      width: 52px !important;
      min-width: 52px !important;
      height: 52px !important;
      min-height: 52px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: var(--green) !important;
      color: #fff !important;
      box-shadow: 0 8px 20px rgba(16, 143, 73, .24) !important;
    }

    .material-send-button svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .material-send-spinner {
      width: 22px;
      height: 22px;
      display: block;
      border: 2px solid rgba(255, 255, 255, .42);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: materialSendSpin .7s linear infinite;
    }

    @keyframes materialSendSpin {
      to { transform: rotate(360deg); }
    }

    .material-send-button:disabled {
      background: #cbd2d9 !important;
      box-shadow: none !important;
    }

    .material-photo-large {
      width: min(100%, 520px);
      aspect-ratio: 4 / 3;
      margin: 0 auto 16px;
      overflow: hidden;
      border-radius: 14px;
      background: var(--soft);
    }

    .material-detail-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 16px;
      margin-bottom: 16px;
      padding: 14px;
      border-radius: 14px;
      background: var(--soft);
    }

    .material-detail-summary div { min-width: 0; }
    .material-detail-summary small { display: block; color: var(--muted); margin-bottom: 2px; }
    .material-detail-summary strong { overflow-wrap: anywhere; }
    .material-save-article { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 9px !important; }
    .material-save-article input { width: 22px !important; height: 22px; flex: 0 0 auto; }

    @media (max-width: 760px) {
      .material-requests-panel {
        padding: 16px 12px calc(100px + env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
      }

      .material-page-head .small-info { display: none; }

      .material-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .material-filter-row label { min-width: 0; font-size: 12px; }

      .material-request-row {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 78px;
        padding: 10px 0;
      }

      .material-thumb { width: 56px; height: 56px; border-radius: 10px; }
      .material-row-quantity { grid-column: 2; font-size: 13px; }
      .material-row-due { grid-column: 2; font-size: 12px; }
      .material-request-row .material-status { grid-column: 3; grid-row: 1 / span 3; align-self: center; }

      .material-add-fab {
        right: max(18px, env(safe-area-inset-right));
        bottom: calc(92px + env(safe-area-inset-bottom));
      }

      #editModal.material-request-modal .edit-modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        padding: 16px;
      }

      #editModal.material-request-modal #editModalFields {
        padding-right: 2px;
        scrollbar-gutter: auto;
      }

      html.bbs-phone-device input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
      html.bbs-phone-device select,
      html.bbs-phone-device textarea,
      body.force-mobile-preview input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
      body.force-mobile-preview select,
      body.force-mobile-preview textarea {
        font-size: 16px !important;
      }

      .material-form-grid,
      .material-admin-grid,
      .material-detail-summary {
        grid-template-columns: minmax(0, 1fr);
      }

      .material-form-grid,
      .material-admin-grid,
      .material-detail-summary { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 360px) {
      .material-quick-fields { grid-template-columns: minmax(0, 1fr); }
    }

    /* Das mobile Dashboard behaelt beim Wechsel zwischen Bereichen und Rollen
       immer dieselbe kompakte Anordnung. Die Regel ist bewusst unabhaengig von
       employee-view/admin-view, weil diese Klassen waehrend eines Renderzyklus
       kurz wechseln koennen. */
    body.force-mobile-preview #mainHomePanel,
    html.bbs-phone-device #mainHomePanel {
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: clip;
    }

    body.force-mobile-preview #mainHomePanel > .home-card,
    html.bbs-phone-device #mainHomePanel > .home-card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
    }

    body.force-mobile-preview #mainHomePanel .leave-summary,
    html.bbs-phone-device #mainHomePanel .leave-summary {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      gap: 8px !important;
    }

    body.force-mobile-preview #mainHomePanel .summary-tile,
    html.bbs-phone-device #mainHomePanel .summary-tile {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
      overflow-wrap: break-word;
    }

    @media (max-width: 760px) {
      #mainHomePanel {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip;
      }

      #mainHomePanel > .home-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
      }

      #mainHomePanel .leave-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 8px !important;
      }

      #mainHomePanel .summary-tile {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
    }

    @media (max-width: 359px) {
      :root {
        --mobile-page-pad: 8px;
        --mobile-calendar-gap: 2px;
        --mobile-calendar-pad: 3px;
      }

      #projectPlatform .project-main-area.project-section-photos .photo-doc-card h3,
      body.force-mobile-preview #projectPlatform .project-main-area.project-section-photos .photo-doc-card h3 {
        font-size: 20px;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: auto;
      }
    }
    .task-add-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    #editModal.task-add-choice-modal .edit-modal {
      width: min(620px, calc(100vw - 24px));
    }

    #editModal.task-add-choice-modal #editModalFields {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    #editModal.task-add-choice-modal #editModalActions {
      display: none !important;
    }

    .task-add-choice {
      min-width: 0 !important;
      min-height: 138px !important;
      display: grid !important;
      align-content: center;
      justify-items: center;
      gap: 10px;
      padding: 18px 12px !important;
      border: 1px solid #d8e2dc !important;
      border-radius: 18px !important;
      background: #f7faf8 !important;
      color: var(--text) !important;
      text-align: center;
    }

    .task-add-choice > span {
      display: grid;
      gap: 4px;
      min-width: 0;
      max-width: 100%;
    }

    .task-add-choice svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: #169447;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .task-add-choice strong { font-size: 16px; }
    .task-add-choice small { color: var(--muted); line-height: 1.3; }

    #editModal.site-walk-consent-modal .edit-modal,
    #editModal.site-walk-recording-modal .edit-modal {
      width: min(560px, calc(100vw - 24px));
      max-height: calc(100dvh - 24px);
      overflow: hidden;
      padding: 18px;
    }

    .site-walk-consent {
      display: grid;
      gap: 16px;
    }

    .site-walk-consent-note {
      padding: 14px;
      border: 1px solid #d8e2dc;
      border-radius: 14px;
      background: #f7faf8;
      line-height: 1.45;
    }

    .site-walk-consent-check {
      display: grid !important;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start !important;
      gap: 12px !important;
      width: 100% !important;
      min-height: 44px;
      font-weight: 750;
      line-height: 1.4;
    }

    .site-walk-consent-check input { margin-top: 2px; }

    #editModal.site-walk-recording-modal .edit-modal {
      display: flex;
      flex-direction: column;
    }

    #editModal.site-walk-consent-modal #editModalFields,
    #editModal.site-walk-recording-modal #editModalFields {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    #editModal.site-walk-consent-modal #editModalFields {
      overflow: visible;
      flex: 0 0 auto;
      padding-bottom: 2px;
    }

    #editModal.site-walk-consent-modal #editModalActions {
      position: static !important;
      flex: 0 0 auto;
      margin: 12px 0 0 !important;
      padding: 12px 0 0 !important;
      border-top: 1px solid var(--soft-border) !important;
      background: #ffffff !important;
    }

    #editModal.site-walk-recording-modal #editModalFields {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    #editModal.site-walk-recording-modal #editModalActions { display: none !important; }

    .site-walk-recorder {
      display: grid;
      gap: 16px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .site-walk-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      gap: 8px;
      min-height: 34px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #eaf7ef;
      color: #08783d;
      font-size: 13px;
      font-weight: 850;
    }

    .site-walk-status::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #16a34a;
      animation: serverSavePulse .8s ease-in-out infinite alternate;
    }

    .site-walk-status.paused { background: #fff4d8; color: #895d00; }
    .site-walk-status.paused::before { background: #d99a00; animation: none; }
    .site-walk-status.warning { background: #fdeaea; color: #a51d26; }
    .site-walk-status.warning::before { background: #dc2626; animation: none; }

    .site-walk-duration {
      color: #111827;
      font-size: clamp(42px, 13vw, 68px);
      font-variant-numeric: tabular-nums;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
      text-align: center;
    }

    .site-walk-project-label {
      overflow-wrap: anywhere;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
      text-align: center;
    }

    .site-walk-warning {
      display: none;
      padding: 11px 12px;
      border: 1px solid #fecaca;
      border-radius: 12px;
      background: #fef2f2;
      color: #991b1b;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
    }

    .site-walk-warning.active { display: block; }

    .site-walk-controls {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .site-walk-control {
      min-width: 0 !important;
      min-height: 82px !important;
      display: grid !important;
      place-items: center;
      gap: 6px;
      padding: 10px 6px !important;
      border-radius: 16px !important;
      background: #eef3f0 !important;
      color: #1f2937 !important;
      font-size: 12px !important;
      text-align: center;
    }

    .site-walk-control svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .site-walk-control.stop {
      background: #fee2e2 !important;
      color: #b42318 !important;
    }

    .site-walk-photo-count {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      padding: 8px 12px;
      border-radius: 12px;
      background: #f4f6f5;
      color: #475569;
      font-size: 13px;
      font-weight: 800;
    }

    .site-walk-photo-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .site-walk-photo-strip img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 10px;
    }

    .site-walk-camera-panel {
      display: none;
      position: relative;
      overflow: hidden;
      min-height: 280px;
      border-radius: 18px;
      background: #050505;
    }

    .site-walk-camera-panel.active { display: block; }

    .site-walk-camera-panel video {
      display: block;
      width: 100%;
      height: min(52dvh, 460px);
      object-fit: cover;
      background: #000;
    }

    .site-walk-camera-actions {
      position: absolute;
      right: 0;
      bottom: 14px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      pointer-events: none;
    }

    .site-walk-camera-actions button {
      width: 56px !important;
      min-width: 56px !important;
      height: 56px !important;
      min-height: 56px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,.92) !important;
      color: #111827 !important;
      pointer-events: auto;
    }

    .site-walk-camera-actions .capture {
      width: 70px !important;
      min-width: 70px !important;
      height: 70px !important;
      min-height: 70px !important;
      border: 5px solid rgba(255,255,255,.55) !important;
      background: #fff !important;
    }

    @media (max-width: 520px) {
      .task-add-choice-grid { grid-template-columns: minmax(0, 1fr); }
      .task-add-choice { min-height: 108px !important; grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; }
      #editModal.site-walk-consent-modal .edit-modal,
      #editModal.site-walk-recording-modal .edit-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        padding: 16px;
      }
      .site-walk-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
      .site-walk-control { min-height: 76px !important; font-size: 11px !important; }
    }