/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  Hubflow White-Label Theme — ERPNext Branding Override          ║
 * ║  Injected via app_include_css in hooks.py                       ║
 * ║  This file overrides ALL visual traces of ERPNext / Frappe      ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */

/* ─────────────────────────────────────────
   § 1. FONT IMPORTS
   ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────
   § 2. CSS CUSTOM PROPERTIES (Color Palette)
   Overrides Frappe's default --blue-* vars
   ───────────────────────────────────────── */
:root {
    /* ── Brand Colors ── */
    --hf-primary: #6366F1;
    --hf-primary-dark: #4F46E5;
    --hf-primary-darker: #4338CA;
    --hf-primary-light: #818CF8;
    --hf-primary-lighter: #A5B4FC;
    --hf-primary-subtle: #EEF2FF;

    --hf-accent: #8B5CF6;
    --hf-accent-dark: #7C3AED;

    --hf-success: #10B981;
    --hf-warning: #F59E0B;
    --hf-danger: #EF4444;
    --hf-info: #06B6D4;

    /* ── Sidebar ── */
    /* --hf-sidebar-bg: #ffffff;
    --hf-sidebar-bg-hover: #312E81; */
    /* --hf-sidebar-text: #3730A3; */
    /* --hf-sidebar-text-active: #FFFFFF; */
    /* --hf-sidebar-border: #3730A3; */

    /* ── Navbar ── */
    --hf-navbar-bg: #FFFFFF;
    --hf-navbar-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);

    /* ── Fonts ── */
    --hf-font-sans: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --hf-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Override Frappe CSS Variables ── */
    --primary: var(--hf-primary) !important;
    --primary-color: var(--hf-primary) !important;
    --btn-primary: var(--hf-primary) !important;
    --btn-primary-dark: var(--hf-primary-dark) !important;
    --blue-500: var(--hf-primary) !important;
    --blue-600: var(--hf-primary-dark) !important;
    --blue-400: var(--hf-primary-light) !important;
    --blue-300: var(--hf-primary-lighter) !important;
    --blue-100: var(--hf-primary-subtle) !important;
    --blue-50: #F5F3FF !important;
    --awesomebar-focus-bg: var(--hf-primary-subtle) !important;

    /* ── Font Override ── */
    --font-stack: var(--hf-font-sans) !important;
}

/* Dark mode overrides */
[data-theme="dark"] {
    --hf-sidebar-bg: #0F0D2E;
    --hf-sidebar-bg-hover: #1E1B4B;
    --hf-sidebar-border: #312E81;
    --hf-navbar-bg: #18181B;
    --hf-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────
   § 3. GLOBAL FONT OVERRIDE
   ───────────────────────────────────────── */
body,
.desk-page,
.page-container,
.frappe-control,
.modal,
.msgprint,
.like-disabled-input,
.frappe-list,
.report-view,
input, select, textarea, button,
.awesomebar .search-bar,
.sidebar-menu,
.standard-sidebar-section,
.desk-sidebar {
    font-family: var(--hf-font-sans) !important;
}

code, pre, .code-block,
.like-disabled-input.for-description code {
    font-family: var(--hf-font-mono) !important;
}

/* ─────────────────────────────────────────
   § 4. NAVBAR — Logo & Branding
   ───────────────────────────────────────── */

/* Hide original ERPNext/Frappe logo */
.navbar .navbar-brand .app-logo,
.navbar .navbar-brand img,
#navbar-breadcrumbs .breadcrumb-container img,
.erpnext-navbar-logo,
.navbar-brand svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Insert Hubflow logo via CSS */
.navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

.navbar .navbar-brand::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('/assets/hubflow_api/images/hubflow-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.navbar .navbar-brand::after {
    content: 'Hubflow';
    font-family: var(--hf-font-sans) !important;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--hf-primary), var(--hf-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hide the text inside navbar-brand (ERPNext name) */
.navbar .navbar-brand .app-name,
.navbar .navbar-brand span:not(.indicator-pill) {
    display: none !important;
}

/* Navbar styling */
.navbar {
    background: var(--hf-navbar-bg) !important;
    box-shadow: var(--hf-navbar-shadow) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.06) !important;
}

/* Navbar search (Awesomebar) */
.navbar .search-bar input,
.awesomebar input[type="text"] {
    border-radius: 8px !important;
    border: 1.5px solid var(--border-color) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.navbar .search-bar input:focus,
.awesomebar input[type="text"]:focus {
    border-color: var(--hf-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

/* ─────────────────────────────────────────
   § 5. SIDEBAR — Colors & Branding
   ───────────────────────────────────────── */
.desk-sidebar,
.sidebar-menu,
.standard-sidebar {
    background: var(--hf-sidebar-bg) !important;
    border-right: 1px solid var(--hf-sidebar-border) !important;
}

.desk-sidebar .sidebar-menu .standard-sidebar-section .sidebar-label,
.desk-sidebar .sidebar-label {
    color: var(--hf-sidebar-text) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.7rem !important;
    opacity: 0.7;
}

.desk-sidebar .standard-sidebar-item a,
.desk-sidebar .sidebar-menu a,
.standard-sidebar-section .desk-sidebar-item a {
    color: var(--hf-sidebar-text) !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    padding: 6px 12px !important;
    margin: 1px 6px !important;
}

.desk-sidebar .standard-sidebar-item a:hover,
.desk-sidebar .sidebar-menu a:hover,
.standard-sidebar-section .desk-sidebar-item a:hover {
    background: var(--hf-sidebar-bg-hover) !important;
    color: var(--hf-sidebar-text-active) !important;
}

.desk-sidebar .standard-sidebar-item a.selected,
.desk-sidebar .standard-sidebar-item.selected a,
.desk-sidebar .sidebar-menu a.active {
    background: var(--hf-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.desk-sidebar .standard-sidebar-item a.selected .sidebar-icon,
.desk-sidebar .standard-sidebar-item.selected a .sidebar-icon {
    color: #FFFFFF !important;
}

.desk-sidebar .sidebar-menu .sidebar-icon,
.desk-sidebar .standard-sidebar-item .sidebar-icon {
    color: var(--hf-primary-lighter) !important;
}

/* ─────────────────────────────────────────
   § 6. HIDE ALL ERPNext / Frappe BRANDING
   ───────────────────────────────────────── */

/* Footer "Powered by Frappe" */
.page-container .footer-message,
.page-container footer .footer-powered,
footer .footer-powered,
.web-footer .footer-powered,
.footer-info,
.erpnext-footer,
[data-page-container] .footer-info,
.page-footer .footer-powered,
#page-desktop .footer-message,
.website-footer .powered-by,
.footer .powered,
.page-container footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide "Built on Frappe" text anywhere */
a[href*="frappe.io"],
a[href*="erpnext.com"],
a[href*="frappe.cloud"],
a[href*="frappecloud.com"] {
    display: none !important;
}

/* Prevent the above from hiding functional links in forms */
.frappe-control a[href*="frappe.io"],
.form-group a[href*="frappe.io"] {
    display: inline !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
}

/* Help dropdown — hide ERPNext doc links */
.dropdown-menu a[href*="erpnext.com"],
.dropdown-menu a[href*="frappe.io"],
.dropdown-menu a[href*="discuss.erpnext.com"],
.dropdown-menu a[href*="discuss.frappe.io"],
.dropdown-menu a[href*="github.com/frappe"],
.dropdown-menu a[href*="github.com/erpnext"],
.help-links a[href*="erpnext.com"],
.help-links a[href*="frappe.io"],
.navbar-nav a[href*="erpnext.com"],
.navbar-nav a[href*="frappe.io"] {
    display: none !important;
}

/* Setup wizard ERPNext branding */
.setup-wizard-brand,
.setup-wizard .brand-logo,
.setup-wizard .erpnext-logo,
.slide-title img[src*="erpnext"],
.slide-title img[src*="frappe"] {
    display: none !important;
}

/* About dialog ERPNext/Frappe references */
.modal .about-app-version a[href*="frappe"],
.modal .about-app-version a[href*="erpnext"],
.about-dialog a[href*="frappe.io"],
.about-dialog a[href*="erpnext.com"] {
    color: var(--hf-primary) !important;
    pointer-events: none !important;
}

/* Hide "What's New" ERPNext change log popup */
.setup-wizard-dialog .modal-header .close,
.erpnext-setup-dialog,
.frappe-setup-dialog {
    display: none !important;
}

/* Error pages: hide Frappe branding */
.page-error img[src*="frappe"],
.page-error img[src*="erpnext"],
.msgprint-dialog .modal-title img {
    display: none !important;
}

/* ─────────────────────────────────────────
   § 7. LOGIN PAGE — Full Rebrand
   ───────────────────────────────────────── */

/* Login page background */
.for-login,
body[data-path="login"] {
}

/* Login card */
.login-content,
.for-login .page-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Login logo override */
.for-login .page-card-head .page-logo,
.login-content .page-logo,
.page-card-head .app-logo,
.page-card-head img,
.for-login .page-card-head img {
    display: none !important;
}

.for-login .page-card-head::before,
.login-content .page-card-head::before {
    content: '';
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background-image: url('/assets/hubflow_api/images/hubflow-logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.for-login .page-card-head::after,
.login-content .page-card-head::after {
    content: 'Hubflow';
    display: block;
    text-align: center;
    font-family: var(--hf-font-sans) !important;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--hf-primary), var(--hf-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Login page title text */
.for-login .page-card-head .page-title,
.login-content .page-card-head .page-title {
    display: none !important;
}

/* Hide "Powered by ERPNext" on login */
.for-login .login-footer,
.for-login .page-card .page-card-body .login-footer,
.for-login footer,
body[data-path="login"] footer {
    display: none !important;
}

/* Login button styling */
.for-login .btn-primary,
.login-content .btn-primary,
.page-card .btn-primary-dark {
    background: linear-gradient(135deg, var(--hf-primary), var(--hf-primary-dark)) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.2s ease !important;
}

.for-login .btn-primary:hover,
.login-content .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* ─────────────────────────────────────────
   § 8. BUTTONS & CONTROLS — Modernized
   ───────────────────────────────────────── */
.btn-primary,
.btn-primary-dark {
    background-color: var(--hf-primary) !important;
    border-color: var(--hf-primary) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
    background-color: var(--hf-primary-dark) !important;
    border-color: var(--hf-primary-dark) !important;
}

.btn-primary:focus,
.btn-primary-dark:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.btn-default {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* Links */
a {
    color: var(--hf-primary);
}

a:hover {
    color: var(--hf-primary-dark);
}

/* Focus rings */
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
    border-color: var(--hf-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* ─────────────────────────────────────────
   § 9. CARDS & PAGE SECTIONS — Modern feel
   ───────────────────────────────────────── */
.page-head {
    border-bottom-color: rgba(99, 102, 241, 0.08) !important;
}

.widget.shortcut-widget-box,
.widget.number-widget-box {
    border-radius: 12px !important;
    border: 1px solid rgba(99, 102, 241, 0.08) !important;
    transition: all 0.2s ease !important;
}

.widget.shortcut-widget-box:hover,
.widget.number-widget-box:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08) !important;
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   § 10. FAVICON OVERRIDE
   ───────────────────────────────────────── */
/* Note: Favicon is also set via hooks.py website_context */

/* ─────────────────────────────────────────
   § 11. PRINT FORMAT — Remove Branding
   ───────────────────────────────────────── */
@media print {
    .powered-by-erpnext,
    .print-footer a[href*="erpnext"],
    .print-footer a[href*="frappe"],
    .print-format footer .frappe-brand,
    .letter-head .erpnext-logo {
        display: none !important;
    }
}

/* ─────────────────────────────────────────
   § 12. LOADING & SPLASH SCREEN
   ───────────────────────────────────────── */
#splash {
    background: linear-gradient(135deg, #1E1B4B, #312E81) !important;
}

#splash .splash-logo,
#splash img {
    display: none !important;
}

#splash::after {
    content: 'Hubflow';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hf-font-sans);
    font-weight: 800;
    font-size: 2rem;
    color: white;
    letter-spacing: -0.03em;
}

/* Spinner color */
.frappe-spinner,
.loading-state .spinner {
    border-color: var(--hf-primary) transparent transparent transparent !important;
}

/* ─────────────────────────────────────────
   § 13. WORKSPACE / MODULE CARDS
   ───────────────────────────────────────── */
.module-link .module-icon svg,
.desk-page .widget .icon svg {
    color: var(--hf-primary) !important;
}

.desk-page .widget .widget-head .widget-title {
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────
   § 14. NOTIFICATIONS — Brand color
   ───────────────────────────────────────── */
.indicator-pill.blue,
.indicator.blue {
    background: var(--hf-primary) !important;
}

.btn-primary .indicator-pill {
    background: white !important;
    color: var(--hf-primary) !important;
}

/* ─────────────────────────────────────────
   § 15. HIDE SYSTEM / META INFO
   ───────────────────────────────────────── */

/* Version info in System Settings */
.system-settings-section .frappe-version,
.system-settings-section .erpnext-version,
[data-doctype="System Settings"] .indicator-pill[title*="Frappe"],
[data-doctype="System Settings"] .indicator-pill[title*="ERPNext"] {
    visibility: hidden !important;
}

/* Hide "Report an Issue" that links to GitHub/Frappe */
.dropdown-item[onclick*="report_issue"],
.help-dropdown a[data-action="report_issue"] {
    display: none !important;
}

/* Hide bench/Frappe update notifications */
.setup-wizard-message,
.desk-page .erpnext-update-notification,
.frappe-update-available {
    display: none !important;
}

/* ─────────────────────────────────────────
   § 16. SCROLLBAR STYLING
   ───────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.4);
}