/*
  Dynamic Delta Technologies — White + Purple + Green Theme (V2)
  ------------------------------------------------------------
  Designed for PHPNuxBill (AdminLTE).
  Changes in V2:
  - Dark purple header/logo area
  - Very light purple app background (instead of white/gray)
  - Keeps cards/tables white for readability
  Load AFTER core CSS.
*/

:root {
  --dd-bg: #f4f1fa;          /* light purple app background */
  --dd-surface: #ffffff;     /* cards */
  --dd-surface-2: #fbfbff;
  --dd-border: #e6e8f2;
  --dd-text: #12131a;
  --dd-text-dim: #5c6173;

  --dd-purple: #7c3aed;      /* main purple */
  --dd-purple-2: #a855f7;    /* bright accent */
  --dd-green: #22c55e;       /* accent green */
  --dd-green-2: #16a34a;

  --dd-header-1: #2b0f4a;    /* dark header purple */
  --dd-header-2: #3b1566;

  --dd-radius: 18px;
  --dd-radius-sm: 14px;
}

/* ============= Base ============= */
html, body { height: 100%; }

body {
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(168, 85, 247, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(34, 197, 94, 0.10), transparent 55%),
    var(--dd-bg);
  color: var(--dd-text);
}

a { color: var(--dd-purple); transition: color 160ms ease; }
a:hover, a:focus { color: var(--dd-purple-2); }

/* Smooth interactions */
.btn,
.form-control,
.sidebar-menu > li > a,
.navbar a,
.box,
.panel,
.table > tbody > tr,
.dropdown-menu > li > a,
.nav-tabs > li > a,
.nav-pills > li > a {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Make the main content area use the light purple background */
.content-wrapper,
.right-side,
.wrapper {
  background: transparent !important;
}

/* ============= Header (Dark Purple) ============= */
.main-header .navbar,
.main-header .logo {
  background: linear-gradient(135deg, var(--dd-header-1), var(--dd-header-2)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.main-header .logo {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle,
.main-header .logo,
.main-header .logo:hover,
.main-header .logo:focus {
  color: rgba(255, 255, 255, 0.92) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

.main-header .navbar .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Header dropdowns */
.navbar-nav > .user-menu > .dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--dd-border);
  box-shadow: 0 18px 46px rgba(17, 24, 39, 0.18);
}

/* If your header search/input exists, keep it readable on dark header */
.main-header .navbar .form-control,
.main-header .navbar input[type="text"],
.main-header .navbar input[type="search"] {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.main-header .navbar .form-control::placeholder,
.main-header .navbar input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
}
.main-header .navbar .form-control:focus,
.main-header .navbar input:focus {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
  border-color: rgba(168, 85, 247, 0.40) !important;
}

/* Brand (optional if you use it in templates) */
.ddtech-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ddtech-brand img {
  height: 34px;
  width: auto;
  border-radius: 10px;
}
.ddtech-brand .ddtech-name {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.92);
}

/* ============= Sidebar (Purple) ============= */
.main-sidebar,
.left-side {
  background: linear-gradient(180deg, rgba(34, 15, 64, 0.98), rgba(20, 10, 40, 0.98)) !important;
  border-right: 1px solid rgba(48, 28, 80, 0.70);
}

.sidebar-menu > li { margin: 4px 10px; }
.sidebar-menu > li > a {
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.78) !important;
  position: relative;
  overflow: hidden;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .ion {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Active + hover glow with purple + green accent strip */
.sidebar-menu > li.active > a::before,
.sidebar-menu > li:hover > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background: linear-gradient(180deg, var(--dd-purple-2), var(--dd-green));
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  opacity: 0.95;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.22), rgba(34, 197, 94, 0.06)) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.sidebar-menu > li:hover > a > .fa,
.sidebar-menu > li:hover > a > .ion,
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .ion {
  color: rgba(255,255,255,0.95) !important;
}

/* Treeview children */
.treeview-menu { background: transparent !important; }
.treeview-menu > li > a {
  color: rgba(255, 255, 255, 0.74) !important;
  border-radius: 12px;
  margin: 2px 0 2px 8px;
}
.treeview-menu > li.active > a,
.treeview-menu > li > a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ============= Cards / Panels / Modals ============= */
.box,
.panel,
.info-box,
.small-box,
.callout,
.modal-content {
  background: var(--dd-surface) !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border) !important;
  border-radius: var(--dd-radius) !important;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
}
.box:hover,
.panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(17, 24, 39, 0.12);
}

.box-header,
.panel-heading,
.modal-header {
  border-bottom: 1px solid var(--dd-border) !important;
  border-top-left-radius: var(--dd-radius);
  border-top-right-radius: var(--dd-radius);
}
.box-footer,
.panel-footer,
.modal-footer {
  border-top: 1px solid var(--dd-border) !important;
  border-bottom-left-radius: var(--dd-radius);
  border-bottom-right-radius: var(--dd-radius);
}

/* Page headers */
.content-header > h1,
.page-header,
h1, h2 {
  color: #3b1566;
}

/* ============= Inputs ============= */
.form-control {
  border-radius: var(--dd-radius-sm) !important;
  border: 1px solid #dfe3f1 !important;
  background: #ffffff !important;
  color: var(--dd-text) !important;
}
.form-control:focus {
  border-color: rgba(124, 58, 237, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
}
.form-control::placeholder { color: rgba(92, 97, 115, 0.70) !important; }
input, textarea { caret-color: var(--dd-text) !important; }

/* Prevent Chrome/Edge autofill from whitening weirdly */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--dd-text) !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* ============= Buttons ============= */
.btn { border-radius: var(--dd-radius-sm) !important; }

.btn-primary,
.label-primary,
.bg-primary {
  background: linear-gradient(135deg, var(--dd-purple), var(--dd-purple-2)) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
}

.btn-success,
.label-success,
.bg-success {
  background: linear-gradient(135deg, var(--dd-green), var(--dd-green-2)) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  filter: brightness(1.03);
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.14);
}

/* ============= Tabs as rounded "category pills" ============= */
.nav-tabs {
  border-bottom: 0 !important;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid var(--dd-border);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
}
.nav-tabs > li { margin: 0 !important; }
.nav-tabs > li > a {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  color: var(--dd-text-dim) !important;
}
.nav-tabs > li > a:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--dd-text) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(34, 197, 94, 0.10)) !important;
  color: var(--dd-text) !important;
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.12);
}

/* ============= Tables ============= */
.table { background: var(--dd-surface); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--dd-border) !important;
  color: var(--dd-text);
}
.table > tbody > tr > td {
  border-top: 1px solid rgba(230, 232, 242, 0.70) !important;
}
.table > tbody > tr:hover {
  background: rgba(124, 58, 237, 0.04) !important;
}

/* ============= Login pages (admin + customer public) ============= */
.ddtech-login-bg {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(244, 241, 250, 0.90), rgba(244, 241, 250, 0.90)),
    url("../images/ddtech-login-smoke.png") center/cover no-repeat;
}
.ddtech-login-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.ddtech-login-hero img {
  height: 52px;
  width: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
}
.ddtech-login-hero .name {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--dd-text);
}

/* Modern login boxes */
.login-box,
.login-box-body,
.container .panel {
  border-radius: 20px !important;
}