/* Prompt ERP Custom Styles */
/* Version: 1.0 */

/* ========================================
   Brand Colors
   ======================================== */
:root {
    --prompt-primary: #2490EF;
    --prompt-primary-dark: #1e7acc;
    --prompt-success: #28A745;
    --prompt-warning: #F47B20;
    --prompt-danger: #E24C4C;
    --prompt-purple: #7C3AED;
    --prompt-grey: #8D99A6;
    --prompt-light-grey: #f8f9fa;
    --prompt-border-radius: 8px;
    --prompt-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --prompt-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
}

/* ========================================
   Workspace Sidebar Styling
   ======================================== */
.workspace-sidebar-item.active {
    background-color: var(--prompt-primary);
    color: white;
    border-radius: var(--prompt-border-radius);
}

.workspace-sidebar-item:hover {
    background-color: rgba(36, 144, 239, 0.1);
    border-radius: var(--prompt-border-radius);
}

/* ========================================
   Number Card Styling
   ======================================== */
.number-card {
    border-radius: 12px;
    box-shadow: var(--prompt-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}

.number-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--prompt-shadow-hover);
}

.number-card .widget-title {
    font-weight: 500;
    color: var(--prompt-grey);
}

.number-card .number-card-value {
    font-weight: 600;
    font-size: 2rem;
}

/* ========================================
   Status Badge Colors (Task 5) — solid bg + WHITE text for readability.
   Frappe's default pill text inherits the indicator color (dark) which is invisible on
   these solid fills; force white text on all colored pills.
   ======================================== */
.indicator-pill.red { background-color: var(--prompt-danger) !important; }
.indicator-pill.green { background-color: var(--prompt-success) !important; }
.indicator-pill.orange { background-color: var(--prompt-warning) !important; }
.indicator-pill.blue { background-color: var(--prompt-primary) !important; }
.indicator-pill.purple { background-color: var(--prompt-purple) !important; }
.indicator-pill.grey,
.indicator-pill.gray { background-color: var(--prompt-grey) !important; }

/* White, readable text on all solid-colored status pills (list + form + reports) */
.indicator-pill.red,
.indicator-pill.green,
.indicator-pill.orange,
.indicator-pill.blue,
.indicator-pill.purple,
.indicator-pill.pink,
.indicator-pill.cyan,
.indicator-pill.grey,
.indicator-pill.gray,
.indicator-pill.red span,
.indicator-pill.green span,
.indicator-pill.orange span,
.indicator-pill.blue span,
.indicator-pill.purple span,
.indicator-pill.pink span,
.indicator-pill.cyan span,
.indicator-pill.grey span,
.indicator-pill.gray span {
    color: #ffffff !important;
    font-weight: 500 !important;
}
/* hide the little dot (redundant on a filled pill) so text has room */
.indicator-pill.red::before,
.indicator-pill.green::before,
.indicator-pill.orange::before,
.indicator-pill.blue::before,
.indicator-pill.purple::before,
.indicator-pill.pink::before,
.indicator-pill.cyan::before,
.indicator-pill.grey::before,
.indicator-pill.gray::before { background-color: #ffffff !important; }

/* Custom status indicators */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.open { background-color: #e3f2fd; color: #1976d2; }
.status-badge.in-progress { background-color: #fff3e0; color: #f57c00; }
.status-badge.completed { background-color: #e8f5e9; color: #388e3c; }
.status-badge.closed { background-color: #fafafa; color: #757575; }
.status-badge.overdue { background-color: #ffebee; color: #c62828; }

/* ========================================
   Form Section Styling
   ======================================== */
.form-section .section-head {
    background-color: var(--prompt-light-grey);
    padding: 10px 15px;
    border-radius: var(--prompt-border-radius);
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
}

.frappe-control .control-label {
    font-weight: 500;
    color: #495057;
}

/* ========================================
   Child Table Enhancements
   ======================================== */
.frappe-control[data-fieldtype="Table"] .grid-heading-row {
    background-color: var(--prompt-primary);
    color: white;
}

.frappe-control[data-fieldtype="Table"] .grid-heading-row .static-area {
    color: white;
    font-weight: 500;
}

.frappe-control[data-fieldtype="Table"] .grid-row:nth-child(even) {
    background-color: var(--prompt-light-grey);
}

.frappe-control[data-fieldtype="Table"] .grid-row:hover {
    background-color: rgba(36, 144, 239, 0.05);
}

/* ========================================
   Dashboard Chart Cards - Transparent Theme
   ======================================== */

/* Make dashboard chart widgets transparent - Light Mode */
.widget.dashboard-widget-box,
.widget-group-body .widget.dashboard-widget-box,
.workspace-section .widget.dashboard-widget-box,
[data-page-container="true"] .widget.dashboard-widget-box {
    --card-bg: transparent !important;
    --fg-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color, #d1d8dd) !important;
    box-shadow: none !important;
}

/* Dark Mode - Maximum specificity to override Frappe dark theme */
html[data-theme="dark"] .widget.dashboard-widget-box,
html[data-theme="dark"] .widget-group-body .widget.dashboard-widget-box,
html[data-theme="dark"] .workspace-section .widget.dashboard-widget-box,
html[data-theme="dark"] [data-page-container="true"] .widget.dashboard-widget-box,
html[data-theme="dark"] .widget.widget-shadow.dashboard-widget-box,
[data-theme="dark"] .widget.dashboard-widget-box,
[data-theme="dark"] .widget-group-body .widget.dashboard-widget-box,
[data-theme="dark"] .workspace-section .widget.dashboard-widget-box,
[data-theme="dark"] [data-page-container="true"] .widget.dashboard-widget-box,
[data-theme="dark"] .widget.widget-shadow.dashboard-widget-box {
    --card-bg: transparent !important;
    --fg-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color, #d1d8dd) !important;
    box-shadow: none !important;
}

/* Extra specificity for widget with shadow class */
.widget.widget-shadow.dashboard-widget-box,
.widget-group.widget-charts .widget.dashboard-widget-box {
    --card-bg: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color, #d1d8dd) !important;
    box-shadow: none !important;
}

/* Widget head (title area) */
.workspace-section .widget.dashboard-widget-box .widget-head,
.widget.widget-shadow.dashboard-widget-box .widget-head,
.widget.dashboard-widget-box .widget-head,
html[data-theme="dark"] .widget.dashboard-widget-box .widget-head,
[data-theme="dark"] .widget.dashboard-widget-box .widget-head {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color, #d1d8dd) !important;
}

/* Widget title text */
.workspace-section .widget.dashboard-widget-box .widget-head .widget-title,
.workspace-section .widget.dashboard-widget-box .widget-head .widget-label,
.workspace-section .widget.dashboard-widget-box .widget-title,
.workspace-section .widget.dashboard-widget-box .widget-label,
.widget.widget-shadow.dashboard-widget-box .widget-title,
.widget.dashboard-widget-box .widget-title {
    color: var(--text-color, #333) !important;
}

/* Last synced and subtitle text */
.workspace-section .widget.dashboard-widget-box .widget-head .widget-subtitle,
.workspace-section .widget.dashboard-widget-box .text-muted,
.workspace-section .widget.dashboard-widget-box .chart-actions .text-muted,
.widget.widget-shadow.dashboard-widget-box .text-muted,
.widget.dashboard-widget-box .text-muted {
    color: var(--text-muted, #8d99a6) !important;
}

/* Widget body - all modes */
.workspace-section .widget.dashboard-widget-box .widget-body,
.widget.widget-shadow.dashboard-widget-box .widget-body,
.widget.dashboard-widget-box .widget-body,
html[data-theme="dark"] .widget.dashboard-widget-box .widget-body,
[data-theme="dark"] .widget.dashboard-widget-box .widget-body {
    background: transparent !important;
}

/* Chart container and frappe-chart - all modes */
.workspace-section .widget.dashboard-widget-box .frappe-chart,
.workspace-section .widget.dashboard-widget-box .chart-container,
.widget.dashboard-widget-box .frappe-chart,
.widget.dashboard-widget-box .chart-container,
html[data-theme="dark"] .widget.dashboard-widget-box .frappe-chart,
html[data-theme="dark"] .widget.dashboard-widget-box .chart-container,
[data-theme="dark"] .widget.dashboard-widget-box .frappe-chart,
[data-theme="dark"] .widget.dashboard-widget-box .chart-container {
    background: transparent !important;
}

/* SVG text in charts - use default text color */
.workspace-section .widget.dashboard-widget-box svg text,
.widget.widget-shadow.dashboard-widget-box svg text,
.widget.dashboard-widget-box svg text {
    fill: var(--text-muted, #8d99a6) !important;
}

/* Chart grid lines */
.workspace-section .widget.dashboard-widget-box svg line,
.widget.dashboard-widget-box svg line {
    stroke: var(--border-color, #d1d8dd) !important;
}

/* Chart paths (the actual data lines) - keep colored */
.frappe-chart path.stroke,
.frappe-chart .line-graph path {
    stroke-width: 2.5px;
}

/* Chart action icons (3-dots menu, filter, calendar) — ensure they render as proper
   icon glyphs. The broad 'dashboard-widget-box svg' theming must NOT recolor/resize the
   action-button icons. Force correct currentColor fill + size, scoped to chart-actions. */
.widget.dashboard-widget-box .chart-actions .icon,
.widget.dashboard-widget-box .widget-control .icon,
.widget.dashboard-widget-box .chart-menu .icon {
    fill: var(--icon-stroke, currentColor) !important;
    stroke: var(--icon-stroke, currentColor) !important;
    width: 16px !important;
    height: 16px !important;
}
.widget.dashboard-widget-box .chart-actions .icon use,
.widget.dashboard-widget-box .widget-control .icon use {
    fill: inherit !important;
    stroke: inherit !important;
}

/* Tooltip styling — opaque background + visible text on ALL chart types (Line/Bar/Pie/etc).
   frappe-charts controls visibility via inline style.opacity ("opacity:1" on hover,
   "opacity:0" off). DO NOT override opacity here — let the library's native transitions
   work. Just paint the box (bg/border/color) and the inner text so they're readable.
   Earlier scope-by-style-substring caused Line-chart tooltips to render invisible because
   the inline opacity format varies across browsers (some emit "opacity: 0", some
   "opacity:0"). Now we style unconditionally, so when opacity becomes 1 the box is
   readable, and when it's 0 the box is invisible anyway. */
.graph-svg-tip,
.frappe-chart .graph-svg-tip {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f272e !important;
    border: 1px solid #d1d8dd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
}

/* Force text colour on EVERY tooltip inner element — Line charts often render the value
   via <strong> inside the <li>, which the base chart CSS sometimes leaves transparent. */
.graph-svg-tip .title,
.graph-svg-tip .data-point-list li,
.graph-svg-tip .data-point-list li strong,
.graph-svg-tip .data-point-list li .tooltip-label,
.graph-svg-tip .data-point-list li .tooltip-value,
.graph-svg-tip ul li,
.graph-svg-tip ul li strong,
.graph-svg-tip ol li,
.graph-svg-tip ol li strong {
    color: #1f272e !important;
}

/* The arrow pointing at the data point — must match tooltip bg or it looks like a stray dot */
.graph-svg-tip .svg-pointer {
    background: #ffffff !important;
    border: 1px solid #d1d8dd !important;
}

/* Dark mode: solid dark tooltip */
[data-theme="dark"] .graph-svg-tip,
[data-theme="dark"] .frappe-chart .graph-svg-tip {
    background: #1c2126 !important;
    background-color: #1c2126 !important;
    color: #f0f4f7 !important;
    border: 1px solid #404a54 !important;
}
[data-theme="dark"] .graph-svg-tip .title,
[data-theme="dark"] .graph-svg-tip .data-point-list li,
[data-theme="dark"] .graph-svg-tip .data-point-list li strong,
[data-theme="dark"] .graph-svg-tip .data-point-list li .tooltip-label,
[data-theme="dark"] .graph-svg-tip .data-point-list li .tooltip-value,
[data-theme="dark"] .graph-svg-tip ul li,
[data-theme="dark"] .graph-svg-tip ul li strong {
    color: #f0f4f7 !important;
}
[data-theme="dark"] .graph-svg-tip .svg-pointer {
    background: #1c2126 !important;
    border: 1px solid #404a54 !important;
}

/* Action buttons and icons */
.workspace-section .widget.dashboard-widget-box .widget-control,
.workspace-section .widget.dashboard-widget-box .chart-actions .btn,
.widget.widget-shadow.dashboard-widget-box .widget-control {
    color: var(--text-muted, #8d99a6) !important;
}

.workspace-section .widget.dashboard-widget-box .widget-control:hover,
.workspace-section .widget.dashboard-widget-box .chart-actions .btn:hover {
    color: var(--text-color, #333) !important;
}

/* Legend text */
.workspace-section .widget.dashboard-widget-box .chart-legend,
.widget.dashboard-widget-box .chart-legend {
    color: var(--text-color, #333) !important;
}

/* ========================================
   List View Enhancements
   ======================================== */
.list-row {
    border-radius: var(--prompt-border-radius);
    margin-bottom: 2px;
}

.list-row:hover {
    background-color: rgba(36, 144, 239, 0.03);
}

.list-row-head {
    background-color: var(--prompt-light-grey);
    border-radius: var(--prompt-border-radius) var(--prompt-border-radius) 0 0;
}

/* ========================================
   Button Enhancements
   ======================================== */
.btn-primary {
    background-color: var(--prompt-primary);
    border-color: var(--prompt-primary);
    border-radius: var(--prompt-border-radius);
}

.btn-primary:hover {
    background-color: var(--prompt-primary-dark);
    border-color: var(--prompt-primary-dark);
}

.btn-primary-dark {
    background-color: var(--prompt-primary-dark);
    border-color: var(--prompt-primary-dark);
}

.btn-success {
    border-radius: var(--prompt-border-radius);
}

.btn-danger {
    border-radius: var(--prompt-border-radius);
}

/* ========================================
   Card & Panel Styling
   ======================================== */
.card, .frappe-card {
    border-radius: 12px;
    box-shadow: var(--prompt-shadow);
    border: none;
}

.widget.shortcut-widget-box {
    border-radius: 12px;
    box-shadow: var(--prompt-shadow);
}

.widget.shortcut-widget-box:hover {
    box-shadow: var(--prompt-shadow-hover);
    transform: translateY(-2px);
}

/* ========================================
   Quick Entry Dialogs
   ======================================== */
.modal-content {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.modal-header {
    border-radius: 12px 12px 0 0;
    background-color: var(--prompt-light-grey);
}

/* ========================================
   Timeline & Activity
   ======================================== */
.timeline-item {
    border-left: 3px solid var(--prompt-primary);
    padding-left: 15px;
    margin-bottom: 15px;
}

.timeline-item .timeline-badge {
    background-color: var(--prompt-primary);
}

/* ========================================
   Print Preview Styling
   ======================================== */
@media print {
    .page-head, .sidebar, .navbar, .page-container > .page-head {
        display: none !important;
    }

    .main-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .frappe-control {
        page-break-inside: avoid;
    }

    body {
        font-size: 12pt;
    }
}

/* ========================================
   Mobile Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
    .workspace-shortcuts .shortcut-widget {
        width: 100% !important;
        margin-bottom: 10px;
    }

    .number-card {
        margin-bottom: 15px;
    }

    .form-section .section-head {
        font-size: 14px;
    }

    .chart-container {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .number-card .number-card-value {
        font-size: 1.5rem;
    }

    .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* ========================================
   Custom Module Icons
   ======================================== */
.module-icon-crm::before { content: "\f0c0"; font-family: "Font Awesome 5 Free"; }
.module-icon-sales::before { content: "\f07a"; font-family: "Font Awesome 5 Free"; }
.module-icon-manufacturing::before { content: "\f0ad"; font-family: "Font Awesome 5 Free"; }
.module-icon-service::before { content: "\f4c4"; font-family: "Font Awesome 5 Free"; }
.module-icon-finance::before { content: "\f19c"; font-family: "Font Awesome 5 Free"; }

/* ========================================
   Loading Spinner
   ======================================== */
.prompt-loading {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--prompt-primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   KPI & Metrics Display
   ======================================== */
.kpi-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--prompt-shadow);
    text-align: center;
}

.kpi-card .kpi-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--prompt-primary);
}

.kpi-card .kpi-label {
    font-size: 0.9rem;
    color: var(--prompt-grey);
    margin-top: 8px;
}

.kpi-card.success .kpi-value { color: var(--prompt-success); }
.kpi-card.warning .kpi-value { color: var(--prompt-warning); }
.kpi-card.danger .kpi-value { color: var(--prompt-danger); }

/* ========================================
   Progress Bars
   ======================================== */
.prompt-progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
    overflow: hidden;
}

.prompt-progress .progress-bar {
    height: 100%;
    border-radius: 4px;
    background-color: var(--prompt-primary);
    transition: width 0.3s ease;
}

.prompt-progress.success .progress-bar { background-color: var(--prompt-success); }
.prompt-progress.warning .progress-bar { background-color: var(--prompt-warning); }
.prompt-progress.danger .progress-bar { background-color: var(--prompt-danger); }

/* ========================================
   Data Tables
   ======================================== */
.prompt-table {
    width: 100%;
    border-collapse: collapse;
}

.prompt-table th {
    background-color: var(--prompt-primary);
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
}

.prompt-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}

.prompt-table tr:hover {
    background-color: rgba(36, 144, 239, 0.03);
}

.prompt-table tr:nth-child(even) {
    background-color: var(--prompt-light-grey);
}

/* ========================================
   Utility Classes
   ======================================== */
.text-primary { color: var(--prompt-primary) !important; }
.text-success { color: var(--prompt-success) !important; }
.text-warning { color: var(--prompt-warning) !important; }
.text-danger { color: var(--prompt-danger) !important; }
.text-purple { color: var(--prompt-purple) !important; }
.text-grey { color: var(--prompt-grey) !important; }

.bg-primary { background-color: var(--prompt-primary) !important; }
.bg-success { background-color: var(--prompt-success) !important; }
.bg-warning { background-color: var(--prompt-warning) !important; }
.bg-danger { background-color: var(--prompt-danger) !important; }
.bg-light { background-color: var(--prompt-light-grey) !important; }

.rounded { border-radius: var(--prompt-border-radius) !important; }
.rounded-lg { border-radius: 12px !important; }
.shadow { box-shadow: var(--prompt-shadow) !important; }
.shadow-hover:hover { box-shadow: var(--prompt-shadow-hover) !important; }

/* ========================================
   Logo Overrides - All Pages
   ======================================== */

/* `content: url(...)` on an <img> REPLACES the rendered image, overriding its
   src entirely. It therefore beats any JS that rewrites src, and it is why the
   white-label sites kept painting the Prompt mark. Scope every rule to
   :not([data-whitelabel]) — boot.py stamps that attribute on <html> for the
   sites listed in WHITELABEL_SITES. */

/* Navbar logo */
html:not([data-whitelabel]) .navbar-brand img,
html:not([data-whitelabel]) .app-logo img,
html:not([data-whitelabel]) .navbar-home img {
    content: url('/assets/erpnext/images/Prompt.png') !important;
    max-width: 140px !important;
    max-height: 32px !important;
}

/* Login page logo */
html:not([data-whitelabel]) .login-content .app-logo img,
html:not([data-whitelabel]) .login-content .for-login img,
html:not([data-whitelabel]) .page-card-head img,
html:not([data-whitelabel]) .page-card .app-logo img {
    content: url('/assets/erpnext/images/Prompt.png') !important;
    max-width: 200px !important;
    max-height: 80px !important;
}

/* Loading screen logo */
html:not([data-whitelabel]) .loading-logo img,
html:not([data-whitelabel]) .app-logo img {
    content: url('/assets/erpnext/images/Prompt.png') !important;
}

/* White-label: keep the sizing constraints, drop the image replacement so the
   real src (hmx-logo.svg) paints. */
html[data-whitelabel] .navbar-brand img,
html[data-whitelabel] .app-logo img,
html[data-whitelabel] .navbar-home img {
    content: normal !important;
    max-width: 140px !important;
    max-height: 32px !important;
}

html[data-whitelabel] .login-content .app-logo img,
html[data-whitelabel] .login-content .for-login img,
html[data-whitelabel] .page-card-head img,
html[data-whitelabel] .page-card .app-logo img {
    content: normal !important;
    max-width: 200px !important;
    max-height: 80px !important;
}

/* Favicon override using link tag manipulation - handled by JS */

/* End of Prompt ERP Custom Styles */