@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root { --bg-primary:#fff;--bg-secondary:#f7f7f8;--surface:#fff;--border:#e5e7eb;--text-primary:#111827;--text-secondary:#6b7280;--accent:#10a37f;--accent-hover:#0e8c6d;--shadow:0 2px 8px rgba(0,0,0,.06) }
*,*::before,*::after{box-sizing:border-box}
@media(prefers-color-scheme:dark){:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--surface:#161b22;--border:#30363d;--text-primary:#f0f6fc;--text-secondary:#8b949e;--accent:#10a37f;--accent-hover:#12b087;--shadow:0 2px 8px rgba(0,0,0,.4)}}
html,body{height:100%;margin:0;font-family:"Inter",sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}
.wrapper{min-height:100%;display:flex;flex-direction:column}
/* Header */
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:clamp(.9rem,1vw,1.25rem) clamp(1.25rem,2vw,2.5rem);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50}
.logo{font-size:1.2rem;font-weight:600;color:var(--accent)}
nav a{margin-left:1.5rem;text-decoration:none;font-size:.95rem;color:var(--text-secondary);transition:color .15s}
nav a:hover,nav a:focus{color:var(--accent)}
/* Content */
.content{flex:1;padding:clamp(1.25rem,2vw,2.5rem);background:var(--bg-secondary)}
/* Controls */
input[type=text],input[type=email],input[type=password],input[type=number],select{width:100%;padding:.75rem .9rem;border:1px solid var(--border);border-radius:.55rem;background:var(--surface);color:var(--text-primary);font-size:.95rem;transition:border .2s,box-shadow .2s}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(16,163,127,.25);outline:none}
button{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;font-size:.92rem;font-weight:500;border:none;border-radius:.55rem;color:#fff;background:var(--accent);cursor:pointer;transition:background .2s,box-shadow .2s}
button:hover{background:var(--accent-hover);box-shadow:0 4px 12px rgba(16,163,127,.25)}
.btn-muted{background:var(--surface);color:var(--text-secondary);border:1px solid var(--border)}
.btn-muted:hover{background:var(--bg-secondary)}
/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;box-shadow:var(--shadow);padding:2rem;margin-bottom:2rem}
/* Table */
.table-wrapper{overflow-x:auto;margin-bottom:1.5rem}
.data-table{width:100%;border-collapse:collapse;min-width:640px}
.data-table th,.data-table td{padding:.95rem 1.25rem;border-bottom:1px solid var(--border);font-size:.9rem;text-align:left;vertical-align:middle}
.data-table th{background:var(--bg-secondary);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:600;color:var(--text-secondary);position:sticky;top:0}
.data-table tr:hover td{background:rgba(16,163,127,.05)}
.checkbox-cell{width:48px;text-align:center}
/* Badges */
.badge{display:inline-block;padding:.25rem .65rem;font-size:.76rem;border-radius:.4rem;font-weight:500}
.badge.delivered{background:#dcfce7;color:#166534}
.badge.ongoing{background:#fef9c3;color:#92400e}
.badge.cancelled{background:#cffafe;color:#164e63}
.badge.success{background:#dcfce7;color:#166534}
.badge.failed{background:#fee2e2;color:#991b1b}
.badge.pending-task{background:#fef9c3;color:#92400e}
.badge.pending{background:#fef9c3;color:#92400e}
/* Helpers */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.column{flex-direction:column}.gap-2{gap:.5rem}
.search-row{display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:1.25rem;align-items:flex-end;margin-bottom:1.5rem}
.search-row .control{flex:1 1 260px}
.pagination-controls{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem}
#taskStatus{white-space:pre-wrap;background:var(--surface);border:1px solid var(--border);border-radius:.55rem;padding:1.25rem;font-size:.85rem;color:var(--text-secondary);margin-top:1.5rem}