/* ARM ERP UI — refined light/dark theme */
:root{--bg:#0b1220;--surface:#0f172a;--panel:#0f172a;--card:#111827;--muted:#9fb0c3;--text:#e2e8f0;--accent:#22d3ee;--accent2:#2563eb;--green:#16a34a;--red:#dc2626;--yellow:#f59e0b;--border:#1f2a44}

:root[data-theme='light']{--bg:#f6f8fb;--surface:#ffffff;--panel:#ffffff;--card:#ffffff;--muted:#475569;--text:#0f172a;--accent:#2563eb;--accent2:#1d4ed8;--green:#16a34a;--red:#dc2626;--yellow:#f59e0b;--border:#e5e7eb}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.fa-gauge{color:var(--c-blue)}
.fa-receipt{color:var(--c-amber)}
.fa-cart-shopping{color:var(--c-blue)}
.fa-box{color:var(--c-cyan)}
.fa-users{color:var(--c-green)}
.fa-user-tie{color:var(--c-violet)}
.fa-desktop{color:var(--c-blue)}
.fa-circle-arrow-down{color:var(--c-green)}
.fa-circle-arrow-up{color:var(--c-red)}
.fa-network-wired{color:var(--c-slate)}
.fa-robot{color:var(--c-cyan)}
.fa-building-columns{color:var(--c-cyan)}
.fa-scale-balanced{color:var(--c-slate)}
.fa-layer-group{color:var(--c-violet)}
.fa-percent{color:var(--c-amber)}
.fa-gear{color:var(--c-gray)}
.fa-home{color:var(--c-blue)}
.fa-window-maximize{color:var(--c-blue)}
.fa-up-right-from-square{color:var(--c-blue)}
.fa-xmark{color:var(--c-red)}
.fa-circle-half-stroke{color:var(--c-violet)}
.fa-magnifying-glass{color:var(--c-blue)}
.fa-cubes{color:var(--primary)}
.fa-wrench{color:var(--c-red)}
.fa-file-lines{color:var(--c-blue)}
.fa-balance-scale{color:var(--c-violet)}
.page-title{font-size:22px;margin:0 0 12px 0;color:var(--text)}
/* Sidebar */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#0a1020;color:#cbd5e1;padding:14px 10px;overflow:auto}
:root[data-theme='light'] .sidebar{background:#ffffff;color:#475569;border-right:1px solid var(--border)}
.sidebar .brand{color:#fff;font-weight:700;margin:6px 10px 16px 10px}
:root[data-theme='light'] .brand{color:#0f172a}
.sidebar a{display:block;color:var(--muted);text-decoration:none;padding:12px 14px;border-radius:10px;margin:4px 6px;display:flex;align-items:center;gap:10px}
.sidebar a i{width:20px;text-align:center;font-size:18px;opacity:.95}
.sidebar a:hover{background:#0d1933;color:#fff}
:root[data-theme='light'] .sidebar a:hover{background:#eef2ff;color:#111827}
.sidebar a.active{background:#122141;color:#fff;border:1px solid #1f2a44}
:root[data-theme='light'] .sidebar a.active{background:#e8eef7;color:#111827;border:1px solid #c7d2fe}
/* Content */
.content{margin-left:240px;min-height:100vh;padding:20px}
/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
:root[data-theme='light'] .card{box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card-header{padding:10px 14px;border-bottom:1px solid var(--border);color:#cbd5e1;font-weight:600}
:root[data-theme='light'] .card-header{color:#334155}
.card-body{padding:12px 14px}
/* Top stat cards */
.card-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
@media(max-width:1200px){.card-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr}}
.stat-card{display:flex;align-items:center;gap:12px;padding:16px}
.stat-card .icon{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;background:#0e243d;color:#67e8f9;font-size:20px}
:root[data-theme='light'] .stat-card .icon{background:#eaf2ff;color:#1d4ed8}
.stat-card .meta .k{font-size:22px;font-weight:700;color:#fff}
:root[data-theme='light'] .stat-card .meta .k{color:#0f172a}
.stat-card .meta .t{font-size:12px;color:#9fb0c3}
:root[data-theme='light'] .stat-card .meta .t{color:#64748b}
/* Mini KPIs */
.mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
@media(max-width:1200px){.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.mini-grid{grid-template-columns:1fr}}
.mini-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.mini-card .mini-t{font-size:12px;color:#9fb0c3}
:root[data-theme='light'] .mini-card .mini-t{color:#64748b}
.mini-card .mini-k{font-size:18px;font-weight:700;color:#fff}
:root[data-theme='light'] .mini-card .mini-k{color:#0f172a}
/* Grids */
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:1000px){.grid-two{grid-template-columns:1fr}}
/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);color:var(--text)}
.table thead th{background:#0e1b32;color:#cbd5e1}
:root[data-theme='light'] .table thead th{background:#e8eef7;color:#0f172a}
.table tbody tr:nth-child(even){background:#0d172d}
:root[data-theme='light'] .table tbody tr:nth-child(even){background:#f6f8fb}
.table td,.table th{padding:10px;border-bottom:1px solid var(--border)}
/* Forms */
input,select,textarea{background:#0d172d;border:1px solid var(--border);color:#e2e8f0;border-radius:10px;padding:8px}
:root[data-theme='light'] input,:root[data-theme='light'] select,:root[data-theme='light'] textarea{background:#fff;border:1px solid var(--border);color:#0f172a}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 2px rgba(37,99,235,.2)}
/* Links & badges */
a{color:#93c5fd}a:hover{color:#bfdbfe}
:root[data-theme='light'] a{color:#2563eb}
/* colorful icons */
/* base FA icons inherit color; specific mappings below */
/* header icons inherit or follow specific icon mappings */
.page-title i{color:var(--primary)!important}
.card .card-header i{color:var(--c-blue)!important}
/* default sidebar icon color if no mapping */
.sidebar a i{color:var(--primary)!important}
/* optional support for SVG icons */
.sidebar a svg{stroke:var(--primary)!important; fill:currentColor}
.sidebar .side-section[data-key='dashboard'] .side-title i{color:var(--c-blue)!important}
.sidebar .side-section[data-key='sales'] .side-title i{color:var(--c-amber)!important}
.sidebar .side-section[data-key='purchases'] .side-title i{color:var(--c-blue)!important}
.sidebar .side-section[data-key='masters'] .side-title i{color:var(--c-violet)!important}
.sidebar .side-section[data-key='banking'] .side-title i{color:var(--c-cyan)!important}
.sidebar .side-section[data-key='accounting'] .side-title i{color:var(--c-slate)!important}
.sidebar .side-section[data-key='ifrs'] .side-title i{color:var(--c-violet)!important}
.sidebar .side-section[data-key='hr'] .side-title i{color:var(--c-green)!important}
.sidebar .side-section[data-key='service'] .side-title i{color:var(--c-red)!important}
.sidebar .side-section[data-key='quotation'] .side-title i{color:var(--c-blue)!important}
.sidebar .side-section[data-key='tax'] .side-title i{color:var(--c-amber)!important}
.sidebar .side-section[data-key='admin'] .side-title i{color:var(--c-gray)!important}
/* Header bar */
.headerbar{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.breadcrumbs{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--text)}
/* Buttons */
.btn{display:inline-block;background:#0e1b32;color:#e2e8f0;border:1px solid var(--border);border-radius:10px;padding:8px 12px;text-decoration:none;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn:hover{background:#122141;border-color:#24406d;color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:transparent;color:#93c5fd;border-color:#294169}
.btn.secondary:hover{background:#0d1933;color:#cfe1ff}
:root[data-theme='light'] .btn{background:#2563eb;color:#ffffff;border-color:#2563eb}
:root[data-theme='light'] .btn.secondary{background:transparent;color:#1d4ed8;border-color:#93c5fd}
/* Alerts */
.alert{padding:10px 12px;border-radius:10px;border:1px solid var(--border);margin:8px 0}
.alert-success{background:#0e243d;color:#a7f3d0;border-color:#0b3a3a}
/* Status pills */
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#0e1b32;color:#cbd5e1;font-size:12px}
:root[data-theme='light'] .status-pill{background:#eef2ff;color:#1e293b;border-color:#dbeafe}
.dot{width:8px;height:8px;border-radius:50%}.dot.ok{background:#16a34a}.dot.bad{background:#dc2626}

/* COMPREHENSIVE COLORFUL ICON SYSTEM */

/* Color Palette */
:root {
    --icon-blue: #3B82F6;
    --icon-green: #10B981;
    --icon-red: #EF4444;
    --icon-yellow: #F59E0B;
    --icon-purple: #8B5CF6;
    --icon-pink: #EC4899;
    --icon-indigo: #6366F1;
    --icon-teal: #14B8A6;
    --icon-orange: #F97316;
    --icon-cyan: #06B6D4;
    --icon-emerald: #059669;
    --icon-rose: #F43F5E;
    --icon-amber: #D97706;
    --icon-lime: #65A30D;
    --icon-violet: #7C3AED;
    --icon-gray: #6B7280;
}

/* Dashboard & Navigation Icons */
.fa-gauge, .fa-tachometer-alt, .fa-dashboard { color: var(--icon-blue) !important; }
.fa-home, .fa-house { color: var(--icon-blue) !important; }

/* Sales & Revenue Icons */
.fa-receipt, .fa-file-invoice, .fa-cash-register { color: var(--icon-green) !important; }
.fa-money-bill, .fa-dollar-sign, .fa-coins { color: var(--icon-emerald) !important; }
.fa-chart-line, .fa-trending-up { color: var(--icon-teal) !important; }

/* Inventory & Products Icons */
.fa-box, .fa-boxes, .fa-cube, .fa-cubes { color: var(--icon-orange) !important; }
.fa-warehouse, .fa-industry { color: var(--icon-amber) !important; }
.fa-barcode, .fa-qrcode { color: var(--icon-gray) !important; }

/* Customer & People Icons */
.fa-users, .fa-user-group, .fa-people-group { color: var(--icon-purple) !important; }
.fa-user, .fa-user-circle { color: var(--icon-indigo) !important; }
.fa-user-tie, .fa-user-suit { color: var(--icon-violet) !important; }
.fa-handshake, .fa-handshake-simple { color: var(--icon-pink) !important; }

/* Financial Icons */
.fa-building-columns, .fa-bank, .fa-university { color: var(--icon-cyan) !important; }
.fa-credit-card, .fa-wallet { color: var(--icon-blue) !important; }
.fa-scale-balanced, .fa-balance-scale { color: var(--icon-purple) !important; }
.fa-calculator { color: var(--icon-teal) !important; }
.fa-percent, .fa-percentage { color: var(--icon-yellow) !important; }

/* Shopping & E-commerce Icons */
.fa-cart-shopping, .fa-shopping-cart { color: var(--icon-orange) !important; }
.fa-shopping-bag, .fa-bag-shopping { color: var(--icon-rose) !important; }
.fa-store, .fa-shop { color: var(--icon-emerald) !important; }

/* Reports & Analytics Icons */
.fa-chart-bar, .fa-bar-chart { color: var(--icon-purple) !important; }
.fa-chart-pie, .fa-pie-chart { color: var(--icon-pink) !important; }
.fa-chart-area, .fa-area-chart { color: var(--icon-teal) !important; }
.fa-analytics, .fa-graph { color: var(--icon-indigo) !important; }

/* System & Admin Icons */
.fa-gear, .fa-cog, .fa-settings { color: var(--icon-gray) !important; }
.fa-wrench, .fa-tools { color: var(--icon-red) !important; }
.fa-server, .fa-database { color: var(--icon-blue) !important; }
.fa-shield, .fa-shield-alt { color: var(--icon-emerald) !important; }

/* Communication Icons */
.fa-envelope, .fa-mail { color: var(--icon-blue) !important; }
.fa-phone, .fa-mobile { color: var(--icon-green) !important; }
.fa-comment, .fa-comments { color: var(--icon-cyan) !important; }

/* Document Icons */
.fa-file, .fa-file-lines { color: var(--icon-blue) !important; }
.fa-file-pdf { color: var(--icon-red) !important; }
.fa-file-excel, .fa-file-csv { color: var(--icon-green) !important; }
.fa-file-word { color: var(--icon-blue) !important; }

/* Action Icons */
.fa-plus, .fa-add { color: var(--icon-green) !important; }
.fa-minus, .fa-subtract { color: var(--icon-red) !important; }
.fa-edit, .fa-pen, .fa-pencil { color: var(--icon-orange) !important; }
.fa-trash, .fa-delete { color: var(--icon-red) !important; }
.fa-save, .fa-floppy-disk { color: var(--icon-green) !important; }
.fa-print { color: var(--icon-gray) !important; }

/* Navigation Icons */
.fa-arrow-left, .fa-chevron-left { color: var(--icon-blue) !important; }
.fa-arrow-right, .fa-chevron-right { color: var(--icon-blue) !important; }
.fa-arrow-up, .fa-chevron-up { color: var(--icon-green) !important; }
.fa-arrow-down, .fa-chevron-down { color: var(--icon-red) !important; }

/* Status Icons */
.fa-check, .fa-check-circle { color: var(--icon-green) !important; }
.fa-times, .fa-times-circle, .fa-xmark { color: var(--icon-red) !important; }
.fa-exclamation, .fa-warning { color: var(--icon-yellow) !important; }
.fa-info, .fa-info-circle { color: var(--icon-blue) !important; }

/* Import/Export Icons */
.fa-upload, .fa-cloud-upload { color: var(--icon-green) !important; }
.fa-download, .fa-cloud-download { color: var(--icon-blue) !important; }
.fa-import { color: var(--icon-cyan) !important; }
.fa-export { color: var(--icon-orange) !important; }

/* Time & Calendar Icons */
.fa-clock, .fa-time { color: var(--icon-blue) !important; }
.fa-calendar, .fa-calendar-alt { color: var(--icon-red) !important; }
.fa-stopwatch, .fa-timer { color: var(--icon-orange) !important; }

/* Technology Icons */
.fa-robot, .fa-android { color: var(--icon-cyan) !important; }
.fa-microchip, .fa-cpu { color: var(--icon-purple) !important; }
.fa-wifi, .fa-signal { color: var(--icon-green) !important; }

/* Transportation Icons */
.fa-truck, .fa-shipping-fast { color: var(--icon-orange) !important; }
.fa-plane, .fa-flight { color: var(--icon-blue) !important; }
.fa-ship, .fa-boat { color: var(--icon-cyan) !important; }

/* UI Enhancement Icons */
.fa-star { color: var(--icon-yellow) !important; }
.fa-heart { color: var(--icon-red) !important; }
.fa-thumbs-up { color: var(--icon-green) !important; }
.fa-thumbs-down { color: var(--icon-red) !important; }

/* Specific ERP Context Icons */
.fa-industry { color: var(--icon-gray) !important; }
.fa-factory { color: var(--icon-amber) !important; }
.fa-building { color: var(--icon-blue) !important; }
.fa-briefcase { color: var(--icon-indigo) !important; }
.fa-clipboard { color: var(--icon-teal) !important; }
.fa-tasks, .fa-list-check { color: var(--icon-purple) !important; }

/* Override any existing boring blue defaults */
.sidebar a i, .card-header i, .btn i, .nav-link i {
    /* Let specific icon colors take precedence */
}

/* Hover effects for better interactivity */
.sidebar a:hover i, .btn:hover i, .nav-link:hover i {
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* Icon size consistency */
.fa, .fas, .far, .fab {
    font-size: inherit;
    vertical-align: middle;
}

/* Sidebar specific icon sizing */
.sidebar .fa, .sidebar .fas {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Card header icons */
.card-header .fa, .card-header .fas {
    margin-right: 8px;
}

/* Button icons */
.btn .fa, .btn .fas {
    margin-right: 6px;
}

/* Table action icons */
.table .fa, .table .fas {
    font-size: 14px;
}

/* Dashboard stat icons */
.stat-card .fa, .stat-card .fas {
    font-size: 24px;
}

/* Responsive icon adjustments */
@media (max-width: 768px) {
    .sidebar .fa, .sidebar .fas {
        font-size: 18px;
    }
    
    .stat-card .fa, .stat-card .fas {
        font-size: 20px;
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .fa, [data-theme="dark"] .fas, 
[data-theme="dark"] .far, [data-theme="dark"] .fab {
    filter: brightness(1.1);
}

/* Special FBR form icons */
.fbr-header .fa, .section-header .fa {
    margin-right: 8px;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ENHANCED COLORFUL ICON SYSTEM - Updated Icons */

/* Enhanced Color Palette for Better Distinction */
:root {
    --icon-blue: #2563EB;
    --icon-green: #059669;
    --icon-red: #DC2626;
    --icon-yellow: #D97706;
    --icon-purple: #7C3AED;
    --icon-pink: #DB2777;
    --icon-indigo: #4F46E5;
    --icon-teal: #0D9488;
    --icon-orange: #EA580C;
    --icon-cyan: #0891B2;
    --icon-emerald: #047857;
    --icon-rose: #E11D48;
    --icon-amber: #B45309;
    --icon-lime: #4D7C0F;
    --icon-violet: #6D28D9;
    --icon-slate: #475569;
}

/* Core Navigation Icons - Blue Theme */
.fa-gauge, .fa-tachometer-alt, .fa-dashboard { color: var(--icon-blue) !important; }
.fa-home, .fa-house { color: var(--icon-blue) !important; }

/* Sales & Money Icons - Green/Emerald Theme */
.fa-receipt, .fa-file-invoice, .fa-cash-register { color: var(--icon-emerald) !important; }
.fa-money-bill, .fa-dollar-sign, .fa-coins { color: var(--icon-green) !important; }
.fa-circle-arrow-down { color: var(--icon-green) !important; }

/* Expenses & Payments - Red/Orange Theme */
.fa-circle-arrow-up { color: var(--icon-red) !important; }
.fa-credit-card, .fa-wallet { color: var(--icon-orange) !important; }

/* Inventory & Products - Orange/Amber Theme */
.fa-box, .fa-boxes, .fa-cube, .fa-cubes { color: var(--icon-orange) !important; }
.fa-warehouse, .fa-industry { color: var(--icon-amber) !important; }
.fa-cart-shopping, .fa-shopping-cart { color: var(--icon-orange) !important; }

/* People & Customers - Purple/Indigo Theme */
.fa-users, .fa-user-group, .fa-people-group { color: var(--icon-purple) !important; }
.fa-user, .fa-user-circle { color: var(--icon-indigo) !important; }
.fa-user-tie, .fa-user-suit { color: var(--icon-violet) !important; }

/* Financial & Banking - Cyan/Teal Theme */
.fa-building-columns, .fa-bank, .fa-university { color: var(--icon-cyan) !important; }
.fa-scale-balanced, .fa-balance-scale { color: var(--icon-teal) !important; }
.fa-percent, .fa-percentage { color: var(--icon-amber) !important; }

/* Technology & System - Blue/Cyan Theme */
.fa-robot, .fa-android { color: var(--icon-cyan) !important; }
.fa-desktop, .fa-computer { color: var(--icon-blue) !important; }
.fa-network-wired, .fa-wifi { color: var(--icon-slate) !important; }

/* Reports & Analytics - Purple/Pink Theme */
.fa-chart-bar, .fa-bar-chart { color: var(--icon-purple) !important; }
.fa-chart-pie, .fa-pie-chart { color: var(--icon-pink) !important; }
.fa-chart-line, .fa-line-chart { color: var(--icon-teal) !important; }
.fa-layer-group { color: var(--icon-violet) !important; }

/* System Settings - Gray/Slate Theme */
.fa-gear, .fa-cog, .fa-settings { color: var(--icon-slate) !important; }
.fa-wrench, .fa-tools { color: var(--icon-red) !important; }

/* Actions - Contextual Colors */
.fa-plus, .fa-add { color: var(--icon-green) !important; }
.fa-minus, .fa-subtract { color: var(--icon-red) !important; }
.fa-edit, .fa-pen, .fa-pencil { color: var(--icon-orange) !important; }
.fa-trash, .fa-delete { color: var(--icon-red) !important; }
.fa-save, .fa-floppy-disk { color: var(--icon-green) !important; }

/* Status Icons */
.fa-check, .fa-check-circle { color: var(--icon-green) !important; }
.fa-times, .fa-times-circle, .fa-xmark { color: var(--icon-red) !important; }
.fa-exclamation, .fa-warning { color: var(--icon-yellow) !important; }
.fa-info, .fa-info-circle { color: var(--icon-blue) !important; }

/* File & Document Icons */
.fa-file, .fa-file-lines { color: var(--icon-blue) !important; }
.fa-file-pdf { color: var(--icon-red) !important; }
.fa-file-excel, .fa-file-csv { color: var(--icon-green) !important; }

/* Navigation */
.fa-arrow-left, .fa-chevron-left { color: var(--icon-blue) !important; }
.fa-arrow-right, .fa-chevron-right { color: var(--icon-blue) !important; }
.fa-arrow-up, .fa-chevron-up { color: var(--icon-green) !important; }
.fa-arrow-down, .fa-chevron-down { color: var(--icon-red) !important; }

/* Enhanced Hover Effects */
.sidebar a:hover i, .btn:hover i, .nav-link:hover i {
    filter: brightness(1.2) saturate(1.1);
    transform: scale(1.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Size and Positioning */
.sidebar .fa, .sidebar .fas {
    font-size: 16px;
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Dashboard Stats Icons */
.stat-card .fa, .stat-card .fas {
    font-size: 24px;
    opacity: 0.8;
}

/* Button Icons */
.btn .fa, .btn .fas {
    margin-right: 6px;
    font-size: 0.9em;
}

/* Window/Modal Close Buttons */
.close-button .fa, .close-button .fas {
    color: white !important;
}

/* Override any generic icon rules that might interfere */
.sidebar a i[class*="fa-"] {
    /* Specific icon colors take precedence */
}

/* FBR and Special Form Icons */
.fbr-header .fa, .section-header .fa {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-right: 8px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sidebar .fa, .sidebar .fas {
        font-size: 18px;
        margin-right: 6px;
    }
}

/* Dark Theme Enhancements */
[data-theme="dark"] .fa, [data-theme="dark"] .fas {
    filter: brightness(1.05);
}

/* Special Animation for Interactive Icons */
.clickable-icon {
    transition: all 0.2s ease;
    cursor: pointer;
}

.clickable-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Icon Consistency Rules */
.fa, .fas, .far, .fab {
    vertical-align: middle;
    line-height: 1;
}


/*
 * HEADLESS FORMS JAVASCRIPT SOLUTION
 * Copy the script below and add it to your layout or create a separate JS file
 */

/*
<script>

/* HEADLESS FORMS SOLUTION - Complete JavaScript Implementation */

(function() {
    'use strict';
    
    // Headless Forms Manager
    window.HeadlessFormsManager = {
        config: {
            windowWidth: 1200,
            windowHeight: 800,
            windowFeatures: 'width=1200,height=800,scrollbars=yes,resizable=yes,menubar=no,toolbar=no,location=no,status=no'
        },
        
        // Initialize the headless forms system
        init: function() {
            console.log('🖼️ Initializing Headless Forms System...');
            
            // Add CSS for headless mode
            this.addHeadlessStyles();
            
            // Convert form links to open in headless windows
            this.convertFormLinks();
            
            // Handle headless mode if current page is opened as headless
            this.handleHeadlessMode();
            
            // Add close button functionality to forms
            this.addCloseButtons();
            
            console.log('✅ Headless Forms System Ready!');
        },
        
        // Add CSS styles for headless forms
        addHeadlessStyles: function() {
            const style = document.createElement('style');
            style.textContent = `
                /* HEADLESS FORMS STYLES */
                
                /* Headless mode body styling */
                body.headless-mode {
                    margin: 0 !important;
                    padding: 0 !important;
                    background: #f8f9fa !important;
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
                }
                
                /* Hide sidebar and main navigation in headless mode */
                body.headless-mode .sidebar,
                body.headless-mode nav,
                body.headless-mode .navbar,
                body.headless-mode .header {
                    display: none !important;
                }
                
                body.headless-mode .content {
                    margin-left: 0 !important;
                    padding: 0 !important;
                    width: 100% !important;
                }
                
                /* Headless container */
                .headless-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    background: white;
                    min-height: 100vh;
                    position: relative;
                    box-shadow: 0 0 20px rgba(0,0,0,0.1);
                }
                
                /* Headless header */
                .headless-header {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    padding: 20px 25px;
                    position: relative;
                    border-bottom: 3px solid rgba(255,255,255,0.1);
                }
                
                .headless-title {
                    font-size: 24px;
                    font-weight: 600;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                }
                
                .headless-subtitle {
                    font-size: 14px;
                    opacity: 0.9;
                    margin-top: 4px;
                }
                
                /* Close button */
                .headless-close-btn {
                    position: fixed !important;
                    top: 15px;
                    right: 20px;
                    background: rgba(220, 53, 69, 0.9) !important;
                    border: 1px solid rgba(220, 53, 69, 1) !important;
                    color: white !important;
                    border-radius: 6px;
                    padding: 8px 14px;
                    cursor: pointer;
                    font-size: 13px;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    z-index: 9999 !important;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
                }
                
                .headless-close-btn:hover {
                    background: rgba(220, 53, 69, 1) !important;
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
                }
                
                /* Enhanced form wrapper */
                body.headless-mode .card,
                body.headless-mode .form-wrapper {
                    border: 1px solid #e9ecef;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                    margin: 20px;
                }
                
                body.headless-mode .card-header {
                    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                    border-bottom: 1px solid #dee2e6;
                    font-weight: 600;
                    color: #495057;
                    padding: 15px 20px;
                }
                
                body.headless-mode .card-body {
                    padding: 25px;
                }
                
                /* Form enhancements */
                body.headless-mode .form-control,
                body.headless-mode .form-select {
                    border: 2px solid #e9ecef;
                    border-radius: 6px;
                    padding: 10px 12px;
                    font-size: 14px;
                    transition: all 0.2s ease;
                }
                
                body.headless-mode .form-control:focus,
                body.headless-mode .form-select:focus {
                    outline: none;
                    border-color: #667eea;
                    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                }
                
                /* Button enhancements */
                body.headless-mode .btn {
                    border-radius: 6px;
                    font-weight: 500;
                    transition: all 0.2s ease;
                    padding: 10px 16px;
                }
                
                body.headless-mode .btn:hover {
                    transform: translateY(-1px);
                }
                
                body.headless-mode .btn-primary {
                    background: linear-gradient(135deg, #667eea, #764ba2);
                }
                
                body.headless-mode .btn-success {
                    background: linear-gradient(135deg, #28a745, #20c997);
                }
                
                /* Loading overlay */
                .headless-loading {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255,255,255,0.9);
                    display: none;
                    align-items: center;
                    justify-content: center;
                    z-index: 10000;
                }
                
                .headless-spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px solid #e9ecef;
                    border-top: 4px solid #667eea;
                    border-radius: 50%;
                    animation: headless-spin 1s linear infinite;
                }
                
                @keyframes headless-spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
                
                /* Headless link indicators */
                .headless-link-indicator {
                    color: #667eea !important;
                    margin-left: 4px !important;
                    opacity: 0.7 !important;
                    font-size: 0.75em !important;
                    transition: opacity 0.2s ease !important;
                }
                
                a:hover .headless-link-indicator {
                    opacity: 1 !important;
                }
                
                /* Responsive design */
                @media (max-width: 768px) {
                    .headless-container {
                        margin: 0;
                        box-shadow: none;
                    }
                    
                    .headless-close-btn {
                        top: 10px;
                        right: 15px;
                        padding: 6px 10px;
                        font-size: 12px;
                    }
                    
                    body.headless-mode .card,
                    body.headless-mode .form-wrapper {
                        margin: 10px;
                    }
                }
            `;
            
            document.head.appendChild(style);
        },
        
        // Convert form links to open in headless windows
        convertFormLinks: function() {
            // Selectors for form links
            const formLinkSelectors = [
                'a[href*="add_"]',
                'a[href*="create"]',
                'a[href*="/edit"]',
                'a[href*="_form"]',
                '.chip[href*="add_"]',
                '.chip[href*="create"]'
            ];
            
            const selector = formLinkSelectors.join(', ');
            const links = document.querySelectorAll(selector);
            
            links.forEach(link => {
                // Skip if already converted
                if (link.dataset.headlessConverted) return;
                
                const originalHref = link.getAttribute('href');
                if (!originalHref) return;
                
                // Skip external links and anchors
                if (originalHref.startsWith('http') || originalHref.startsWith('#')) return;
                
                // Extract title for window
                const title = this.extractFormTitle(originalHref, link);
                
                // Add click handler
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.openHeadlessForm(originalHref, title);
                });
                
                // Mark as converted and add indicator
                link.dataset.headlessConverted = 'true';
                
                // Add visual indicator
                if (!link.querySelector('.headless-link-indicator')) {
                    const indicator = document.createElement('i');
                    indicator.className = 'fas fa-external-link-alt headless-link-indicator';
                    link.appendChild(indicator);
                }
            });
            
            console.log(`✅ Converted ${links.length} links to headless forms`);
        },
        
        // Open form in headless window
        openHeadlessForm: function(url, title = 'Form') {
            // Center window on screen
            const screenWidth = window.screen.availWidth;
            const screenHeight = window.screen.availHeight;
            const windowWidth = this.config.windowWidth;
            const windowHeight = this.config.windowHeight;
            
            const left = (screenWidth - windowWidth) / 2;
            const top = (screenHeight - windowHeight) / 2;
            
            const features = `width=${windowWidth},height=${windowHeight},left=${left},top=${top},scrollbars=yes,resizable=yes,menubar=no,toolbar=no,location=no,status=no`;
            
            // Add headless parameter to URL
            const separator = url.includes('?') ? '&' : '?';
            const headlessUrl = url + separator + 'headless=1';
            
            // Open window
            const newWindow = window.open(headlessUrl, 'headless_form_' + Date.now(), features);
            
            if (newWindow) {
                newWindow.focus();
                console.log(`🖼️ Opened headless form: ${title}`);
                
                // Handle window close to refresh parent if needed
                const checkClosed = setInterval(() => {
                    if (newWindow.closed) {
                        clearInterval(checkClosed);
                        // Optional: refresh specific parts of page
                        this.onFormClosed();
                    }
                }, 1000);
                
                return newWindow;
            } else {
                alert('Pop-up blocked! Please allow pop-ups to open forms in new windows.');
                // Fallback: navigate in same window
                window.location.href = headlessUrl;
            }
        },
        
        // Handle when headless form is closed
        onFormClosed: function() {
            // Optionally refresh dashboard or specific sections
            if (window.location.href.includes('dashboard')) {
                // You can add specific refresh logic here
                console.log('📝 Form window closed, consider refreshing data');
            }
        },
        
        // Extract form title from URL and link
        extractFormTitle: function(url, link) {
            const linkText = link.textContent.trim();
            
            // Try to extract from URL
            const urlPatterns = [
                { pattern: /add_([a-z_]+)/i, prefix: 'Add New ' },
                { pattern: /([a-z_]+)\/create/i, prefix: 'Create ' },
                { pattern: /([a-z_]+)\/edit/i, prefix: 'Edit ' },
                { pattern: /([a-z_]+)_form/i, prefix: 'Add ' }
            ];
            
            for (const { pattern, prefix } of urlPatterns) {
                const match = url.match(pattern);
                if (match) {
                    const entity = match[1].replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                    return prefix + entity;
                }
            }
            
            // Fallback to link text or generic
            return linkText || 'Form';
        },
        
        // Handle headless mode for current page
        handleHeadlessMode: function() {
            // Check if current page is opened in headless mode
            const urlParams = new URLSearchParams(window.location.search);
            const isHeadless = urlParams.has('headless');
            
            if (isHeadless) {
                console.log('🖼️ Page opened in headless mode');
                document.body.classList.add('headless-mode');
                
                // Add close button
                this.addCloseButton();
                
                // Add form submission handling
                this.handleFormSubmissions();
                
                // Focus first input
                this.focusFirstInput();
                
                // Handle ESC key
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        this.closeWindow();
                    }
                });
            }
        },
        
        // Add close button to headless forms
        addCloseButton: function() {
            // Check if close button already exists
            if (document.querySelector('.headless-close-btn')) return;
            
            const closeBtn = document.createElement('button');
            closeBtn.className = 'headless-close-btn';
            closeBtn.innerHTML = '<i class="fas fa-times"></i> Close';
            closeBtn.onclick = () => this.closeWindow();
            
            document.body.appendChild(closeBtn);
        },
        
        // Add close buttons to existing forms (non-headless)
        addCloseButtons: function() {
            // Add close functionality to any existing modal or drawer forms
            const existingForms = document.querySelectorAll('.modal, .drawer, .offcanvas');
            
            existingForms.forEach(form => {
                const closeBtn = form.querySelector('.close, .btn-close, [data-dismiss]');
                if (closeBtn && !closeBtn.dataset.headlessEnhanced) {
                    closeBtn.dataset.headlessEnhanced = 'true';
                    closeBtn.style.cssText += 'background: #dc3545; color: white; border-radius: 4px; padding: 4px 8px;';
                }
            });
        },
        
        // Handle form submissions in headless mode
        handleFormSubmissions: function() {
            const forms = document.querySelectorAll('form');
            
            forms.forEach(form => {
                form.addEventListener('submit', (e) => {
                    this.showLoading();
                    
                    // Auto-close on successful submission (optional)
                    setTimeout(() => {
                        if (window.location.search.includes('headless') && 
                            document.querySelector('.alert-success')) {
                            setTimeout(() => this.closeWindow(), 2000);
                        }
                        this.hideLoading();
                    }, 1000);
                });
            });
        },
        
        // Focus first input field
        focusFirstInput: function() {
            setTimeout(() => {
                const firstInput = document.querySelector('input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea');
                if (firstInput) {
                    firstInput.focus();
                }
            }, 100);
        },
        
        // Show loading overlay
        showLoading: function() {
            let overlay = document.querySelector('.headless-loading');
            if (!overlay) {
                overlay = document.createElement('div');
                overlay.className = 'headless-loading';
                overlay.innerHTML = '<div class="headless-spinner"></div>';
                document.body.appendChild(overlay);
            }
            overlay.style.display = 'flex';
        },
        
        // Hide loading overlay
        hideLoading: function() {
            const overlay = document.querySelector('.headless-loading');
            if (overlay) {
                overlay.style.display = 'none';
            }
        },
        
        // Close current window
        closeWindow: function() {
            if (window.opener) {
                window.opener.focus();
            }
            window.close();
        }
    };
    
    // Auto-initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            window.HeadlessFormsManager.init();
        });
    } else {
        window.HeadlessFormsManager.init();
    }
    
    // Re-initialize on dynamic content changes
    const observer = new MutationObserver(() => {
        if (window.HeadlessFormsManager) {
            window.HeadlessFormsManager.convertFormLinks();
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    
})();

// Export for global access
window.openHeadlessForm = function(url, title) {
    if (window.HeadlessFormsManager) {
        window.HeadlessFormsManager.openHeadlessForm(url, title);
    }
};

console.log('🚀 Headless Forms System Loaded!');

</script>
*/

/* HEADLESS FORMS CSS - Integrated Solution */

/* Headless mode detection and styling */
body[data-headless="true"], 
body.headless-mode,
body[class*="headless"] {
    margin: 0 !important;
    padding: 0 !important;
    background: #f8f9fa !important;
}

/* Hide navigation in headless mode */
body[data-headless="true"] .sidebar,
body.headless-mode .sidebar,
body[data-headless="true"] nav,
body.headless-mode nav {
    display: none !important;
}

body[data-headless="true"] .content,
body.headless-mode .content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Headless close button */
.headless-close-button {
    position: fixed !important;
    top: 15px;
    right: 20px;
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    z-index: 9999 !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    transition: all 0.2s ease;
}

.headless-close-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

/* Enhanced forms in headless mode */
body[data-headless="true"] .card,
body.headless-mode .card {
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

body[data-headless="true"] .form-control,
body.headless-mode .form-control {
    border: 2px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.2s ease;
}

body[data-headless="true"] .form-control:focus,
body.headless-mode .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Headless link indicators */
.headless-link-indicator {
    margin-left: 4px !important;
    font-size: 0.75em !important;
    opacity: 0.7 !important;
    color: #667eea !important;
    transition: opacity 0.2s ease !important;
}

a:hover .headless-link-indicator {
    opacity: 1 !important;
}

/* Responsive headless design */
@media (max-width: 768px) {
    .headless-close-button {
        top: 10px;
        right: 15px;
        padding: 6px 10px;
        font-size: 12px;
    }
    
    body[data-headless="true"] .card,
    body.headless-mode .card {
        margin: 10px;
    }
}