/* =====================================================================
 * Glass Theme — baked-in frosted-glass (glassmorphism) look for Perfex CRM
 * Applies to the admin area, the client portal and the auth/login screens.
 * Apple-style: soft gradient canvas + translucent, blurred "glass" surfaces.
 *
 * All visual knobs live in the :root custom properties below — edit those
 * to retune the whole CRM. Adapted from the Glass Theme Studio module so the
 * look ships as a core default (no module, always on).
 * ===================================================================== */

:root {
    --gt-accent:      #0A84FF;            /* Apple system blue            */
    --gt-accent-2:    #5E5CE6;            /* indigo (secondary accent)    */
    --gt-bg-from:     #E8EEF9;            /* gradient start (pale blue)   */
    --gt-bg-to:       #F3E9F2;            /* gradient end (pale lavender) */
    --gt-glass-rgb:   255, 255, 255;      /* surface base (light tone)    */
    --gt-opacity:     0.62;               /* surface translucency 0–1     */
    --gt-blur:        22px;               /* backdrop blur                */
    --gt-sat:         180%;               /* backdrop vibrancy            */
    --gt-radius:      16px;               /* corner radius                */
    --gt-border:      0.35;               /* edge sheen alpha 0–1         */
    --gt-text:        #1d1d1f;            /* primary text                 */
    --gt-muted:       rgba(60, 60, 67, 0.62);
    --gt-shadow:      0 10px 34px rgba(17, 24, 59, 0.12);
}

/* The reusable frosted surface is expressed via a couple of helper rules
   that every glass selector group reuses (declared inline below). Browsers
   without backdrop-filter still get the translucent background as a fallback. */

/* ---------------------------------------------------------------------
 * 1. GLOBAL CANVAS (admin + portal)
 * ------------------------------------------------------------------- */
html,
body {
    background: linear-gradient(135deg, var(--gt-bg-from), var(--gt-bg-to)) fixed !important;
    color: var(--gt-text);
}

#wrapper,
.content,
#main-content,
.customers #wrapper {
    background: transparent !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------
 * 2. ADMIN AREA
 * ------------------------------------------------------------------- */

/* Top bar */
.navbar-default {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
}

/* Sidebar */
#sidebar,
.sidebar {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
    border-radius: var(--gt-radius) !important;
}

#sidebar .slimScrollDiv,
#side-menu,
.sidebar .menu {
    background: transparent !important;
}

#side-menu > li > a,
#side-menu ul li a {
    color: var(--gt-text) !important;
}

#side-menu > li.active > a,
#side-menu > li > a:hover,
#side-menu li.active > a {
    background: rgba(var(--gt-glass-rgb), calc(var(--gt-opacity) * 0.5)) !important;
    color: var(--gt-accent) !important;
}

/* Panels / cards / widgets */
.panel_s,
.panel.panel-default,
.widget,
.tile {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
    border-radius: var(--gt-radius) !important;
}

.panel_s .panel-body,
.panel-default .panel-body,
.panel_s .panel-heading,
.panel-default .panel-heading {
    background: transparent !important;
    color: var(--gt-text);
}

/* Tables sit transparently inside the glass cards */
table.table,
.table > tbody > tr,
.table > thead > tr {
    background: transparent !important;
    color: var(--gt-text);
}

.table > tbody > tr:hover > td {
    background: rgba(var(--gt-glass-rgb), calc(var(--gt-opacity) * 0.4)) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: rgba(255, 255, 255, calc(var(--gt-border) * 0.7)) !important;
}

/* Modals + dropdowns */
.modal-content,
.dropdown-menu {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
    border-radius: var(--gt-radius) !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, var(--gt-border)) !important;
}

.dropdown-menu > li > a {
    color: var(--gt-text) !important;
}

/* Inputs */
.form-control,
.select2-selection,
.dt-bootstrap input {
    background: rgba(var(--gt-glass-rgb), calc(var(--gt-opacity) * 0.55)) !important;
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    color: var(--gt-text) !important;
    border-radius: var(--gt-radius) !important;
}

/* Buttons + accent */
.btn {
    border-radius: var(--gt-radius) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-info,
.btn-primary {
    background-color: var(--gt-accent) !important;
    border-color: var(--gt-accent) !important;
}

.btn-info:hover,
.btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Accent links / text everywhere */
a,
a:hover,
a:focus {
    color: var(--gt-accent);
}

.text-info,
.text-primary {
    color: var(--gt-accent) !important;
}

.well {
    border-radius: var(--gt-radius) !important;
}

/* ---------------------------------------------------------------------
 * 3. CLIENT PORTAL (perfex customer theme)
 * ------------------------------------------------------------------- */
.customers .navbar,
.customers .navbar-default {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
}

.customers .panel,
.customers .panel-default,
.customers .card,
.customers .well {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
    border-radius: var(--gt-radius) !important;
}

.customers .panel-body,
.customers .panel-heading {
    background: transparent !important;
    color: var(--gt-text);
}

/* ---------------------------------------------------------------------
 * 4. ADMIN AUTH / LOGIN SCREENS
 *    (markup uses Tailwind utilities — override the white card to glass)
 * ------------------------------------------------------------------- */
body.login_admin,
body.login,
body.forgot_password,
body.setup-two-factor {
    background: linear-gradient(135deg, var(--gt-bg-from), var(--gt-bg-to)) fixed !important;
}

body.login_admin .authentication-form-wrapper [class*="tw-bg-white"],
body.login .authentication-form-wrapper [class*="tw-bg-white"],
.authentication-form-wrapper > div[class*="tw-bg-white"] {
    background: rgba(var(--gt-glass-rgb), var(--gt-opacity)) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    backdrop-filter: blur(var(--gt-blur)) saturate(var(--gt-sat));
    border: 1px solid rgba(255, 255, 255, var(--gt-border)) !important;
    box-shadow: var(--gt-shadow) !important;
    border-radius: var(--gt-radius) !important;
}

/* ---------------------------------------------------------------------
 * 5. ACCESSIBILITY — respect reduced motion
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .panel_s,
    * {
        transition: none !important;
        animation: none !important;
    }
}