/* ───── LOADING SKELETON ───── */
    @keyframes shimmer {
      0% {
        background-position: -600px 0;
      }

      100% {
        background-position: 600px 0;
      }
    }

    .skeleton-row td {
      padding: 14px 14px;
    }

    .skeleton-cell {
      height: 14px;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--surface2) 25%, rgba(255, 255, 255, .05) 50%, var(--surface2) 75%);
      background-size: 600px 100%;
      animation: shimmer 1.4s infinite linear;
    }

    .skeleton-cell.wide {
      width: 70%;
    }

    .skeleton-cell.med {
      width: 45%;
    }

    .skeleton-cell.short {
      width: 28%;
    }

    ::-webkit-scrollbar-track {
      background: var(--surface);
    }

    ::-webkit-scrollbar-thumb {
      background: #1e3a5f;
      border-radius: 3px;
    }

    [data-theme="light"] ::-webkit-scrollbar-thumb {
      background: #94a3b8;
    }

    input,
    select,
    textarea {
      font-family: 'Sora', sans-serif;
      font-size: 13px;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--muted);
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
    }

    /* ───── UTILS ───── */
    .hidden {
      display: none !important;
    }

    .flex {
      display: flex;
    }

    .flex-col {
      display: flex;
      flex-direction: column;
    }

    .gap4 {
      gap: 4px;
    }

    .gap6 {
      gap: 6px;
    }

    .gap8 {
      gap: 8px;
    }

    .gap10 {
      gap: 10px;
    }

    .gap12 {
      gap: 12px;
    }

    .gap16 {
      gap: 16px;
    }

    .items-center {
      align-items: center;
    }

    .items-end {
      align-items: flex-end;
    }

    .flex-wrap {
      flex-wrap: wrap;
    }

    .justify-center {
      justify-content: center;
    }

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

    .justify-between {
      justify-content: space-between;
    }

    .flex-1 {
      flex: 1;
    }

    .flex-2 {
      flex: 2;
    }

    .w-full {
      width: 100%;
    }

    .h-screen {
      height: 100vh;
    }

    .relative {
      position: relative;
    }

    .cursor-pointer {
      cursor: pointer;
    }

    .text-center {
      text-align: center;
    }

    .text-sm {
      font-size: 12px;
    }

    .text-xs {
      font-size: 11px;
    }

    .font-bold {
      font-weight: 700;
    }

    .font-semibold {
      font-weight: 600;
    }

    .fs11 {
      font-size: 11px;
    }

    .fs12 {
      font-size: 12px;
    }

    .fs14 {
      font-size: 14px;
    }

    .fs16 {
      font-size: 16px;
    }

    .mb8 {
      margin-bottom: 8px;
    }

    .mb12 {
      margin-bottom: 12px;
    }

    .mt8 {
      margin-top: 8px;
    }

    .m0 {
      margin: 0;
    }

    .my6 {
      margin-top: 6px;
      margin-bottom: 6px;
    }

    .mt15 {
      margin-top: 15px;
    }

    .mt20 {
      margin-top: 20px;
    }

    .nowrap {
      white-space: nowrap;
    }

    .truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ───── ANIMATIONS ───── */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes slideRight {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .5;
      }
    }

    .anim-in {
      animation: fadeIn .18s ease forwards;
    }

    .anim-slide {
      animation: slideRight .2s ease forwards;
    }

    /* ───── TOAST ───── */
    #toast {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
      padding: 13px 20px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
      animation: anim-slide .2s ease;
      pointer-events: none;
      max-width: 320px;
    }

    .toast-success {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid rgba(16, 185, 129, .2);
      border-left: 3px solid var(--green);
    }

    .toast-error {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid rgba(239, 68, 68, .2);
      border-left: 3px solid var(--red);
    }

    .toast-info {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid rgba(59, 130, 246, .2);
      border-left: 3px solid var(--accent);
    }

    .toast-warning {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid rgba(245, 158, 11, .2);
      border-left: 3px solid var(--orange);
    }

    .maintenance-overlay {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(5px);
    }

    .maintenance-card {
      max-width: 400px;
      padding: 40px;
      border-radius: 12px;
      background: #fff;
      text-align: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .maintenance-icon {
      margin-bottom: 20px;
      font-size: 50px;
    }

    .maintenance-title {
      margin: 0 0 10px;
      color: #1e293b;
    }

    .maintenance-message {
      margin: 0;
      color: #64748b;
      line-height: 1.5;
    }

    .test-mode-indicator,
    .test-request-indicator {
      background: #f59e0b;
      color: #fff;
      font-weight: 600;
      border-radius: 6px;
    }

    .test-mode-indicator { padding: 4px 8px; font-size: 12px; }
    .test-request-indicator { padding: 2px 6px; margin-left: 6px; }

    .comment-channel-badge {
      margin-left: 6px;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
    }

    .comment-channel-team { background: rgba(99, 102, 241, .15); color: #6366f1; }
    .comment-channel-logistic { background: rgba(6, 182, 212, .15); color: #06b6d4; }
    .comment-channel-finance { background: rgba(168, 85, 247, .15); color: #a855f7; }
    .comment-channel-global { background: rgba(10, 185, 129, .15); color: #10b981; }
    .comment-channel-label { color: var(--text-muted, #94a3b8); font-weight: 600; }
    .comment-channel-picker {
      position: relative;
      z-index: 4;
      width: 100%;
      min-width: 0;
      margin-top: -4px;
      margin-bottom: 12px !important;
    }
    .comment-channel-label { flex: 0 0 auto; }
    .comment-channel-select {
      position: relative;
      z-index: 2;
      flex: 0 1 320px;
      width: min(320px, 100%);
      min-width: 220px;
      max-width: 100%;
      height: 44px;
      min-height: 44px;
      padding: 8px 34px 8px 12px;
      line-height: 1.35;
      font-size: 13px;
    }

    .password-field { position: relative; width: 100%; }
    .password-field > .inp { width: 100%; padding-right: 46px; }
    .password-toggle {
      position: absolute;
      top: 50%;
      right: 5px;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      transform: translateY(-50%);
    }
    .password-toggle:hover,
    .password-toggle:focus-visible { background: var(--surface-hover, rgba(148, 163, 184, .14)); }
    .comment-permission-denied { color: #ef4444; font-style: italic; }

    .shared-access-panel {
      padding: 12px;
      border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
      border-radius: 8px;
      background: var(--bg-subtle, rgba(255, 255, 255, .03));
    }

    .shared-users-container { min-height: 24px; }
    .shared-empty-label { color: var(--text-muted, #94a3b8); font-style: italic; }
    .shared-user-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid rgba(99, 102, 241, .25);
      border-radius: 6px;
      background: rgba(99, 102, 241, .12);
      color: #6366f1;
      font-size: 12px;
    }

    .shared-user-remove {
      margin-left: 4px;
      padding: 0 2px;
      border: 0;
      background: none;
      color: #ef4444;
      cursor: pointer;
      font-weight: 700;
    }

    .supplier-logo-lg { height: 48px; }
    .supplier-logo-sm { height: 36px; }