/* Brand asset is centralized in Components/Shared/BrandLogo.razor. */
.electric-sidebar-logo { display:block; flex:none; width:48px; height:48px; object-fit:contain; }
.brand-block { gap:10px; }
.brand-copy strong { font-size: .92rem; }

.electric-login { --ink:#0e2742; --navy:#092848; --blue:#12649b; --muted:#64778c; --line:#dce6ee; display:grid; grid-template-columns:minmax(390px,.9fr) minmax(440px,1.1fr); min-height:100dvh; color:var(--ink); background:#fff; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.electric-login * { box-sizing:border-box; }
.electric-login-intro { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:55px; padding:clamp(28px,4vw,64px); overflow:hidden; color:#fff; background:linear-gradient(150deg,#082845 0%,#0b3d65 63%,#125c8e 100%); }
.electric-login-intro::after { content:""; position:absolute; right:-185px; bottom:-215px; width:520px; height:520px; border:80px solid rgba(255,255,255,.045); border-radius:50%; pointer-events:none; }
.electric-login-brand,.electric-login-message,.electric-login-intro-footer { position:relative; z-index:1; }
.electric-login-brand { display:flex; align-items:center; gap:15px; }
.electric-login-logo { width:58px; height:58px; flex:none; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.15)); }
.electric-login-brand div { display:grid; gap:3px; }
.electric-login-brand strong { font-size:16px; font-weight:700; letter-spacing:.06em; }
.electric-login-brand span { color:#b6d5e9; font-size:12px; }
.electric-login-eyebrow { color:#1974ae; font-size:11px; font-weight:700; letter-spacing:.12em; }
.electric-login-intro .electric-login-eyebrow { color:#9bd6f7; }
.electric-login-message { max-width:520px; }
.electric-login-message h1 { margin:17px 0 16px; font-size:clamp(30px,3.5vw,49px); line-height:1.13; letter-spacing:-.035em; font-weight:700; }
.electric-login-message p { max-width:430px; margin:0; color:#c3d9e9; line-height:1.65; font-size:14px; }
.electric-login-modules { display:flex; flex-wrap:wrap; gap:9px; margin-top:31px; }
.electric-login-modules span { display:inline-flex; align-items:center; gap:8px; min-height:37px; padding:7px 11px; border:1px solid rgba(197,228,247,.22); border-radius:8px; color:#e7f4fc; background:rgba(255,255,255,.075); font-size:12px; }
.electric-login-intro-footer { display:grid; gap:5px; color:#a6c6dd; font-size:11px; }
.electric-login-intro-footer span { opacity:.75; }
.electric-login-workspace { position:relative; display:grid; place-items:center; padding:58px clamp(24px,5vw,72px); }
.electric-login-form { width:min(100%,420px); }
.electric-login-form h2 { margin:10px 0 6px; font-size:clamp(26px,2.6vw,34px); line-height:1.2; letter-spacing:-.035em; font-weight:700; }
.electric-login-lead { margin:0 0 34px; color:var(--muted); font-size:14px; line-height:1.6; }
.electric-login-field { display:grid; gap:9px; margin:0 0 20px; color:#25425e; font-size:13px; font-weight:600; }
.electric-login-input { position:relative; display:flex; align-items:center; }
.electric-login-input > i { position:absolute; left:15px; color:#7a91a5; font-size:17px; pointer-events:none; }
.electric-login-input input { width:100%; min-height:52px; padding:0 45px; color:var(--ink); background:#fff; border:1px solid #cfdae5; border-radius:10px; outline:none; font:inherit; font-size:15px; font-weight:400; transition:border-color .16s,box-shadow .16s; }
.electric-login-input input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,100,155,.13); }
.electric-login-input input::placeholder { color:#9aa9b7; }
.electric-password-toggle { position:absolute; right:5px; display:grid; place-items:center; width:43px; height:43px; padding:0; color:#657a8f; background:transparent; border:0; border-radius:8px; font-size:17px; }
.electric-password-toggle:hover,.electric-password-toggle:focus-visible { color:var(--blue); background:#f0f6fa; }
.electric-login-help { display:flex; justify-content:flex-end; margin:-4px 0 23px; }
.electric-login-help button,.electric-login-support button { padding:2px 0; color:var(--blue); background:none; border:0; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.electric-login-help button { font-size:13px; }
.electric-login-submit { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; min-height:52px; padding:12px; color:#fff; background:var(--navy); border:1px solid var(--navy); border-radius:10px; box-shadow:0 9px 18px rgba(9,40,72,.14); font:inherit; font-size:14px; font-weight:700; transition:transform .16s,background .16s,box-shadow .16s; }
.electric-login-submit:not(:disabled):hover { background:#154d79; transform:translateY(-2px); box-shadow:0 12px 23px rgba(9,40,72,.19); }
.electric-login-submit:disabled { opacity:.66; }
.electric-login-support { margin:24px 0 0; color:var(--muted); text-align:center; font-size:12px; }
.electric-login-support button { font-size:12px; }
.electric-login-error { display:flex; gap:9px; margin:0 0 22px; padding:12px 14px; color:#983448; background:#fff2f4; border:1px solid #f1d2d9; border-radius:9px; font-size:13px; }
.electric-login-mobile-brand { display:none; }
.electric-login-version { position:absolute; bottom:22px; color:#96a6b5; font-size:11px; }
@media(max-width:900px) { .electric-login { grid-template-columns:1fr; }.electric-login-intro { display:none; }.electric-login-workspace { min-height:100dvh; align-content:center; }.electric-login-mobile-brand { position:absolute; top:32px; left:clamp(24px,5vw,72px); display:flex; align-items:center; gap:11px; color:#0e3457; font-size:15px; letter-spacing:.04em; }.electric-login-mobile-brand img { width:46px; height:46px; }.electric-login-form { margin-top:42px; } }
@media(max-width:440px) { .electric-login-workspace { padding:95px 22px 50px; }.electric-login-mobile-brand { left:22px; top:22px; }.electric-login-version { position:static; margin-top:46px; }.electric-login-form { margin-top:0; } }
@media(prefers-reduced-motion:reduce) { .electric-login-submit,.electric-login-input input { transition:none; } }

/* Dashboard: monthly source data, with room for day and meter-type filters when the API adds them. */
.ops-filter-card { grid-template-columns:minmax(115px,.8fr) minmax(105px,.7fr) minmax(110px,.7fr) minmax(190px,1.5fr) auto; }
.ops-filter-card select:disabled { color:#8598aa; background:#f1f5f8; }
.ops-source-note { display:flex; gap:8px; align-items:flex-start; margin:-6px 0 17px; color:#52718c; font-size:12px; line-height:1.5; }
.ops-tabs button:hover:not(.active) { color:#0b3a67; background:#edf5fa; }
.ops-meter-types { padding:19px 22px; border:1px solid #dce6ee; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(7,26,50,.045); }
.ops-meter-types > div:first-child { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:7px 14px; }
.ops-meter-types strong { color:#0b2545; font-size:15px; }.ops-meter-types small,.ops-meter-types p { color:#647b91; font-size:12px; }
.ops-meter-types p { margin:9px 0 0; }
.ops-meter-track { display:flex; overflow:hidden; height:9px; margin:13px 0; border-radius:10px; background:#e8f0f6; }
.ops-meter-track span:first-child { width:90%; background:#246da3; }.ops-meter-track span:last-child { width:10%; background:#b97729; }
.ops-meter-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.ops-meter-buttons button { min-height:40px; padding:8px 13px; border:1px solid #cbdbe7; border-radius:9px; color:#163754; background:#fff; font-weight:650; font-size:12px; }
.ops-meter-buttons button[aria-pressed="true"] { color:#0b416d; background:#e8f3fa; border-color:#9dc7df; }
.ops-meter-buttons button:disabled { opacity:.7; background:#f7fafc; }
@media(max-width:1050px){.ops-filter-card{grid-template-columns:repeat(3,minmax(0,1fr))}.ops-filter-card label:nth-child(4){grid-column:span 2}}
@media(max-width:720px){.ops-filter-card{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-filter-card label:nth-child(4){grid-column:span 2}.ops-filter-card button{grid-column:span 2}}
@media(max-width:380px){.ops-filter-card{grid-template-columns:1fr}.ops-filter-card label:nth-child(4),.ops-filter-card button{grid-column:auto}}

/* One shared catalog layout across the current DanhMuc pages, without changing their API forms. */
.electric-catalog { max-width:1420px !important; padding:25px clamp(13px,2vw,28px) 55px !important; color:#16324d; }
.electric-catalog > .d-flex:first-child { padding:2px 0 10px; border-bottom:1px solid #e1e9f0; }
.electric-catalog > .d-flex:first-child .mud-typography-h4 { color:#0b2545; font-size:25px; font-weight:700; letter-spacing:-.025em; }
.electric-catalog .mud-paper { border:1px solid #dce6ee; border-radius:14px; box-shadow:0 6px 20px rgba(7,26,50,.045) !important; }
.electric-catalog .mud-table { background:#fff; }
.electric-catalog .mud-table-toolbar { min-height:70px; padding:14px 18px; gap:9px; flex-wrap:wrap; border-bottom:1px solid #e4ebf2; }
.electric-catalog .mud-table-head { background:#f4f8fb; }
.electric-catalog .mud-table-head .mud-table-cell { color:#49647d; font-weight:700; }
.electric-catalog .mud-table-row:hover { background:#edf5fa !important; }
.electric-catalog .mud-table-cell { border-bottom:1px solid #eaf0f5; }
.electric-catalog .mud-button-filled-success,.electric-catalog .mud-button-filled-error { color:#26445f !important; background:#eaf2f8 !important; box-shadow:none !important; }
.electric-catalog .mud-button-filled-success:hover,.electric-catalog .mud-button-filled-error:hover { background:#d9eaf5 !important; }
@media(max-width:680px){.electric-catalog .mud-table-toolbar{align-items:flex-start}.electric-catalog .mud-table-toolbar .mud-typography{width:100%}.electric-catalog .mud-table-container{overflow-x:auto}}

/* Danh mục điện: một bố cục dùng chung, bảng và hành động không bị tràn. */
.px-directory{max-width:1380px!important;margin:0 auto;padding:28px clamp(16px,2.5vw,34px) 60px!important;color:#18314e}
.px-directory *{box-sizing:border-box}
.px-directory-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.px-eyebrow{color:#32739e;font-size:11px;font-weight:800;letter-spacing:.12em}.px-eyebrow span{color:#a7b9c9;margin:0 6px}
.px-directory-header h1{margin:7px 0 5px;color:#092745;font-size:clamp(25px,2.6vw,34px);font-weight:800;letter-spacing:-.035em}
.px-directory-header p{margin:0;color:#667f96;font-size:13px;line-height:1.55}
.px-add-button{min-height:44px;padding:0 18px!important;white-space:nowrap}
.px-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-bottom:18px}
.px-stat{min-width:0;display:flex;align-items:center;gap:15px;padding:19px;background:#fff;border:1px solid #dde7f0;border-radius:15px;box-shadow:0 5px 19px rgba(10,38,68,.035);transition:transform .18s,box-shadow .18s,border-color .18s}
.px-stat:hover{transform:translateY(-3px);border-color:#afd0e5;box-shadow:0 12px 24px rgba(10,38,68,.09)}
.px-stat-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#17628d;background:#eaf4fa;font-size:19px}
.px-stat>div{min-width:0;display:grid;gap:2px}.px-stat small{color:#698196;font-size:12px;font-weight:700}.px-stat strong{color:#0d2c4b;font-size:27px;line-height:1.1}.px-stat div>span{color:#8a9cad;font-size:11px}
.px-filter,.px-list{min-width:0;background:#fff;border:1px solid #dde7f0;border-radius:16px;box-shadow:0 5px 20px rgba(10,38,68,.035)}
.px-filter{margin-bottom:18px;padding:20px}.px-filter-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.px-filter-title>div{display:grid;gap:3px}.px-filter-title strong{color:#0d2c4b;font-size:15px}.px-filter-title span{color:#758a9e;font-size:12px}.px-filter-title>i{color:#7fa1b7}
.px-filter-grid{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(180px,1fr) auto;gap:14px;align-items:end}.px-filter-grid-simple{grid-template-columns:minmax(240px,1fr) auto}
.px-filter-grid-staff{grid-template-columns:minmax(190px,1.4fr) minmax(140px,1fr) minmax(170px,1fr) auto}
.px-filter-field{min-width:0}.px-filter-field>label{display:block;margin-bottom:8px;color:#466078;font-size:12px;font-weight:700}.px-filter-field .mud-input-control{margin:0!important}.px-filter-actions,.px-export-actions{display:flex;flex-wrap:wrap;gap:8px}.px-filter-actions{align-items:center;min-height:42px}.px-filter-actions .mud-button-root,.px-export-actions .mud-button-root{min-height:40px;color:#315775!important;border-color:#cbdae6!important;background:#fff!important;box-shadow:none!important;white-space:nowrap}.px-filter-actions .mud-button-root:hover,.px-export-actions .mud-button-root:hover{color:#0a3d66!important;border-color:#9cc4dc!important;background:#edf6fb!important;transform:translateY(-1px)}
.px-load-error{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:11px 15px;border:1px solid #edcfce;border-radius:12px;background:#fff7f6;color:#9a4140;font-size:13px}.px-load-error span{flex:1}
.px-list{overflow:hidden}.px-list-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:17px 20px;border-bottom:1px solid #e4edf3}.px-list-header h2{margin:0;color:#103454;font-size:16px;font-weight:800}.px-list-header p{margin:3px 0 0;color:#7890a5;font-size:12px}
.px-table .mud-table-head .mud-table-cell{height:47px!important;color:#52708b!important;background:#f3f8fb!important;font-size:12px!important}.px-table .mud-table-cell{padding:12px 16px!important;color:#26445f}.px-table .mud-table-row:hover .mud-table-cell{background:#eef6fb!important}.px-table .mud-icon-button{transition:transform .16s,background .16s}.px-table .mud-icon-button:hover{transform:translateY(-2px);background:#eaf4fa}.px-table .mud-table-container{overflow-x:auto}
.px-table .mud-table-body .mud-typography{color:#658096!important}.px-table .mud-table-body .mud-table-cell>.pa-12{padding:36px!important}
.px-empty{width:100%;min-height:180px;display:grid;place-content:center;justify-items:center;gap:7px;color:#72899c}.px-empty i{font-size:27px;color:#88adc4}.px-empty strong{color:#355a77;font-size:14px}.px-empty span{font-size:12px}
.ops-panel,.ops-kpi,.ops-filter-card{transition:box-shadow .2s,transform .2s,border-color .2s}.ops-panel:hover,.ops-kpi:hover{transform:translateY(-2px);border-color:#bbd3e3;box-shadow:0 12px 26px rgba(10,38,68,.08)}
.ops-panel-compact{width:100%;max-width:900px;margin:0 auto}.ops-panel-compact .ops-chart{min-height:255px;max-height:270px}
@media(max-width:980px){.px-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.px-filter-grid-simple{grid-template-columns:1fr}.px-filter-actions{grid-column:1/-1}}
@media(max-width:620px){.px-directory{padding:17px 13px 40px!important}.px-directory-header{align-items:stretch}.px-add-button{width:100%}.px-filter-grid{grid-template-columns:1fr}.px-filter-actions{grid-column:auto}.px-filter-actions .mud-button-root{flex:1}.px-list-header{align-items:flex-start}.px-export-actions{width:100%}.px-export-actions .mud-button-root{flex:1}.px-stats{grid-template-columns:1fr 1fr}.px-stat{padding:13px;gap:9px}.px-stat-icon{width:36px;height:36px}.px-stat strong{font-size:22px}}
@media(max-width:390px){.px-stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.px-stat,.ops-panel,.ops-kpi,.px-table .mud-icon-button{transition:none}}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.electric-header-logo {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.header-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.header-brand-copy strong {
    color: #0b2545;
    font-size: 15px;
    font-weight: 800;
}

.header-brand-copy small {
    margin-top: 4px;
    color: #64778c;
    font-size: 11px;
}

@media (max-width: 959.98px) {
    .header-brand {
        gap: 8px;
    }

    .electric-header-logo {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 519.98px) {
    .header-brand {
        gap: 7px;
    }

    .electric-header-logo {
        width: 34px;
        height: 34px;
    }

    .header-brand-copy strong {
        font-size: 13px;
    }

    .header-brand-copy small {
        font-size: 11px;
    }
}

/* Sidebar navy */
.crm-premium-sidebar.mud-drawer {
    color: #e9f2fa !important;
    background: linear-gradient(180deg, #0b2545 0%, #081b33 100%) !important;
    border-right: 1px solid #163d60 !important;
}

.crm-premium-sidebar .sidebar-content,
.crm-premium-sidebar .premium-nav-menu,
.crm-premium-sidebar .mud-nav-group {
    background: transparent !important;
}

.crm-premium-sidebar .brand-copy strong,
.crm-premium-sidebar .workspace-card strong,
.crm-premium-sidebar .sidebar-help-card strong {
    color: #fff !important;
}

.crm-premium-sidebar .brand-copy small,
.crm-premium-sidebar .workspace-card small,
.crm-premium-sidebar .sidebar-help-card span,
.crm-premium-sidebar .sidebar-footer,
.crm-premium-sidebar .sidebar-section-label {
    color: #9fb6cc !important;
}

.crm-premium-sidebar .workspace-card,
.crm-premium-sidebar .sidebar-help-card {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .13) !important;
}

.crm-premium-sidebar .workspace-icon,
.crm-premium-sidebar .help-icon {
    color: #d9eafb !important;
    background: #173a60 !important;
    border-color: #315576 !important;
}

.crm-premium-sidebar .mud-nav-link,
.crm-premium-sidebar .mud-nav-group-header {
    color: #cbd9e7 !important;
    background: transparent !important;
    border-color: transparent !important;
}

.crm-premium-sidebar .mud-nav-link-icon-default,
.crm-premium-sidebar .mud-nav-group-toggle-icon {
    color: #9fb9d1 !important;
}

.crm-premium-sidebar .mud-nav-link:hover,
.crm-premium-sidebar .mud-nav-group-header:hover {
    color: #fff !important;
    background: #173a60 !important;
    border-color: #315576 !important;
}

.crm-premium-sidebar .mud-nav-link:hover .mud-nav-link-icon-default {
    color: #fff !important;
}

.crm-premium-sidebar .mud-nav-link.active {
    color: #0b2545 !important;
    background: #e7f2fb !important;
    border-color: #e7f2fb !important;
    box-shadow: none !important;
}

.crm-premium-sidebar .mud-nav-link.active .mud-nav-link-icon-default {
    color: #0b2545 !important;
}

.crm-premium-sidebar .mud-nav-group-children {
    border-left-color: #315576 !important;
}
.crm-premium-sidebar .mud-nav-link,
.crm-premium-sidebar .mud-nav-group-header,
.crm-premium-sidebar .workspace-card,
.crm-premium-sidebar .sidebar-help-card {
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

@media (hover: hover) {
    .crm-premium-sidebar .mud-nav-link:hover:not(.active),
    .crm-premium-sidebar .mud-nav-group-header:hover {
        background: #1b466f !important;
        border-color: #38678e !important;
        transform: translateX(3px);
        box-shadow: inset 3px 0 #78c7ee;
    }

    .crm-premium-sidebar .mud-nav-link.active:hover {
        background: #d9ebf9 !important;
        transform: translateX(2px);
    }

    .crm-premium-sidebar .workspace-card:hover,
    .crm-premium-sidebar .sidebar-help-card:hover {
        background: rgba(255, 255, 255, .11) !important;
        border-color: rgba(255, 255, 255, .25) !important;
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-premium-sidebar .mud-nav-link,
    .crm-premium-sidebar .mud-nav-group-header,
    .crm-premium-sidebar .workspace-card,
    .crm-premium-sidebar .sidebar-help-card {
        transition: none !important;
    }
}