/*
 * CodeLuma Development - Social Blue UI Layer
 * Presentation-only styling: no routes, forms, records, or scripts are changed.
 */
:root {
  --cl-blue: #1977f3;
  --cl-blue-deep: #0b5ac7;
  --cl-blue-ink: #102a43;
  --cl-sky: #eaf3ff;
  --cl-canvas: #f3f7fc;
  --cl-card: #ffffff;
  --cl-border: #d9e4f2;
  --cl-text: #1f2d3d;
  --cl-muted: #63778d;
  --cl-success: #168b5b;
  --cl-warning: #bb6a00;
  --cl-shadow: 0 10px 30px rgba(29, 78, 137, 0.10);
  --cl-radius: 15px;
}

html {
  background: var(--cl-canvas);
}

body {
  background:
    radial-gradient(circle at 94% 0%, rgba(53, 143, 255, 0.16), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0, var(--cl-canvas) 24rem);
  color: var(--cl-text);
  font-family: "Avenir Next", "Segoe UI Variable", "Trebuchet MS", sans-serif;
}

a {
  color: var(--cl-blue-deep);
}

a:hover {
  color: #063f92;
}

.sidebar,
.dashboard-sidebar,
.main-sidebar,
#sidebar,
aside[class*="sidebar"] {
  background:
    linear-gradient(180deg, #0e335d 0%, #0d4c98 52%, #1977f3 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 7px 0 28px rgba(10, 54, 110, 0.14);
  color: #f8fbff;
}

.sidebar a,
.dashboard-sidebar a,
.main-sidebar a,
#sidebar a,
aside[class*="sidebar"] a {
  color: rgba(248, 251, 255, 0.88) !important;
  border-radius: 10px;
  margin-left: 8px;
  margin-right: 8px;
}

.sidebar a:hover,
.sidebar a.active,
.dashboard-sidebar a:hover,
.dashboard-sidebar a.active,
.main-sidebar a:hover,
.main-sidebar a.active,
#sidebar a:hover,
#sidebar a.active,
aside[class*="sidebar"] a:hover,
aside[class*="sidebar"] a.active {
  background: rgba(255, 255, 255, 0.17) !important;
  color: #ffffff !important;
}

.sidebar .brand-text,
.dashboard-sidebar .brand-text,
.main-sidebar .brand-text,
#sidebar .brand-text,
aside[class*="sidebar"] .brand-text {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.topbar,
.top-bar,
.dashboard-topbar,
.site-header,
.navbar,
.main-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  box-shadow: 0 3px 16px rgba(18, 65, 115, 0.08);
  backdrop-filter: blur(14px);
}

.navbar a,
.site-header a,
.topbar a,
.top-bar a,
.dashboard-topbar a,
.main-header a {
  color: var(--cl-blue-ink);
}

.card,
.dashboard-card,
.stats-card,
.widget,
.panel,
.content-card,
.ticket-card,
.support-card,
.modal-content,
.dropdown-menu {
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow);
}

.card-header,
.panel-heading,
.widget-header,
.modal-header {
  background: linear-gradient(90deg, #fbfdff, #edf6ff);
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-blue-ink);
}

.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 10px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-blue,
button.btn-primary,
input[type="submit"].btn-primary {
  background: linear-gradient(135deg, #2385ff, #1264d4) !important;
  border-color: #1264d4 !important;
  box-shadow: 0 7px 16px rgba(25, 119, 243, 0.24);
  color: #ffffff !important;
}

.btn-secondary,
.btn-light {
  border-color: var(--cl-border);
  color: var(--cl-blue-deep);
}

input,
select,
textarea,
.form-control {
  background: #ffffff;
  border: 1px solid #cddced !important;
  border-radius: 10px !important;
  color: var(--cl-text);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--cl-blue) !important;
  box-shadow: 0 0 0 3px rgba(25, 119, 243, 0.16) !important;
  outline: 0;
}

.table,
table {
  background: #ffffff;
  border-color: var(--cl-border);
}

.table thead th,
table thead th {
  background: #edf6ff;
  border-bottom-color: var(--cl-border);
  color: #24496f;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.table tbody tr:hover,
table tbody tr:hover {
  background: #f5faff;
}

.badge,
.status-badge,
.label {
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.alert,
.notice,
.message {
  border-radius: 12px;
  border-color: var(--cl-border);
}

.auth-container,
.login-container,
.login-card,
.register-card {
  border-radius: 20px;
  box-shadow: 0 22px 56px rgba(12, 70, 132, 0.16);
}

.progress-bar,
.bg-primary {
  background: linear-gradient(90deg, #1977f3, #52a5ff) !important;
}

.footer,
.site-footer {
  border-top: 1px solid var(--cl-border);
  color: var(--cl-muted);
}

@media (max-width: 768px) {
  body {
    background: #f6f9fd;
  }

  .card,
  .dashboard-card,
  .stats-card,
  .widget,
  .panel,
  .content-card,
  .ticket-card,
  .support-card {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(29, 78, 137, 0.08);
  }

  .sidebar a,
  .dashboard-sidebar a,
  .main-sidebar a,
  #sidebar a,
  aside[class*="sidebar"] a {
    margin-left: 4px;
    margin-right: 4px;
  }
}