/*
 * ═══════════════════════════════════════════════════════════
 *  NastyCookie ERP — Light Modern Enhancement Layer
 *  Loads AFTER styles.css — refines without overriding colors
 * ═══════════════════════════════════════════════════════════
 */

/* ─── Font ───────────────────────────────────────────────── */
html, body,
input, select, textarea, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ─── Design tokens (light) ──────────────────────────────── */
:root {
    --nc-accent:       #4F46E5;
    --nc-accent-light: #EEF2FF;
    --nc-accent-glow:  rgba(79, 70, 229, 0.18);
    --nc-success:      #10B981;
    --nc-warning:      #F59E0B;
    --nc-danger:       #EF4444;
    --nc-text:         #0F172A;
    --nc-text-2:       #475569;
    --nc-text-muted:   #94A3B8;
    --nc-border:       #E2E8F0;
    --nc-border-hi:    #CBD5E1;
    --nc-bg-soft:      #F8FAFC;
    --nc-sidebar-w:    256px;
    --nc-sidebar-cw:   68px;
    --nc-header-h:     58px;
    --nc-r:            10px;
    --nc-shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
    --nc-shadow:       0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    --nc-shadow-lg:    0 10px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}

/* ─── Sidebar refinements ────────────────────────────────── */
.sidebar {
    width: var(--nc-sidebar-w) !important;
    transition: width 0.2s ease !important;
    border-right: 1px solid var(--nc-border) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

.sidebar.collapsed {
    width: var(--nc-sidebar-cw) !important;
}

.sidebar-header {
    height: var(--nc-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--nc-border) !important;
    flex-shrink: 0 !important;
}

.sidebar-header .logo span {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nc-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    transition: opacity 0.15s !important;
}

.sidebar.collapsed .sidebar-header .logo span {
    opacity: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
}

.toggle-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    border: 1px solid var(--nc-border) !important;
    background: var(--nc-bg-soft) !important;
    color: var(--nc-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
    transition: background 0.15s, color 0.15s !important;
}

.toggle-btn:hover {
    background: var(--nc-border) !important;
    color: var(--nc-text) !important;
}

.sidebar-menu {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
}

.section-title {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--nc-text-muted) !important;
    padding: 12px 16px 5px !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: opacity 0.15s !important;
}

.sidebar.collapsed .section-title {
    opacity: 0 !important;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

.menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin: 1px 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--nc-text-2) !important;
    transition: background 0.15s, color 0.15s !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.menu-item i {
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    color: var(--nc-text-muted) !important;
    transition: color 0.15s !important;
}

.menu-item:hover {
    background: var(--nc-bg-soft) !important;
    color: var(--nc-text) !important;
}

.menu-item:hover i { color: var(--nc-text-2) !important; }

.menu-item.active {
    background: var(--nc-accent-light) !important;
    color: var(--nc-accent) !important;
    font-weight: 600 !important;
}

.menu-item.active i { color: var(--nc-accent) !important; }

.sidebar.collapsed .menu-item span,
.sidebar.collapsed .menu-item > span:not(i) {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.sidebar-footer {
    border-top: 1px solid var(--nc-border) !important;
    padding: 6px 0 !important;
    flex-shrink: 0 !important;
}

/* ─── Top Header ─────────────────────────────────────────── */
.top-header {
    height: var(--nc-header-h) !important;
    border-bottom: 1px solid var(--nc-border) !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    gap: 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
}

.page-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--nc-text) !important;
    white-space: nowrap !important;
}

#systemTimeDisplay {
    background: var(--nc-bg-soft) !important;
    border: 1px solid var(--nc-border) !important;
    color: var(--nc-text) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    box-shadow: none !important;
}

.search-box {
    background: var(--nc-bg-soft) !important;
    border: 1px solid var(--nc-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.search-box:focus-within {
    border-color: var(--nc-accent) !important;
    box-shadow: 0 0 0 3px var(--nc-accent-glow) !important;
    background: #fff !important;
}

.icon-btn {
    background: var(--nc-bg-soft) !important;
    border: 1px solid var(--nc-border) !important;
    border-radius: 8px !important;
    color: var(--nc-text-2) !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    position: relative !important;
}

.icon-btn:hover {
    background: var(--nc-border) !important;
    color: var(--nc-text) !important;
}

.user-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--nc-accent) 0%, #7C3AED 100%) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Header dropdown */
#userDropdownMenu {
    background: #fff !important;
    border: 1px solid var(--nc-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nc-shadow-lg) !important;
    overflow: hidden !important;
    min-width: 200px !important;
}

#userDropdownMenu a {
    font-size: 13px !important;
    color: var(--nc-text-2) !important;
    padding: 9px 16px !important;
    transition: background 0.15s !important;
}

#userDropdownMenu a:hover {
    background: var(--nc-bg-soft) !important;
    color: var(--nc-text) !important;
}

/* ─── Content area ───────────────────────────────────────── */
.main-content {
    background: var(--nc-bg-soft) !important;
}

.content-container {
    padding: 20px 24px !important;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: var(--nc-r) !important;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s !important;
    cursor: pointer !important;
}

.btn:hover:not(:disabled) { transform: translateY(-1px) !important; }
.btn:active:not(:disabled) { transform: translateY(0) !important; }

.btn-primary {
    background: linear-gradient(135deg, var(--nc-accent) 0%, #7C3AED 100%) !important;
    border: none !important;
    color: #fff !important;
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(79,70,229,0.35) !important;
}

/* ─── Forms & inputs ─────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--nc-accent) !important;
    box-shadow: 0 0 0 3px var(--nc-accent-glow) !important;
    outline: none !important;
}

/* ─── Custom scrollbar (light) ───────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ─── Dashboard — compact 3×2 node grid ─────────────────── */

/* Hub container */
.hub-container {
    max-width: none !important;
}

.hub-header {
    margin-bottom: 16px !important;
}

.hub-header h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--nc-text) !important;
    margin-bottom: 2px !important;
}

.hub-header p {
    font-size: 13px !important;
    color: var(--nc-text-muted) !important;
}

/* Grid: 3 columns × 2 rows */
.nodes-grid.six-nodes {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    overflow-x: visible !important;
    padding: 0 !important;
}

/* Node card — horizontal compact layout */
.nodes-grid.six-nodes .node-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 20px 16px 20px !important;
    min-height: 0 !important;
    background: #fff !important;
    border: 1px solid var(--nc-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--nc-shadow-sm) !important;
    cursor: pointer !important;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
}

.nodes-grid.six-nodes .node-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--nc-shadow) !important;
    border-color: var(--nc-border-hi) !important;
}

/* Left accent bar */
.node-card[data-node="warehouse"]::before  { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #3B82F6; border-radius:12px 0 0 12px; }
.node-card[data-node="inbound"]::before    { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #10B981; border-radius:12px 0 0 12px; }
.node-card[data-node="outbound"]::before   { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #F59E0B; border-radius:12px 0 0 12px; }
.node-card[data-node="production"]::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #8B5CF6; border-radius:12px 0 0 12px; }
.node-card[data-node="management"]::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #EC4899; border-radius:12px 0 0 12px; }
.node-card[data-node="audit"]::before      { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #14B8A6; border-radius:12px 0 0 12px; }
.node-card[data-node="finance"]::before    { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: #10B981; border-radius:12px 0 0 12px; }

/* Node icon — compact circle */
.nodes-grid.six-nodes .node-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Icon bg colors */
.node-card[data-node="warehouse"]  .node-icon { background: #EFF6FF; color: #3B82F6; }
.node-card[data-node="inbound"]    .node-icon { background: #ECFDF5; color: #10B981; }
.node-card[data-node="outbound"]   .node-icon { background: #FFFBEB; color: #F59E0B; }
.node-card[data-node="production"] .node-icon { background: #F5F3FF; color: #8B5CF6; }
.node-card[data-node="management"] .node-icon { background: #FDF4FF; color: #EC4899; }
.node-card[data-node="audit"]      .node-icon { background: #F0FDFA; color: #14B8A6; }
.node-card[data-node="finance"]    .node-icon { background: #ECFDF5; color: #10B981; }

/* Node content area */
.nodes-grid.six-nodes .node-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.nodes-grid.six-nodes .node-content h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--nc-text) !important;
    margin: 0 0 2px !important;
    white-space: nowrap !important;
}

.nodes-grid.six-nodes .node-content > p {
    font-size: 11px !important;
    color: var(--nc-text-muted) !important;
    margin: 0 0 10px !important;
    flex: unset !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Stats row — inline pills */
.nodes-grid.six-nodes .node-stats {
    display: flex !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.nodes-grid.six-nodes .stat {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-direction: row !important;
    padding: 4px 10px 4px 0 !important;
    margin-right: 10px !important;
    border-right: 1px solid var(--nc-border) !important;
}

.nodes-grid.six-nodes .stat:last-child {
    border-right: none !important;
    margin-right: 0 !important;
}

.nodes-grid.six-nodes .stat-value {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--nc-text) !important;
    line-height: 1 !important;
}

.nodes-grid.six-nodes .stat-label {
    font-size: 10px !important;
    color: var(--nc-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Alert strip at bottom */
.nodes-grid.six-nodes .node-alerts {
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Arrow — top right, visible on hover */
.nodes-grid.six-nodes .node-arrow {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: var(--nc-bg-soft) !important;
    border: 1px solid var(--nc-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    color: var(--nc-text-muted) !important;
    opacity: 0 !important;
    transition: opacity 0.15s !important;
    margin: 0 !important;
    bottom: auto !important;
    right: 14px !important;
}

.nodes-grid.six-nodes .node-card:hover .node-arrow {
    opacity: 1 !important;
}

/* ─── Print ──────────────────────────────────────────────── */
@media print {
    .sidebar, .top-header { display: none !important; }
    .main-content { margin-left: 0 !important; }
}