/* ==========================================================================
   Shri Balaji Refineries CRM — Modern UI
   Design-system layer. Loads after bootstrap.css and the legacy style.css
   and restyles the existing Bootstrap + custom classes used across every
   view, plus the app shell (sidebar / topbar / footer) markup.
   ========================================================================== */

:root{
    --sbr-navy:        #0b1f3a;
    --sbr-navy-soft:   #132a4d;
    --sbr-primary:     #2563eb;
    --sbr-primary-600: #1d4ed8;
    --sbr-primary-50:  #eef4ff;
    --sbr-accent:      #f59e0b;
    --sbr-success:     #16a34a;
    --sbr-danger:      #e11d48;
    --sbr-warning:     #d97706;
    --sbr-info:        #0891b2;

    --sbr-bg:          #f3f5fb;
    --sbr-surface:     #ffffff;
    --sbr-border:      #e6e9f2;
    --sbr-border-soft: #eef0f7;

    --sbr-text:        #1b2330;
    --sbr-text-muted:  #6b7489;
    --sbr-text-faint:  #9aa2b5;

    --sbr-radius-sm:   8px;
    --sbr-radius:      12px;
    --sbr-radius-lg:   16px;

    --sbr-shadow-sm:   0 1px 2px rgba(16, 24, 40, .06);
    --sbr-shadow:      0 2px 10px rgba(16, 24, 40, .06), 0 1px 2px rgba(16,24,40,.04);
    --sbr-shadow-lg:   0 16px 40px rgba(16, 24, 40, .12);

    --sbr-sidebar-w:   264px;
    --sbr-topbar-h:    66px;
}

*{ box-sizing: border-box; }

html, body{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--sbr-bg) !important;
    color: var(--sbr-text);
    -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--sbr-primary-50); color: var(--sbr-primary-600); }

/* Slim, modern scrollbar */
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #c7cedd; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: #a9b2c7; }

a{ color: var(--sbr-primary); }

h1, h2, h3, h4, h5, h6{ color: var(--sbr-navy); }

/* ==========================================================================
   App shell: sidebar + topbar + content
   ========================================================================== */

.app-shell{
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
}

/* ---- Sidebar ---- */
.sidebar{
    width: var(--sbr-sidebar-w);
    flex: 0 0 var(--sbr-sidebar-w);
    background: linear-gradient(180deg, var(--sbr-navy) 0%, #081730 100%);
    color: #cdd7ea;
    display: flex;
    flex-direction: column;
    border: none;
}

.sidebar.offcanvas,
.sidebar.offcanvas-lg{
    --bs-offcanvas-width: var(--sbr-sidebar-w);
}

.sidebar-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex: 0 0 auto;
    min-height: var(--sbr-topbar-h);
}

.sidebar-brand img{
    height: 36px;
    width: auto;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
}

.sidebar-brand-text{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.sidebar-brand-text strong{
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-text span{
    font-size: 11px;
    color: #8fa0c2;
    letter-spacing: .4px;
}

.sidebar .btn-close{
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .7;
}

.sidebar-scroll{
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px 18px;
}

.sidebar-section-label{
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #5f729e;
    padding: 14px 12px 6px;
}

.sidebar-nav{
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav li{ margin: 2px 0; }

.sidebar-link{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--sbr-radius-sm);
    color: #c3cde3;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
    border: none;
    background: transparent;
}

.sidebar-link .nav-ic{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    opacity: .85;
}

.sidebar-link:hover{
    background: rgba(255,255,255,.07);
    color: #fff;
}

.sidebar-link.active{
    background: var(--sbr-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

.sidebar-link .chev{
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
    opacity: .7;
}

.sidebar-link[aria-expanded="true"] .chev{
    transform: rotate(180deg);
}

.sidebar-submenu{
    list-style: none;
    margin: 2px 0 4px;
    padding: 2px 0 2px 16px;
    border-left: 1px solid rgba(255,255,255,.08);
    margin-left: 22px;
}

.sidebar-submenu li a{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--sbr-radius-sm);
    color: #a7b3cc;
    text-decoration: none;
    font-size: 13px;
    font-weight: 450;
    transition: background .15s ease, color .15s ease;
}

.sidebar-submenu li a:hover{
    background: rgba(255,255,255,.06);
    color: #fff;
}

.sidebar-submenu li a svg{ width: 14px; height: 14px; opacity: .8; }

.sidebar-foot{
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex: 0 0 auto;
}

/* ---- Main column ---- */
.app-main{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar{
    height: var(--sbr-topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    background: var(--sbr-surface);
    border-bottom: 1px solid var(--sbr-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.sidebar-toggle-btn{
    width: 38px;
    height: 38px;
    border-radius: var(--sbr-radius-sm);
    border: 1px solid var(--sbr-border);
    background: #fff;
    color: var(--sbr-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.sidebar-toggle-btn:hover{ background: var(--sbr-bg); }

.topbar-brand-mobile{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--sbr-navy);
    text-decoration: none;
    font-size: 14px;
}

.topbar-brand-mobile img{ height: 26px; }

.topbar-spacer{ flex: 1 1 auto; }

.topbar-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-icon-btn{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sbr-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sbr-text-muted);
    position: relative;
}

.topbar-icon-btn .dot{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sbr-danger);
    border: 1.5px solid #fff;
}

.user-chip{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    border: 1px solid var(--sbr-border);
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}

.user-chip:hover{ background: var(--sbr-bg); }

.user-avatar{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sbr-primary), var(--sbr-navy));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 auto;
    text-transform: uppercase;
}

.user-chip-meta{
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-chip-meta strong{
    font-size: 13px;
    color: var(--sbr-navy);
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-chip-meta span{
    font-size: 11px;
    color: var(--sbr-text-faint);
}

.user-chip .chev{ width: 14px; height: 14px; color: var(--sbr-text-faint); }

/* ---- Content area ---- */
.app-content{
    flex: 1 1 auto;
    padding: 22px;
}

.app-footer{
    flex: 0 0 auto;
    padding: 16px 22px;
    text-align: center;
    color: var(--sbr-text-faint);
    font-size: 12.5px;
    border-top: 1px solid var(--sbr-border);
    background: var(--sbr-surface);
}

.app-footer a{ color: var(--sbr-primary); text-decoration: none; font-weight: 600; }
.app-footer hr{ display: none; }

/* ==========================================================================
   Page content card (every view wraps itself in .container-fluid.bg-white)
   ========================================================================== */

.app-content .container-fluid.bg-white,
.app-content > .container-fluid{
    background: var(--sbr-surface) !important;
    border: 1px solid var(--sbr-border);
    border-radius: var(--sbr-radius-lg);
    box-shadow: var(--sbr-shadow);
    padding: 0 !important;
    margin: 0 !important;
    max-width: none;
}

.app-content .container-fluid .row{ margin: 0; }
.app-content .container-fluid .row > [class*="col-"]{ padding: 0; }

/* Breadcrumb becomes the page header strip */
.breadcrumb{
    background: var(--sbr-surface) !important;
    color: var(--sbr-navy);
    margin: 0 !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--sbr-border-soft);
    border-radius: var(--sbr-radius-lg) var(--sbr-radius-lg) 0 0;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb-item{
    color: var(--sbr-navy) !important;
    padding: 0 !important;
    font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item{
    padding-left: 8px !important;
}

.breadcrumb-item + .breadcrumb-item::before{
    content: "/";
    padding-right: 8px;
    color: var(--sbr-text-faint);
    font-weight: 400;
}

.breadcrumb-item a{
    color: var(--sbr-text-muted) !important;
    text-decoration: none !important;
    font-weight: 600;
}

.breadcrumb-item a:hover{ color: var(--sbr-primary) !important; }

/* body padding under the breadcrumb header */
.app-content .container-fluid.bg-white > .row > [class*="col-"],
.app-content .container-fluid > .row > [class*="col-"]{
    padding: 0 22px 22px !important;
}

.main-heading{
    text-align: left !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: var(--sbr-navy) !important;
    margin-top: 6px;
}

.main-heading + hr{ margin: 10px 0 18px; border-color: var(--sbr-border); opacity: 1; }

.main-heading-1{
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--sbr-navy);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-left: 3px solid var(--sbr-primary);
    padding-left: 10px;
    margin-top: 18px !important;
    margin-bottom: 10px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-outer{
    box-shadow: none !important;
    padding: 0 !important;
}

label, .form-label{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sbr-text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px !important;
}

.form-control,
.form-select,
select,
.input-field-1,
.input-field-2{
    border: 1px solid var(--sbr-border) !important;
    border-radius: var(--sbr-radius-sm) !important;
    background: #fbfcfe !important;
    font-size: 13.5px;
    color: var(--sbr-text);
    padding: 8px 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control:focus,
.form-select:focus,
select:focus,
.input-field-1:focus,
.input-field-2:focus{
    border-color: var(--sbr-primary) !important;
    box-shadow: 0 0 0 3px var(--sbr-primary-50) !important;
    background: #fff !important;
    outline: none;
}

.form-control[readonly],
.form-control:disabled{
    background: var(--sbr-bg) !important;
    color: var(--sbr-text-muted);
}

.input-group-merge{
    border: 1px solid var(--sbr-border) !important;
    border-radius: var(--sbr-radius-sm) !important;
    overflow: hidden;
    background: #fbfcfe;
}

.input-group-merge .input-field-2{ border: none !important; background: transparent !important; }
.input-group-merge .input-group-text{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex: 0 0 42px;
    background: transparent;
    border: none;
    color: var(--sbr-text-faint);
}

.select2-container--default .select2-selection--single{
    border: 1px solid var(--sbr-border) !important;
    border-radius: var(--sbr-radius-sm) !important;
    background: #fbfcfe !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single{
    border-color: var(--sbr-primary) !important;
    box-shadow: 0 0 0 3px var(--sbr-primary-50);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
    border-radius: var(--sbr-radius-sm);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .1px;
    padding: 8px 16px;
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

.btn.btn-sm{ padding: 5px 10px; font-size: 12px; border-radius: 7px; }

.btn-primary{
    background: var(--sbr-primary);
    border-color: var(--sbr-primary);
    box-shadow: 0 2px 8px rgba(37,99,235,.28);
}

.btn-primary:hover{ background: var(--sbr-primary-600); border-color: var(--sbr-primary-600); }

.btn-success{ background: var(--sbr-success); border-color: var(--sbr-success); }
.btn-danger{ background: var(--sbr-danger); border-color: var(--sbr-danger); }
.btn-warning{ background: var(--sbr-warning); border-color: var(--sbr-warning); color:#fff; }
.btn-secondary{ background: #64748b; border-color: #64748b; }

.btn-outline-success{ color: var(--sbr-success); border-color: var(--sbr-success); }
.btn-outline-success:hover{ background: var(--sbr-success); border-color: var(--sbr-success); }

.btn-outline-danger{ color: var(--sbr-danger); border-color: var(--sbr-danger); }
.btn-outline-danger:hover{ background: var(--sbr-danger); border-color: var(--sbr-danger); }

.btn-outline-warning{ color: var(--sbr-warning); border-color: var(--sbr-warning); }
.btn-outline-warning:hover{ background: var(--sbr-warning); border-color: var(--sbr-warning); color:#fff; }

.btn:active{ transform: translateY(1px); }

/* Legacy one-off button/input classes used on a couple of pages */
.add-master-btn{
    border-radius: var(--sbr-radius-sm) !important;
    background: var(--sbr-primary) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    padding: 0 16px !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.28);
}
.add-master-btn:hover{ background: var(--sbr-primary-600) !important; }

.form-control-1{
    border: 1px solid var(--sbr-border) !important;
    border-radius: var(--sbr-radius-sm) !important;
    background: #fbfcfe !important;
}
.form-control-1:focus{
    border-color: var(--sbr-primary) !important;
    box-shadow: 0 0 0 3px var(--sbr-primary-50) !important;
    outline: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-responsive{ border-radius: var(--sbr-radius); }

table.table{
    font-size: 13.5px;
    color: var(--sbr-text);
    margin-bottom: 0;
}

table.table thead th{
    background: #f7f9fd;
    color: var(--sbr-text-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--sbr-border) !important;
    vertical-align: middle;
    padding: 11px 10px;
}

table.table.table-bordered{ border: 1px solid var(--sbr-border-soft); }
table.table.table-bordered th,
table.table.table-bordered td{ border-color: var(--sbr-border-soft) !important; }

table.table.table-striped > tbody > tr:nth-of-type(odd) > *{
    background-color: #fafbfe;
}

table.table tbody td{
    padding: 10px;
    vertical-align: middle;
}

table.table tbody tr{ transition: background .12s ease; }
table.table tbody tr:hover{ background: var(--sbr-primary-50) !important; }
table.table tbody tr:hover td{ background: transparent; }

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
    border: 1px solid var(--sbr-border);
    border-radius: 7px;
    padding: 5px 10px;
}

.dataTables_wrapper .dt-buttons .btn{
    border-radius: 7px;
    margin-right: 6px;
}

.pegination{ text-align: center; margin-top: 16px; }
.pegination a, .pegination strong{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    color: var(--sbr-navy) !important;
    border-radius: 8px !important;
    width: 34px;
    height: 34px;
    border: 1px solid var(--sbr-border) !important;
    background: #fff;
    margin: 0 4px !important;
    padding: 0 !important;
    text-decoration: none;
}
.pegination a:hover{
    background: var(--sbr-primary) !important;
    border-color: var(--sbr-primary) !important;
    color: #fff !important;
}
.pegination strong{
    background: var(--sbr-primary) !important;
    border-color: var(--sbr-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   Modals / alerts
   ========================================================================== */

.modal-content{
    border: none;
    border-radius: var(--sbr-radius-lg);
    box-shadow: var(--sbr-shadow-lg);
}

.modal-header{
    border-bottom: 1px solid var(--sbr-border-soft);
    padding: 16px 22px;
}

.modal-header .modal-title{
    font-size: 16px;
    font-weight: 700;
    color: var(--sbr-navy);
}

.modal-body{ padding: 20px 22px; }
.modal-footer{ border-top: 1px solid var(--sbr-border-soft); padding: 14px 22px; }

.alert{
    border: none;
    border-left: 4px solid currentColor;
    border-radius: var(--sbr-radius-sm);
    font-size: 13.5px;
}
.alert-danger{ background: #fdecef; color: var(--sbr-danger); }
.alert-success{ background: #eafaf0; color: var(--sbr-success); }

/* ==========================================================================
   Dashboard stat cards
   ========================================================================== */

.dash-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 0 !important;
    padding: 0 !important;
}

.dash-item{ width: 100% !important; padding: 0 !important; }

.dash-content-div{
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: auto !important;
    min-height: 118px;
    border: 1px solid var(--sbr-border) !important;
    border-radius: var(--sbr-radius) !important;
    padding: 18px !important;
    background: var(--sbr-surface) !important;
    box-shadow: var(--sbr-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.dash-content-div:hover{
    transform: translateY(-3px);
    box-shadow: var(--sbr-shadow);
}

.dash-content-div h4{
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sbr-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.dash-content-div .stat-value{
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--sbr-navy);
    margin-top: 6px;
    letter-spacing: -.5px;
}

.dash-content-div .stat-icon{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash-content-div .stat-icon svg{ width: 20px; height: 20px; }

.customers-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid var(--sbr-primary) !important; }
.customers-div .stat-icon{ background: #e9efff; color: var(--sbr-primary); }

.orders-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid var(--sbr-accent) !important; }
.orders-div .stat-icon{ background: #fff3e0; color: var(--sbr-accent); }

.invoices-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid var(--sbr-info) !important; }
.invoices-div .stat-icon{ background: #e4f7fb; color: var(--sbr-info); }

.received-payments-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid var(--sbr-success) !important; }
.received-payments-div .stat-icon{ background: #e6f7ec; color: var(--sbr-success); }

.due-payments-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid var(--sbr-danger) !important; }
.due-payments-div .stat-icon{ background: #fdecef; color: var(--sbr-danger); }

.completed-jobs-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid #7c3aed !important; }
.completed-jobs-div .stat-icon{ background: #f1e9fe; color: #7c3aed; }

.pending-jobs-div{ border: 1px solid var(--sbr-border) !important; border-left: 4px solid #475569 !important; }
.pending-jobs-div .stat-icon{ background: #eef1f5; color: #475569; }

.dash-welcome{
    background: linear-gradient(120deg, var(--sbr-navy) 0%, #15335f 55%, var(--sbr-primary) 130%);
    border-radius: var(--sbr-radius-lg);
    padding: 24px 26px;
    color: #fff;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}

.dash-welcome h3{ color: #fff; font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.dash-welcome p{ color: #c9d6ef; font-size: 13px; margin: 0; }

/* ==========================================================================
   Dashboard charts
   ========================================================================== */

.dash-charts-section{ margin-top: 20px; }

.dash-charts-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.dash-charts-header h4{
    font-size: 15px;
    font-weight: 700;
    color: var(--sbr-navy);
    margin: 0;
}

.dash-chart-filter{ display: flex; align-items: center; gap: 10px; }
.dash-chart-filter label{ font-size: 13px; font-weight: 600; color: var(--sbr-text-muted); margin: 0; }
.dash-chart-filter .select2-container{ min-width: 220px; }

.dash-charts-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.dash-chart-card{
    background: var(--sbr-surface);
    border: 1px solid var(--sbr-border);
    border-radius: var(--sbr-radius);
    box-shadow: var(--sbr-shadow-sm);
    padding: 18px;
}

.dash-chart-card h5{
    font-size: 13px;
    font-weight: 600;
    color: var(--sbr-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 10px;
}

.dash-chart-canvas{ width: 100%; height: 300px; }

.dash-chart-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--sbr-text-faint);
    font-size: 13px;
    margin: 0;
}

/* ==========================================================================
   Login page
   ========================================================================== */

body.login-body{
    background: linear-gradient(135deg, var(--sbr-navy) 0%, #15335f 60%, var(--sbr-primary) 130%) !important;
    min-height: 100vh;
}

.login-wrap{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card{
    width: 100%;
    max-width: 400px;
    background: var(--sbr-surface);
    border-radius: var(--sbr-radius-lg);
    box-shadow: var(--sbr-shadow-lg);
    padding: 36px 32px;
}

.login-card .login-logo{
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.login-card .login-logo img{ width: 86px; height: auto; }

.login-card h1{
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--sbr-navy) !important;
}

.login-card .login-sub{
    text-align: center;
    color: var(--sbr-text-faint);
    font-size: 12.5px;
    margin-bottom: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px){
    .app-content{ padding: 14px; }
    .topbar{ padding: 0 14px; }
    .user-chip-meta{ display: none; }
}