/* ==========================================================================
   GROWUPHOST "DEPTH" LAYER — 3D, hosting-platform feel for admin, client, auth and home.
   Solid colours only (no gradients): depth comes from layered shadows, highlight edges,
   raised/pressed states and gentle perspective. Loaded LAST everywhere; remove the <link>
   to switch it off. Motion respects prefers-reduced-motion.
   ========================================================================== */

:root, :root[data-theme="light"] {
  --d-ambient: 15, 35, 80;             /* shadow tint (navy) */
  --d-edge: rgba(255, 255, 255, .9);   /* top highlight edge */
  --d-e1: 0 1px 0 var(--d-edge) inset, 0 1px 2px rgba(var(--d-ambient), .06), 0 2px 6px -2px rgba(var(--d-ambient), .08);
  --d-e2: 0 1px 0 var(--d-edge) inset, 0 1px 2px rgba(var(--d-ambient), .05), 0 6px 16px -6px rgba(var(--d-ambient), .14), 0 2px 4px -2px rgba(var(--d-ambient), .06);
  --d-e3: 0 1px 0 var(--d-edge) inset, 0 2px 4px rgba(var(--d-ambient), .06), 0 16px 32px -12px rgba(var(--d-ambient), .22);
  --d-e4: 0 2px 6px rgba(var(--d-ambient), .08), 0 28px 56px -18px rgba(var(--d-ambient), .34);
  --d-press: inset 0 2px 4px rgba(var(--d-ambient), .10);
  --d-grid: rgba(26, 86, 219, .07);
  --d-lift: translateY(-3px);
}
:root[data-theme="dark"] {
  --d-ambient: 0, 0, 0;
  --d-edge: rgba(255, 255, 255, .06);
  --d-e1: 0 1px 0 var(--d-edge) inset, 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --d-e2: 0 1px 0 var(--d-edge) inset, 0 2px 4px rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .6);
  --d-e3: 0 1px 0 var(--d-edge) inset, 0 4px 8px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .75);
  --d-e4: 0 4px 10px rgba(0, 0, 0, .45), 0 30px 60px -20px rgba(0, 0, 0, .85);
  --d-press: inset 0 2px 5px rgba(0, 0, 0, .45);
  --d-grid: rgba(96, 165, 250, .06);
}

/* ---------- Page canvas: faint server-grid dots (a hosting "rack" texture) ---------- */
body {
  background-image: radial-gradient(var(--d-grid) 1px, transparent 1.2px) !important;
  background-size: 22px 22px !important;
  background-attachment: fixed;
}
body.auth-body, .home { background-image: none !important; }

/* ---------- Raised surfaces ---------- */
:root .data-card, :root .chart-card, :root .form-card, :root .filter-bar-card,
:root .client-card, :root .srv-card, :root .news-card, :root .dash-att-item,
:root .plan-card, :root .invoice-doc, :root .checkout-summary, :root .checkout-main {
  box-shadow: var(--d-e2) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
:root .data-card:hover, :root .chart-card:hover, :root .client-card:hover, :root .srv-card:hover { box-shadow: var(--d-e3) !important; }
:root .news-card:hover, :root .dash-att-item:hover, :root .srv-card:hover { transform: var(--d-lift); }
/* Panel headers read as a bevelled lid on the card */
:root .card-head, :root .client-card-header {
  box-shadow: 0 1px 0 var(--d-edge) inset;
}

/* ---------- Stat tiles: raised blocks with a recessed 3D icon ---------- */
:root .kpi-card, :root .client-kpi-card, :root .srv-stat {
  box-shadow: var(--d-e2) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
:root .kpi-card:hover, :root .client-kpi-card:hover, :root .srv-stat:hover { transform: var(--d-lift) !important; box-shadow: var(--d-e3) !important; }
/* admin WHMCS tiles: darker icon block looks cut into the tile */
:root .kpi-grid > .kpi-card .kpi-icon-pill.kpi-icon-pill { box-shadow: inset -6px 0 10px -6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15) !important; }
:root .kpi-grid > .kpi-card, :root .srv-stat { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.12) inset, var(--d-e2) !important; }
/* client tiles: icon chips get a soft 3D bubble */
:root .client-kpi-card .kpi-icon, :root .dash-att-ico, :root .notif-ico, :root .upi-steps li span {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 rgba(var(--d-ambient), .08) inset, 0 3px 8px -3px rgba(var(--d-ambient), .25) !important;
}

/* ---------- 3D buttons: solid face + darker bottom edge, press-in on click ---------- */
:root .btn {
  transition: transform .08s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease !important;
  will-change: transform;
}
:root .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 0 #123fa8, 0 6px 12px -6px rgba(26, 86, 219, .6) !important; }
:root .btn-success { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 0 #2f7d32, 0 6px 12px -6px rgba(22, 163, 74, .55) !important; }
:root .btn-danger  { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 0 #a12b28, 0 6px 12px -6px rgba(220, 38, 38, .5) !important; }
:root .btn-cpanel  { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 0 #9a3412, 0 6px 12px -6px rgba(234, 88, 12, .5) !important; }
:root .btn-whatsapp, :root .header-btn-whatsapp { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 3px 0 #166534 !important; }
:root .btn-secondary, :root .btn-outline, :root .btn-light, :root .btn-white, :root .btn-ghost-danger {
  box-shadow: 0 1px 0 var(--d-edge) inset, 0 2px 0 rgba(var(--d-ambient), .12), 0 3px 8px -4px rgba(var(--d-ambient), .2) !important;
}
:root .btn:not(:disabled):hover { transform: translateY(-1px); }
:root .btn:not(:disabled):active { transform: translateY(2px); box-shadow: var(--d-press) !important; }
:root .btn:disabled { box-shadow: none !important; }

/* ---------- Inputs: slightly recessed; focus lifts them ---------- */
:root .form-control, :root .filter-select, :root .domain-input-wrapper {
  box-shadow: inset 0 2px 3px rgba(var(--d-ambient), .07) !important;
  transition: box-shadow .15s ease, border-color .15s ease !important;
}
:root .form-control:focus, :root .filter-select:focus {
  box-shadow: inset 0 1px 2px rgba(var(--d-ambient), .05), 0 0 0 3px var(--brand-ring), 0 6px 14px -8px rgba(26, 86, 219, .45) !important;
}

/* ---------- Status labels & pills: tiny embossed chips ---------- */
:root .status-badge, :root .badge, :root .srv-pill, :root .tld-pill, :root .nav-badge, :root .notif-count, :root .dash-count {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 1px 2px rgba(var(--d-ambient), .18) !important;
}

/* ---------- Sidebars float above the page ---------- */
:root .admin-sidebar { box-shadow: 1px 0 0 var(--line), 8px 0 24px -16px rgba(var(--d-ambient), .25) !important; }
:root .client-sidebar { box-shadow: 10px 0 30px -18px rgba(0, 0, 0, .55) !important; }
:root .admin-sidebar .nav-item.active a, :root .client-sidebar .nav-item.active a {
  box-shadow: inset 3px 0 0 var(--brand), 0 1px 0 var(--d-edge) inset, 0 4px 10px -6px rgba(var(--d-ambient), .25) !important;
}
:root .client-sidebar .nav-item.active a { box-shadow: inset 3px 0 0 #60a5fa, 0 6px 14px -8px rgba(0, 0, 0, .6) !important; }
:root .admin-topbar, :root .client-header, :root .public-header { box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(var(--d-ambient), .35) !important; }
:root .user-mini-card { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -12px rgba(0,0,0,.6) !important; }

/* ---------- Dropdowns, modals, toasts: deep elevation ---------- */
:root .header-menu, :root .topbar-menu, :root .notif-menu, :root .upi-reject[open] .upi-reject-form { box-shadow: var(--d-e4) !important; }
:root .modal-dialog, :root .modal-content { box-shadow: var(--d-e4) !important; }
:root .modal-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root .alert { box-shadow: var(--d-e1) !important; }

/* ---------- Tables: header bevel, rows lift a touch ---------- */
:root .data-table thead th, :root .client-table thead th { box-shadow: 0 1px 0 var(--d-edge) inset, 0 1px 0 var(--line); }
:root .data-table tbody tr, :root .client-table tbody tr { transition: box-shadow .15s ease; }
:root .data-table tbody tr:hover, :root .client-table tbody tr:hover { box-shadow: 0 4px 12px -8px rgba(var(--d-ambient), .25); position: relative; }

/* ---------- Hosting surfaces with gentle perspective ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root .plan-card { transform-style: preserve-3d; }
  :root .plan-card:hover { transform: perspective(1100px) rotateX(2deg) translateY(-6px) !important; box-shadow: var(--d-e4) !important; }
  :root .promo-slide, :root .promo-image-only { transition: transform .35s ease, box-shadow .35s ease; }
  :root .promo-slider:hover .promo-slide, :root .promo-slider:hover .promo-image-only { transform: perspective(1400px) rotateX(1.2deg); }
  :root .upi-qr, :root .upi-qr-img { transition: transform .3s ease, box-shadow .3s ease; }
  :root .upi-qr:hover, :root .upi-qr-img:hover { transform: perspective(800px) rotateY(-4deg) rotateX(3deg) scale(1.02); }
}
:root .promo-track { box-shadow: var(--d-e3); border-radius: 18px; }
:root .upi-qr, :root .upi-qr-img { box-shadow: 0 1px 0 #fff inset, 0 12px 26px -14px rgba(var(--d-ambient), .45) !important; }
:root .checkout-amount-hero { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -3px 0 rgba(0,0,0,.15) inset, var(--d-e3) !important; }
:root .upi-grid { box-shadow: inset 0 2px 6px rgba(var(--d-ambient), .06); }
:root .pay-tab.is-active, :root .group-tabs a.active { box-shadow: 0 1px 0 var(--d-edge) inset, 0 3px 8px -4px rgba(var(--d-ambient), .35) !important; }

/* ---------- Login / register: floating 3D card ---------- */
:root .auth-card, :root .auth-wrap > div, :root .auth-shell { box-shadow: var(--d-e4) !important; }
:root .auth-showcase { box-shadow: inset -1px 0 0 rgba(255,255,255,.08); }

/* ---------- Home page: raised hosting cards ---------- */
.home .plan, .home .quick-card, .home .feature { box-shadow: var(--d-e2); transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home .plan:hover { transform: perspective(1100px) rotateX(2deg) translateY(-6px); box-shadow: var(--d-e4); }
  .home .feature:hover, .home .quick-card:hover { transform: var(--d-lift); box-shadow: var(--d-e3); }
}

/* ---------- Touch & small screens: keep depth, drop hover motion ---------- */
@media (hover: none) {
  :root .btn:not(:disabled):hover, :root .kpi-card:hover, :root .client-kpi-card:hover, :root .srv-stat:hover,
  :root .news-card:hover, :root .dash-att-item:hover, :root .srv-card:hover { transform: none !important; }
}
@media (max-width: 640px) {
  body { background-size: 18px 18px !important; }
  :root .btn { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  :root * { transition: none !important; }
  :root .btn:not(:disabled):hover, :root .btn:not(:disabled):active { transform: none !important; }
}