*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

      :root {
        --green: #4a8f75;
        --green-dark: #3d7360;
        --green-light: #e8f5f1;
        --green-lighter: #d5ebe4;
      }

      body { font-family: 'Outfit', sans-serif; background-color: #f5f5f5; color: #1a1a1a; font-size: 14px; -webkit-font-smoothing: antialiased; }
      .container { display: flex; min-height: 100vh; }

     
    
      /* ── Main ── */
      .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
      .header { background-color: #fff; padding: 0 32px; height: 64px; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
      .header h1 { font-size: 22px; font-weight: 600; color: #111827; }
      .header-right { display: flex; align-items: center; gap: 20px; }
      .notification-icon { width: 20px; height: 20px; cursor: pointer; color: #6b7280; }
      .company-dropdown { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 6px; cursor: pointer; color: #9ca3af; font-size: 14px; }

      /* ── Content ── */
      .content-area { padding: 24px 32px; flex: 1; background-color: #F4F6F5; overflow-y: auto; }
      .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; }
      .controls-left { display: flex; gap: 12px; flex: 1; align-items: center; }
      .filter-btn, .action-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background-color: #fff; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 14px; color: #374151; font-family: inherit; white-space: nowrap; }
      .filter-btn:hover, .action-btn:hover { background: #f9fafb; }
      .search-box { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background-color: #fff; border: 1px solid #d1d5db; border-radius: 6px; flex: 1; max-width: 300px; }
      .search-box svg { flex-shrink: 0; color: #9ca3af; }
      .search-box input { border: none; outline: none; flex: 1; font-size: 14px; color: #6b7280; font-family: inherit; background: transparent; }
      .applied-filters { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
      .filter-label { font-size: 13px; color: #4b5563; font-weight: 500; }
      .filter-tag { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background-color: #f3f4f6; border-radius: 4px; font-size: 13px; color: #374151; }
      .filter-tag .close { cursor: pointer; opacity: 0.6; }
      .clear-filter { color: #ef4444; font-size: 13px; cursor: pointer; font-weight: 500; }

       .search-box{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff;border:1px solid #d1d5db;border-radius:6px;flex:1;max-width:300px}
    .search-box input{border:none;outline:none;flex:1;font-size:14px;color:#6b7280}
    .applied-filters{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
    .filter-label{font-size:13px;color:#6b7280}
    .filter-tag{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#f3f4f6;border-radius:4px;font-size:13px;color:#374151}
    .filter-tag .close{cursor:pointer;opacity:.6}
    /* Filter modal */
    .filter-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
    .filter-modal-overlay.open{opacity:1;pointer-events:all}
    .filter-modal{background:#fff;border-radius:12px;width:460px;max-width:95vw;box-shadow:0 20px 50px rgba(0,0,0,.18);transform:scale(.96) translateY(8px);transition:transform .25s cubic-bezier(.34,1.2,.64,1)}
    .filter-modal-overlay.open .filter-modal{transform:scale(1) translateY(0)}
    .filter-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px}
    .filter-modal-header h2{font-size:18px;font-weight:700;color:#111}
    .filter-close-btn{width:32px;height:32px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:20px;border-radius:6px}
    .filter-close-btn:hover{background:#f3f4f6;color:#111}
    .filter-modal-body{padding:0 24px 20px}
    .filter-section{margin-bottom:20px}
    .filter-section-label{font-size:14px;font-weight:700;color:#111;margin-bottom:10px;display:block}
    .filter-date-row{display:flex;align-items:center;gap:10px}
    .filter-date-input{flex:1;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#374151;outline:none;font-family:'Inter',sans-serif;background:#fff}
    .filter-date-input:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.08)}
    .filter-date-sep{font-size:13px;color:#9ca3af;font-weight:500}
    .filter-date-hint{font-size:12px;color:#9ca3af;margin-top:6px}
    .filter-select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#374151;outline:none;background:#fff;font-family:'Inter',sans-serif;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
    .filter-select:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.08)}
    .filter-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #f3f4f6}
    .filter-cancel-btn{padding:10px 20px;border:1px solid #d1d5db;background:#fff;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;color:#374151}
    .filter-cancel-btn:hover{background:#f9fafb}
    .filter-apply-btn{padding:10px 24px;border:none;background:#1d6fdb;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;color:#fff}
    .filter-apply-btn:hover{background:#1557b0}