/* Final visual polish layer. Keep this file last in index.html. */

:root {
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-line: rgba(0, 0, 142, .22);
  --app-line-soft: rgba(0, 0, 142, .12);
}

.main-wrapper,
.main-wrapper *:not(.sidebar):not(.sidebar *):not(.sidebar-item):not(.sidebar-toggle):not(.sidebar-logo):not(.sidebar-profile):not(.sidebar-brand-block):not(.profile-icon):not(.dropdown-chevron):not(.sidebar-backdrop) {
  color: #111827;
}

.main-wrapper .admin-subtitle,
.main-wrapper .summary-metric-meta,
.main-wrapper .summary-chart-head span,
.main-wrapper .dashboard-section-subtitle,
.main-wrapper .quick-action small,
.main-wrapper .settings-help,
.main-wrapper .package-header p,
.main-wrapper .account-form label,
.main-wrapper .modal-subtitle,
.main-wrapper .empty-state,
.main-wrapper .report-table td,
.main-wrapper .master-table td,
.main-wrapper .inventory-table td,
.main-wrapper .recent-table td,
.main-wrapper .table-meta,
.main-wrapper .kv-key,
.main-wrapper .meta-label {
  color: #4B5563 !important;
}

.export-btn,
.inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .export-btn,
.print-type-btn.instalasi,
.print-type-btn.dismantle,
.print-type-btn.maintenance,
.inventory-print-btn {
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.export-btn,
.inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .inventory-import-btn {
  background: linear-gradient(135deg, #00008E, #0A4FBB) !important;
}

#inventoryPanel .inventory-toolbar .inventory-import-btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

.inventory-print-btn {
  background: linear-gradient(135deg, #F59E0B, #F28C28) !important;
}

.print-type-btn.instalasi {
  background: linear-gradient(135deg, #F59E0B, #F28C28) !important;
}

.print-type-btn.dismantle {
  background: linear-gradient(135deg, #FACC15, #E7B63A) !important;
}

.print-type-btn.maintenance {
  background: linear-gradient(135deg, #22C55E, #17A34A) !important;
}

#inventoryPanel .inventory-toolbar .inventory-import-btn .file-btn-icon {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}

.quick-action-icon.blue {
  color: #7CB7FF !important;
  background: #EAF7FF !important;
}

.quick-action-icon.green {
  color: #22C55E !important;
  background: #EAFCEB !important;
}

.quick-action-icon.orange {
  color: #F59E0B !important;
  background: #FFF3DB !important;
}

.quick-action-icon.teal {
  color: #FACC15 !important;
  background: #FFF9D8 !important;
}

html {
  text-rendering: geometricPrecision;
}

body {
  letter-spacing: 0;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.recent-reports,
.quick-actions,
.modal,
.center-card {
  border-radius: var(--app-radius-lg);
}

#formView .ticket-head {
  background: linear-gradient(135deg, #E9E7FF 0%, #DFF8FF 100%);
}

#formView .ticket-label {
  color: #0F7C8A;
}

#formView .ticket-type {
  color: #0B5D6B;
}

#formView .ticket-id {
  color: #2A6D7A;
}

.admin-header h2,
.ticket-type,
.account-form-title,
.dashboard-section-heading h3,
.summary-metric-title {
  letter-spacing: 0;
}

.admin-subtitle,
.summary-metric-meta,
.quick-action small,
.settings-help {
  color: #4B5563;
}

.summary-metric-card {
  border-color: #cde7ef;
  box-shadow: 0 16px 34px -30px rgba(11, 95, 122, .55);
}

.summary-metric-card::before,
.summary-metric-card::after {
  opacity: .72;
}

.summary-metric-icon,
.quick-action-icon,
.network-summary-icon,
.payment-icon {
  border-radius: 14px;
}

.section-icon svg,
.quick-action-icon svg,
.summary-metric-icon svg,
.network-summary-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-icon svg {
  width: 20px;
  height: 20px;
}

.account-form,
.package-add-card,
.master-entry-card,
.settings-logo-row {
  border-color: var(--app-line);
  background: #fff;
}

#inventoryPanel {
  display: block;
}

#inventoryPanel[hidden] {
  display: none;
}

#inventoryPanel .account-form-title {
  margin-bottom: 12px;
}

#inventoryForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  gap: 10px;
  align-items: end;
}

#inventoryForm .row2,
#inventoryForm .master-add-row {
  margin-bottom: 0;
}

#inventoryForm .master-add-row {
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
}

#inventoryForm .submit-btn {
  margin-top: 0;
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

.account-form input,
.account-form select,
.account-form textarea,
.inventory-toolbar input,
.inventory-toolbar select,
.edit-field input,
.edit-field select,
.edit-field textarea {
  border-radius: var(--app-radius-sm);
}

.submit-btn,
.export-btn,
.print-type-btn,
.file-btn,
.btn-print,
.view-all-btn {
  border-radius: var(--app-radius-md);
}

.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap {
  border-radius: var(--app-radius-md);
  border-color: var(--app-line);
  box-shadow: none;
}

.master-list {
  border: 0;
  border-radius: 0;
  padding-top: 0;
  background: transparent;
  box-shadow: none;
}

.inventory-table-wrap,
.report-table-wrap,
.recent-table-wrap {
  margin-top: 0;
}

.master-bulk-bar {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th {
  background: #f7f9fb;
  color: #244152;
  border-color: var(--app-line);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td {
  border-color: var(--app-line-soft);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.3;
  vertical-align: middle;
}

.master-item-actions,
.table-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.report-table input[type=checkbox],
.master-table input[type=checkbox],
.inventory-table input[type=checkbox] {
  width: 16px;
  height: 16px;
  box-shadow: none;
}

.report-table .select-col,
.master-table .master-select-col {
  width: 42px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.report-table .number-col,
.master-table .master-number-col {
  width: 54px;
  text-align: center;
  color: #6d7d88;
  font-weight: 800;
}

.table-actions button,
.master-item-actions button {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.master-table th:last-child,
.inventory-table th:last-child {
  width: 150px;
}

.master-bulk-bar {
  min-height: 32px;
  margin: 12px 0;
  color: #657782;
  font-size: 12px;
}

.master-list .master-bulk-bar:first-child {
  margin-top: 0;
}

.inventory-table-wrap .master-table,
.master-list > .master-table,
.recent-table-wrap .recent-table {
  width: 100%;
}

/* Match master and inventory tables to the report table sizing */
.master-list .master-table,
.inventory-table {
  font-size: 14px;
}

.master-list .master-table th,
.inventory-table th {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.25;
}

.master-list .master-table td,
.inventory-table td {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
}

.master-list .master-table .master-select-col,
.inventory-table .master-select-col {
  width: 42px;
  padding-left: 10px;
  padding-right: 10px;
}

.master-list .master-table .master-number-col,
.inventory-table .master-number-col {
  width: 54px;
  font-size: 14px;
}

.master-list .master-item-actions,
.inventory-table .master-item-actions {
  min-height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 6px;
  border-bottom-color: transparent;
}

.master-list .master-item-actions button,
.inventory-table .master-item-actions button {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.2;
}

.master-list .master-bulk-bar {
  min-height: 32px;
  margin: 12px 0;
}

.inventory-status {
  padding: 4px 8px;
  font-size: 12px;
}

.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .75fr) repeat(4, max-content);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.inventory-toolbar input,
.inventory-toolbar select {
  min-width: 0;
  width: 100%;
}

.inventory-toolbar .export-btn,
.inventory-toolbar .file-btn,
.inventory-toolbar .inventory-print-btn {
  height: 38px;
  min-width: 0;
  padding: 0 14px;
  white-space: nowrap;
}

.app-table-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 44px;
  margin: 12px 0 0;
  padding: 6px 14px;
  border-radius: 0 0 10px 10px;
  border: 1px solid var(--app-line);
  border-top: 0;
  background: #fff;
  color: #4B5563;
  font-size: 14px;
  line-height: 1;
}

.page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: auto;
  white-space: nowrap;
  height: 32px;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
}

.page-size-control select {
  flex: 0 0 58px;
  width: 58px;
  max-width: 58px;
  height: 32px;
  min-width: 58px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: #123b55;
  font: 800 14px/1 Inter, sans-serif;
  font-weight: 700;
  padding: 0 18px 0 0;
  cursor: pointer;
}

.page-size-control select option {
  color: #1f2a44;
  background: #fff;
}

.pagination-range {
  white-space: nowrap;
  color: #123b55;
  min-width: 110px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 32px;
}

.pagination-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.pagination-icon-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #47677a;
  font: 800 26px/1 Inter, sans-serif;
}

.pagination-icon-actions button:hover:not(:disabled) {
  background: #eef7fb;
  color: #075985;
}

.pagination-icon-actions button:disabled {
  color: #b9cad4;
}

.modal-backdrop {
  backdrop-filter: blur(3px);
}

body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .recent-reports,
body.dark-mode .quick-actions,
body.dark-mode .modal,
body.dark-mode .center-card,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row {
  border-color: #2b586d;
  background: linear-gradient(135deg, rgba(16, 40, 58, .96), rgba(13, 35, 51, .98));
  box-shadow: 0 22px 48px -36px rgba(0, 0, 0, .85);
}

body.dark-mode .admin-subtitle,
body.dark-mode .summary-metric-meta,
body.dark-mode .quick-action small,
body.dark-mode .settings-help {
  color: #b6d1dd;
}

body.dark-mode .report-table th,
body.dark-mode .master-table th,
body.dark-mode .inventory-table th,
body.dark-mode .recent-table th,
body.dark-mode .material-card th {
  background: #18384d;
  color: #edf9ff;
  border-color: #315f74;
}

body.dark-mode .report-table td,
body.dark-mode .master-table td,
body.dark-mode .inventory-table td,
body.dark-mode .recent-table td,
body.dark-mode .material-card td {
  background: #10283a;
  color: #d9eef7;
  border-color: #2a5367;
}

body.dark-mode .report-table .number-col,
body.dark-mode .master-table .master-number-col,
body.dark-mode .master-bulk-bar {
  color: #b6d1dd;
}

body.dark-mode .app-table-pagination {
  border-color: #315f74;
  background: #10283a;
  color: #b6d1dd;
}

body.dark-mode .pagination-range,
body.dark-mode .page-size-control select {
  color: #edf9ff;
}

body.dark-mode .pagination-icon-actions button {
  color: #b6d1dd;
}

body.dark-mode .pagination-icon-actions button:hover:not(:disabled) {
  background: rgba(56, 189, 248, .12);
  color: #edf9ff;
}

@media (max-width: 760px) {
  #inventoryForm,
  #inventoryForm .master-add-row,
  .inventory-toolbar {
    grid-template-columns: 1fr;
  }

  .app-table-pagination {
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 10px;
  }

  .page-size-control {
    flex: 0 0 auto;
    margin-right: 0;
  }
}

body.dark-mode .report-table-wrap,
body.dark-mode .inventory-table-wrap,
body.dark-mode .master-list,
body.dark-mode .recent-table-wrap {
  box-shadow: none;
}

body.dark-mode .report-table input[type=checkbox],
body.dark-mode .master-table input[type=checkbox],
body.dark-mode .inventory-table input[type=checkbox] {
  box-shadow: none;
}

body.dark-mode .summary-metric-card.blue .summary-metric-icon {
  background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(56, 189, 248, .10));
  color: #7bc7e8;
}

body.dark-mode .summary-metric-card.amber .summary-metric-icon {
  background: linear-gradient(135deg, rgba(148, 163, 184, .18), rgba(34, 211, 238, .09));
  color: #9cc8d7;
}

body.dark-mode .summary-metric-card.green .summary-metric-icon {
  background: linear-gradient(135deg, rgba(20, 184, 166, .17), rgba(45, 212, 191, .10));
  color: #82dccf;
}

/* Final table layout: Kelola Data + Kelola ONT */
#inventoryPanel {
  padding: 16px;
}

#inventoryPanel .account-form-title {
  margin: 0 0 12px;
  color: #244152;
  font-size: 18px;
  line-height: 1.25;
}

#inventoryForm {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(210px, 1.05fr) 150px;
  gap: 10px;
  align-items: center;
  margin: 0;
}

#inventoryForm .row2,
#inventoryForm .master-add-row {
  display: contents;
}

#inventoryForm input,
#inventoryPanel .inventory-toolbar input,
#inventoryPanel .inventory-toolbar select {
  height: 40px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #cfe4ee;
  border-radius: 9px;
  background: #fff;
  color: #244152;
  font-size: 13px;
  line-height: 40px;
  box-shadow: none;
}

#inventoryForm input:focus,
#inventoryPanel .inventory-toolbar input:focus,
#inventoryPanel .inventory-toolbar select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
  outline: 0;
}

#inventoryForm .submit-btn {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 40px;
}

#inventoryPanel .account-error {
  min-height: 12px;
  margin: 6px 0 0;
}

#inventoryPanel .inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 168px repeat(4, max-content);
  gap: 10px;
  align-items: center;
  margin: 8px 0 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  min-width: 116px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}

#inventoryPanel .inventory-toolbar .export-btn {
  background: linear-gradient(135deg, #CFEAFF, #A7D9FF) !important;
  color: #12314D !important;
  border: 0 !important;
}

#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-import-btn {
  background: linear-gradient(135deg, #F9DA72, #F4C542) !important;
  color: #2D2400 !important;
  border: 0 !important;
}

#inventoryPanel .inventory-toolbar .inventory-print-btn {
  background: linear-gradient(135deg, #F7B267, #F59E0B) !important;
  color: #fff !important;
  border: 0 !important;
}

#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-import-btn,
#inventoryPanel .inventory-toolbar .inventory-print-btn {
  box-shadow: none !important;
}

#inventoryPanel .inventory-toolbar .file-btn input {
  display: none;
}

#inventoryPanel .inventory-toolbar .file-btn .file-btn-icon,
#inventoryPanel .inventory-toolbar .inventory-import-btn .file-btn-icon {
  background: rgba(255, 255, 255, .30) !important;
  color: inherit !important;
}

#inventoryPanel .inventory-toolbar .inventory-import-btn {
  background: linear-gradient(135deg, #F7B267, #F59E0B) !important;
  color: #fff !important;
}

#inventoryPanel .inventory-toolbar .inventory-print-btn {
  background: linear-gradient(135deg, #6AD48B, #22C55E) !important;
  color: #fff !important;
}

.master-list,
#inventoryList {
  width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  background: transparent;
}

.master-list .master-bulk-bar,
#inventoryList .inventory-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  margin: 0 0 8px;
  padding: 0;
  color: #4B5563;
  font-size: 13px;
  line-height: 1.35;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.inventory-table-wrap,
.master-list > .master-table {
  border: 1px solid #cfe4ee;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: none;
}

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

.master-list .master-table,
.inventory-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.3;
}

.master-list > .master-table {
  overflow: hidden;
}

.master-list .master-table th,
.inventory-table th {
  height: 40px;
  padding: 8px 10px;
  background: #f7f9fb;
  color: #244152;
  border-right: 1px solid #cfe4ee;
  border-bottom: 1px solid #cfe4ee;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.master-list .master-table td,
.inventory-table td {
  height: 46px;
  padding: 8px 10px;
  background: #fff;
  color: #29495d;
  border-right: 1px solid #dbeef5;
  border-bottom: 1px solid #dbeef5;
  font-size: 14px;
  line-height: 1.25;
  vertical-align: middle;
  white-space: nowrap;
}

.master-list .master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.master-list .master-table tbody tr:hover td,
.inventory-table tbody tr:hover td {
  background: #f2fbff;
}

.master-list .master-table th:last-child,
.master-list .master-table td:last-child,
.inventory-table th:last-child,
.inventory-table td:last-child {
  border-right: 0;
}

.master-list .master-table tbody tr:last-child td,
.inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

.master-list .master-table .master-select-col,
.inventory-table .master-select-col {
  width: 46px;
  min-width: 46px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

.master-list .master-table .master-number-col,
.inventory-table .master-number-col {
  width: 56px;
  min-width: 56px;
  color: #6b7f8c;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.master-list .master-table input[type=checkbox],
.inventory-table input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #24afd0;
  box-shadow: none;
}

.master-list .master-item-actions,
.inventory-table .master-item-actions,
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 30px;
  padding: 8px 10px;
  border: 0;
  white-space: nowrap;
}

.master-list .master-item-actions button,
.inventory-table .master-item-actions button,
.table-actions button {
  min-height: 28px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.inventory-status {
  min-width: 76px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.app-table-pagination {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 46px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid #cfe4ee;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
  color: #5f7b8b;
  box-shadow: none;
}

.page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-right: auto;
  color: #5f7b8b;
  font-size: 14px;
  font-weight: 800;
  line-height: 32px;
  white-space: nowrap;
}

.page-size-control select {
  width: 66px;
  min-width: 66px;
  height: 32px;
  padding: 0 22px 0 0;
  border: 0;
  background: transparent;
  color: #123b55;
  font: 800 14px/32px Inter, sans-serif;
  cursor: pointer;
  box-shadow: none;
}

.pagination-range {
  min-width: 112px;
  color: #123b55;
  font-size: 14px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
}

.pagination-icon-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 32px;
}

.pagination-icon-actions button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #47677a;
  font: 900 28px/1 Inter, sans-serif;
  box-shadow: none;
}

.pagination-icon-actions button:disabled {
  color: #d7e5ec;
  opacity: 1;
}

.pagination-icon-actions button:hover:not(:disabled) {
  background: #eef7fb;
  color: #0f6d91;
}

body.dark-mode #inventoryPanel .account-form-title {
  color: #edf9ff;
}

body.dark-mode #inventoryForm input,
body.dark-mode #inventoryPanel .inventory-toolbar input,
body.dark-mode #inventoryPanel .inventory-toolbar select {
  border-color: #2f6075;
  background: #10283a;
  color: #d9eef7;
}

body.dark-mode #inventoryForm input::placeholder,
body.dark-mode #inventoryPanel .inventory-toolbar input::placeholder {
  color: #88aebe;
}

body.dark-mode .inventory-table-wrap,
body.dark-mode .master-list > .master-table {
  border-color: #315f74;
  background: #10283a;
}

body.dark-mode .master-list .master-table th,
body.dark-mode .inventory-table th {
  background: #18384d;
  color: #edf9ff;
  border-right-color: #315f74;
  border-bottom-color: #315f74;
}

body.dark-mode .master-list .master-table td,
body.dark-mode .inventory-table td {
  background: #10283a;
  color: #d9eef7;
  border-right-color: #2a5367;
  border-bottom-color: #2a5367;
}

body.dark-mode .master-list .master-table tbody tr:nth-child(even) td,
body.dark-mode .inventory-table tbody tr:nth-child(even) td {
  background: #0e2435;
}

body.dark-mode .master-list .master-table tbody tr:hover td,
body.dark-mode .inventory-table tbody tr:hover td {
  background: #17354a;
}

body.dark-mode .master-list .master-table .master-number-col,
body.dark-mode .inventory-table .master-number-col,
body.dark-mode .master-list .master-bulk-bar,
body.dark-mode #inventoryList .inventory-bulk-bar {
  color: #b6d1dd;
}

body.dark-mode .app-table-pagination {
  border-color: #315f74;
  background: #10283a;
  color: #b6d1dd;
}

body.dark-mode .page-size-control,
body.dark-mode .pagination-range,
body.dark-mode .page-size-control select {
  color: #edf9ff;
}

body.dark-mode .pagination-icon-actions button {
  color: #b6d1dd;
}

body.dark-mode .pagination-icon-actions button:disabled {
  color: #47677a;
}

body.dark-mode .pagination-icon-actions button:hover:not(:disabled) {
  background: rgba(56, 189, 248, .12);
  color: #edf9ff;
}

@media (max-width: 1100px) {
  #inventoryForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #inventoryPanel .inventory-toolbar {
    grid-template-columns: minmax(220px, 1fr) 160px repeat(2, max-content);
  }
}

@media (max-width: 760px) {
  #inventoryPanel {
    padding: 12px;
  }

  #inventoryForm {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #inventoryPanel .inventory-toolbar {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  #inventoryPanel .inventory-toolbar input {
    grid-column: 1 / -1;
  }

  #inventoryPanel .inventory-toolbar select {
    grid-column: 1 / -1;
  }

  #inventoryPanel .inventory-toolbar .export-btn,
  #inventoryPanel .inventory-toolbar .file-btn,
  #inventoryPanel .inventory-toolbar .inventory-print-btn {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .master-list .master-table,
  .inventory-table {
    min-width: 900px;
  }

  .app-table-pagination {
    gap: 14px;
    min-width: 540px;
    padding: 8px 12px;
  }

  .page-size-control,
  .pagination-range {
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .app {
    padding-left: 12px;
    padding-right: 12px;
  }

  .admin-header,
  #formView .ticket-head {
    text-align: left;
  }

  .summary-metric-card,
  body.dashboard-page .summary-metric-card {
    min-height: 104px;
  }

  .dashboard-section-heading {
    align-items: center;
  }
}

/* Bersihkan kolom aksi: tombol rapi tanpa card/strip di dalam tabel */
.master-list .master-table td.master-item-actions,
.inventory-table td.master-item-actions,
.report-table td.table-actions {
  display: table-cell;
  height: 46px;
  min-height: 0;
  padding: 8px 10px;
  text-align: right;
  vertical-align: middle;
  border-bottom: 1px solid #dbeef5;
  background: #fff;
  white-space: nowrap;
}

.master-list .master-table tbody tr:nth-child(even) td.master-item-actions,
.inventory-table tbody tr:nth-child(even) td.master-item-actions,
.report-table tbody tr:nth-child(even) td.table-actions {
  background: #fbfdff;
}

.master-list .master-table tbody tr:hover td.master-item-actions,
.inventory-table tbody tr:hover td.master-item-actions,
.report-table tbody tr:hover td.table-actions {
  background: #f2fbff;
}

.master-list .master-table tbody tr:last-child td.master-item-actions,
.inventory-table tbody tr:last-child td.master-item-actions,
.report-table tbody tr:last-child td.table-actions {
  border-bottom: 0;
}

.master-list .master-table td.master-item-actions button,
.inventory-table td.master-item-actions button,
.report-table td.table-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  margin: 0 0 0 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  vertical-align: middle;
}

.master-list .master-table td.master-item-actions button:first-child,
.inventory-table td.master-item-actions button:first-child,
.report-table td.table-actions button:first-child {
  margin-left: 0;
}

body.dark-mode .master-list .master-table td.master-item-actions,
body.dark-mode .inventory-table td.master-item-actions,
body.dark-mode .report-table td.table-actions {
  background: #10283a;
  border-bottom-color: #2a5367;
}

body.dark-mode .master-list .master-table tbody tr:nth-child(even) td.master-item-actions,
body.dark-mode .inventory-table tbody tr:nth-child(even) td.master-item-actions,
body.dark-mode .report-table tbody tr:nth-child(even) td.table-actions {
  background: #0e2435;
}

body.dark-mode .master-list .master-table tbody tr:hover td.master-item-actions,
body.dark-mode .inventory-table tbody tr:hover td.master-item-actions,
body.dark-mode .report-table tbody tr:hover td.table-actions {
  background: #17354a;
}

body.dark-mode .master-list .master-table td.master-item-actions button,
body.dark-mode .inventory-table td.master-item-actions button,
body.dark-mode .report-table td.table-actions button {
  box-shadow: none;
}

/* Pagination Kelola ONT: tepat di bawah tabel seperti referensi */
#inventoryList .inventory-table-wrap {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#inventoryList .inventory-pagination {
  width: 100%;
  min-width: 980px;
  min-height: 46px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid #cfe4ee;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

#inventoryList .inventory-pagination .page-size-control {
  margin-right: auto;
}

#inventoryList .inventory-pagination .pagination-range {
  margin-left: auto;
}

#inventoryList .inventory-pagination .pagination-icon-actions {
  margin-left: 22px;
}

body.dark-mode #inventoryList .inventory-pagination {
  border-color: #315f74;
  background: #10283a;
}

@media (max-width: 760px) {
  #inventoryList .inventory-pagination {
    min-width: 900px;
  }
}

/* Rows per page: teks, angka, dan panah sejajar seperti referensi */
.app-table-pagination .page-size-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0 auto 0 0;
  padding: 0;
  color: #5f7b8b;
  font-size: 14px;
  font-weight: 800;
  line-height: 32px;
  white-space: nowrap;
}

.app-table-pagination .page-size-control::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

.app-table-pagination .page-size-control select {
  display: inline-flex;
  align-items: center;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0 24px 0 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #123b55;
  font: 800 14px/32px Inter, sans-serif;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none !important;
  outline: 0;
  cursor: pointer;
}

.app-table-pagination .page-size-control select::-ms-expand {
  display: none;
}

.app-table-pagination .page-size-control select:focus,
.app-table-pagination .page-size-control select:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

.app-table-pagination .page-size-control select option {
  color: #0f2638;
  background: #fff;
  font-size: 14px;
}

body.dark-mode .app-table-pagination {
  background: #0b2637;
}

body.dark-mode .app-table-pagination .page-size-control,
body.dark-mode .app-table-pagination .page-size-control select {
  color: #edf9ff;
}

/* Toolbar Kelola ONT: sejajar dan tombol lebih hidup */
#inventoryPanel .inventory-toolbar {
  align-items: center;
}

#inventoryPanel .inventory-toolbar input,
#inventoryPanel .inventory-toolbar select,
#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-print-btn {
  align-self: center;
}

#inventoryPanel .inventory-toolbar select {
  line-height: normal;
  padding-top: 0;
  padding-bottom: 0;
}

.submit-btn,
.export-btn,
.print-type-btn,
.file-btn,
.bulk-delete-btn,
.btn-edit,
.btn-delete,
.view-all-btn,
.pagination-icon-actions button {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease;
}

.submit-btn:hover,
.export-btn:hover,
.print-type-btn:hover,
.file-btn:hover,
.bulk-delete-btn:hover,
.btn-edit:hover,
.btn-delete:hover,
.view-all-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 20px -16px rgba(14, 165, 233, .65);
}

.submit-btn:active,
.export-btn:active,
.print-type-btn:active,
.file-btn:active,
.bulk-delete-btn:active,
.btn-edit:active,
.btn-delete:active,
.view-all-btn:active,
.pagination-icon-actions button:active:not(:disabled) {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

body.dark-mode #inventoryPanel .inventory-toolbar select {
  background-position: right 12px center;
}

body.dark-mode .submit-btn:hover,
body.dark-mode .export-btn:hover,
body.dark-mode .print-type-btn:hover,
body.dark-mode .file-btn:hover,
body.dark-mode .bulk-delete-btn:hover,
body.dark-mode .btn-edit:hover,
body.dark-mode .btn-delete:hover,
body.dark-mode .view-all-btn:hover {
  box-shadow: 0 12px 24px -18px rgba(56, 189, 248, .75);
}

.modal-actions:empty {
  display: none;
}

.report-table tbody tr {
  cursor: default;
}

.report-table .table-actions button,
.report-table input[type=checkbox] {
  cursor: pointer;
}

/* Vichy palette final theme */
:root {
  --vichy-black: #111111;
  --vichy-gray: #878787;
  --vichy-silver: #BBBBBF;
  --vichy-teal: #05AD98;
  --vichy-white: #FFFFFF;
  --vichy-bg: #F6F7F7;
  --vichy-soft: #F2F5F4;
  --vichy-teal-soft: #E4F7F4;
  --vichy-line: #D9D9DC;
  --bg: var(--vichy-bg);
  --surface: var(--vichy-white);
  --ink: var(--vichy-black);
  --ink-soft: #4F4F52;
  --ink-faint: var(--vichy-gray);
  --primary: var(--vichy-teal);
  --primary-dark: #047F70;
  --primary-soft: var(--vichy-teal-soft);
  --accent: var(--vichy-teal);
  --accent-soft: #DDF3F0;
  --border: var(--vichy-silver);
  --success: var(--vichy-teal);
  --success-soft: var(--vichy-teal-soft);
  --network-blue: var(--vichy-teal);
  --network-teal: var(--vichy-teal);
  --network-cyan: var(--vichy-silver);
  --design-bg: var(--vichy-bg);
  --design-surface: var(--vichy-white);
  --design-surface-soft: #FAFAFA;
  --design-input: var(--vichy-white);
  --design-border: var(--vichy-line);
  --design-border-strong: var(--vichy-silver);
  --design-ink: var(--vichy-black);
  --design-muted: var(--vichy-gray);
  --design-primary: var(--vichy-teal);
  --design-primary-dark: #047F70;
  --design-accent: var(--vichy-teal);
  --design-blue-soft: var(--vichy-teal-soft);
  --design-teal-soft: #DDF3F0;
  --figma-bg: var(--vichy-bg);
  --figma-panel: var(--vichy-white);
  --figma-panel-soft: #FAFAFA;
  --figma-sidebar: var(--vichy-black);
  --figma-sidebar-2: #2A2A2C;
  --figma-line: var(--vichy-line);
  --figma-text: var(--vichy-black);
  --figma-muted: var(--vichy-gray);
  --figma-cyan: var(--vichy-silver);
  --figma-blue: var(--vichy-teal);
  --figma-teal: var(--vichy-teal);
  --figma-green: var(--vichy-teal);
  --shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px -22px rgba(5, 173, 152, .32);
  --design-shadow: 0 18px 42px -30px rgba(17, 17, 17, .22);
  --figma-shadow: 0 18px 46px -34px rgba(17, 17, 17, .24);
}

body {
  background:
    radial-gradient(900px 360px at 8% -12%, rgba(5, 173, 152, .12), transparent 62%),
    radial-gradient(850px 420px at 102% 4%, rgba(187, 187, 191, .22), transparent 68%),
    linear-gradient(135deg, #FFFFFF 0%, #F6F7F7 48%, #F1F3F3 100%);
  color: var(--vichy-black);
}

body.login-page {
  background:
    radial-gradient(760px 360px at 0% 0%, rgba(5, 173, 152, .10), transparent 66%),
    #F6F7F7;
}

.sidebar {
  background:
    radial-gradient(420px 300px at 12% -6%, rgba(5, 173, 152, .24), transparent 66%),
    linear-gradient(180deg, #111111 0%, #252527 58%, #111111 100%);
  border-right-color: rgba(187, 187, 191, .22);
}

.sidebar-item:hover,
.sidebar-item.active {
  background: rgba(5, 173, 152, .16);
  border-color: rgba(5, 173, 152, .26);
}

.sidebar-item::before,
.sidebar-icon {
  color: #DDF3F0;
  background: rgba(5, 173, 152, .16);
}

.sidebar-item.active::before,
.profile-icon,
.sidebar-toggle,
.mobile-sidebar-toggle,
.theme-toggle-icon {
  background: linear-gradient(135deg, #05AD98, #047F70);
  color: #fff;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.payment-card,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.quick-action {
  border-color: var(--vichy-line);
  background:
    radial-gradient(360px 170px at 100% 0%, rgba(5, 173, 152, .07), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  color: var(--vichy-black);
  box-shadow: var(--design-shadow);
}

.admin-header h2,
.account-form-title,
.title-wrap,
.dashboard-section-heading h3,
.summary-metric-title,
.summary-metric-value,
.summary-chart-head strong,
.quick-action strong,
.payment-total,
.kv-value,
.report-id {
  color: var(--vichy-black);
}

.admin-subtitle,
.summary-metric-meta,
.summary-chart-head span,
.quick-action small,
.account-form label,
.settings-help,
.package-header p,
.kv-key,
.empty-state {
  color: var(--vichy-gray);
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea {
  border-color: var(--vichy-line);
  background: #FFFFFF;
  color: var(--vichy-black);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: var(--vichy-teal);
  box-shadow: 0 0 0 3px rgba(5, 173, 152, .16);
}

.submit-btn,
.btn-print,
.inventory-print-btn {
  background: linear-gradient(135deg, #00008E, #0C4BC9);
  border-color: rgba(0, 0, 142, .24);
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 142, .7);
}

.export-btn,
.inventory-toolbar .export-btn,
.inventory-toolbar .file-btn {
  background: linear-gradient(135deg, #A7D9FF, #7CB7FF);
  border-color: rgba(68, 132, 255, .28);
  color: #fff;
}

.print-type-btn.instalasi {
  background: linear-gradient(135deg, #F59E0B, #F28C28);
}

.print-type-btn.dismantle {
  background: linear-gradient(135deg, #FACC15, #E7B63A);
}

.print-type-btn.maintenance {
  background: linear-gradient(135deg, #22C55E, #17A34A);
}

.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit {
  background: #E4F7F4;
  color: #047F70;
}

.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete {
  background: #F6E8E7;
  color: #B23B35;
}

.network-summary-icon,
.summary-metric-icon,
.quick-action-icon {
  background: linear-gradient(135deg, #E4F7F4, #F2F5F4);
  color: #047F70;
}

.summary-metric-card.blue,
.summary-metric-card.amber,
.summary-metric-card.green {
  border-left-color: #05AD98;
  box-shadow: inset 0 4px 0 #05AD98, var(--design-shadow);
}

.summary-mini-stat.blue .summary-mini-ring,
.summary-mini-stat.amber .summary-mini-ring,
.summary-mini-stat.green .summary-mini-ring {
  color: #05AD98;
}

.summary-legend-dot.blue,
.summary-legend-dot.amber,
.summary-legend-dot.green,
.legend-dot.instalasi,
.legend-dot.dismantle,
.legend-dot.maintenance {
  background: #05AD98;
}

.type-pill.instalasi,
.type-pill.dismantle,
.type-pill.maintenance,
.inventory-status.tersedia {
  background: #E4F7F4;
  color: #047F70;
}

.status-pill.done {
  background: #E4F7F4;
  color: #047F70;
}

.status-pill.pending {
  background: #F5F1E8;
  color: #878787;
}

.status-pill.issue {
  background: #F6E8E7;
  color: #B23B35;
}

.report-table th,
.master-list .master-table th,
.inventory-table th,
.recent-table th,
.material-card th {
  background: #F5F5F6;
  color: #111111;
  border-color: var(--vichy-line);
}

.report-table td,
.master-list .master-table td,
.inventory-table td,
.recent-table td,
.material-card td {
  color: #333335;
  border-color: #E4E4E6;
}

.report-table tbody tr:nth-child(even) td,
.master-list .master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td {
  background: #FAFAFA;
}

.report-table tbody tr:hover td,
.master-list .master-table tbody tr:hover td,
.inventory-table tbody tr:hover td {
  background: #F0FAF8;
}

.app-table-pagination {
  border-color: var(--vichy-line);
  background: #FFFFFF;
}

.page-size-control,
.pagination-range,
.page-size-control select {
  color: #111111;
}

body.dark-mode {
  --bg: #111111;
  --surface: #1F1F20;
  --ink: #FFFFFF;
  --ink-soft: #BBBBBF;
  --ink-faint: #878787;
  --primary: #05AD98;
  --primary-dark: #28D0BD;
  --primary-soft: rgba(5, 173, 152, .16);
  --accent: #05AD98;
  --accent-soft: rgba(5, 173, 152, .13);
  --border: #3F3F42;
  --design-bg: #111111;
  --design-surface: #1F1F20;
  --design-surface-soft: #181819;
  --design-input: #262628;
  --design-border: #3F3F42;
  --design-border-strong: #878787;
  --design-ink: #FFFFFF;
  --design-muted: #BBBBBF;
  --design-primary: #05AD98;
  --design-primary-dark: #28D0BD;
  --design-accent: #05AD98;
  --figma-bg: #111111;
  --figma-panel: #1F1F20;
  --figma-panel-soft: #181819;
  --figma-line: #3F3F42;
  --figma-text: #FFFFFF;
  --figma-muted: #BBBBBF;
  background:
    radial-gradient(920px 420px at -8% -12%, rgba(5, 173, 152, .17), transparent 62%),
    radial-gradient(760px 360px at 108% 0%, rgba(187, 187, 191, .08), transparent 66%),
    linear-gradient(135deg, #111111 0%, #1D1D1F 54%, #111111 100%);
}

body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .payment-card,
body.dark-mode .center-card,
body.dark-mode .modal,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row,
body.dark-mode .quick-action {
  border-color: #3F3F42;
  background:
    radial-gradient(360px 170px at 100% 0%, rgba(5, 173, 152, .09), transparent 70%),
    linear-gradient(180deg, #1F1F20 0%, #181819 100%);
  color: #FFFFFF;
}

body.dark-mode .admin-header h2,
body.dark-mode .account-form-title,
body.dark-mode .title-wrap,
body.dark-mode .dashboard-section-heading h3,
body.dark-mode .summary-metric-title,
body.dark-mode .summary-metric-value,
body.dark-mode .summary-chart-head strong,
body.dark-mode .quick-action strong,
body.dark-mode .payment-total,
body.dark-mode .kv-value,
body.dark-mode .report-id {
  color: #FFFFFF;
}

body.dark-mode .admin-subtitle,
body.dark-mode .summary-metric-meta,
body.dark-mode .summary-chart-head span,
body.dark-mode .quick-action small,
body.dark-mode .account-form label,
body.dark-mode .settings-help,
body.dark-mode .package-header p,
body.dark-mode .kv-key,
body.dark-mode .empty-state {
  color: #BBBBBF;
}

body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .account-form input,
body.dark-mode .account-form select,
body.dark-mode .inventory-toolbar input,
body.dark-mode .inventory-toolbar select,
body.dark-mode .recent-report-tools input,
body.dark-mode .dashboard-period-box input,
body.dark-mode .edit-field input,
body.dark-mode .edit-field select,
body.dark-mode .edit-field textarea {
  border-color: #3F3F42;
  background: #262628;
  color: #FFFFFF;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #878787;
}

body.dark-mode .report-table th,
body.dark-mode .master-list .master-table th,
body.dark-mode .inventory-table th,
body.dark-mode .recent-table th,
body.dark-mode .material-card th {
  background: #2A2A2C;
  color: #FFFFFF;
  border-color: #4A4A4D;
}

body.dark-mode .report-table td,
body.dark-mode .master-list .master-table td,
body.dark-mode .inventory-table td,
body.dark-mode .recent-table td,
body.dark-mode .material-card td,
body.dark-mode .master-list .master-table td.master-item-actions,
body.dark-mode .inventory-table td.master-item-actions,
body.dark-mode .report-table td.table-actions {
  background: #1F1F20;
  color: #EDEDED;
  border-color: #3F3F42;
}

body.dark-mode .report-table tbody tr:nth-child(even) td,
body.dark-mode .master-list .master-table tbody tr:nth-child(even) td,
body.dark-mode .inventory-table tbody tr:nth-child(even) td {
  background: #1A1A1B;
}

body.dark-mode .report-table tbody tr:hover td,
body.dark-mode .master-list .master-table tbody tr:hover td,
body.dark-mode .inventory-table tbody tr:hover td {
  background: #243532;
}

body.dark-mode .app-table-pagination,
body.dark-mode #inventoryList .inventory-pagination {
  border-color: #3F3F42;
  background: #1F1F20;
}

body.dark-mode .type-pill.instalasi,
body.dark-mode .type-pill.dismantle,
body.dark-mode .type-pill.maintenance,
body.dark-mode .inventory-status.tersedia,
body.dark-mode .status-pill.done {
  background: rgba(5, 173, 152, .18);
  color: #72F0DF;
}

body.dark-mode .btn-edit,
body.dark-mode .table-actions .btn-edit,
body.dark-mode .master-item-actions .btn-edit,
body.dark-mode .inventory-toolbar .file-btn {
  background: rgba(5, 173, 152, .17);
  color: #72F0DF;
}

/* Custom purple-teal palette final override */
:root {
  --app-deep: #7DD3FC;
  --app-purple: #38BDF8;
  --app-indigo: #0EA5E9;
  --app-lavender: #A7D9FF;
  --app-lavender-soft: #D9F2FF;
  --app-teal: #3AA18F;
  --app-cyan: #00008E;
  --app-orange: #ED8D3F;
  --app-peach: #EEBD9E;
  --app-white: #FFFFFF;
  --app-bg-soft: #F8F1FB;
  --app-line-soft: rgba(206, 172, 229, .48);
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #7DD3FC;
  --ink-soft: #38BDF8;
  --ink-faint: #A7D9FF;
  --primary: #0EA5E9;
  --primary-dark: #7DD3FC;
  --primary-soft: rgba(206, 172, 229, .32);
  --accent: #3AA18F;
  --accent-soft: rgba(58, 161, 143, .14);
  --border: #D9F2FF;
  --success: #3AA18F;
  --success-soft: rgba(58, 161, 143, .14);
  --network-blue: #0EA5E9;
  --network-teal: #3AA18F;
  --network-cyan: #00008E;
  --design-bg: #FFFFFF;
  --design-surface: #FFFFFF;
  --design-surface-soft: #F8F1FB;
  --design-input: #FFFFFF;
  --design-border: #D9F2FF;
  --design-border-strong: #A7D9FF;
  --design-ink: #7DD3FC;
  --design-muted: #38BDF8;
  --design-primary: #0EA5E9;
  --design-primary-dark: #7DD3FC;
  --design-accent: #3AA18F;
  --design-blue-soft: rgba(206, 172, 229, .32);
  --design-teal-soft: rgba(58, 161, 143, .14);
  --figma-bg: #FFFFFF;
  --figma-panel: #FFFFFF;
  --figma-panel-soft: #F8F1FB;
  --figma-sidebar: #A7D9FF;
  --figma-sidebar-2: #3AA18F;
  --figma-line: #D9F2FF;
  --figma-text: #7DD3FC;
  --figma-muted: #38BDF8;
  --figma-cyan: #00008E;
  --figma-blue: #0EA5E9;
  --figma-teal: #3AA18F;
  --figma-green: #3AA18F;
  --figma-orange: #ED8D3F;
  --shadow: 0 1px 2px rgba(66, 38, 151, .06), 0 12px 30px -18px rgba(107, 99, 195, .34);
  --design-shadow: 0 18px 42px -30px rgba(66, 38, 151, .30);
  --figma-shadow: 0 18px 46px -34px rgba(66, 38, 151, .32);
}

body {
  background:
    radial-gradient(900px 360px at 8% -12%, rgba(206, 172, 229, .38), transparent 62%),
    radial-gradient(850px 420px at 102% 4%, rgba(58, 161, 143, .17), transparent 68%),
    linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 48%, #F8F1FB 100%);
  color: #7DD3FC;
}

body.login-page {
  background:
    radial-gradient(760px 360px at 0% 0%, rgba(206, 172, 229, .35), transparent 66%),
    #FFFFFF;
}

.sidebar,
body.dark-mode .sidebar {
  background:
    radial-gradient(420px 320px at 16% -6%, rgba(206, 172, 229, .36), transparent 64%),
    radial-gradient(360px 300px at 100% 34%, rgba(0, 0, 142, .24), transparent 68%),
    linear-gradient(180deg, #A7D9FF 0%, #0EA5E9 42%, #3AA18F 100%);
  border-right-color: rgba(255, 255, 255, .30);
  box-shadow: 18px 0 50px -34px rgba(66, 38, 151, .74);
}

.sidebar-brand-block strong,
.sidebar-brand-block small,
.sidebar-profile,
.sidebar-item,
.sidebar-section-label {
  color: #FFFFFF;
}

.sidebar-item:hover,
.sidebar-item.active {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .28);
}

.sidebar-item::before,
.sidebar-icon {
  color: #FFFFFF;
  background: rgba(66, 38, 151, .20);
}

.sidebar-item.active::before,
.profile-icon,
.sidebar-toggle,
.mobile-sidebar-toggle,
.theme-toggle-icon {
  background: linear-gradient(135deg, #7DD3FC, #38BDF8);
  color: #FFFFFF;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.payment-card,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.quick-action {
  border-color: rgba(206, 172, 229, .72);
  background:
    radial-gradient(360px 170px at 100% 0%, rgba(0, 0, 142, .10), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F8F1FB 100%);
  color: #7DD3FC;
  box-shadow: var(--design-shadow);
}

.admin-header h2,
.account-form-title,
.title-wrap,
.dashboard-section-heading h3,
.summary-metric-title,
.summary-metric-value,
.summary-chart-head strong,
.quick-action strong,
.payment-total,
.kv-value,
.report-id {
  color: #7DD3FC;
}

.admin-subtitle,
.summary-metric-meta,
.summary-chart-head span,
.quick-action small,
.account-form label,
.settings-help,
.package-header p,
.kv-key,
.empty-state {
  color: #38BDF8;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea {
  border-color: #D9F2FF;
  background: #FFFFFF;
  color: #7DD3FC;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: #0EA5E9;
  box-shadow: 0 0 0 3px rgba(107, 99, 195, .18);
}

.submit-btn,
.export-btn,
.btn-print,
.inventory-print-btn,
.print-type-btn {
  background: linear-gradient(135deg, #0EA5E9, #38BDF8 52%, #3AA18F);
  border-color: rgba(107, 99, 195, .28);
  color: #FFFFFF;
  box-shadow: 0 14px 28px -18px rgba(107, 99, 195, .72);
}

.inventory-toolbar .file-btn,
.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit {
  background: rgba(0, 0, 142, .18);
  color: #7DD3FC;
}

.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete {
  background: rgba(238, 189, 158, .42);
  color: #38BDF8;
}

.bulk-delete-btn {
  background: linear-gradient(135deg, #ED8D3F, #38BDF8);
  color: #FFFFFF;
}

.network-summary-icon,
.summary-metric-icon,
.quick-action-icon {
  background: linear-gradient(135deg, rgba(206, 172, 229, .42), rgba(0, 0, 142, .20));
  color: #7DD3FC;
}

.summary-metric-card.blue {
  box-shadow: inset 0 4px 0 #0EA5E9, var(--design-shadow);
}

.summary-metric-card.amber {
  box-shadow: inset 0 4px 0 #ED8D3F, var(--design-shadow);
}

.summary-metric-card.green {
  box-shadow: inset 0 4px 0 #3AA18F, var(--design-shadow);
}

.summary-mini-stat.blue .summary-mini-ring,
.summary-legend-dot.blue {
  color: #0EA5E9;
  background-color: #0EA5E9;
}

.summary-mini-stat.amber .summary-mini-ring,
.summary-legend-dot.amber {
  color: #ED8D3F;
  background-color: #ED8D3F;
}

.summary-mini-stat.green .summary-mini-ring,
.summary-legend-dot.green {
  color: #3AA18F;
  background-color: #3AA18F;
}

.type-pill.instalasi,
.inventory-status.tersedia,
.status-pill.done {
  background: rgba(58, 161, 143, .16);
  color: #3AA18F;
}

.type-pill.dismantle,
.status-pill.pending {
  background: rgba(237, 141, 63, .18);
  color: #ED8D3F;
}

.type-pill.maintenance,
.status-pill.issue {
  background: rgba(107, 99, 195, .16);
  color: #0EA5E9;
}

.inventory-status.keluar,
.status-pill.cancelled {
  background: rgba(238, 189, 158, .38);
  color: #38BDF8;
}

.report-table th,
.master-list .master-table th,
.inventory-table th,
.recent-table th,
.material-card th {
  background: rgba(206, 172, 229, .26);
  color: #7DD3FC;
  border-color: #D9F2FF;
}

.report-table td,
.master-list .master-table td,
.inventory-table td,
.recent-table td,
.material-card td {
  color: #7DD3FC;
  border-color: rgba(206, 172, 229, .44);
}

.report-table tbody tr:nth-child(even) td,
.master-list .master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td {
  background: rgba(206, 172, 229, .08);
}

.report-table tbody tr:hover td,
.master-list .master-table tbody tr:hover td,
.inventory-table tbody tr:hover td {
  background: rgba(0, 0, 142, .12);
}

.app-table-pagination {
  border-color: #D9F2FF;
  background: #FFFFFF;
}

.page-size-control,
.pagination-range,
.page-size-control select,
.pagination-icon-actions button {
  color: #7DD3FC;
}

body.dark-mode {
  --bg: #7DD3FC;
  --surface: #38BDF8;
  --ink: #FFFFFF;
  --ink-soft: #D9F2FF;
  --ink-faint: #A7D9FF;
  --primary: #00008E;
  --primary-dark: #D9F2FF;
  --primary-soft: rgba(206, 172, 229, .20);
  --accent: #3AA18F;
  --accent-soft: rgba(58, 161, 143, .18);
  --border: #A7D9FF;
  --design-bg: #7DD3FC;
  --design-surface: #38BDF8;
  --design-surface-soft: #7DD3FC;
  --design-input: #0EA5E9;
  --design-border: #A7D9FF;
  --design-border-strong: #D9F2FF;
  --design-ink: #FFFFFF;
  --design-muted: #D9F2FF;
  --design-primary: #00008E;
  --design-primary-dark: #D9F2FF;
  --design-accent: #3AA18F;
  --figma-bg: #7DD3FC;
  --figma-panel: #38BDF8;
  --figma-panel-soft: #7DD3FC;
  --figma-line: #A7D9FF;
  --figma-text: #FFFFFF;
  --figma-muted: #D9F2FF;
  background:
    radial-gradient(920px 420px at -8% -12%, rgba(206, 172, 229, .22), transparent 62%),
    radial-gradient(760px 360px at 108% 0%, rgba(58, 161, 143, .22), transparent 66%),
    linear-gradient(135deg, #7DD3FC 0%, #38BDF8 54%, #7DD3FC 100%);
}

body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .payment-card,
body.dark-mode .center-card,
body.dark-mode .modal,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row,
body.dark-mode .quick-action {
  border-color: rgba(206, 172, 229, .38);
  background:
    radial-gradient(360px 170px at 100% 0%, rgba(0, 0, 142, .12), transparent 70%),
    linear-gradient(180deg, #38BDF8 0%, #7DD3FC 100%);
  color: #FFFFFF;
}

body.dark-mode .admin-header h2,
body.dark-mode .account-form-title,
body.dark-mode .title-wrap,
body.dark-mode .dashboard-section-heading h3,
body.dark-mode .summary-metric-title,
body.dark-mode .summary-metric-value,
body.dark-mode .summary-chart-head strong,
body.dark-mode .quick-action strong,
body.dark-mode .payment-total,
body.dark-mode .kv-value,
body.dark-mode .report-id {
  color: #FFFFFF;
}

body.dark-mode .admin-subtitle,
body.dark-mode .summary-metric-meta,
body.dark-mode .summary-chart-head span,
body.dark-mode .quick-action small,
body.dark-mode .account-form label,
body.dark-mode .settings-help,
body.dark-mode .package-header p,
body.dark-mode .kv-key,
body.dark-mode .empty-state {
  color: #D9F2FF;
}

body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .account-form input,
body.dark-mode .account-form select,
body.dark-mode .inventory-toolbar input,
body.dark-mode .inventory-toolbar select,
body.dark-mode .recent-report-tools input,
body.dark-mode .dashboard-period-box input,
body.dark-mode .edit-field input,
body.dark-mode .edit-field select,
body.dark-mode .edit-field textarea {
  border-color: rgba(206, 172, 229, .46);
  background: rgba(107, 99, 195, .46);
  color: #FFFFFF;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #D9F2FF;
}

body.dark-mode .report-table th,
body.dark-mode .master-list .master-table th,
body.dark-mode .inventory-table th,
body.dark-mode .recent-table th,
body.dark-mode .material-card th {
  background: rgba(66, 38, 151, .72);
  color: #FFFFFF;
  border-color: rgba(206, 172, 229, .42);
}

body.dark-mode .report-table td,
body.dark-mode .master-list .master-table td,
body.dark-mode .inventory-table td,
body.dark-mode .recent-table td,
body.dark-mode .material-card td,
body.dark-mode .master-list .master-table td.master-item-actions,
body.dark-mode .inventory-table td.master-item-actions,
body.dark-mode .report-table td.table-actions {
  background: rgba(132, 52, 142, .58);
  color: #FFFFFF;
  border-color: rgba(206, 172, 229, .28);
}

body.dark-mode .report-table tbody tr:nth-child(even) td,
body.dark-mode .master-list .master-table tbody tr:nth-child(even) td,
body.dark-mode .inventory-table tbody tr:nth-child(even) td {
  background: rgba(66, 38, 151, .48);
}

body.dark-mode .report-table tbody tr:hover td,
body.dark-mode .master-list .master-table tbody tr:hover td,
body.dark-mode .inventory-table tbody tr:hover td {
  background: rgba(0, 0, 142, .22);
}

body.dark-mode .app-table-pagination,
body.dark-mode #inventoryList .inventory-pagination {
  border-color: rgba(206, 172, 229, .42);
  background: rgba(66, 38, 151, .62);
}

body.dark-mode .page-size-control,
body.dark-mode .pagination-range,
body.dark-mode .page-size-control select,
body.dark-mode .pagination-icon-actions button {
  color: #FFFFFF;
}

body.dark-mode .btn-edit,
body.dark-mode .table-actions .btn-edit,
body.dark-mode .master-item-actions .btn-edit,
body.dark-mode .inventory-toolbar .file-btn {
  background: rgba(0, 0, 142, .22);
  color: #FFFFFF;
}

body.dark-mode .btn-delete,
body.dark-mode .table-actions .btn-delete,
body.dark-mode .master-item-actions .btn-delete {
  background: rgba(238, 189, 158, .30);
  color: #FFFFFF;
}

/* Kunci kelurusan toolbar Kelola ONT */
#inventoryPanel .inventory-toolbar {
  align-items: stretch !important;
}

#inventoryPanel .inventory-toolbar input,
#inventoryPanel .inventory-toolbar select,
#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-print-btn {
  box-sizing: border-box;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#inventoryPanel .inventory-toolbar input,
#inventoryPanel .inventory-toolbar select {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 42px !important;
}

#inventoryPanel .inventory-toolbar select {
  display: block;
  padding-right: 36px !important;
}

#inventoryPanel .inventory-toolbar .export-btn,
#inventoryPanel .inventory-toolbar .file-btn,
#inventoryPanel .inventory-toolbar .inventory-print-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Revisi tema 5 warna */
:root {
  --theme-white: #FFFFFF;
  --theme-blue: #00008E;
  --theme-orange: #ED8D3F;
  --theme-purple: #0EA5E9;
  --theme-purple-deep: #7DD3FC;
  --theme-border: rgba(0, 0, 142, .26);
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #7DD3FC;
  --ink-soft: #0EA5E9;
  --ink-faint: #0EA5E9;
  --primary: #00008E;
  --primary-dark: #3E92A2;
  --primary-soft: rgba(0, 0, 142, .14);
  --accent: #ED8D3F;
  --accent-soft: rgba(237, 141, 63, .16);
  --border: rgba(0, 0, 142, .26);
  --success: #00008E;
  --success-soft: rgba(0, 0, 142, .14);
  --network-blue: #00008E;
  --network-teal: #00008E;
  --network-cyan: #00008E;
  --design-bg: #FFFFFF;
  --design-surface: #FFFFFF;
  --design-surface-soft: #FFFFFF;
  --design-input: #FFFFFF;
  --design-border: rgba(0, 0, 142, .26);
  --design-border-strong: #00008E;
  --design-ink: #7DD3FC;
  --design-muted: #0EA5E9;
  --design-primary: #00008E;
  --design-primary-dark: #3E92A2;
  --design-accent: #ED8D3F;
  --figma-bg: #FFFFFF;
  --figma-panel: #FFFFFF;
  --figma-panel-soft: #FFFFFF;
  --figma-line: rgba(0, 0, 142, .26);
  --figma-text: #7DD3FC;
  --figma-muted: #0EA5E9;
  --figma-cyan: #00008E;
  --figma-blue: #00008E;
  --figma-teal: #00008E;
  --figma-green: #0EA5E9;
  --figma-orange: #ED8D3F;
  --shadow: 0 1px 2px rgba(66, 38, 151, .04), 0 14px 34px -24px rgba(0, 0, 142, .30);
  --design-shadow: 0 18px 42px -34px rgba(66, 38, 151, .18);
}

body,
body.login-page,
body.dark-mode {
  background: #FFFFFF !important;
  color: #7DD3FC;
}

.sidebar,
body.dark-mode .sidebar {
  background:
    radial-gradient(420px 280px at 18% -10%, rgba(255, 255, 255, .68), transparent 66%),
    radial-gradient(360px 300px at 100% 30%, rgba(255, 255, 255, .34), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(0, 0, 142, .88) 46%, #00008E 100%) !important;
  border-right-color: rgba(255, 255, 255, .48);
  box-shadow: 18px 0 46px -36px rgba(0, 0, 142, .85);
}

.sidebar-brand-block strong,
.sidebar-brand-block small,
.sidebar-profile,
.sidebar-item,
.sidebar-section-label,
body.dark-mode .sidebar-brand-block strong,
body.dark-mode .sidebar-brand-block small,
body.dark-mode .sidebar-profile,
body.dark-mode .sidebar-item,
body.dark-mode .sidebar-section-label {
  color: #FFFFFF;
}

.sidebar-item:hover,
.sidebar-item.active,
body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-item.active {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .34);
}

.sidebar-item::before,
.sidebar-icon,
.sidebar-item.active::before,
.profile-icon,
.sidebar-toggle,
.mobile-sidebar-toggle,
.theme-toggle-icon {
  background: rgba(66, 38, 151, .22);
  color: #FFFFFF;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.payment-card,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.quick-action,
body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .payment-card,
body.dark-mode .center-card,
body.dark-mode .modal,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row,
body.dark-mode .quick-action {
  border-color: var(--theme-border);
  background: #FFFFFF;
  color: #7DD3FC;
  box-shadow: var(--design-shadow);
}

.admin-header h2,
.account-form-title,
.title-wrap,
.dashboard-section-heading h3,
.summary-metric-title,
.summary-metric-value,
.summary-chart-head strong,
.quick-action strong,
.payment-total,
.kv-value,
.report-id,
body.dark-mode .admin-header h2,
body.dark-mode .account-form-title,
body.dark-mode .title-wrap,
body.dark-mode .dashboard-section-heading h3,
body.dark-mode .summary-metric-title,
body.dark-mode .summary-metric-value,
body.dark-mode .summary-chart-head strong,
body.dark-mode .quick-action strong,
body.dark-mode .payment-total,
body.dark-mode .kv-value,
body.dark-mode .report-id {
  color: #7DD3FC;
}

.admin-subtitle,
.summary-metric-meta,
.summary-chart-head span,
.quick-action small,
.account-form label,
.settings-help,
.package-header p,
.kv-key,
.empty-state,
body.dark-mode .admin-subtitle,
body.dark-mode .summary-metric-meta,
body.dark-mode .summary-chart-head span,
body.dark-mode .quick-action small,
body.dark-mode .account-form label,
body.dark-mode .settings-help,
body.dark-mode .package-header p,
body.dark-mode .kv-key,
body.dark-mode .empty-state {
  color: #0EA5E9;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea,
body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .account-form input,
body.dark-mode .account-form select,
body.dark-mode .inventory-toolbar input,
body.dark-mode .inventory-toolbar select,
body.dark-mode .recent-report-tools input,
body.dark-mode .dashboard-period-box input,
body.dark-mode .edit-field input,
body.dark-mode .edit-field select,
body.dark-mode .edit-field textarea {
  border-color: var(--theme-border);
  background: #FFFFFF;
  color: #7DD3FC;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: #00008E;
  box-shadow: 0 0 0 3px rgba(0, 0, 142, .18);
}

.submit-btn,
.export-btn,
.btn-print,
.inventory-toolbar .file-btn,
.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit {
  background: linear-gradient(135deg, #00008E, #3E92A2) !important;
  border-color: rgba(0, 0, 142, .34);
  color: #FFFFFF !important;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 142, .72);
}

.print-type-btn,
.inventory-print-btn,
.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete,
.bulk-delete-btn {
  background: linear-gradient(135deg, #ED8D3F, #EEBD9E) !important;
  border-color: rgba(237, 141, 63, .34);
  color: #FFFFFF !important;
  box-shadow: 0 14px 28px -18px rgba(237, 141, 63, .72);
}

.summary-metric-card.blue .summary-metric-icon,
.quick-action-icon.blue,
.network-summary-icon {
  background: rgba(245, 158, 11, .16);
  color: #F59E0B;
}

.summary-metric-card.amber .summary-metric-icon,
.quick-action-icon.orange {
  background: rgba(250, 204, 21, .18);
  color: #FACC15;
}

.summary-metric-card.green .summary-metric-icon,
.quick-action-icon.green {
  background: rgba(34, 197, 94, .16);
  color: #22C55E;
}

.quick-action-icon.teal {
  background: rgba(167, 217, 255, .20);
  color: #A7D9FF;
}

.summary-metric-card.blue { box-shadow: inset 0 4px 0 #00008E, var(--design-shadow); }
.summary-metric-card.amber { box-shadow: inset 0 4px 0 #ED8D3F, var(--design-shadow); }
.summary-metric-card.green { box-shadow: inset 0 4px 0 #0EA5E9, var(--design-shadow); }

.type-pill.instalasi,
.inventory-status.tersedia,
.status-pill.done {
  background: rgba(0, 0, 142, .14);
  color: #3E92A2;
}

.type-pill.dismantle,
.status-pill.pending,
.inventory-status.dismantle {
  background: rgba(237, 141, 63, .16);
  color: #ED8D3F;
}

.type-pill.maintenance,
.status-pill.issue {
  background: rgba(107, 99, 195, .14);
  color: #0EA5E9;
}

.report-table th,
.master-list .master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
body.dark-mode .report-table th,
body.dark-mode .master-list .master-table th,
body.dark-mode .inventory-table th,
body.dark-mode .recent-table th,
body.dark-mode .material-card th {
  background: rgba(0, 0, 142, .10);
  color: #7DD3FC;
  border-color: var(--theme-border);
}

.report-table td,
.master-list .master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.master-list .master-table td.master-item-actions,
.inventory-table td.master-item-actions,
.report-table td.table-actions,
body.dark-mode .report-table td,
body.dark-mode .master-list .master-table td,
body.dark-mode .inventory-table td,
body.dark-mode .recent-table td,
body.dark-mode .material-card td,
body.dark-mode .master-list .master-table td.master-item-actions,
body.dark-mode .inventory-table td.master-item-actions,
body.dark-mode .report-table td.table-actions {
  background: #FFFFFF;
  color: #7DD3FC;
  border-color: rgba(0, 0, 142, .20);
}

.report-table tbody tr:nth-child(even) td,
.master-list .master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td,
body.dark-mode .report-table tbody tr:nth-child(even) td,
body.dark-mode .master-list .master-table tbody tr:nth-child(even) td,
body.dark-mode .inventory-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 142, .04);
}

.report-table tbody tr:hover td,
.master-list .master-table tbody tr:hover td,
.inventory-table tbody tr:hover td,
body.dark-mode .report-table tbody tr:hover td,
body.dark-mode .master-list .master-table tbody tr:hover td,
body.dark-mode .inventory-table tbody tr:hover td {
  background: rgba(0, 0, 142, .10);
}

.app-table-pagination,
#inventoryList .inventory-pagination,
body.dark-mode .app-table-pagination,
body.dark-mode #inventoryList .inventory-pagination {
  border-color: var(--theme-border);
  background: #FFFFFF;
}

.page-size-control,
.pagination-range,
.page-size-control select,
.pagination-icon-actions button,
body.dark-mode .page-size-control,
body.dark-mode .pagination-range,
body.dark-mode .page-size-control select,
body.dark-mode .pagination-icon-actions button {
  color: #7DD3FC;
}

/* Final: sidebar solid color dan dark mode dinonaktifkan */
.sidebar,
body.dark-mode .sidebar {
  background: #00008E !important;
  border-right-color: rgba(255, 255, 255, .42);
  box-shadow: 14px 0 36px -30px rgba(0, 0, 142, .85);
}

.theme-toggle {
  display: none !important;
}

body.dark-mode {
  background: #FFFFFF !important;
  color: #7DD3FC !important;
}

/* Final solid-color theme: tanpa gradasi dekoratif */
body,
body.login-page,
body.dark-mode {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #7DD3FC !important;
}

.sidebar,
body.dark-mode .sidebar {
  background: #00008E !important;
  background-image: none !important;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.payment-card,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.quick-action,
.login-brand-mark,
.sidebar-logo,
.settings-logo-preview,
body.dark-mode .ticket-card,
body.dark-mode .account-form,
body.dark-mode .dashboard-surface,
body.dark-mode .payment-summary.ringkasan-card,
body.dark-mode .summary-metric-card,
body.dark-mode .summary-overall-card,
body.dark-mode .payment-card,
body.dark-mode .center-card,
body.dark-mode .modal,
body.dark-mode .package-add-card,
body.dark-mode .master-entry-card,
body.dark-mode .settings-logo-row,
body.dark-mode .quick-action {
  background: #FFFFFF !important;
  background-image: none !important;
}

.submit-btn,
.export-btn,
.btn-print,
.inventory-toolbar .file-btn,
.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit,
body.dark-mode .btn-edit,
body.dark-mode .table-actions .btn-edit,
body.dark-mode .master-item-actions .btn-edit,
body.dark-mode .inventory-toolbar .file-btn {
  background: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.print-type-btn,
.inventory-print-btn,
.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete,
.bulk-delete-btn,
body.dark-mode .btn-delete,
body.dark-mode .table-actions .btn-delete,
body.dark-mode .master-item-actions .btn-delete {
  background: #ED8D3F !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.sidebar-item::before,
.sidebar-icon,
.sidebar-item.active::before,
.profile-icon,
.sidebar-toggle,
.mobile-sidebar-toggle,
.theme-toggle-icon,
.summary-metric-card.blue .summary-metric-icon,
.quick-action-icon.blue,
.network-summary-icon {
  background: #F59E0B !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.summary-metric-card.amber .summary-metric-icon,
.quick-action-icon.orange {
  background: #FACC15 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.summary-metric-card.green .summary-metric-icon,
.quick-action-icon.green {
  background: #22C55E !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.quick-action-icon.teal {
  background: #A7D9FF !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.payment-summary.ringkasan-card::after,
.summary-metric-card::before,
.summary-overall-card::before,
.summary-bar-card::before,
.summary-column-chart::before,
.ticket-card::before,
.dashboard-surface::before,
.account-form::before {
  background: transparent !important;
  background-image: none !important;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea,
body.dark-mode .field input,
body.dark-mode .field select,
body.dark-mode .field textarea,
body.dark-mode .account-form input,
body.dark-mode .account-form select,
body.dark-mode .inventory-toolbar input,
body.dark-mode .inventory-toolbar select,
body.dark-mode .recent-report-tools input,
body.dark-mode .dashboard-period-box input,
body.dark-mode .edit-field input,
body.dark-mode .edit-field select,
body.dark-mode .edit-field textarea {
  background: #FFFFFF !important;
  background-image: none !important;
}

/* Kunci akhir: seluruh sistem memakai warna solid, tanpa gradasi */
*,
*::before,
*::after {
  background-image: none !important;
}

/* Dekorasi khusus dashboard: kembalikan latar sudut card seperti sebelumnya */
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card,
.admin-panel[data-panel="dashboard"] .summary-metric-card,
.admin-panel[data-panel="dashboard"] .summary-overall-card,
.admin-panel[data-panel="dashboard"] .dashboard-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card::after,
.admin-panel[data-panel="dashboard"] .summary-metric-card::before,
.admin-panel[data-panel="dashboard"] .summary-metric-card::after,
.admin-panel[data-panel="dashboard"] .summary-overall-card::before,
.admin-panel[data-panel="dashboard"] .dashboard-surface::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card::after {
  width: 300px;
  height: 220px;
  right: -132px;
  top: -120px;
  border-radius: 70px;
  background-image:
    radial-gradient(circle at 38% 36%, rgba(255, 255, 255, .72), transparent 34%),
    linear-gradient(145deg, rgba(0, 0, 142, .20), rgba(107, 99, 195, .12)) !important;
  transform: rotate(16deg);
}

.admin-panel[data-panel="dashboard"] .summary-metric-card::before {
  width: 178px;
  height: 178px;
  right: -74px;
  top: -62px;
  border-radius: 34px;
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .82), transparent 34%),
    linear-gradient(145deg, rgba(0, 0, 142, .22), rgba(107, 99, 195, .14)) !important;
  transform: rotate(7deg);
}

.admin-panel[data-panel="dashboard"] .summary-metric-card::after {
  width: 190px;
  height: 120px;
  right: -60px;
  bottom: -52px;
  border-radius: 999px 999px 0 0;
  background-image: linear-gradient(135deg, rgba(58, 161, 143, .12), rgba(0, 0, 142, .18), rgba(107, 99, 195, .10)) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue::before {
  background-image: linear-gradient(145deg, rgba(0, 0, 142, .28), rgba(107, 99, 195, .16)) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber::before {
  background-image: linear-gradient(145deg, rgba(237, 141, 63, .25), rgba(238, 189, 158, .28)) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green::before {
  background-image: linear-gradient(145deg, rgba(0, 0, 142, .22), rgba(0, 0, 142, .12)) !important;
}

.admin-panel[data-panel="dashboard"] .summary-overall-card::before,
.admin-panel[data-panel="dashboard"] .dashboard-surface::before {
  width: 220px;
  height: 220px;
  right: -96px;
  top: -108px;
  border-radius: 54px;
  background-image: linear-gradient(145deg, rgba(0, 0, 142, .16), rgba(0, 0, 142, .08)) !important;
  transform: rotate(18deg);
}

.admin-panel[data-panel="dashboard"] .panel-section-title,
.admin-panel[data-panel="dashboard"] .summary-metric-head,
.admin-panel[data-panel="dashboard"] .summary-metric-body,
.admin-panel[data-panel="dashboard"] .summary-chart-head,
.admin-panel[data-panel="dashboard"] .summary-bar-legend,
.admin-panel[data-panel="dashboard"] .quick-action-list,
.admin-panel[data-panel="dashboard"] .recent-reports-head,
.admin-panel[data-panel="dashboard"] .recent-table-wrap {
  position: relative;
  z-index: 1;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.blue .summary-mini-ring {
  background-image: conic-gradient(#0EA5E9 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.amber .summary-mini-ring {
  background-image: conic-gradient(#ED8D3F 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.green .summary-mini-ring {
  background-image: conic-gradient(#3AA18F 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

/* Tombol aksi tabel master: warna solid polos, tanpa gradasi */
.master-list .master-table td.master-item-actions .btn-edit,
.inventory-table td.master-item-actions .btn-edit,
.master-item-actions .btn-edit,
.table-actions .btn-edit {
  background: #00008E !important;
  background-color: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.master-list .master-table td.master-item-actions .btn-delete,
.inventory-table td.master-item-actions .btn-delete,
.master-item-actions .btn-delete,
.table-actions .btn-delete {
  background: #EEBD9E !important;
  background-color: #EEBD9E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.master-list .master-table td.master-item-actions .btn-edit:hover,
.inventory-table td.master-item-actions .btn-edit:hover,
.master-item-actions .btn-edit:hover,
.table-actions .btn-edit:hover {
  background: #3AA18F !important;
  background-color: #3AA18F !important;
  background-image: none !important;
}

.master-list .master-table td.master-item-actions .btn-delete:hover,
.inventory-table td.master-item-actions .btn-delete:hover,
.master-item-actions .btn-delete:hover,
.table-actions .btn-delete:hover {
  background: #ED8D3F !important;
  background-color: #ED8D3F !important;
  background-image: none !important;
}

/* Hard lock: tombol AKSI harus full warna, bukan gradasi */
td.master-item-actions > button,
td.table-actions > button,
.master-list td.master-item-actions > button,
.inventory-table td.master-item-actions > button,
.report-table td.table-actions > button {
  background-image: none !important;
  background-clip: border-box !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

td.master-item-actions > button::before,
td.master-item-actions > button::after,
td.table-actions > button::before,
td.table-actions > button::after,
.master-list td.master-item-actions > button::before,
.master-list td.master-item-actions > button::after,
.inventory-table td.master-item-actions > button::before,
.inventory-table td.master-item-actions > button::after,
.report-table td.table-actions > button::before,
.report-table td.table-actions > button::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
}

td.master-item-actions > .btn-edit,
td.table-actions > .btn-edit,
.master-list td.master-item-actions > .btn-edit,
.inventory-table td.master-item-actions > .btn-edit,
.report-table td.table-actions > .btn-edit,
td.master-item-actions > .btn-edit:hover,
td.table-actions > .btn-edit:hover,
.master-list td.master-item-actions > .btn-edit:hover,
.inventory-table td.master-item-actions > .btn-edit:hover,
.report-table td.table-actions > .btn-edit:hover,
td.master-item-actions > .btn-edit:active,
td.table-actions > .btn-edit:active,
.master-list td.master-item-actions > .btn-edit:active,
.inventory-table td.master-item-actions > .btn-edit:active,
.report-table td.table-actions > .btn-edit:active {
  background: none !important;
  background-color: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

td.master-item-actions > .btn-delete,
td.table-actions > .btn-delete,
.master-list td.master-item-actions > .btn-delete,
.inventory-table td.master-item-actions > .btn-delete,
.report-table td.table-actions > .btn-delete,
td.master-item-actions > .btn-delete:hover,
td.table-actions > .btn-delete:hover,
.master-list td.master-item-actions > .btn-delete:hover,
.inventory-table td.master-item-actions > .btn-delete:hover,
.report-table td.table-actions > .btn-delete:hover,
td.master-item-actions > .btn-delete:active,
td.table-actions > .btn-delete:active,
.master-list td.master-item-actions > .btn-delete:active,
.inventory-table td.master-item-actions > .btn-delete:active,
.report-table td.table-actions > .btn-delete:active {
  background: none !important;
  background-color: #ED8D3F !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

td.master-item-actions > button:disabled,
td.table-actions > button:disabled {
  opacity: .58 !important;
  filter: none !important;
}

/* Header form work order */
#formView .ticket-head {
  background: rgba(0, 0, 142, .18) !important;
  background-color: rgba(0, 0, 142, .18) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(0, 0, 142, .35);
  color: #7DD3FC !important;
}

#formView .ticket-label {
  color: #3AA18F !important;
  opacity: 1 !important;
  font-weight: 800;
}

#formView .ticket-type {
  color: #7DD3FC !important;
  font-weight: 800;
}

#formView .ticket-id {
  color: #0EA5E9 !important;
  opacity: 1 !important;
  font-weight: 700;
}

/* Sidebar biru transparan */
.sidebar,
body.dark-mode .sidebar {
  background: rgba(0, 0, 142, .88) !important;
  background-color: rgba(0, 0, 142, .88) !important;
  background-image: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right-color: rgba(255, 255, 255, .42) !important;
}

/* Sidebar khusus: biru solid dengan teks putih */
.sidebar,
body.dark-mode .sidebar {
  background: #00008E !important;
  background-color: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.sidebar *,
.sidebar-brand-block strong,
.sidebar-brand-block small,
.sidebar-profile,
.sidebar-profile strong,
.sidebar-profile small,
.sidebar-section-label,
.sidebar-item,
.sidebar-subitem,
.sidebar-logout,
.dropdown-chevron,
body.dark-mode .sidebar *,
body.dark-mode .sidebar-brand-block strong,
body.dark-mode .sidebar-brand-block small,
body.dark-mode .sidebar-profile,
body.dark-mode .sidebar-profile strong,
body.dark-mode .sidebar-profile small,
body.dark-mode .sidebar-section-label,
body.dark-mode .sidebar-item,
body.dark-mode .sidebar-subitem,
body.dark-mode .sidebar-logout,
body.dark-mode .dropdown-chevron {
  color: #FFFFFF !important;
}

.sidebar-item:hover,
.sidebar-item.active,
body.dark-mode .sidebar-item:hover,
body.dark-mode .sidebar-item.active {
  background: rgba(255, 255, 255, .18) !important;
  background-image: none !important;
}

.sidebar-item::before,
.sidebar-icon,
.sidebar-item.active::before,
.sidebar-toggle,
.profile-icon,
body.dark-mode .sidebar-item::before,
body.dark-mode .sidebar-icon,
body.dark-mode .sidebar-item.active::before,
body.dark-mode .sidebar-toggle,
body.dark-mode .profile-icon {
  background: rgba(255, 255, 255, .20) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.sidebar .sidebar-logout,
body.dark-mode .sidebar .sidebar-logout {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  color: #00008E !important;
  font-weight: 800;
  box-shadow: none !important;
}

.sidebar .sidebar-logout:hover,
body.dark-mode .sidebar .sidebar-logout:hover {
  background: rgba(255, 255, 255, .88) !important;
  background-color: rgba(255, 255, 255, .88) !important;
  color: #00008E !important;
  transform: translateY(-1px);
}

/* Final color correction: biru transparan + semua garis hitam */
:root,
body {
  --border: #000000 !important;
  --design-border: #000000 !important;
}

#formView .ticket-head,
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card,
.admin-panel[data-panel="dashboard"] .summary-metric-card,
.admin-panel[data-panel="dashboard"] .summary-overall-card,
.admin-panel[data-panel="dashboard"] .dashboard-surface,
.admin-panel[data-panel="dashboard"] .quick-action,
.admin-panel[data-panel="dashboard"] .recent-table-wrap,
.admin-panel[data-panel="dashboard"] .summary-mini-stat,
.admin-panel[data-panel="dashboard"] .summary-bar-card {
  background: rgba(0, 0, 142, .06) !important;
  background-color: rgba(0, 0, 142, .06) !important;
  border-color: #000000 !important;
}

#formView .ticket-head {
  background: rgba(0, 0, 142, .14) !important;
  background-color: rgba(0, 0, 142, .14) !important;
  border-bottom-color: #000000 !important;
}

#formView .ticket-label,
#formView .ticket-type,
#formView .ticket-id,
.admin-panel[data-panel="dashboard"] .title-wrap,
.admin-panel[data-panel="dashboard"] .dashboard-section-heading h3,
.admin-panel[data-panel="dashboard"] .summary-metric-title,
.admin-panel[data-panel="dashboard"] .summary-metric-value,
.admin-panel[data-panel="dashboard"] .summary-chart-head strong {
  color: #00008E !important;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.summary-bar-card,
.quick-action,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea,
.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap,
.app-table-pagination,
.kv-row {
  border-color: #000000 !important;
}

.report-table,
.master-table,
.inventory-table,
.recent-table,
.material-card table,
.print-table,
.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th,
.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.print-table td {
  border-color: #000000 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th {
  border-bottom-color: #000000 !important;
}

/* Final 3-color professional theme: #0000FF, #FF8000, #00FF00 */
:root,
body {
  --primary: #0000FF !important;
  --primary-dark: #0000FF !important;
  --primary-soft: rgba(0, 0, 255, .08) !important;
  --accent: #00FF00 !important;
  --accent-soft: rgba(0, 255, 0, .10) !important;
  --danger: #FF8000 !important;
  --danger-soft: rgba(255, 128, 0, .12) !important;
  --success: #00FF00 !important;
  --success-soft: rgba(0, 255, 0, .10) !important;
  --border: rgba(0, 0, 255, .18) !important;
  --design-primary: #0000FF !important;
  --design-accent: #00FF00 !important;
  --design-danger: #FF8000 !important;
  --design-border: rgba(0, 0, 255, .18) !important;
  --app-line: rgba(0, 0, 255, .18) !important;
  --app-line-soft: rgba(0, 0, 255, .10) !important;
}

body {
  background: #FFFFFF !important;
  color: #0000FF !important;
}

.sidebar,
body.dark-mode .sidebar {
  background: #0000FF !important;
  background-color: #0000FF !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(0, 0, 255, .18) !important;
}

.sidebar *,
.sidebar-item,
.sidebar-subitem,
.sidebar-section-label,
.sidebar-brand-block strong,
.sidebar-brand-block small,
.sidebar-profile,
.sidebar-profile strong,
.sidebar-profile small,
.dropdown-chevron {
  color: #FFFFFF !important;
}

.sidebar-item:hover,
.sidebar-item.active {
  background: rgba(255, 255, 255, .16) !important;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.summary-bar-card,
.quick-action,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap,
.app-table-pagination {
  border: 1px solid rgba(0, 0, 255, .16) !important;
  box-shadow: 0 10px 26px -24px rgba(0, 0, 255, .32) !important;
}

#formView .ticket-head,
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card,
.admin-panel[data-panel="dashboard"] .summary-metric-card,
.admin-panel[data-panel="dashboard"] .summary-overall-card,
.admin-panel[data-panel="dashboard"] .dashboard-surface,
.admin-panel[data-panel="dashboard"] .quick-action,
.admin-panel[data-panel="dashboard"] .summary-mini-stat,
.admin-panel[data-panel="dashboard"] .summary-bar-card {
  background: rgba(0, 0, 255, .045) !important;
  background-color: rgba(0, 0, 255, .045) !important;
  border-color: rgba(0, 0, 255, .16) !important;
}

#formView .ticket-head {
  background: rgba(0, 0, 255, .10) !important;
  background-color: rgba(0, 0, 255, .10) !important;
  border-bottom: 1px solid rgba(0, 0, 255, .16) !important;
}

#formView .ticket-label,
#formView .ticket-type,
#formView .ticket-id,
.admin-header h2,
.account-form-title,
.title-wrap,
.dashboard-section-heading h3,
.summary-metric-title,
.summary-metric-value,
.summary-chart-head strong,
.quick-action strong,
.payment-total,
.kv-value,
.report-id {
  color: #0000FF !important;
}

.admin-subtitle,
.summary-metric-meta,
.summary-chart-head span,
.quick-action small,
.account-form label,
.settings-help,
.package-header p,
.kv-key,
.empty-state {
  color: rgba(0, 0, 255, .72) !important;
}

.submit-btn,
.export-btn,
.btn-print,
.inventory-toolbar .file-btn,
.sidebar-toggle,
.mobile-sidebar-toggle,
.network-summary-icon,
.summary-metric-card.blue .summary-metric-icon,
.quick-action-icon.blue,
.quick-action-icon.teal {
  background: #0000FF !important;
  background-color: #0000FF !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #0000FF !important;
}

.sidebar .sidebar-logout,
body.dark-mode .sidebar .sidebar-logout {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0000FF !important;
  border-color: rgba(0, 0, 255, .18) !important;
}

.print-type-btn,
.inventory-print-btn,
.bulk-delete-btn,
.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete,
.summary-metric-card.amber .summary-metric-icon,
.quick-action-icon.orange {
  background: #FF8000 !important;
  background-color: #FF8000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #FF8000 !important;
}

.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit {
  background: #0000FF !important;
  background-color: #0000FF !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #0000FF !important;
}

.summary-metric-card.green .summary-metric-icon,
.quick-action-icon.green,
.profile-icon,
.sidebar-icon,
.sidebar-item::before,
.sidebar-item.active::before {
  background: #00FF00 !important;
  background-color: #00FF00 !important;
  background-image: none !important;
  color: #0000FF !important;
  border-color: #00FF00 !important;
}

.status-pill.done,
.inventory-status.tersedia,
.type-pill.instalasi {
  background: rgba(0, 255, 0, .14) !important;
  color: #0000FF !important;
}

.status-pill.pending,
.type-pill.dismantle {
  background: rgba(255, 128, 0, .14) !important;
  color: #FF8000 !important;
}

.status-pill.issue,
.inventory-status.keluar,
.type-pill.maintenance {
  background: rgba(0, 0, 255, .08) !important;
  color: #0000FF !important;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea {
  border: 1px solid rgba(0, 0, 255, .18) !important;
  box-shadow: none !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: #0000FF !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 255, .10) !important;
}

/* Table border cleanup: tipis, tidak double/menumpuk */
.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap {
  border: 1px solid rgba(0, 0, 255, .18) !important;
  overflow: hidden auto !important;
}

.report-table,
.master-table,
.inventory-table,
.recent-table,
.material-card table,
.print-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th,
.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.print-table td {
  border: 0 !important;
  border-right: 1px solid rgba(0, 0, 255, .14) !important;
  border-bottom: 1px solid rgba(0, 0, 255, .14) !important;
}

.report-table th:last-child,
.master-table th:last-child,
.inventory-table th:last-child,
.recent-table th:last-child,
.material-card th:last-child,
.print-table th:last-child,
.report-table td:last-child,
.master-table td:last-child,
.inventory-table td:last-child,
.recent-table td:last-child,
.material-card td:last-child,
.print-table td:last-child {
  border-right: 0 !important;
}

.report-table tbody tr:last-child td,
.master-table tbody tr:last-child td,
.inventory-table tbody tr:last-child td,
.recent-table tbody tr:last-child td,
.material-card tbody tr:last-child td,
.print-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Dashboard reference polish: bordered cards, wrapped quick actions, rounded recent table */
#appSidebar.sidebar,
body.dark-mode #appSidebar.sidebar {
  background: rgba(16, 26, 48, .82) !important;
  background-color: rgba(16, 26, 48, .82) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 18px 0 42px rgba(15, 23, 42, .14) !important;
}

#appSidebar .sidebar-section-label {
  color: rgba(255, 255, 255, .72) !important;
}

#appSidebar .sidebar-item {
  min-height: 46px !important;
  margin: 2px 0 !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
  color: rgba(255, 255, 255, .88) !important;
}

#appSidebar .sidebar-item:hover,
#appSidebar .sidebar-item.active {
  background: rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
}

#appSidebar .sidebar-item::before {
  background: rgba(255, 255, 255, .18) !important;
  color: #FFFFFF !important;
}

#appSidebar .sidebar-item.active::before {
  background: #FFFFFF !important;
  color: #2563EB !important;
}

.admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface,
.admin-panel[data-panel="dashboard"] .recent-reports.dashboard-surface,
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card {
  background: #FFFFFF !important;
  border: 1px solid #E3EAF1 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 38px -32px rgba(15, 23, 42, .35) !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface {
  padding: 20px !important;
}

.admin-panel[data-panel="dashboard"] .quick-action-list {
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #EEF2F6 !important;
  gap: 12px !important;
}

.admin-panel[data-panel="dashboard"] .quick-action {
  border: 1px solid #E7EDF4 !important;
  border-radius: 13px !important;
  padding: 14px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.admin-panel[data-panel="dashboard"] .quick-action:hover {
  border-color: #CFE1F3 !important;
  box-shadow: 0 14px 28px -24px rgba(37, 99, 235, .50) !important;
  transform: translateY(-1px);
}

.admin-panel[data-panel="dashboard"] .summary-metric-grid {
  gap: 14px !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card {
  border: 1px solid #E3EAF1 !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue {
  box-shadow: 0 18px 34px -24px rgba(37, 99, 235, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber {
  box-shadow: 0 18px 34px -24px rgba(245, 158, 11, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green {
  box-shadow: 0 18px 34px -24px rgba(16, 185, 129, .72) !important;
}

.admin-panel[data-panel="dashboard"] .recent-table-wrap {
  margin: 0 16px 16px !important;
  border: 1px solid #E3EAF1 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  overflow: hidden auto !important;
  box-shadow: none !important;
}

.admin-panel[data-panel="dashboard"] .recent-table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .recent-table th:first-child {
  border-top-left-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table th:last-child {
  border-top-right-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px !important;
}

@media (max-width: 760px) {
  .admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface {
    padding: 16px !important;
  }

  .admin-panel[data-panel="dashboard"] .recent-table-wrap {
    margin-inline: 12px !important;
  }
}

/* FINAL LOCK 2: quick actions tidak terpotong + sidebar putih */
#appSidebar.sidebar,
body.dark-mode #appSidebar.sidebar {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-right: 1px solid #E6EEF5 !important;
  box-shadow: 16px 0 36px rgba(15, 23, 42, .08) !important;
  color: #0F172A !important;
}

#appSidebar .sidebar-brand-block,
#appSidebar .sidebar-brand-block strong,
#appSidebar .sidebar-profile,
#appSidebar .sidebar-profile strong,
#appSidebar .sidebar-item,
#appSidebar .sidebar-subitem,
#appSidebar .sidebar-section-label,
#appSidebar .dropdown-chevron {
  color: #0F172A !important;
}

#appSidebar .sidebar-brand-block small,
#appSidebar .sidebar-profile small {
  color: #64748B !important;
}

#appSidebar .sidebar-section-label {
  margin: 16px 4px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#appSidebar .sidebar-profile {
  background: #F8FAFC !important;
  border: 1px solid #E6EEF5 !important;
}

#appSidebar .profile-icon {
  background: #EEF6FF !important;
  color: #2563EB !important;
}

#appSidebar .sidebar-nav {
  gap: 8px !important;
}

#appSidebar .sidebar-item {
  min-height: 47px !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-weight: 600 !important;
}

#appSidebar .sidebar-item::before {
  background: transparent !important;
  color: #334155 !important;
  font-size: 18px !important;
}

#appSidebar .sidebar-item:hover,
#appSidebar .sidebar-item.active {
  background: #EFE7FA !important;
  color: #4F2DBD !important;
}

#appSidebar .sidebar-item:hover::before,
#appSidebar .sidebar-item.active::before {
  background: transparent !important;
  color: #6D3FD2 !important;
}

#appSidebar .sidebar-divider {
  background: #E6EEF5 !important;
}

#appSidebar .sidebar-toggle {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

#appSidebar .sidebar-toggle .menu-lines span {
  background: #0F172A !important;
}

#appSidebar .sidebar-logout {
  background: #FFF1F2 !important;
  border: 1px solid #FECACA !important;
  color: #B91C1C !important;
}

#appSidebar .sidebar-logout:hover {
  background: #FEE2E2 !important;
  color: #991B1B !important;
}

.admin-panel[data-panel="dashboard"] .dashboard-lower-grid {
  align-items: start !important;
}

.admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 20px !important;
}

.admin-panel[data-panel="dashboard"] .quick-action-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.admin-panel[data-panel="dashboard"] .quick-action {
  min-height: 64px !important;
  flex-shrink: 0 !important;
}

/* Override paling akhir: dashboard cerah, garis hanya tabel, sidebar transparan */
#appSidebar.sidebar,
body.dark-mode #appSidebar.sidebar {
  background: rgba(16, 26, 48, .74) !important;
  background-color: rgba(16, 26, 48, .74) !important;
  background-image: none !important;
  border-right: 0 !important;
  box-shadow: 18px 0 44px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#adminView .admin-panel,
#adminView .account-form,
#inventoryPanel,
#adminView .payment-summary.ringkasan-card,
#adminView .dashboard-surface,
#adminView .admin-toolbar,
#adminView .inventory-toolbar,
#adminView .master-bulk-bar,
#adminView .app-table-pagination,
#adminView .report-table-wrap,
#adminView .inventory-table-wrap,
#adminView .master-list,
#adminView .recent-table-wrap {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

#adminView .admin-panel,
#adminView .account-form,
#inventoryPanel,
#adminView .admin-toolbar,
#adminView .inventory-toolbar,
#adminView .master-bulk-bar,
#adminView .app-table-pagination,
#adminView .report-table-wrap,
#adminView .inventory-table-wrap,
#adminView .master-list,
#adminView .recent-table-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

#adminView .payment-summary.ringkasan-card,
#adminView .dashboard-surface,
#reportTypeSummary .summary-metric-card,
#summaryWorkLegend .summary-mini-stat,
#adminView .summary-overall-card,
#adminView .quick-action,
#adminView .recent-reports {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 0 !important;
}

#reportTypeSummary .summary-metric-card.blue,
#adminView .quick-action:has(.quick-action-icon.blue),
#adminView .quick-action:has(.quick-action-icon.teal) {
  box-shadow: 0 18px 34px -22px rgba(37, 99, 235, .72) !important;
}

#reportTypeSummary .summary-metric-card.amber,
#adminView .quick-action:has(.quick-action-icon.orange) {
  box-shadow: 0 18px 34px -22px rgba(245, 158, 11, .72) !important;
}

#reportTypeSummary .summary-metric-card.green,
#adminView .quick-action:has(.quick-action-icon.green),
#adminView .summary-overall-card {
  box-shadow: 0 18px 34px -22px rgba(16, 185, 129, .72) !important;
}

#adminView .network-summary-icon,
#reportTypeSummary .summary-metric-icon,
#adminView .quick-action-icon {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#adminView .network-summary-icon,
#reportTypeSummary .summary-metric-card.blue .summary-metric-icon,
#adminView .quick-action-icon.blue,
#adminView .quick-action-icon.teal {
  color: #2563EB !important;
}

#reportTypeSummary .summary-metric-card.amber .summary-metric-icon,
#adminView .quick-action-icon.orange {
  color: #F59E0B !important;
}

#reportTypeSummary .summary-metric-card.green .summary-metric-icon,
#adminView .quick-action-icon.green {
  color: #10B981 !important;
}

#adminView .network-summary-icon svg,
#adminView .network-summary-icon svg *,
#reportTypeSummary .summary-metric-icon svg,
#reportTypeSummary .summary-metric-icon svg *,
#adminView .quick-action-icon svg,
#adminView .quick-action-icon svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

#adminView table.report-table,
#adminView table.master-table,
#adminView table.inventory-table,
#adminView table.recent-table,
#adminView .material-card table,
#printArea table.print-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid #E3EAF1 !important;
}

#adminView table.report-table th,
#adminView table.master-table th,
#adminView table.inventory-table th,
#adminView table.recent-table th,
#adminView .material-card table th,
#printArea table.print-table th,
#adminView table.report-table td,
#adminView table.master-table td,
#adminView table.inventory-table td,
#adminView table.recent-table td,
#adminView .material-card table td,
#printArea table.print-table td {
  border: 1px solid #E3EAF1 !important;
}

/* Final adjustment: ikon dashboard cerah, garis hanya di tabel, sidebar transparan */
.sidebar,
body.dark-mode .sidebar {
  background: rgba(16, 26, 48, .78) !important;
  background-color: rgba(16, 26, 48, .78) !important;
  background-image: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 0 !important;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.summary-bar-card,
.quick-action,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.app-table-pagination,
.admin-toolbar,
.inventory-toolbar,
.master-bulk-bar {
  border: 0 !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card,
.admin-panel[data-panel="dashboard"] .summary-overall-card,
.admin-panel[data-panel="dashboard"] .quick-action,
.admin-panel[data-panel="dashboard"] .recent-reports {
  background: #FFFFFF !important;
  border: 0 !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.blue),
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.teal) {
  box-shadow: 0 18px 34px -24px rgba(0, 8, 255, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.orange) {
  box-shadow: 0 18px 34px -24px rgba(245, 158, 11, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.green),
.admin-panel[data-panel="dashboard"] .summary-overall-card {
  box-shadow: 0 18px 34px -24px rgba(58, 161, 143, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon,
.admin-panel[data-panel="dashboard"] .network-summary-icon {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 0 !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.blue,
.admin-panel[data-panel="dashboard"] .quick-action-icon.teal,
.admin-panel[data-panel="dashboard"] .network-summary-icon {
  color: #2563EB !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.orange {
  color: #F59E0B !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.green {
  color: #3AA18F !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-icon svg,
.admin-panel[data-panel="dashboard"] .quick-action-icon svg,
.admin-panel[data-panel="dashboard"] .network-summary-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap {
  border: 0 !important;
  box-shadow: none !important;
}

.report-table,
.master-table,
.inventory-table,
.recent-table,
.material-card table,
.print-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: 1px solid #E5EDF4 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th,
.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.print-table td {
  border: 1px solid #E5EDF4 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th {
  background: rgba(0, 0, 255, .055) !important;
  color: #0000FF !important;
  border-bottom-color: rgba(0, 0, 255, .20) !important;
}

.report-table tbody tr:hover td,
.master-table tbody tr:hover td,
.inventory-table tbody tr:hover td,
.recent-table tbody tr:hover td {
  background: rgba(0, 0, 255, .035) !important;
}

.report-table tbody tr:nth-child(even) td,
.master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td,
.recent-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 255, .018) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.blue .summary-mini-ring {
  background-image: conic-gradient(#0000FF 0 var(--ring), rgba(0, 0, 255, .10) var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.amber .summary-mini-ring {
  background-image: conic-gradient(#FF8000 0 var(--ring), rgba(255, 128, 0, .12) var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.green .summary-mini-ring {
  background-image: conic-gradient(#00FF00 0 var(--ring), rgba(0, 255, 0, .12) var(--ring) 360deg) !important;
}

/* Reset warna dasar aplikasi: kembali dari palet eksperimen */
:root,
body {
  --bg: #FFFFFF !important;
  --surface: #FFFFFF !important;
  --ink: #111827 !important;
  --ink-soft: #4B5563 !important;
  --ink-faint: #6B7280 !important;
  --primary: #00008E !important;
  --primary-dark: #111827 !important;
  --primary-soft: #F3F6FB !important;
  --accent: #3AA18F !important;
  --accent-soft: #E9F8F6 !important;
  --border: #D9E3EC !important;
  --success: #22C55E !important;
  --success-soft: #EAFCEB !important;
  --danger: #C0463C !important;
  --danger-soft: #FAE5E3 !important;
  --network-blue: #00008E !important;
  --network-teal: #3AA18F !important;
  --network-cyan: #0EA5E9 !important;
  --design-primary: #00008E !important;
  --design-accent: #3AA18F !important;
  --design-danger: #C0463C !important;
  --design-border: #D9E3EC !important;
  --app-line: #D9E3EC !important;
  --app-line-soft: #EEF4F8 !important;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 12px 28px -22px rgba(15, 23, 42, .28) !important;
}

body {
  background: #FFFFFF !important;
  color: #111827 !important;
}

.sidebar,
body.dark-mode .sidebar {
  background: rgba(16, 26, 48, .74) !important;
  background-color: rgba(16, 26, 48, .74) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .12) !important;
  color: #FFFFFF !important;
  box-shadow: 18px 0 44px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sidebar *,
.sidebar-item,
.sidebar-subitem,
.sidebar-section-label,
.sidebar-brand-block strong,
.sidebar-brand-block small,
.sidebar-profile,
.sidebar-profile strong,
.sidebar-profile small,
.dropdown-chevron {
  color: #FFFFFF !important;
}

.sidebar-item:hover,
.sidebar-item.active {
  background: rgba(255, 255, 255, .13) !important;
}

.sidebar-icon,
.sidebar-item::before,
.sidebar-item.active::before,
.profile-icon,
.sidebar-toggle,
.mobile-sidebar-toggle {
  background: #00008E !important;
  background-color: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.sidebar .sidebar-logout,
body.dark-mode .sidebar .sidebar-logout {
  background: rgba(192, 70, 60, .16) !important;
  background-color: rgba(192, 70, 60, .16) !important;
  color: #FFD3CF !important;
  border-color: rgba(255, 255, 255, .20) !important;
}

.sidebar .sidebar-logout:hover,
body.dark-mode .sidebar .sidebar-logout:hover {
  background: rgba(192, 70, 60, .32) !important;
  color: #FFFFFF !important;
}

.ticket-card,
.account-form,
.dashboard-surface,
.payment-summary.ringkasan-card,
.summary-metric-card,
.summary-overall-card,
.summary-bar-card,
.quick-action,
.center-card,
.modal,
.package-add-card,
.master-entry-card,
.settings-logo-row,
.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap,
.app-table-pagination {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D9E3EC !important;
  box-shadow: 0 8px 22px -20px rgba(15, 23, 42, .30) !important;
}

#formView .ticket-head {
  background: #F3F6FB !important;
  background-color: #F3F6FB !important;
  background-image: none !important;
  border-bottom: 1px solid #D9E3EC !important;
  color: #111827 !important;
}

#formView .ticket-label,
#formView .ticket-type,
#formView .ticket-id,
.admin-header h2,
.account-form-title,
.title-wrap,
.dashboard-section-heading h3,
.summary-metric-title,
.summary-metric-value,
.summary-chart-head strong,
.quick-action strong,
.payment-total,
.kv-value,
.report-id {
  color: #111827 !important;
}

.admin-subtitle,
.summary-metric-meta,
.summary-chart-head span,
.quick-action small,
.account-form label,
.settings-help,
.package-header p,
.kv-key,
.empty-state {
  color: #4B5563 !important;
}

.submit-btn,
.export-btn,
.btn-print,
.inventory-toolbar .file-btn,
.network-summary-icon,
.summary-metric-card.blue .summary-metric-icon,
.quick-action-icon.blue,
.quick-action-icon.teal {
  background: #00008E !important;
  background-color: #00008E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #00008E !important;
}

.print-type-btn,
.inventory-print-btn {
  background: #0EA5E9 !important;
  background-color: #0EA5E9 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #0EA5E9 !important;
}

.btn-edit,
.table-actions .btn-edit,
.master-item-actions .btn-edit {
  background: #E8F1FF !important;
  background-color: #E8F1FF !important;
  background-image: none !important;
  color: #00008E !important;
  border-color: transparent !important;
}

.btn-delete,
.table-actions .btn-delete,
.master-item-actions .btn-delete,
.bulk-delete-btn {
  background: #FAE5E3 !important;
  background-color: #FAE5E3 !important;
  background-image: none !important;
  color: #C0463C !important;
  border-color: transparent !important;
}

.summary-metric-card.green .summary-metric-icon,
.quick-action-icon.green {
  background: #E9F8F6 !important;
  background-color: #E9F8F6 !important;
  background-image: none !important;
  color: #3AA18F !important;
  border-color: transparent !important;
}

.summary-metric-card.amber .summary-metric-icon,
.quick-action-icon.orange {
  background: #FFF3E8 !important;
  background-color: #FFF3E8 !important;
  background-image: none !important;
  color: #F47B20 !important;
  border-color: transparent !important;
}

.status-pill.done,
.inventory-status.tersedia,
.type-pill.instalasi {
  background: #EAFCEB !important;
  color: #15803D !important;
}

.status-pill.pending,
.type-pill.dismantle {
  background: #FFF4D8 !important;
  color: #A66F00 !important;
}

.status-pill.issue,
.inventory-status.keluar,
.type-pill.maintenance {
  background: #FFE8DF !important;
  color: #BD4933 !important;
}

.inventory-status.ng {
  background: #F3E8FF !important;
  color: #7E22CE !important;
}

.field input,
.field select,
.field textarea,
.account-form input,
.account-form select,
.inventory-toolbar input,
.inventory-toolbar select,
.recent-report-tools input,
.dashboard-period-box input,
.edit-field input,
.edit-field select,
.edit-field textarea {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D9E3EC !important;
  box-shadow: none !important;
  color: #111827 !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.account-form input:focus,
.account-form select:focus,
.inventory-toolbar input:focus,
.inventory-toolbar select:focus,
.recent-report-tools input:focus,
.dashboard-period-box input:focus,
.edit-field input:focus,
.edit-field select:focus,
.edit-field textarea:focus {
  border-color: #00008E !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 142, .10) !important;
}

/* Reset garis tabel/card: tipis dan tidak double */
.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap {
  border: 1px solid #D9E3EC !important;
  overflow: hidden auto !important;
}

.report-table,
.master-table,
.inventory-table,
.recent-table,
.material-card table,
.print-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th,
.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.print-table td {
  border: 0 !important;
  border-right: 1px solid #E5EDF4 !important;
  border-bottom: 1px solid #E5EDF4 !important;
}

.report-table th:last-child,
.master-table th:last-child,
.inventory-table th:last-child,
.recent-table th:last-child,
.material-card th:last-child,
.print-table th:last-child,
.report-table td:last-child,
.master-table td:last-child,
.inventory-table td:last-child,
.recent-table td:last-child,
.material-card td:last-child,
.print-table td:last-child {
  border-right: 0 !important;
}

.report-table tbody tr:last-child td,
.master-table tbody tr:last-child td,
.inventory-table tbody tr:last-child td,
.recent-table tbody tr:last-child td,
.material-card tbody tr:last-child td,
.print-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th {
  background: #F5F7F9 !important;
  color: #203746 !important;
  border-bottom-color: #D9E3EC !important;
}

.report-table tbody tr:nth-child(even) td,
.master-table tbody tr:nth-child(even) td,
.inventory-table tbody tr:nth-child(even) td,
.recent-table tbody tr:nth-child(even) td {
  background: #FAFBFC !important;
}

.report-table tbody tr:hover td,
.master-table tbody tr:hover td,
.inventory-table tbody tr:hover td,
.recent-table tbody tr:hover td {
  background: #F1F7FA !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.blue .summary-mini-ring {
  background-image: conic-gradient(#00008E 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.amber .summary-mini-ring {
  background-image: conic-gradient(#F59E0B 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

.admin-panel[data-panel="dashboard"] .summary-mini-stat.green .summary-mini-ring {
  background-image: conic-gradient(#3AA18F 0 var(--ring), #EEF5F8 var(--ring) 360deg) !important;
}

/* Final clean layout: hilangkan kontainer pembungkus, dashboard putih dengan shadow cerah */
.admin-panel,
.admin-panel[data-panel="dashboard"],
.admin-panel[data-panel="reports"],
.account-form.admin-panel,
#inventoryPanel,
.payment-summary.ringkasan-card,
.dashboard-surface,
.admin-toolbar,
.inventory-toolbar,
.master-bulk-bar,
.app-table-pagination {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.admin-panel,
.admin-panel[data-panel="dashboard"],
.admin-panel[data-panel="reports"],
.account-form.admin-panel,
#inventoryPanel {
  padding-inline: 0 !important;
}

.report-table-wrap,
.inventory-table-wrap,
.master-list,
.recent-table-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card,
.admin-panel[data-panel="dashboard"] .summary-overall-card,
.admin-panel[data-panel="dashboard"] .quick-action,
.admin-panel[data-panel="dashboard"] .recent-reports,
.admin-panel[data-panel="dashboard"] .recent-table {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon,
.admin-panel[data-panel="dashboard"] .network-summary-icon {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #2563EB !important;
  border: 0 !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-icon svg,
.admin-panel[data-panel="dashboard"] .quick-action-icon svg,
.admin-panel[data-panel="dashboard"] .network-summary-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.blue,
.admin-panel[data-panel="dashboard"] .quick-action-icon.teal,
.admin-panel[data-panel="dashboard"] .network-summary-icon {
  color: #2563EB !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.orange {
  color: #F59E0B !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green .summary-metric-icon,
.admin-panel[data-panel="dashboard"] .quick-action-icon.green {
  color: #10B981 !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.blue),
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.teal) {
  box-shadow:
    0 18px 34px -24px rgba(0, 8, 255, .72),
    0 0 0 1px rgba(0, 8, 255, .10) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.orange) {
  box-shadow:
    0 18px 34px -24px rgba(255, 128, 0, .72),
    0 0 0 1px rgba(255, 128, 0, .12) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green,
.admin-panel[data-panel="dashboard"] .quick-action:has(.quick-action-icon.green),
.admin-panel[data-panel="dashboard"] .summary-overall-card {
  box-shadow:
    0 18px 34px -24px rgba(0, 210, 145, .72),
    0 0 0 1px rgba(0, 210, 145, .12) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card::before,
.admin-panel[data-panel="dashboard"] .summary-metric-card::after,
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card::after,
.admin-panel[data-panel="dashboard"] .summary-overall-card::before,
.admin-panel[data-panel="dashboard"] .dashboard-surface::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
}

.report-table,
.master-table,
.inventory-table,
.recent-table,
.material-card table,
.print-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.report-table th,
.master-table th,
.inventory-table th,
.recent-table th,
.material-card th,
.print-table th,
.report-table td,
.master-table td,
.inventory-table td,
.recent-table td,
.material-card td,
.print-table td {
  border: 0 !important;
  border-right: 1px solid #EEF2F6 !important;
  border-bottom: 1px solid #EEF2F6 !important;
}

.report-table th:last-child,
.master-table th:last-child,
.inventory-table th:last-child,
.recent-table th:last-child,
.material-card th:last-child,
.print-table th:last-child,
.report-table td:last-child,
.master-table td:last-child,
.inventory-table td:last-child,
.recent-table td:last-child,
.material-card td:last-child,
.print-table td:last-child {
  border-right: 0 !important;
}

.report-table tbody tr:last-child td,
.master-table tbody tr:last-child td,
.inventory-table tbody tr:last-child td,
.recent-table tbody tr:last-child td,
.material-card tbody tr:last-child td,
.print-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* FINAL VISUAL LOCK: dashboard mengikuti referensi gambar */
#appSidebar.sidebar,
body.dark-mode #appSidebar.sidebar {
  background: rgba(16, 26, 48, .82) !important;
  background-color: rgba(16, 26, 48, .82) !important;
  background-image: none !important;
  border-right: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 18px 0 42px rgba(15, 23, 42, .14) !important;
}

#appSidebar .sidebar-section-label {
  color: rgba(255, 255, 255, .72) !important;
}

#appSidebar .sidebar-item {
  min-height: 46px !important;
  margin: 2px 0 !important;
  padding: 11px 14px !important;
  border-radius: 11px !important;
  color: rgba(255, 255, 255, .88) !important;
}

#appSidebar .sidebar-item:hover,
#appSidebar .sidebar-item.active {
  background: rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
}

#appSidebar .sidebar-item::before {
  background: rgba(255, 255, 255, .18) !important;
  color: #FFFFFF !important;
}

#appSidebar .sidebar-item.active::before {
  background: #FFFFFF !important;
  color: #2563EB !important;
}

.admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface,
.admin-panel[data-panel="dashboard"] .recent-reports.dashboard-surface,
.admin-panel[data-panel="dashboard"] .payment-summary.ringkasan-card {
  background: #FFFFFF !important;
  border: 1px solid #E3EAF1 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 38px -32px rgba(15, 23, 42, .35) !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface {
  padding: 20px !important;
}

.admin-panel[data-panel="dashboard"] .quick-action-list {
  margin: 14px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #EEF2F6 !important;
  gap: 12px !important;
}

.admin-panel[data-panel="dashboard"] .quick-action {
  border: 1px solid #E7EDF4 !important;
  border-radius: 13px !important;
  padding: 14px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.admin-panel[data-panel="dashboard"] .quick-action:hover {
  border-color: #CFE1F3 !important;
  box-shadow: 0 14px 28px -24px rgba(37, 99, 235, .50) !important;
  transform: translateY(-1px);
}

.admin-panel[data-panel="dashboard"] .summary-metric-grid {
  gap: 14px !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card {
  border: 1px solid #E3EAF1 !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.blue {
  box-shadow: 0 18px 34px -24px rgba(37, 99, 235, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.amber {
  box-shadow: 0 18px 34px -24px rgba(245, 158, 11, .72) !important;
}

.admin-panel[data-panel="dashboard"] .summary-metric-card.green {
  box-shadow: 0 18px 34px -24px rgba(16, 185, 129, .72) !important;
}

.admin-panel[data-panel="dashboard"] .recent-table-wrap {
  margin: 0 16px 16px !important;
  border: 1px solid #E3EAF1 !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  overflow: hidden auto !important;
  box-shadow: none !important;
}

.admin-panel[data-panel="dashboard"] .recent-table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.admin-panel[data-panel="dashboard"] .recent-table th:first-child {
  border-top-left-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table th:last-child {
  border-top-right-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px !important;
}

.admin-panel[data-panel="dashboard"] .recent-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px !important;
}

@media (max-width: 760px) {
  .admin-panel[data-panel="dashboard"] .quick-actions.dashboard-surface {
    padding: 16px !important;
  }

  .admin-panel[data-panel="dashboard"] .recent-table-wrap {
    margin-inline: 12px !important;
  }
}