:root{--bg:#f4f7f8;--surface:#fff;--text:#13211d;--muted:#68766f;--line:#e2e9e6;--brand:#0f7a63;--brand2:#0a5e4c;--soft:#e7f5f0;--warn:#ad6b00;--warnsoft:#fff3d9;--danger:#b54747;--dangersoft:#fdeaea;--info:#365f91;--infosoft:#eaf1fb;--shadow:0 10px 30px rgba(23,42,36,.07);--r:18px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input{font:inherit}.app{display:grid;grid-template-columns:258px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#0e1b17;color:#dbe7e2;padding:24px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:0 10px 20px}.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#23a37f,#0f6d58);display:grid;place-items:center;color:white;font-weight:800;font-size:20px}.brand h1{font-size:19px;margin:0;color:#fff}.brand small{color:#8fa49b;font-size:11px}.nav-section{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6f857b;padding:12px}.nav{display:flex;flex-direction:column;gap:5px}.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:#b9c9c2;font-size:14px}.nav a:hover{background:#172923;color:#fff}.nav a.active{background:#1d382f;color:#fff}.dot{width:8px;height:8px;border-radius:50%;background:#789189}.nav a.active .dot{background:#53d0a9}.sidebar-footer{margin-top:auto;padding:16px 10px 6px}.profile{display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid #20332c}.avatar{width:36px;height:36px;border-radius:50%;background:#2d4d42;display:grid;place-items:center;font-weight:700}.profile strong{display:block;font-size:13px}.profile small{color:#83988f}.main{min-width:0}.topbar{height:72px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}.business strong{font-size:14px}.business span{font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:10px}.btn{border:0;border-radius:12px;padding:10px 14px;font-weight:650;cursor:pointer}.btn.primary{background:var(--brand);color:white}.btn.secondary{background:white;border:1px solid var(--line)}.content{padding:28px;max-width:1480px;margin:auto}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}.page-head h2{margin:0;font-size:26px}.page-head p{margin:7px 0 0;color:var(--muted);font-size:14px}.grid{display:grid;gap:18px}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}.metric .label{font-size:12px;color:var(--muted);margin-bottom:10px}.metric .value{font-size:27px;font-weight:780}.metric .delta{font-size:12px;margin-top:8px;color:var(--brand)}.metric .down{color:var(--danger)}.card h3{margin:0 0 6px;font-size:16px}.sub,.muted{color:var(--muted);font-size:12px}.progress{height:10px;background:#edf1ef;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#38aa87)}.status-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.status-row:last-child{border-bottom:0}.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700}.green{background:var(--soft);color:var(--brand)}.yellow{background:var(--warnsoft);color:var(--warn)}.red{background:var(--dangersoft);color:var(--danger)}.blue{background:var(--infosoft);color:var(--info)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}table{width:100%;border-collapse:collapse;min-width:820px}th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#7c8983;background:#fafcfc}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.search{flex:1;min-width:220px}.search input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px}.filter{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}.upload{border:1.5px dashed #9dc8bb;border-radius:18px;background:#f6fbf9;padding:36px;text-align:center;cursor:pointer}.upload .icon{width:54px;height:54px;border-radius:16px;background:var(--soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 12px;font-size:24px;font-weight:700}.upload h3{margin:0 0 7px}.upload p{margin:0;color:var(--muted);font-size:13px}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.review-box{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff}.review-box+.review-box{margin-top:12px}.review-title{display:flex;justify-content:space-between;gap:10px}.choice{display:flex;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;margin-top:9px}.choice input{accent-color:var(--brand)}.report-table td:nth-child(n+2),.report-table th:nth-child(n+2){text-align:right}.report-table .group td{font-weight:800;background:#f7faf9}.report-table .total td{font-weight:800;border-top:2px solid #d8e2de}.stepper{display:flex;gap:6px;flex-wrap:wrap}.step{padding:7px 10px;border-radius:999px;background:#eef3f1;color:#64736d;font-size:11px;font-weight:700}.step.done{background:var(--soft);color:var(--brand)}.step.current{background:#0e1b17;color:#fff}.checklist{display:flex;flex-direction:column;gap:10px}.check{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px}.circle{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eaf4f0;color:var(--brand);font-size:12px;font-weight:800}.warn .circle{background:var(--warnsoft);color:var(--warn)}.chart-row{display:flex;align-items:end;gap:14px;height:180px}.bar{flex:1;text-align:center;font-size:11px;color:var(--muted)}.bar span{display:block;background:#d7ece5;border-radius:10px 10px 3px 3px;margin-bottom:7px}.bar.highlight span{background:#2f9e7b}@media(max-width:1000px){.cols-4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}@media(max-width:780px){.app{grid-template-columns:1fr}.sidebar{display:none}.content{padding:20px}.topbar{padding:0 18px}.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}.page-head{flex-direction:column}}

/* DataTables & Enhanced UI Extensions */
.action-buttons { display: inline-flex; align-items: center; gap: 6px; }
.btn-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: all 0.15s ease; padding: 0; text-decoration: none; }
.btn-action i, .btn-action svg { width: 15px; height: 15px; }
.btn-action:hover { background: var(--soft); color: var(--brand); border-color: #9dc8bb; }
.btn-action.btn-danger:hover { background: var(--dangersoft); color: var(--danger); border-color: #f3b6b6; }
.btn-action.btn-success:hover { background: var(--soft); color: var(--brand); border-color: #9dc8bb; }
.btn-action.btn-switch { color: var(--brand); }

/* DataTables Overrides */
.dataTables_wrapper { padding: 14px 16px; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.dataTables_wrapper .dataTables_filter input { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-left: 8px; outline: none; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--brand); }
.dataTables_wrapper .dataTables_length select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 0 6px; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin-top: 14px; font-size: 12px; color: var(--muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 5px 11px !important; border-radius: 8px !important; border: 1px solid transparent !important; margin: 0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--brand) !important; color: white !important; border-color: var(--brand) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { background: var(--soft) !important; color: var(--brand) !important; border-color: #c0dfd5 !important; }

/* Modal System */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(14,27,23,0.5); backdrop-filter: blur(4px); z-index: 999; place-items: center; }
.modal-backdrop.show { display: grid; }
.modal { background: #fff; width: 100%; max-width: 580px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); border: 1px solid var(--line); overflow: hidden; animation: popIn 0.2s ease; }
@keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-body { padding: 24px; max-height: 75vh; overflow-y: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); background: #fafcfc; display: flex; justify-content: flex-end; gap: 10px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.form-control { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; outline: none; background: #fff; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,122,99,0.1); }
textarea.form-control { min-height: 80px; resize: vertical; }

/* Alert Notifications */
.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.alert-success { background: var(--soft); color: var(--brand); border: 1px solid #c2e5da; }
.alert-danger { background: var(--dangersoft); color: var(--danger); border: 1px solid #f8c8c8; }

/* Context Switcher Dropdown */
.context-box { display: flex; align-items: center; gap: 12px; }
.context-select { display: flex; flex-direction: column; }
.context-dropdown { position: relative; }
.context-toggle { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.context-toggle:hover { background: #eef3f1; }
.dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); min-width: 260px; z-index: 100; padding: 8px; }
.dropdown-menu.show { display: block; }
.dropdown-header { font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 6px 10px; letter-spacing: 0.05em; }
.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text); text-decoration: none; }
.dropdown-item:hover { background: var(--soft); color: var(--brand); }
.dropdown-item.active { background: #0e1b17; color: #fff; font-weight: 600; }
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 0; }