:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-sidebar: #172554;
  --color-sidebar-active: #1d4ed8;
  --color-page: #f5f7fb;
  --color-surface: #ffffff;
  --color-muted-surface: #eef2f7;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-border-subtle: #cbd5e1;
  --color-border-default: #94a3b8;
  --color-border-strong: #64748b;
  --color-border-active: #2563eb;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --focus-ring: 0 0 0 3px rgb(147 197 253 / 45%);
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .875rem;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --shadow-md: 0 6px 18px rgb(15 23 42 / 10%);
  --transition-fast: 150ms ease;
}

body {
  background: var(--color-page);
  color: var(--color-text-secondary);
}

.content-wrapper {
  background: var(--color-page);
  min-height: calc(100vh - 7.5rem);
}

.content-header {
  padding: 1.5rem 0 .75rem;
}

.content-header h1,
.content-header .h1,
.card-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 700;
}

.breadcrumb {
  align-items: center;
  background: transparent;
  color: var(--color-text-muted);
  font-size: .85rem;
  margin: .35rem 0 0;
  padding: 0;
}

.breadcrumb a { color: var(--color-primary); }

.main-header {
  border-bottom: 1px solid var(--color-border-default) !important;
  box-shadow: var(--shadow-sm);
  min-height: 3.9rem;
}

.main-header .nav-link {
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-sm);
  margin: .25rem;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.main-header .nav-link:hover { background: var(--color-muted-surface); color: var(--color-primary) !important; }

.main-sidebar,
.main-sidebar::before {
  background: var(--color-sidebar) !important;
  border-left: 1px solid #1e3a8a;
}

.brand-link {
  border-bottom: 1px solid rgb(191 219 254 / 25%) !important;
  min-height: 4rem;
}

.brand-link .brand-text,
.user-panel .info a { color: #dbeafe !important; font-weight: 600; }

.user-panel { border-color: rgb(191 219 254 / 25%) !important; }

.nav-sidebar > .nav-item > .nav-link,
.nav-treeview > .nav-item > .nav-link {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #dbeafe !important;
  margin: .12rem .5rem !important;
  min-height: 2.7rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  width: calc(100% - 1rem) !important;
}

.nav-sidebar > .nav-item,
.nav-treeview > .nav-item { width: 100%; }

.nav-sidebar > .nav-item > .nav-link:hover,
.nav-treeview > .nav-item > .nav-link:hover {
  background: #1e3a8a !important;
  border-color: rgb(147 197 253 / 45%);
  color: #fff !important;
}

.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item.menu-open > .nav-link {
  background: var(--color-sidebar-active) !important;
  border-color: #60a5fa;
  color: #fff !important;
  box-shadow: none;
}

.nav-treeview > .nav-item > .nav-link { color: #bfdbfe !important; font-size: .9rem; }

@media (min-width: 992px) {
  .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link {
    align-items: center;
    display: flex;
    height: 3.25rem;
    justify-content: center;
    margin: .18rem auto !important;
    min-height: 3.25rem;
    padding: .55rem !important;
    width: 3.25rem !important;
  }

  .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link > .nav-icon {
    flex: 0 0 auto;
    margin: 0 !important;
    text-align: center;
    width: 1.65rem !important;
  }

  .sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link > p {
    display: none !important;
  }
}

.card,
.info-box,
.modal-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.card { overflow: hidden; }
.card-header {
  align-items: center;
  background: linear-gradient(135deg, #102a43 0%, #174f91 100%) !important;
  border-bottom: 1px solid rgb(147 197 253 / 45%) !important;
  color: #f8fbff !important;
  display: flex;
  direction: rtl;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: .85rem 1.15rem;
}
.card-header > .float-right,
.card-header > .float-left,
.card-header > .card-tools {
  align-items: center;
  display: flex;
  float: none !important;
  margin: 0;
  position: static !important;
}
.card-header > .float-right,
.card-header > .card-title,
.card-header > :first-child { min-width: 0; }
.card-header > .float-left,
.card-header > .card-tools { margin-right: auto; }
.card-header .card-title,
.card-header .card-title *,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header > strong,
.card-header > p,
.card-header a:not(.btn) { color: #fff !important; }
.card-header .btn-tool,
.card-header .card-tools .btn-tool,
.card-header .btn-tool i { color: #e8f1ff !important; }
.card-header .design-card-title {
  align-items: center;
  color: #fff !important;
  display: inline-flex;
  font-size: 1.08rem;
  font-weight: 800;
  gap: .65rem;
  line-height: 1.65;
  margin: 0;
}
.card-header .design-card-title-icon {
  color: #fff !important;
  flex: 0 0 auto;
  font-size: 1.28rem;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 18%));
}
.card-header .design-card-title small,
.card-header .card-subtitle,
.card-header > small { color: #dbeafe !important; }
.card-header.bg-lightblue {
  background: linear-gradient(135deg, #102a43 0%, #174f91 100%) !important;
  border-bottom-color: rgb(147 197 253 / 45%) !important;
}
.card-header.bg-lightblue .card-title,
.card-header.bg-lightblue h1,
.card-header.bg-lightblue h2,
.card-header.bg-lightblue h3,
.card-header.bg-lightblue h4,
.card-header.bg-lightblue h5,
.card-header.bg-lightblue h6 { color: #fff !important; }
.card-title { font-size: 1rem; margin: 0; }
.card-body { padding: 1.15rem; }

.info-box { min-height: 6.5rem; overflow: hidden; }
.info-box-icon { background: #dbeafe !important; color: var(--color-primary-active) !important; }
.info-box-icon.bg-danger { background: #fee2e2 !important; color: var(--color-danger) !important; }
.info-box-icon.bg-success { background: #dcfce7 !important; color: var(--color-success) !important; }
.info-box-icon.bg-warning { background: #fef3c7 !important; color: var(--color-warning) !important; }
.info-box-number { color: var(--color-text-primary); font-weight: 700; }

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  min-height: 2.35rem;
  padding: .45rem .85rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active) !important; border-color: var(--color-primary-active) !important; }
.btn-warning { background: #f59e0b; border-color: #d97706; color: #1f2937; }
.btn-danger { background: var(--color-danger); border-color: #b91c1c; }
.btn-success { background: var(--color-success); border-color: #15803d; }
.btn-info { background: #16a3b6; border-color: #0e8799; color: #fff; }
.btn-secondary { background: #64748b; border-color: #475569; color: #fff; }
.btn-primary:hover, .btn-primary:focus { color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #e89008; border-color: #c96b05; color: #172033; }
.btn-danger:hover, .btn-danger:focus { background: #c82333; border-color: #a91d2a; color: #fff; }
.btn-success:hover, .btn-success:focus { background: #158b3d; border-color: #126f33; color: #fff; }
.btn-info:hover, .btn-info:focus { background: #128c9e; border-color: #0c7483; color: #fff; }
.btn-secondary:hover, .btn-secondary:focus { background: #566579; border-color: #3f4b5b; color: #fff; }
.btn:disabled, .btn.disabled { background: #93c5fd; border-color: #93c5fd; color: #eff6ff; opacity: 1; transform: none; }

.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--color-surface);
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-primary);
  min-height: 2.45rem;
}
.form-control:hover, .custom-select:hover { border-color: var(--color-border-strong) !important; }
.form-control:focus, .custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--color-border-active) !important;
  box-shadow: var(--focus-ring) !important;
}
.form-control:disabled, .custom-select:disabled { background: #f1f5f9; border-color: var(--color-border-subtle) !important; color: #94a3b8; }
.is-invalid, .was-validated .form-control:invalid { background-color: #fef2f2; border-color: var(--color-danger) !important; }

.table,
table.dataTable,
.table-bordered {
  background: #fff;
  border: 1px solid #94a3b8 !important;
  border-collapse: separate;
  border-spacing: 0;
  color: #334155;
  font-size: .84rem;
  margin-bottom: 0;
  width: 100% !important;
}
.table thead th {
  background: #dfe7f1 !important;
  border-bottom: 2px solid #7f94ad !important;
  color: #1e293b !important;
  font-weight: 800;
  line-height: 1.65;
  padding: .75rem .65rem !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.table td,
.table th {
  border-color: #cbd5e1 !important;
  padding: .72rem .65rem !important;
  vertical-align: middle;
}
.table tbody tr,
table.dataTable tbody tr { transition: background-color var(--transition-fast); }
.table tbody tr:nth-child(odd),
.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe > tbody > tr.odd,
table.dataTable.display > tbody > tr.odd { background: #f3f4f6 !important; }
.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-of-type(even),
table.dataTable.stripe > tbody > tr.even,
table.dataTable.display > tbody > tr.even { background: #fff !important; }
.table-hover tbody tr:hover,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover { background: #e8f1ff !important; color: #1e293b; }
.table td .btn {
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 12%);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  min-height: 2.2rem;
  padding: .42rem .7rem;
  white-space: nowrap;
}
.table td .btn-group,
.table td .design-table-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.table .design-column-actions {
  min-width: var(--design-actions-width, 7rem) !important;
  width: var(--design-actions-width, 7rem) !important;
  white-space: nowrap !important;
}
.table .design-column-actions .btn-group,
.table .design-column-actions .design-table-actions {
  flex-wrap: nowrap !important;
  justify-content: center;
  width: 100%;
}
.table .design-column-wide {
  max-width: 60vw;
  min-width: 18rem !important;
  white-space: normal !important;
  width: var(--design-column-share, 32%) !important;
}
.table .design-column-compact {
  max-width: var(--design-compact-width, 7rem) !important;
  min-width: var(--design-compact-width, 7rem) !important;
  white-space: nowrap !important;
  width: var(--design-compact-width, 7rem) !important;
}
.table .design-column-standard {
  min-width: 9rem;
  width: var(--design-column-share, auto) !important;
}
.table td .btn-group > .btn { border-radius: 6px !important; }
.table td .btn-primary { background: #2563eb !important; border-color: #1d4ed8 !important; color: #fff !important; }
.table td .btn-warning { background: #f59e0b !important; border-color: #d97706 !important; color: #172033 !important; }
.table td .btn-danger { background: #dc2626 !important; border-color: #b91c1c !important; color: #fff !important; }
.table td .btn-success { background: #16a34a !important; border-color: #15803d !important; color: #fff !important; }
.table td .btn-info { background: #16a3b6 !important; border-color: #0e8799 !important; color: #fff !important; }
.table td .btn-secondary { background: #64748b !important; border-color: #475569 !important; color: #fff !important; }
.table td .btn-primary:hover,
.table td .btn-primary:focus { background: #1d4ed8 !important; border-color: #1e40af !important; }
.table td .btn-warning:hover,
.table td .btn-warning:focus { background: #e89008 !important; border-color: #c96b05 !important; }
.table td .btn-danger:hover,
.table td .btn-danger:focus { background: #c82333 !important; border-color: #a91d2a !important; }
.table td .btn-success:hover,
.table td .btn-success:focus { background: #158b3d !important; border-color: #126f33 !important; }
.table td .btn-info:hover,
.table td .btn-info:focus { background: #128c9e !important; border-color: #0c7483 !important; }
.table td .btn-secondary:hover,
.table td .btn-secondary:focus { background: #566579 !important; border-color: #3f4b5b !important; }
.table td .btn-default {
  background: #64748b !important;
  border-color: #475569 !important;
  color: #fff !important;
}
.table td .btn-default:hover,
.table td .btn-default:focus {
  background: #566579 !important;
  border-color: #3f4b5b !important;
  color: #fff !important;
}
#example1 td:nth-child(5) .btn-success {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #fff !important;
}
#example1 td:nth-child(5) .btn-danger {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
.dataTables_wrapper { overflow-x: auto; padding: .15rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #fff;
  border: 1px solid #94a3b8;
  border-radius: 7px;
  margin: .25rem;
  min-height: 2.25rem;
  padding: .25rem .55rem;
}
.dataTables_wrapper .page-link,
.dataTables_wrapper .paginate_button {
  border-radius: 6px !important;
  margin: 0 .1rem;
}
.dataTables_wrapper .page-item.active .page-link,
.dataTables_wrapper .paginate_button.current {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

.design-status-badge,
.storage-status-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-block;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.35;
  min-width: 3.25rem;
  padding: .32rem .62rem;
  text-align: center;
  white-space: nowrap;
}
.design-status-active,
.design-status-yes,
.storage-status-yes {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}
.design-status-inactive {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.design-status-no,
.storage-status-no {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}
.table .badge-success,
.table .badge-danger {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .76rem;
  min-width: 3.25rem;
  padding: .32rem .62rem;
}
.table .badge-success { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
.table .badge-danger { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }

.badge, .text-success, .text-danger { font-weight: 700; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--focus-ring) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Authentication pages retain their existing handlers and use the shared blue system. */
.login-page,
.register-page {
  align-items: center;
  background: url('/images/login-background.svg') center center / cover no-repeat !important;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 1.5rem;
  position: relative;
}
.login-page::before,
.login-page::after {
  display: none;
}
.login-box {
  margin: 0 !important;
  max-width: 100%;
  position: relative;
  width: 26rem;
  z-index: 1;
}
.login-logo {
  color: #fff;
  font-size: 1.55rem;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgb(15 23 42 / 28%);
}
.login-logo b { font-weight: 700; }
.login-box .card {
  border: 2px solid #93c5fd;
  border-radius: var(--radius-lg);
  box-shadow: 0 1.25rem 3.5rem rgb(15 23 42 / 30%);
  overflow: hidden;
}
.login-card-body { background: rgb(255 255 255 / 98%); padding: 2rem; }
.login-box-msg { color: var(--color-text-secondary); font-weight: 500; line-height: 1.9; padding: 0 0 1.25rem; }
.login-brand { display: flex; justify-content: center; margin: -1.05rem auto .55rem; }
.login-brand img { display: block; height: auto; max-height: 9.4rem; max-width: 13.25rem; object-fit: contain; }
.login-card-body .input-group-text { background: #eff6ff; border: 1px solid var(--color-border-default); border-right: 0; color: var(--color-primary-active); }
.login-card-body .input-group .form-control { border-left: 0 !important; }
.login-card-body .input-group:focus-within .input-group-text { border-color: var(--color-border-active); color: var(--color-primary); }
.login-card-body .btn-block { margin-top: .5rem; min-height: 2.8rem; }
.login-captcha-label { color: var(--color-text-primary); font-size: .9rem; font-weight: 700; margin: .35rem 0 .5rem; }
.login-card-body .alert { border: 1px solid var(--color-danger); border-radius: var(--radius-sm); }
.login-card-body a { font-weight: 600; }

@media (max-width: 767.98px) {
  .content-header { padding: 1rem 0 .5rem; }
  .content-header h1 { font-size: 1.35rem; }
  .card-header { align-items: flex-start; flex-wrap: wrap; gap: .65rem; }
  .card-header > .float-left,
  .card-header > .card-tools { margin-right: 0; }
  .card-body { padding: .85rem; }
  .btn-group { flex-wrap: wrap; gap: .25rem; }
  .table { min-width: 46rem; }
  .table .design-column-actions .btn-group,
  .table .design-column-actions .design-table-actions { flex-wrap: wrap !important; }
  .main-footer { font-size: .8rem; }
  .login-page { padding: 1rem; }
  .login-card-body { padding: 1.35rem; }
}