/* SAMCRM Custom Theme - Modern & Colorful */

/* Navbar - Deep Navy with Gold accent */
.navbar {
    background: linear-gradient(135deg, #1B2A4A 0%, #2E3F5C 100%) !important;
    border-bottom: 3px solid #D4A843 !important;
    box-shadow: 0 2px 16px rgba(27, 42, 74, 0.3) !important;
}

.navbar .navbar-brand b {
    font-size: 20px !important;
}

.navbar .nav-link, .navbar .dropdown-toggle, .navbar .notifications-icon {
    color: #E8ECF4 !important;
}

.navbar .nav-link:hover {
    color: #D4A843 !important;
}

/* Sidebar - Modern */
.desk-sidebar {
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%) !important;
    border-right: 1px solid #E2E8F0 !important;
}

.desk-sidebar .sidebar-menu a.active {
    background: linear-gradient(135deg, #2E5BBA 0%, #1B2A4A 100%) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.desk-sidebar .sidebar-menu a {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    padding: 8px 12px !important;
}

.desk-sidebar .sidebar-menu a:hover {
    background: #E0E7FF !important;
    transform: translateX(4px) !important;
}

/* Page header */
.page-head {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* Cards & containers (non-login only) */
body:not([data-path="login"]) .frappe-card,
body:not([data-path="login"]) .widget {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid #E5E7EB !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

body:not([data-path="login"]) .frappe-card:hover,
body:not([data-path="login"]) .widget:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Buttons (non-login) */
body:not([data-path="login"]) .btn-primary,
body:not([data-path="login"]) .btn-primary-dark {
    background: linear-gradient(135deg, #2E5BBA 0%, #1B2A4A 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(46, 91, 186, 0.3) !important;
    transition: all 0.2s ease !important;
}

body:not([data-path="login"]) .btn-primary:hover,
body:not([data-path="login"]) .btn-primary-dark:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(46, 91, 186, 0.4) !important;
}

/* Status badges */
.indicator-pill {
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* Links (non-login) */
body:not([data-path="login"]) a {
    color: #2E5BBA !important;
}

body:not([data-path="login"]) a:hover {
    color: #D4A843 !important;
}

/* Form controls (non-login) */
body:not([data-path="login"]) .form-control,
body:not([data-path="login"]) .frappe-control input {
    border-radius: 8px !important;
    border: 1.5px solid #D1D5DB !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

body:not([data-path="login"]) .form-control:focus,
body:not([data-path="login"]) .frappe-control input:focus {
    border-color: #2E5BBA !important;
    box-shadow: 0 0 0 3px rgba(46, 91, 186, 0.15) !important;
}

/* Workspace shortcuts */
.shortcut-widget-box {
    background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%) !important;
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
    transition: all 0.2s !important;
}

.shortcut-widget-box:hover {
    border-color: #2E5BBA !important;
    box-shadow: 0 4px 12px rgba(46, 91, 186, 0.1) !important;
}

/* Headers (non-login) */
body:not([data-path="login"]) h1,
body:not([data-path="login"]) h2,
body:not([data-path="login"]) h3,
body:not([data-path="login"]) h4,
body:not([data-path="login"]) h5,
body:not([data-path="login"]) h6 {
    color: #1B2A4A !important;
}

/* Table improvements */
.frappe-list .list-row:hover {
    background: #F0F5FF !important;
}

.frappe-list .list-row-head {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%) !important;
    border-bottom: 2px solid #2E5BBA !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2E5BBA, #1B2A4A);
    border-radius: 4px;
}

/* Global body (non-login) */
body:not([data-path="login"]) {
    background: #F8FAFC !important;
}

/* Awesomebar */
.search-bar .awesomebar {
    border-radius: 20px !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

.search-bar .awesomebar::placeholder {
    color: rgba(255,255,255,0.7) !important;
}

/* Notifications bell */
.notifications-icon {
    color: #E8ECF4 !important;
}

/* User avatar in navbar */
.avatar-frame {
    border: 2px solid #D4A843 !important;
}

/* ====================================================================
   SAMCRM SPACE-AGE LOGIN PAGE
   Targets body[data-path="login"] for login-only styles
   ==================================================================== */

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 195, 255, 0.2), 0 0 60px rgba(0, 195, 255, 0.08), 0 25px 50px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 35px rgba(0, 195, 255, 0.35), 0 0 80px rgba(0, 195, 255, 0.12), 0 25px 50px rgba(0, 0, 0, 0.5); }
}

@keyframes border-glow {
    0%, 100% { border-color: rgba(0, 195, 255, 0.3); }
    50% { border-color: rgba(212, 168, 67, 0.6); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes scan-line {
    0% { top: -50%; }
    100% { top: 150%; }
}

@keyframes ring-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.05; }
}

/* Deep space background */
body[data-path="login"] {
    background: #000000 !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow-x: hidden !important;
}

body[data-path="login"]::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(0, 60, 120, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(20, 0, 80, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0, 30, 60, 0.15) 0%, transparent 70%),
        radial-gradient(2px 2px at 10% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 25% 35%, rgba(0,195,255,0.6), transparent),
        radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 55% 80%, rgba(212,168,67,0.5), transparent),
        radial-gradient(2px 2px at 70% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(0,195,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 30% 90%, rgba(0,195,255,0.4), transparent),
        radial-gradient(1px 1px at 60% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(212,168,67,0.4), transparent),
        radial-gradient(2px 2px at 5% 45%, rgba(0,195,255,0.5), transparent),
        radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 75% 85%, rgba(0,195,255,0.3), transparent),
        radial-gradient(1px 1px at 95% 40%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 35% 70%, rgba(212,168,67,0.3), transparent),
        radial-gradient(2px 2px at 50% 5%, rgba(0,195,255,0.5), transparent),
        radial-gradient(1px 1px at 65% 95%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 20% 50%, rgba(0,195,255,0.3), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(212,168,67,0.4), transparent);
    z-index: 0;
    pointer-events: none;
    animation: twinkle 5s ease-in-out infinite;
}

/* Decorative orbit ring */
body[data-path="login"]::after {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 700px; height: 700px;
    border: 1px solid rgba(0, 195, 255, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ring-pulse 8s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* Transparent navbar on login */
body[data-path="login"] .navbar {
    background: rgba(0, 10, 25, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0, 195, 255, 0.15) !important;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Main content area */
body[data-path="login"] .container,
body[data-path="login"] .web-footer {
    position: relative;
    z-index: 1;
}

/* Section wrapper */
body[data-path="login"] .for-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6vh !important;
}

/* Card header (logo + title) */
body[data-path="login"] .page-card-head {
    background: linear-gradient(180deg, rgba(0, 20, 50, 0.95) 0%, rgba(5, 15, 35, 0.9) 100%) !important;
    padding: 40px 32px 28px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0, 195, 255, 0.15) !important;
    position: relative !important;
}

body[data-path="login"] .page-card-head::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 10%; width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.5), rgba(212, 168, 67, 0.5), transparent);
}

/* Logo */
body[data-path="login"] .page-card-head .app-logo {
    filter: drop-shadow(0 0 20px rgba(0, 195, 255, 0.6)) brightness(1.3) !important;
    animation: float 5s ease-in-out infinite !important;
    max-height: 56px !important;
}

/* Title */
body[data-path="login"] .page-card-head h4 {
    color: #d0e8ff !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 25px rgba(0, 195, 255, 0.4) !important;
    margin-top: 14px !important;
}

/* Glass card */
body[data-path="login"] .login-content.page-card {
    background: rgba(5, 15, 35, 0.8) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(0, 195, 255, 0.25) !important;
    border-radius: 20px !important;
    animation: pulse-glow 5s ease-in-out infinite, border-glow 7s ease-in-out infinite !important;
    overflow: hidden !important;
    max-width: 420px !important;
    width: 100% !important;
    position: relative !important;
}

/* Scan line effect */
body[data-path="login"] .login-content.page-card::before {
    content: '';
    position: absolute;
    top: -50%; left: 0;
    width: 100%; height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(0, 195, 255, 0.025), transparent);
    animation: scan-line 6s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* Card body */
body[data-path="login"] .page-card-body {
    padding: 28px 32px !important;
}

/* Input fields */
body[data-path="login"] .form-control {
    background: rgba(0, 12, 30, 0.65) !important;
    border: 1px solid rgba(0, 195, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #d0e8ff !important;
    padding: 13px 16px 13px 42px !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

body[data-path="login"] .form-control::placeholder {
    color: rgba(140, 180, 220, 0.35) !important;
    letter-spacing: 1px !important;
}

body[data-path="login"] .form-control:focus {
    border-color: rgba(0, 195, 255, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 195, 255, 0.15), inset 0 0 10px rgba(0, 195, 255, 0.04) !important;
    background: rgba(0, 18, 40, 0.8) !important;
    outline: none !important;
}

/* Field icons */
body[data-path="login"] .field-icon {
    color: rgba(0, 195, 255, 0.5) !important;
    filter: drop-shadow(0 0 3px rgba(0, 195, 255, 0.3)) !important;
}

/* Show password toggle */
body[data-path="login"] .toggle-password {
    color: rgba(0, 195, 255, 0.5) !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    transition: color 0.3s !important;
}

body[data-path="login"] .toggle-password:hover {
    color: rgba(0, 195, 255, 0.9) !important;
    text-shadow: 0 0 6px rgba(0, 195, 255, 0.4) !important;
}

/* Forgot password */
body[data-path="login"] .forgot-password-message a {
    color: rgba(212, 168, 67, 0.6) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}

body[data-path="login"] .forgot-password-message a:hover {
    color: rgba(212, 168, 67, 1) !important;
    text-shadow: 0 0 8px rgba(212, 168, 67, 0.3) !important;
}

/* LOGIN BUTTON */
body[data-path="login"] .btn-login,
body[data-path="login"] .page-card-actions .btn-primary {
    background: linear-gradient(135deg, #00b8f0 0%, #0066bb 50%, #003d80 100%) !important;
    border: 1px solid rgba(0, 195, 255, 0.35) !important;
    border-radius: 12px !important;
    padding: 13px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    box-shadow:
        0 0 20px rgba(0, 195, 255, 0.25),
        0 4px 20px rgba(0, 50, 120, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

body[data-path="login"] .btn-login::after {
    content: '';
    position: absolute;
    top: 0; left: -200%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .page-card-actions .btn-primary:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        0 0 35px rgba(0, 195, 255, 0.4),
        0 8px 30px rgba(0, 50, 120, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(0, 195, 255, 0.7) !important;
}

body[data-path="login"] .btn-login:active {
    transform: translateY(0) scale(0.98) !important;
}

/* "or" divider */
body[data-path="login"] .login-divider,
body[data-path="login"] .social-logins .text-muted {
    color: rgba(140, 180, 220, 0.25) !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

/* Email link / social buttons */
body[data-path="login"] .btn-login-option {
    background: rgba(0, 12, 30, 0.5) !important;
    border: 1px solid rgba(0, 195, 255, 0.15) !important;
    border-radius: 12px !important;
    color: rgba(140, 180, 220, 0.7) !important;
    padding: 11px 18px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

body[data-path="login"] .btn-login-option:hover {
    border-color: rgba(0, 195, 255, 0.4) !important;
    background: rgba(0, 25, 55, 0.6) !important;
    color: #d0e8ff !important;
    box-shadow: 0 0 12px rgba(0, 195, 255, 0.08) !important;
}

/* Actions area */
body[data-path="login"] .page-card-actions {
    padding: 0 32px 28px !important;
}

/* Signup link */
body[data-path="login"] .sign-up-message {
    color: rgba(140, 180, 220, 0.4) !important;
    font-size: 12px !important;
}

body[data-path="login"] .sign-up-message a {
    color: rgba(0, 195, 255, 0.7) !important;
}

/* Footer */
body[data-path="login"] .web-footer,
body[data-path="login"] footer {
    background: transparent !important;
    border-top: 1px solid rgba(0, 195, 255, 0.08) !important;
}

body[data-path="login"] footer,
body[data-path="login"] footer * {
    color: rgba(140, 180, 220, 0.2) !important;
}

body[data-path="login"] footer a {
    color: rgba(0, 195, 255, 0.3) !important;
}

/* Form group spacing */
body[data-path="login"] .form-group {
    margin-bottom: 18px !important;
}

/* Responsive */
@media (max-width: 768px) {
    body[data-path="login"] .login-content.page-card {
        margin: 16px !important;
        border-radius: 16px !important;
    }
    body[data-path="login"] .page-card-head {
        padding: 28px 20px 22px !important;
    }
    body[data-path="login"] .page-card-body {
        padding: 22px 20px !important;
    }
    body[data-path="login"] .page-card-actions {
        padding: 0 20px 22px !important;
    }
}