/* Predictive Intelligence shared styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f3f4f6; color: #1e293b; }
.obj-header{background:#fff;border-bottom:1px solid #e2e8f0;padding:0}
.obj-header-inner{max-width:1400px;margin:0 auto;padding:0 1.5rem}
.obj-header-top{display:flex;align-items:center;gap:1rem;padding:1rem 0 0.75rem;border-bottom:1px solid #f3f4f6}
.obj-icon{width:40px;height:40px;border-radius:8px;background:#0ea5e9;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;flex-shrink:0}
.obj-title-block{flex:1;min-width:0}
.obj-breadcrumb{font-size:0.72rem;color:#9ca3af;margin-bottom:0.15rem}
.obj-breadcrumb a{color:#0ea5e9;text-decoration:none}
.obj-breadcrumb a:hover{text-decoration:underline}
.obj-title{font-size:1.25rem;font-weight:700;color:#111827}
.pi-card { background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 1.5rem; position: relative; }
.pi-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.pi-card-header h3 { margin: 0; color: #2c3e50; font-size: 1rem; }
.pi-help { background: #0066CC; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 0.75rem; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; font-weight: 700; }
.pi-help:hover { background: #0052a3; }
.pi-help .pi-tip { display: none; position: absolute; top: 32px; right: 0; background: #2c3e50; color: white; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.8rem; line-height: 1.5; width: 300px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.pi-help .pi-tip::before { content: ''; position: absolute; top: -6px; right: 8px; width: 12px; height: 12px; background: #2c3e50; transform: rotate(45deg); }
.pi-help:hover .pi-tip { display: block; }
.pi-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.pi-kpi { border-radius: 8px; padding: 1.25rem; color: white; }
.pi-kpi .label { font-size: 0.8rem; opacity: 0.9; margin-bottom: 0.4rem; }
.pi-kpi .value { font-size: 2rem; font-weight: 700; }
.pi-kpi .sub { font-size: 0.75rem; opacity: 0.8; margin-top: 0.25rem; }
.pi-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.pi-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pi-table th { padding: 0.6rem 0.75rem; text-align: left; font-size: 0.8rem; color: #666; border-bottom: 2px solid #e9ecef; background: #f8f9fa; }
.pi-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #f0f0f0; }
.pi-table tr:hover { background: #f8f9fa; }
.pi-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }
.pi-ai-box { background: linear-gradient(135deg, #f0f7ff, #e8f0fe); border-left: 4px solid #0066CC; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.pi-ai-box h4 { margin: 0 0 0.5rem; color: #0066CC; font-size: 0.9rem; }
.pi-ai-box p { margin: 0; font-size: 0.85rem; color: #333; line-height: 1.6; }
.pi-loading { text-align: center; padding: 3rem; color: #666; }
.pi-loading i { font-size: 2rem; margin-bottom: 1rem; display: block; }
.pi-method { background: white; border-radius: 12px; padding: 0; margin-bottom: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.pi-method summary { padding: 1rem 1.5rem; cursor: pointer; font-weight: 600; color: #2c3e50; font-size: 0.95rem; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.pi-method summary::-webkit-details-marker { display: none; }
.pi-method summary::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform 0.2s; color: #0066CC; }
.pi-method[open] summary::before { transform: rotate(90deg); }
.pi-method-body { padding: 0 1.5rem 1.5rem; font-size: 0.85rem; color: #444; line-height: 1.7; }
.pi-method-body h4 { color: #2c3e50; font-size: 0.85rem; margin: 1rem 0 0.4rem; }
.pi-method-body h4:first-child { margin-top: 0; }
.pi-method-body code { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 0.8rem; }
.pi-method-body ul { margin: 0.3rem 0; padding-left: 1.2rem; }
.pi-method-body li { margin-bottom: 0.2rem; }
footer { background-color: #0D3963; color: #fff; font-size: 0.85rem; padding: 1.5rem 0; border-top: 4px solid rgb(255,214,49); }
footer .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
footer .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
footer .footer-logos { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
footer .footer-logos img { height: 50px; object-fit: contain; }
footer .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
footer .footer-links a { color: #fff; text-decoration: none; font-size: 0.85rem; }
footer .footer-links a:hover { color: rgb(255,214,49); }
footer .footer-bottom { text-align: center; margin-top: 1rem; font-size: 0.8rem; color: rgba(255,255,255,0.9); }
@media (max-width: 768px) {
    .pi-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-chart-row { grid-template-columns: 1fr; }
    .pi-card { padding: 1rem; }
    .pi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pi-table { min-width: 480px; }
}