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

 :root {
     --bg-primary: #ffffff;
     --bg-secondary: #f5f5f4;
     --bg-tertiary: #f0eeec;
     --text-primary: #1c1c1a;
     --text-secondary: #6b6b68;
     --border-light: rgba(0, 0, 0, 0.1);
     --border-medium: rgba(0, 0, 0, 0.18);
     --radius-md: 8px;
     --radius-lg: 12px;
     --font: 'DM Sans', system-ui, sans-serif;
 }

 @media (prefers-color-scheme: dark) {
     :root {
         --bg-primary: #1c1c1a;
         --bg-secondary: #252523;
         --bg-tertiary: #2e2e2b;
         --text-primary: #f0eeec;
         --text-secondary: #9a9a96;
         --border-light: rgba(255, 255, 255, 0.08);
         --border-medium: rgba(255, 255, 255, 0.14);
     }
 }

 body {
     font-family: var(--font);
     background: var(--bg-tertiary);
     color: var(--text-primary);
     min-height: 100vh;
     padding: 2rem 1rem;
 }

 .container {
     max-width: 820px;
     margin: 0 auto;
 }

 .header {
     margin-bottom: 1.75rem;
 }

 .header h1 {
     font-size: 22px;
     font-weight: 500;
 }

 .header p {
     font-size: 13px;
     color: var(--text-secondary);
     margin-top: 4px;
 }

 .stats {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 10px;
     margin-bottom: 1.5rem;
 }

 .stat-card {
     background: var(--bg-primary);
     border: 0.5px solid var(--border-light);
     border-radius: var(--radius-md);
     padding: 0.85rem 1rem;
 }

 .stat-label {
     font-size: 12px;
     color: var(--text-secondary);
     margin-bottom: 4px;
 }

 .stat-value {
     font-size: 24px;
     font-weight: 500;
 }

 .stat-card.applied .stat-value {
     color: #185FA5;
 }

 .stat-card.interview .stat-value {
     color: #3B6D11;
 }

 .stat-card.offered .stat-value {
     color: #854F0B;
 }

 .stat-card.rejected .stat-value {
     color: #A32D2D;
 }

 .top-bar {
     display: flex;
     gap: 10px;
     margin-bottom: 1.25rem;
     align-items: center;
 }

 .search-wrap {
     flex: 1;
     position: relative;
 }

 .search-wrap input {
     width: 100%;
     padding: 8px 12px 8px 10px;
     font-size: 14px;
     border: 0.5px solid var(--border-medium);
     border-radius: var(--radius-md);
     background: var(--bg-primary);
     color: var(--text-primary);
     outline: none;
     font-family: var(--font);
 }

 .search-wrap input:focus {
     border-color: rgba(0, 0, 0, 0.3);
 }

 .search-icon {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 14px;
     color: var(--text-secondary);
     pointer-events: none;
 }

 select#filter,
 button#openModal {
     padding: 8px 12px;
     font-size: 13px;
     border: 0.5px solid var(--border-medium);
     border-radius: var(--radius-md);
     background: var(--bg-primary);
     color: var(--text-primary);
     cursor: pointer;
     font-family: var(--font);
     outline: none;
 }

 button#openModal {
     font-weight: 500;
     white-space: nowrap;
 }

 button#openModal:hover,
 select#filter:hover {
     background: var(--bg-secondary);
 }

 .table-wrap {
     background: var(--bg-primary);
     border: 0.5px solid var(--border-light);
     border-radius: var(--radius-lg);
     overflow: hidden;
 }

 table {
     width: 100%;
     border-collapse: collapse;
     font-size: 13px;
     table-layout: fixed;
 }

 thead {
     background: var(--bg-secondary);
 }

 th {
     padding: 10px 14px;
     text-align: left;
     font-weight: 500;
     font-size: 12px;
     color: var(--text-secondary);
     border-bottom: 0.5px solid var(--border-light);
 }

 td {
     padding: 11px 14px;
     color: var(--text-primary);
     border-bottom: 0.5px solid var(--border-light);
     vertical-align: middle;
 }

 tr:last-child td {
     border-bottom: none;
 }

 tbody tr:hover td {
     background: var(--bg-secondary);
 }

 .col-company {
     width: 28%;
 }

 .col-role {
     width: 24%;
 }

 .col-date {
     width: 16%;
 }

 .col-status {
     width: 18%;
 }

 .col-actions {
     width: 14%;
 }

 .badge {
     display: inline-block;
     font-size: 11px;
     font-weight: 500;
     padding: 3px 9px;
     border-radius: 999px;
 }

 .badge.applied {
     background: #E6F1FB;
     color: #185FA5;
 }

 .badge.interview {
     background: #EAF3DE;
     color: #3B6D11;
 }

 .badge.offered {
     background: #FAEEDA;
     color: #854F0B;
 }

 .badge.rejected {
     background: #FCEBEB;
     color: #A32D2D;
 }

 .action-btn {
     background: none;
     border: none;
     cursor: pointer;
     font-size: 12px;
     color: var(--text-secondary);
     padding: 3px 8px;
     border-radius: var(--radius-md);
     font-family: var(--font);
 }

 .action-btn:hover {
     background: var(--bg-secondary);
     color: var(--text-primary);
 }

 .empty-state {
     text-align: center;
     padding: 2.5rem 1rem;
     color: var(--text-secondary);
     font-size: 13px;
 }

 .modal-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.35);
     z-index: 100;
     align-items: center;
     justify-content: center;
 }

 .modal-overlay.open {
     display: flex;
 }

 .modal {
     background: var(--bg-primary);
     border-radius: var(--radius-lg);
     border: 0.5px solid var(--border-light);
     padding: 1.5rem;
     width: 100%;
     max-width: 420px;
     margin: 1rem;
 }

 .modal h2 {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 1.25rem;
 }

 .field {
     margin-bottom: 12px;
 }

 .field label {
     display: block;
     font-size: 12px;
     color: var(--text-secondary);
     margin-bottom: 5px;
 }

 .field input,
 .field select {
     width: 100%;
     padding: 8px 10px;
     font-size: 13px;
     border: 0.5px solid var(--border-medium);
     border-radius: var(--radius-md);
     background: var(--bg-primary);
     color: var(--text-primary);
     outline: none;
     font-family: var(--font);
 }

 .field input:focus,
 .field select:focus {
     border-color: rgba(0, 0, 0, 0.3);
 }

 .modal-actions {
     display: flex;
     gap: 8px;
     justify-content: flex-end;
     margin-top: 1.25rem;
 }

 .btn-cancel,
 .btn-save {
     padding: 8px 16px;
     font-size: 13px;
     border: 0.5px solid var(--border-medium);
     border-radius: var(--radius-md);
     cursor: pointer;
     font-family: var(--font);
 }

 .btn-cancel {
     background: none;
     color: var(--text-secondary);
 }

 .btn-save {
     background: var(--bg-primary);
     color: var(--text-primary);
     font-weight: 500;
 }

 .btn-save:hover {
     background: var(--bg-secondary);
 }

 .btn-delete {
     padding: 8px 15px;
     background-color: #A32D2D;
     color: black;
     border: none;
     border-radius: 13px;
      min-width: 70px;
    white-space: nowrap;

 }

 .btn-edit {
     margin-top: 5px;
     padding: 8px 20px;
     background-color: #dcd85a;
     color: black;
     border: none;
     border-radius: 13px;
      min-width: 70px;
    white-space: nowrap;

 }

 .btn-delete:hover {
     background-color: #651515;
 }

 .btn-edit:hover {
     background-color: #8a872b;
 }

 @media (max-width: 540px) {
     .stats {
         grid-template-columns: repeat(2, 1fr);
     }

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

     .col-date {
         display: none;
     }

  

     .table-wrap {
         overflow-x: auto;
     }

     table {
         min-width: 600px;
     }

     .col-actions {
         width: auto;
     }

     td:last-child {
         display: flex;
         flex-direction: column;
         gap: 6px;
     }
 }

 td:last-child {
     display: flex;
     flex-direction: column;
     gap: 6px;
     align-items: stretch;
 }