/* =====================================================
   EDM CORE — ENTERPRISE GLOBAL UI SYSTEM
===================================================== */

/* ================= ROOT VARIABLES ================= */

:root{
    --edm-orange:#f2531e;
    --dark:#0f172a;
    --muted:#6b7280;
    --card:#ffffff;
    --radius:14px;
}

/* ================= GLOBAL ================= */

body{
    margin:0;
    font-family:'Poppins', sans-serif;
    background:#f5f6f8;
    color:#111827;
}

html,body{
    overflow-x:hidden;
}

/* ================= HEADER ================= */

.top-header{
    height:60px;
    background:#ffffff;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:6000;
}

/* ================= LAYOUT ================= */

.layout-wrapper{
    display:flex;
    margin-top:60px;
    min-height:calc(100vh - 60px);
}

.main-content{
    flex:1;
    padding:40px;
    min-width:0;
    height:calc(100vh - 60px);
    overflow-y:auto;
}

/* ================= SIDEBAR ================= */

.sidebar{
    width:230px;
    background:#0f172a;
    overflow-y:auto;
    flex-shrink:0;
    height:calc(100vh - 60px);

}

.sidebar a{
    display:block;
    padding:10px 18px;
    color:#cbd5e1;
    text-decoration:none;
    font-size:13.5px;
    transition:0.2s;
}

.sidebar a:hover{
    background:rgba(242,83,30,0.10);
    color:#ffffff;
    border-left:4px solid var(--edm-orange);
    padding-left:16px;
}

.sidebar a.active{
    background:rgba(242,83,30,0.15);
    color:var(--edm-orange);
    border-left:4px solid var(--edm-orange);
    font-weight:600;
    padding-left:16px;
}

/* ================= SUBMENU ================= */

.menu-toggle{
    display:flex;
    justify-content:space-between;
    padding:10px 18px;
    color:#cbd5e1;
    font-size:13.5px;
    cursor:pointer;
}

.menu-parent.open .submenu{
    display:block;
}

.submenu{
    display:none;
}

.submenu a{
    padding:8px 34px;
    font-size:13px;
}

/* ================= BREADCRUMB ================= */

.breadcrumb{
    display:flex;
    gap:8px;
    font-size:13px;
    margin-bottom:25px;
    color:#6b7280;
}

.breadcrumb a{
    text-decoration:none;
    color:#6b7280;
}

.breadcrumb a:hover{
    color:var(--edm-orange);
}

.breadcrumb .active{
    color:var(--edm-orange);
    font-weight:600;
}

/* ================= PAGE HEADER ================= */

.page-header{
    margin-bottom:25px;
}

.page-header h2{
    font-size:28px;
    margin-bottom:6px;
    color:var(--edm-orange);
}

.page-subtitle{
    font-size:14px;
    color:var(--muted);
}

/* ================= DASHBOARD CARDS ================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.stat-card{
    background:var(--card);
    padding:22px;
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
    border-left:5px solid var(--edm-orange);
}

.stat-card .number{
    font-size:26px;
    font-weight:700;
    margin-top:8px;
}

/* ================= TABLE ================= */

.table-wrap{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
    overflow-x:auto;
}

table{
    width:100%;
    min-width:900px;
    border-collapse:collapse;
}

th,td{
    padding:14px;
    border-bottom:1px solid #e5e7eb;
    font-size:14px;
}

th{
    background:#111827;
    color:#ffffff;
    text-align:left;
}

/* ================= BADGES ================= */

.badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    color:#fff;
}

.badge-success{ background:#16a34a; }
.badge-warning{ background:#f59e0b; }
.badge-danger{ background:#dc2626; }
.badge-muted{ background:#6b7280; }

/* ================= BUTTON SYSTEM ================= */

.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:0.2s ease;
}

.btn-primary{
    background:var(--edm-orange);
    color:#fff;
}

.btn-dark{
    background:#111827;
    color:#fff;
}

.btn-light{
    background:#f3f4f6;
    color:#111827;
}

.btn-danger{
    background:#dc2626;
    color:#fff;
}

.btn:hover{
    opacity:0.9;
}

/* ================= FILTER CARD ================= */

.filter-card{
    background:var(--card);
    padding:18px 20px;
    border-radius:var(--radius);
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    margin-bottom:20px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    align-items:center;
}

.filter-card input,
.filter-card select{
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
}

/* ================= FORM CARD ================= */

.card-form{
    background:var(--card);
    padding:30px;
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(0,0,0,0.05);
    max-width:600px;
}

.card-form input,
.card-form select,
.card-form textarea{
    width:100%;
    padding:10px;
    margin-bottom:15px;
    border-radius:8px;
    border:1px solid #ddd;
}

.card-form input:focus,
.card-form select:focus,
.card-form textarea:focus{
    outline:none;
    border-color:var(--edm-orange);
    box-shadow:0 0 0 2px rgba(242,83,30,0.15);
}

/* ================= ALERTS ================= */

.alert{
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
    font-size:14px;
}

.alert-success{
    background:#e6ffed;
    color:#0a7a2f;
}

.alert-error{
    background:#fdecea;
    color:#b42318;
}

/* ================= MOBILE ================= */

@media (max-width:900px){

    .sidebar{
        position:fixed;
        top:60px;
        left:-100%;
        width:260px;
        height:calc(100vh - 60px);
        transition:left 0.3s ease;
        z-index:5000;
    }

    .sidebar.open{
        left:0;
    }

    .main-content{
        padding:20px;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }
}

/* ================= PERMISSION GRID ================= */

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.permission-card {
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 10px;
}

.permission-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.permission-card label {
    font-size: 14px;
    cursor: pointer;
}

/* =============================
   PROJECT STAT CARDS
============================= */

.stat-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    font-size: 14px;
}

/* STATUS COLORS */
.status {
    padding:4px 8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:#fff;
}

.status.pending { background:#6c757d; }
.status.assigned { background:#0d6efd; }
.status.in_progress { background:#fd7e14; }
.status.completed { background:#198754; }

/* PROGRESS BAR */
.progress-bar {
    background:#eee;
    border-radius:8px;
    overflow:hidden;
    height:20px;
}

.progress-fill {
    background:#0d6efd;
    height:100%;
    text-align:center;
    font-size:12px;
    color:#fff;
    line-height:20px;
}

/* ================= OPERATIONS REPORTS ================= */

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.report-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    border-left: 5px solid #f2531e;
}

.metric {
    font-size: 32px;
    font-weight: 700;
    margin-top: 10px;
    color: #0f172a;
}

.metric.warning {
    color: #f59e0b;
}

.metric.danger {
    color: #ef4444;
}

/* ===============================
   HEADER SPACING FIX
================================ */

.top-header {
    display: flex;
    align-items: center;
    gap: 20px; /* space between hamburger and branding */
}

.hamburger {
    margin-right: 10px; /* extra breathing room */
}

.system-branding {
    display: flex;
    flex-direction: column;
}
/* ===============================
   GLOBAL PRELOADER (Desktop + Mobile)
================================ */

#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    font-size: 22px;
    font-weight: 600;
    color: var(--edm-orange);
    margin-bottom: 15px;
}

.loader-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--edm-orange);
    border-radius: 50%;
    margin: 0 4px;
    animation: bounce 0.6s infinite alternate;
}

.loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    from { transform: translateY(0); opacity: 0.6; }
    to { transform: translateY(-8px); opacity: 1; }
}

/* =====================================================
   METER INVENTORY STATUS COLORS (SAFE ADDITION)
   Does NOT modify any existing styles
===================================================== */

.status.IN_STOCK {
    background:#16a34a; /* green */
}

.status.WITH_DISTRIBUTOR {
    background:#2563eb; /* blue */
}

.status.INSTALLED {
    background:#6b7280; /* gray */
}

.status.FAULTY {
    background:#dc2626; /* red */
}

/* ===============================
   MODERN TRADE JOB FORM
=================================*/

.modern-card {
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.full-width {
    grid-column: 1 / -1;
}

.half-width {
    grid-column: span 1;
}

.modern-input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    transition: 0.2s ease;
    font-size: 14px;
}

.modern-input:focus {
    border-color: #f2531e;
    box-shadow: 0 0 0 3px rgba(242,83,30,0.15);
    outline: none;
}

.modern-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
}

.modern-btn-light {
    padding: 12px 20px;
    border-radius: 10px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

/* Mobile */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Status Badge Styling ===== */

.status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* ACTIVE */
.status.ACTIVE {
    background-color: #dcfce7;   /* light green */
    color: #166534;              /* dark green */
}

/* SUSPENDED */
.status.SUSPENDED {
    background-color: #fef3c7;   /* light amber */
    color: #92400e;              /* dark amber */
}

/* DISCONNECTED */
.status.DISCONNECTED {
    background-color: #fee2e2;   /* light red */
    color: #991b1b;              /* dark red */
}

/* =====================================================
   BANKING MANAGEMENT (Banking Module)
   - tighter table rows
   - better toolbar layout
   - mobile scroll
===================================================== */

.banking-toolbar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:14px;
    align-items:center;
}

.banking-card{
    padding:12px;
    margin-bottom:14px;
}

.banking-upload{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.banking-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin:10px 0 12px 0;
    font-size:14px;
    opacity:.95;
}

/* tighter rows ONLY for this table */
.banking-table td,
.banking-table th{
    padding:8px 10px !important;
    vertical-align:middle;
}

.banking-table input,
.banking-table select{
    height:32px;
    padding:6px 8px;
    width:100%;
    box-sizing:border-box;
}

.banking-actions .btn{
    padding:6px 10px;
}

.banking-add-row{
    background:#f9f9f9;
}

.banking-pagination{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:12px;
}

.banking-pageinfo{
    margin-left:8px;
    opacity:.85;
}

/* Use your table-wrap but ensure scroll works nicely */
.table-wrap{
    overflow:auto;
}

@media (max-width:720px){
    .banking-meta{font-size:13px;}
    .banking-table{min-width:820px;}
}

/* ===============================
DATA TABLE
=============================== */

.data-table{
width:100%;
border-collapse:collapse;
font-size:14px;
background:#fff;
border-radius:8px;
overflow:hidden;
}

.data-table thead{
background:#0f172a;
color:#fff;
}

.data-table th{
padding:12px;
text-align:left;
font-weight:600;
}

.data-table td{
padding:10px;
border-bottom:1px solid #e5e7eb;
}

.data-table tbody tr:hover{
background:#f8fafc;
}

/* ===============================
STATUS BADGES
=============================== */

.status-badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* draft */

.status-draft{
background:#f1f5f9;
color:#475569;
}

/* sent */

.status-sent{
background:#dbeafe;
color:#1d4ed8;
}

/* converted */

.status-converted{
background:#dcfce7;
color:#166534;
}

/* cancelled */

.status-cancelled{
background:#fee2e2;
color:#991b1b;
}

/* ===============================
ACTION BUTTONS
=============================== */

.btn-small{
padding:4px 10px;
border-radius:6px;
font-size:12px;
text-decoration:none;
margin-right:5px;
}

.btn-small.view{
background:#e0f2fe;
color:#0369a1;
}

.btn-small.edit{
background:#fef3c7;
color:#92400e;
}

/* ===============================
QUOTE TABLE IMPROVEMENT
=============================== */

.quote-table th,
.quote-table td{
    padding:10px 12px;
    vertical-align:middle;
}

.quote-table select,
.quote-table input,
.quote-table textarea{
    width:100%;
    padding:6px 8px;
    border-radius:6px;
    border:1px solid #ddd;
    font-size:13px;
}

.quote-table textarea{
    height:32px;
}

/* ===============================
QUOTE SETTINGS
=============================== */

.quote-settings{
    display:flex;
    gap:40px;
    margin-top:25px;
}

.quote-setting label{
    font-size:13px;
    font-weight:600;
}

.quote-setting input,
.quote-setting select{
    margin-top:5px;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #ddd;
}

/* ===============================
QUOTE SETTINGS
=============================== */

.quote-settings{
display:flex;
gap:40px;
margin-top:20px;
margin-bottom:20px;
}

.quote-setting{
display:flex;
flex-direction:column;
}

.quote-setting input,
.quote-setting select{
margin-top:5px;
padding:6px 10px;
border-radius:6px;
border:1px solid #ddd;
width:200px;
}
.status{
font-weight:600;
color:#f2531e !important;
}

/* ===== FORM LAYOUT (InfraCore Forms) ===== */

.form-row{
display:flex;
gap:20px;
margin-bottom:15px;
}

.form-group{
flex:1;
display:flex;
flex-direction:column;
}

.form-group label{
font-weight:600;
margin-bottom:5px;
}

.form-group input,
.form-group select,
.form-group textarea{
padding:8px 10px;
border:1px solid #d1d5db;
border-radius:6px;
width:100%;
font-size:14px;
}

.form-group textarea{
min-height:80px;
}

.form-actions{
margin-top:20px;
display:flex;
gap:10px;
}

/* SUPPLIER DASHBOARD */

.dashboard-cards{
display:flex;
gap:20px;
margin-bottom:20px;
}

.card-small{
background:white;
border-radius:8px;
padding:20px;
flex:1;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.card-small h4{
margin:0;
font-size:14px;
color:#6b7280;
}

.card-small p{
font-size:24px;
font-weight:700;
margin-top:8px;
color:#111827;
}

.tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.tab-btn {
padding: 8px 15px;
background: #f1f1f1;
border-radius: 6px;
text-decoration: none;
color: #333;
font-weight: 500;
}

.tab-btn:hover {
background: #ddd;
}

.tab-btn.active {
background: #f2531e;
color: white;
}

/* ===============================
   ACTION DROPDOWN (METERS)
================================ */

.action-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 0;
    min-width: 180px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 999;
}

.action-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background 0.2s ease;
}

.action-menu a:hover {
    background: #f9fafb;
}

/* Optional: better button look */
.btn-dark {
    background: #111827;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-dark:hover {
    background: #1f2937;
}

.sidebar-dropdown > a {
    cursor: pointer;
    display: block;
    padding: 10px;
}

.sidebar-submenu a {
    padding-left: 25px;
    display: block;
}

.sidebar-submenu {
    transition: all 0.3s ease;
}

/* ===== SAFE SIDEBAR ICON SUPPORT (NO BREAKAGE) ===== */

.sidebar a,
.menu-toggle{
    display:flex;
    align-items:center;
    gap:10px;
}

.sidebar i{
    width:18px;
    text-align:center;
    font-size:14px;
    opacity:0.9;
}

/* ===== ENHANCED SIDEBAR MENU (SAFE) ===== */

/* Parent menu */
.menu-parent {
    transition: all 0.2s ease;
}

/* Toggle row */
.menu-toggle {
    position: relative;
    font-weight: 500;
}

/* Arrow */
.menu-toggle .arrow {
    margin-left: auto;
    transition: transform 0.25s ease;
    font-size: 12px;
    opacity: 0.7;
}

/* Rotate arrow when open */
.menu-parent.open .arrow {
    transform: rotate(180deg);
}

/* Submenu animation */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

/* When open */
.menu-parent.open .submenu {
    max-height: 500px; /* enough for items */
}

/* Submenu links */
.submenu a {
    padding-left: 36px;
    font-size: 13px;
    opacity: 0.85;
}

/* Submenu hover */
.submenu a:hover {
    opacity: 1;
    background: rgba(242,83,30,0.08);
}

/* Active child */
.submenu a.active {
    color: #fff;
    background: rgba(242,83,30,0.15);
}

/* ===== ACTIVE PARENT MENU ===== */

.menu-parent.active-parent > .menu-toggle {
    background: rgba(242,83,30,0.15);
    color: #fff;
    border-left: 3px solid #f2531e;
}

/* Optional: stronger icon */
.menu-parent.active-parent > .menu-toggle i {
    color: #fff;
}

/* Better mobile spacing */
@media (max-width:900px){

    .menu-toggle span,
    .submenu a{
        font-size:14px;
    }

    .sidebar i{
        width:22px;
        font-size:15px;
    }
}
/* ===== ICON COLOR CONTROL ===== */

/* default icon */
.sidebar i{
    color:#9ca3af;
    transition:0.2s ease;
}

/* hover */
.sidebar a:hover i{
    color:#ffffff;
}

/* active child */
.sidebar a.active i{
    color:var(--edm-orange);
}

/* active parent */
.menu-parent.active-parent > .menu-toggle i{
    color:#ffffff;
}

/* ===== MINI SIDEBAR MODE ===== */

.sidebar.collapsed{
    width:70px;
}
/* ===== HOVER EXPAND SIDEBAR ===== */

.sidebar.collapsed:hover{
    width:230px;
}

/* show text again when hovering */
.sidebar.collapsed:hover a span,
.sidebar.collapsed:hover .menu-toggle span{
    display:inline;
}

/* restore submenu when hovering */
.sidebar.collapsed:hover .submenu{
    display:block !important;
}

.sidebar.collapsed a span,
.sidebar.collapsed .menu-toggle span{
    display:none;
}

/* center icons */
.sidebar.collapsed a,
.sidebar.collapsed .menu-toggle{
    justify-content:center;
}

/* submenu hidden in mini mode */
.sidebar.collapsed .submenu{
    display:none !important;
}

/* ===== SIDEBAR SECTION TITLE ===== */

.sidebar-section{
    padding:12px 16px 6px;
    font-size:11px;
    text-transform:uppercase;
    color:#6b7280;
    letter-spacing:0.5px;
}
/* ===== SIDEBAR DIVIDER ===== */

.sidebar-divider{
    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        rgba(242,83,30,0.6),
        transparent
    );
    margin:14px 0;
}

#profiles-container{
    width:100%;
    display:block;
    clear:both;
}

/* ACTIVE PROFILE BUTTON */
.profile-btn.active-profile{
    background: var(--edm-orange);
    color:#fff;
    border-color: var(--edm-orange);
}

#activity-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    max-height: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow-y: auto;
    z-index: 99999;
    font-size: 13px;
}

#activity-panel .title {
    background: #f2531e;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    position: sticky;
    top: 0;
}

#activity-panel .item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

#activity-panel .item:hover {
    background: #f9fafb;
}