/* ============================================================
   DIT Portal — Global UI Polish
   Non-invasive visual layer on top of the existing theme.
   Nothing here alters behavior, layout logic, or JS hooks.
   ============================================================ */

:root {
    /* Professional government-portal palette — muted, trustworthy, no neon */
    --dit-primary: #1e4d8b;         /* deep navy */
    --dit-primary-dark: #14345f;
    --dit-primary-light: #3a6fb0;
    --dit-success: #2e7d5b;         /* corporate green */
    --dit-success-dark: #1f5a41;
    --dit-warning: #b57a1d;          /* muted amber */
    --dit-warning-dark: #8a5a10;
    --dit-danger: #a83232;           /* brick red, not neon */
    --dit-danger-dark: #7a2020;
    --dit-info: #2b6b8f;
    --dit-slate: #2c3e50;
    --dit-slate-dark: #1a2530;
    --dit-neutral: #4a5a6a;
    --dit-bg: #f2f4f7;               /* soft office grey */
    --dit-card-bg: #ffffff;
    --dit-border: #dfe4ea;
    --dit-text: #1f2937;
    --dit-text-muted: #5a6a7a;
    --dit-shadow-sm: 0 1px 2px rgba(15, 25, 40, .05);
    --dit-shadow: 0 2px 6px rgba(15, 25, 40, .07);
    --dit-shadow-lg: 0 4px 14px rgba(15, 25, 40, .10);
    --dit-radius: 4px;                /* squarer, more enterprise */
    --dit-radius-sm: 3px;
    --dit-transition: all .18s ease;
}

/* ---------- Global body tone ---------- */
body {
    background: var(--dit-bg) !important;
    font-feature-settings: "kern", "liga", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header polish ---------- */
header .headerwrapper {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 1px 4px rgba(0, 0, 0, .04);
    border-bottom: 1px solid #d9dde3;
}

.header-left {
    background: var(--dit-primary-dark) !important;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.header-left .logo {
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    font-size: 15px;
    transition: var(--dit-transition);
}

    .header-left .logo:hover {
        opacity: .9;
    }

.header-right {
    background: #ffffff !important;
    border-bottom: 1px solid var(--dit-border);
}

.headingSec {
    color: #14345f !important;
    letter-spacing: .2px;
    font-weight: 600;
    font-size: 17px !important;
}

/* ---------- Left panel / sidebar — LIGHT theme: white bg, dark text ---------- */
body .leftpanel {
    background: #ffffff !important;
    border-right: 1px solid #e6ebf1 !important;
    height: 100vh !important;
    overflow-y: auto;
    box-shadow: 1px 0 0 rgba(15, 25, 40, .02);
}

body .leftpanel .profile-left {
    padding: 18px 16px !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

    body .leftpanel .profile-left .img-circle,
    body .leftpanel .profile-left .profile-thumb {
        border: 2px solid #dfe4ea !important;
    }

    body .leftpanel .profile-left .media-heading {
        color: #0f1c2e !important;
        font-weight: 700 !important;
        letter-spacing: .2px !important;
        font-size: 14px !important;
        margin-top: 10px !important;
    }

    body .leftpanel .profile-left .text-muted,
    body .leftpanel .profile-left small {
        color: #6a7a8a !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: .6px;
        font-weight: 500;
    }

body .leftpanel .navigationcst {
    padding: 6px 0 !important;
    margin: 0 !important;
}

body .leftpanel .navigationcst > li {
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #eef2f7 !important;
}

    body .leftpanel .navigationcst > li:last-child {
        border-bottom: none !important;
    }

    body .leftpanel .navigationcst > li.parent > .children > li {
        border-top: 1px solid #eef2f7 !important;
    }

        body .leftpanel .navigationcst > li.parent > .children > li:first-child {
            border-top: none !important;
        }

body .leftpanel .navigationcst > li > a,
.navigationcst > li > a {
    padding: 11px 16px !important;
    border-left: 3px solid transparent !important;
    transition: var(--dit-transition);
    color: #1f2937 !important;
    font-weight: 500 !important;
    letter-spacing: .1px;
    font-size: 13px !important;
    background: transparent !important;
    display: block;
}

    body .leftpanel .navigationcst > li > a:hover,
    body .leftpanel .navigationcst > li > a:focus,
    body .leftpanel .navigationcst > li.active > a,
    body .leftpanel .navigationcst > li.active > a:hover,
    .navigationcst > li > a:hover,
    .navigationcst > li > a:focus,
    .navigationcst > li.active > a {
        background: #f2f6fc !important;
        color: #0f1c2e !important;
        border-left-color: var(--dit-primary) !important;
    }

    body .leftpanel .navigationcst > li > a > i,
    .navigationcst > li > a > i {
        width: 20px;
        text-align: center;
        margin-right: 10px;
        color: #5a6a7a !important;
        font-size: 13px;
    }

    body .leftpanel .navigationcst > li.active > a > i,
    body .leftpanel .navigationcst > li > a:hover > i {
        color: var(--dit-primary) !important;
    }

body .leftpanel .navigationcst .children,
.navigationcst .children {
    background: #fafcff !important;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}

body .leftpanel .navigationcst .children li a,
.navigationcst .children li a {
    padding: 8px 16px 8px 46px !important;
    font-size: 12.5px !important;
    color: #4a5a6a !important;
    display: block;
    background: transparent !important;
}

    body .leftpanel .navigationcst .children li a:hover,
    .navigationcst .children li a:hover {
        background: #eef4fc !important;
        color: var(--dit-primary) !important;
    }

    body .leftpanel .navigationcst .children li a > i {
        color: #7a8797 !important;
    }

/* Sidebar scrollbar — subtle on light bg */
body .leftpanel::-webkit-scrollbar-thumb {
    background: #cfd6de !important;
}

body .leftpanel::-webkit-scrollbar-track {
    background: #f2f4f7 !important;
}

/* Parent-item chevron */
body .leftpanel .navigationcst > li.parent > a::after {
    content: "\f107";
    font-family: "FontAwesome";
    float: right;
    font-size: 11px;
    color: #a0acba;
    line-height: 1.4;
}

/* ---------- Page header polish ---------- */
.pageheader {
    background: #ffffff !important;
    border-bottom: 1px solid var(--dit-border) !important;
    padding: 14px 22px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

    .pageheader .media {
        display: flex !important;
        align-items: center !important;
        clear: none !important;
        padding: 0 !important;
    }

    .pageheader .media-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    .pageheader h4 {
        color: #14345f !important;
        font-weight: 600 !important;
        letter-spacing: .2px !important;
        margin: 2px 0 0 0 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .pageheader .pageicon {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        text-align: center !important;
        background: var(--dit-primary) !important;
        color: #fff !important;
        border-radius: var(--dit-radius) !important;
        margin-right: 14px !important;
        flex: 0 0 40px !important;
        float: none !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .pageheader .pageicon i {
            color: #fff;
            font-size: 17px;
        }

.breadcrumb {
    background: transparent !important;
    padding: 0 0 4px 0 !important;
    margin-bottom: 5px !important;
    font-size: 12px;
    color: var(--dit-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

    .breadcrumb > li + li:before {
        color: #b0bec5;
        content: "›";
        padding: 0 6px;
    }

    .breadcrumb a {
        color: var(--dit-primary);
    }

    .breadcrumb > .active,
    .breadcrumb > li:last-child {
        color: var(--dit-text-muted);
    }

/* ---------- Content panel ----------
   The base theme uses `position: relative; top: 70px;` which was designed to overlap
   the header with dark-gradient cards. With our flat cards this causes visual collision.
   Reset to normal flow. */
body .mainpanel .contentpanel,
.mainpanel > div > .contentpanel,
.contentpanel {
    padding: 22px !important;
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    z-index: 1;
}

body .mainpanel .pageheader,
.pageheader {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--dit-border) !important;
}

/* ---------- Panel / Card polish (whole app) ---------- */
.panel {
    border: 1px solid var(--dit-border) !important;
    border-radius: var(--dit-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--dit-card-bg) !important;
    transition: var(--dit-transition);
}

    .panel:hover {
        box-shadow: var(--dit-shadow-sm) !important;
    }

.panel-heading {
    border-bottom: 1px solid var(--dit-border) !important;
    background: #f7f9fc !important;
    padding: 11px 16px !important;
    font-weight: 600;
    color: var(--dit-slate);
    letter-spacing: .1px;
    font-size: 13px;
}

.panel-title {
    font-weight: 600;
    color: var(--dit-slate);
    font-size: 13.5px;
}

.panel-body {
    padding: 18px !important;
    color: var(--dit-text);
}

.panel-footer {
    background: #f7f9fc !important;
    border-top: 1px solid var(--dit-border) !important;
}

/* ---------- Stat panels on dashboards — solid, flat, professional ---------- */
.row-stat .panel {
    border: 1px solid var(--dit-border) !important;
    border-radius: var(--dit-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
    background: #fff !important;
    border-top: 3px solid var(--dit-primary) !important;
}

    .row-stat .panel:hover {
        box-shadow: var(--dit-shadow) !important;
    }

    .row-stat .panel .panel-heading {
        padding: 20px 22px 16px !important;
        border-bottom: none !important;
        background: transparent !important;
        position: relative;
        overflow: hidden;
        color: var(--dit-text) !important;
    }

/* Icon sits to the LEFT of the text using the theme's original float layout.
   No absolute positioning — overlap becomes structurally impossible. */
.row-stat .panel-icon {
    background: rgba(20, 52, 95, .06) !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    text-align: center !important;
    border-radius: var(--dit-radius-sm) !important;
    box-shadow: none !important;
    float: left !important;
    margin: 2px 14px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    opacity: 1 !important;
}

    .row-stat .panel-icon .fa,
    .row-stat .panel-icon .fas {
        color: currentColor !important;
        font-size: 18px !important;
        line-height: 44px !important;
        padding: 0 !important;
        opacity: .9;
    }

.row-stat .panel .panel-heading .media-body {
    overflow: hidden;
}

/* Close button in stat cards — small, top-right, above the icon */
.row-stat .panel .panel-btns {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
}

.row-stat .md-title {
    color: var(--dit-text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: .8px;
    font-size: 11.5px !important;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin: 0 0 6px 0 !important;
}

.row-stat h1 {
    color: var(--dit-slate-dark) !important;
    font-weight: 700 !important;
    font-size: 30px !important;
    letter-spacing: -.5px;
    position: relative;
    z-index: 1;
    text-shadow: none;
    margin: 4px 0 0 0 !important;
    line-height: 1.1;
}

.row-stat h3 {
    color: var(--dit-text) !important;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    margin: 4px 0 2px 0 !important;
}

.row-stat .panel-btns .panel-close {
    color: #cbd3dc;
}

.row-stat .panel-btns .panel-close:hover {
    color: var(--dit-text-muted);
}

/* Colored stat variants — solid top-accent bars instead of full gradients */
.panel-primary          { border-top-color: var(--dit-primary) !important; background: #fff !important; }
.panel-primary          .panel-icon { color: var(--dit-primary); }

.panel-success-alt      { border-top-color: var(--dit-success) !important; background: #fff !important; }
.panel-success-alt      .panel-icon { color: var(--dit-success); }

.panel-dark             { border-top-color: var(--dit-slate) !important; background: #fff !important; }
.panel-dark             .panel-icon { color: var(--dit-slate); }

.panel-violet           { border-top-color: #5a4a8a !important; background: #fff !important; }
.panel-violet           .panel-icon { color: #5a4a8a; }

.panel-bluegreen        { border-top-color: #2b7a8f !important; background: #fff !important; }
.panel-bluegreen        .panel-icon { color: #2b7a8f; }

.panel-warning-stat     { border-top-color: var(--dit-warning) !important; background: #fff !important; }
.panel-warning-stat     .panel-icon { color: var(--dit-warning); }

.panel-danger-stat      { border-top-color: var(--dit-danger) !important; background: #fff !important; }
.panel-danger-stat      .panel-icon { color: var(--dit-danger); }

.panel-pink-stat        { border-top-color: #9c3d63 !important; background: #fff !important; }
.panel-pink-stat        .panel-icon { color: #9c3d63; }

.panel-teal-stat        { border-top-color: #1f6b5d !important; background: #fff !important; }
.panel-teal-stat        .panel-icon { color: #1f6b5d; }

.panel-indigo-stat      { border-top-color: #3d4c8a !important; background: #fff !important; }
.panel-indigo-stat      .panel-icon { color: #3d4c8a; }

/* ---------- Stat card sub-metrics (progress footer) ---------- */
.stat-sub {
    background: #f7f9fc;
    padding: 10px 22px;
    color: var(--dit-text-muted);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--dit-border);
}

    .stat-sub .stat-sub-label {
        text-transform: uppercase;
        letter-spacing: .5px;
        font-size: 11px;
        color: var(--dit-text-muted);
    }

    .stat-sub .stat-sub-value {
        font-weight: 600;
        font-size: 12.5px;
        color: var(--dit-slate);
    }

.stat-progress {
    height: 3px;
    background: #eceff2;
    position: relative;
    overflow: hidden;
}

    .stat-progress .stat-progress-bar {
        height: 100%;
        background: currentColor;
        opacity: .55;
        border-radius: 0;
        transition: width .6s ease;
    }

.panel-primary      .stat-progress .stat-progress-bar { background: var(--dit-primary); opacity: 1; }
.panel-success-alt  .stat-progress .stat-progress-bar { background: var(--dit-success); opacity: 1; }
.panel-dark         .stat-progress .stat-progress-bar { background: var(--dit-slate); opacity: 1; }
.panel-violet       .stat-progress .stat-progress-bar { background: #5a4a8a; opacity: 1; }
.panel-bluegreen    .stat-progress .stat-progress-bar { background: #2b7a8f; opacity: 1; }
.panel-warning-stat .stat-progress .stat-progress-bar { background: var(--dit-warning); opacity: 1; }
.panel-danger-stat  .stat-progress .stat-progress-bar { background: var(--dit-danger); opacity: 1; }
.panel-pink-stat    .stat-progress .stat-progress-bar { background: #9c3d63; opacity: 1; }
.panel-teal-stat    .stat-progress .stat-progress-bar { background: #1f6b5d; opacity: 1; }
.panel-indigo-stat  .stat-progress .stat-progress-bar { background: #3d4c8a; opacity: 1; }

/* ---------- Notifications section polish ---------- */
.notification-section {
    background: #fff;
    border-radius: var(--dit-radius);
    box-shadow: none;
    overflow: hidden;
    border: 1px solid var(--dit-border);
}

.notification-header {
    background: var(--dit-primary-dark) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    font-size: 12.5px !important;
    text-transform: uppercase;
    border-bottom: 3px solid var(--dit-primary);
}

.notifcation-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

    .notifcation-list li {
        padding: 0 !important;
        border-bottom: 1px solid #f0f4f8 !important;
        transition: var(--dit-transition);
    }

        .notifcation-list li:hover {
            background: #f8fafd;
        }

        .notifcation-list li a {
            display: block;
            padding: 12px 18px !important;
            color: #34495e !important;
            font-size: 13px;
            text-decoration: none !important;
            line-height: 1.55;
        }

            .notifcation-list li a i.fa {
                color: var(--dit-primary);
                margin-right: 6px;
            }

            .notifcation-list li a span {
                color: var(--dit-primary-dark);
                font-weight: 600;
            }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--dit-radius-sm) !important;
    font-weight: 500;
    letter-spacing: .3px;
    transition: var(--dit-transition) !important;
    padding: 7px 16px;
    border-width: 1px;
}

    .btn:active,
    .btn:focus {
        outline: none !important;
    }

.btn-primary {
    background: var(--dit-primary) !important;
    border-color: var(--dit-primary) !important;
    color: #fff !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background: var(--dit-primary-dark) !important;
        border-color: var(--dit-primary-dark) !important;
    }

.btn-success {
    background: var(--dit-success) !important;
    border-color: var(--dit-success) !important;
    color: #fff !important;
}

    .btn-success:hover,
    .btn-success:focus {
        background: var(--dit-success-dark) !important;
        border-color: var(--dit-success-dark) !important;
    }

.btn-danger {
    background: var(--dit-danger) !important;
    border-color: var(--dit-danger) !important;
    color: #fff !important;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background: var(--dit-danger-dark) !important;
        border-color: var(--dit-danger-dark) !important;
    }

.btn-warning {
    background: var(--dit-warning) !important;
    border-color: var(--dit-warning) !important;
    color: #fff !important;
}

    .btn-warning:hover,
    .btn-warning:focus {
        background: var(--dit-warning-dark) !important;
        border-color: var(--dit-warning-dark) !important;
    }

.btn-info {
    background: var(--dit-info) !important;
    border-color: var(--dit-info) !important;
    color: #fff !important;
}

    .btn-info:hover,
    .btn-info:focus {
        background: #1e5470 !important;
        border-color: #1e5470 !important;
    }

.btn-default {
    background: #ffffff !important;
    border: 1px solid #d5dee7 !important;
    color: #37474f !important;
}

    .btn-default:hover,
    .btn-default:focus {
        background: #f5f8fb !important;
        border-color: #b0bec5 !important;
    }

.btn-sm {
    padding: 4px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}

/* ---------- Widget panel "Download" button (.new-msg) ---------- */
.widget-messaging .new-msg,
.widget-messaging a.new-msg {
    background: var(--dit-primary) !important;
    color: #fff !important;
    padding: 7px 16px !important;
    border-radius: var(--dit-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .3px;
    line-height: 1.4 !important;
    border: 1px solid var(--dit-primary) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    opacity: 1 !important;
    box-shadow: var(--dit-shadow-sm);
    transition: var(--dit-transition);
}

    .widget-messaging .new-msg:hover,
    .widget-messaging a.new-msg:hover,
    .widget-messaging .new-msg:focus,
    .widget-messaging a.new-msg:focus {
        background: var(--dit-primary-dark) !important;
        border-color: var(--dit-primary-dark) !important;
        color: #fff !important;
        opacity: 1 !important;
        text-decoration: none !important;
    }

    .widget-messaging .new-msg i,
    .widget-messaging a.new-msg i {
        color: #fff !important;
        font-size: 13px;
    }

/* ---------- Forms ---------- */
.form-control {
    border-radius: var(--dit-radius-sm) !important;
    border: 1px solid #d5dee7 !important;
    box-shadow: none !important;
    transition: var(--dit-transition) !important;
    padding: 8px 12px;
    height: 38px;
    color: #37474f;
}

    .form-control:focus {
        border-color: var(--dit-primary) !important;
        box-shadow: 0 0 0 3px rgba(30, 136, 229, .12) !important;
    }

textarea.form-control {
    height: auto;
    min-height: 90px;
}

.control-label,
label {
    color: #455a64;
    font-weight: 500;
    letter-spacing: .2px;
}

.form-group {
    margin-bottom: 16px;
}

.input-group-addon {
    background: #f4f7fa !important;
    border: 1px solid #d5dee7 !important;
    color: #607d8b;
}

.has-error .form-control {
    border-color: var(--dit-danger) !important;
}

    .has-error .form-control:focus {
        box-shadow: 0 0 0 3px rgba(231, 76, 60, .12) !important;
    }

.has-success .form-control {
    border-color: var(--dit-success) !important;
}

/* ---------- Tables ---------- */
.table {
    background: #fff;
    border-radius: var(--dit-radius);
    overflow: hidden;
}

    .table > thead > tr > th {
        background: #1e4d8b !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        letter-spacing: .3px;
        border-bottom: 2px solid #1e4d8b !important;
        text-transform: uppercase;
        font-size: 12px;
        padding: 12px 14px !important;
        vertical-align: middle;
    }

    .table > tbody > tr > td {
        padding: 11px 14px !important;
        vertical-align: middle;
        border-top: 1px solid #eef2f7 !important;
        color: #37474f;
        font-size: 13px;
    }

    .table > tbody > tr:hover > td {
        background: #f8fafd !important;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fbfcfe !important;
}

.table-bordered {
    border: 1px solid var(--dit-border) !important;
}

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > td {
        border: 1px solid var(--dit-border) !important;
    }

/* DataTables specific polish */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--dit-radius-sm) !important;
    border: 1px solid #d5dee7 !important;
    padding: 6px 10px !important;
    height: 34px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--dit-radius-sm) !important;
    margin: 0 2px !important;
    padding: 5px 12px !important;
    border: 1px solid var(--dit-border) !important;
    background: #fff !important;
    color: #37474f !important;
    transition: var(--dit-transition);
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f4f7fa !important;
        border-color: #b0bec5 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--dit-primary) !important;
        border-color: var(--dit-primary) !important;
        color: #fff !important;
    }

/* ---------- Alerts ---------- */
.alert {
    border: none !important;
    border-left: 4px solid !important;
    border-radius: var(--dit-radius-sm) !important;
    padding: 12px 16px !important;
    box-shadow: var(--dit-shadow-sm);
}

.alert-success {
    background: #e8f7ee !important;
    border-left-color: var(--dit-success) !important;
    color: #1b5e20 !important;
}

.alert-danger,
.alert-error {
    background: #fdecea !important;
    border-left-color: var(--dit-danger) !important;
    color: #b71c1c !important;
}

.alert-warning {
    background: #fff5e6 !important;
    border-left-color: var(--dit-warning) !important;
    color: #e65100 !important;
}

.alert-info {
    background: #e3f2fd !important;
    border-left-color: var(--dit-primary) !important;
    color: #0d47a1 !important;
}

/* ---------- Labels / Badges ---------- */
.label,
.badge {
    font-weight: 500 !important;
    letter-spacing: .3px;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
}

.label-success,
.badge-success {
    background: var(--dit-success) !important;
    color: #fff;
}

.label-danger,
.badge-danger {
    background: var(--dit-danger) !important;
    color: #fff;
}

.label-warning,
.badge-warning {
    background: var(--dit-warning) !important;
    color: #fff;
}

.label-primary,
.badge-primary {
    background: var(--dit-primary) !important;
    color: #fff;
}

.label-info,
.badge-info {
    background: var(--dit-info) !important;
    color: #fff;
}

/* ---------- Modals ---------- */
.modal-content {
    border-radius: var(--dit-radius) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--dit-primary-dark) !important;
    color: #fff !important;
    border-bottom: 3px solid var(--dit-primary) !important;
    padding: 14px 22px !important;
}

    .modal-header .close {
        color: #fff !important;
        opacity: .9 !important;
        text-shadow: none !important;
        font-size: 26px;
        line-height: 1;
    }

.modal-title {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .3px;
}

.modal-body {
    padding: 22px !important;
    color: #37474f;
}

.modal-footer {
    background: #fafcff !important;
    border-top: 1px solid var(--dit-border) !important;
    padding: 14px 22px !important;
}

/* ---------- Login page polish ---------- */
.signin-wrapper,
.signup-wrapper {
    background: var(--dit-primary-dark) !important;
}

.signin-box,
.signup-box {
    background: #fff !important;
    border-radius: var(--dit-radius) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35) !important;
    padding: 32px !important;
}

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--dit-border) !important;
}

    .nav-tabs > li > a {
        border-radius: var(--dit-radius-sm) var(--dit-radius-sm) 0 0 !important;
        color: #607d8b !important;
        border: 1px solid transparent !important;
        transition: var(--dit-transition);
        font-weight: 500;
    }

        .nav-tabs > li > a:hover {
            background: #f4f7fa !important;
            color: var(--dit-primary) !important;
        }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: var(--dit-primary) !important;
        border: 1px solid var(--dit-border) !important;
        border-bottom-color: #fff !important;
        font-weight: 600;
    }

/* ---------- Dropdown menus ---------- */
.dropdown-menu {
    border-radius: var(--dit-radius) !important;
    border: 1px solid var(--dit-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;
    padding: 6px !important;
}

    .dropdown-menu > li > a {
        border-radius: var(--dit-radius-sm);
        padding: 8px 12px !important;
        transition: var(--dit-transition);
    }

        .dropdown-menu > li > a:hover {
            background: #f4f7fa !important;
            color: var(--dit-primary) !important;
        }

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    border: 1px solid var(--dit-border) !important;
    color: #37474f !important;
    margin: 0 2px;
    border-radius: var(--dit-radius-sm) !important;
    transition: var(--dit-transition);
}

    .pagination > li > a:hover {
        background: #f4f7fa !important;
    }

.pagination > .active > a,
.pagination > .active > span {
    background: var(--dit-primary) !important;
    border-color: var(--dit-primary) !important;
    color: #fff !important;
}

/* ---------- Footer — full-width thin bar fixed at the bottom ---------- */
:root { --dit-footer-h: 34px; }

body .rt_footer,
.rt_footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 100;
    background: #f7f9fc !important;
    border-top: 1px solid var(--dit-border) !important;
    box-shadow: 0 -1px 0 rgba(15, 25, 40, .02) !important;
    padding: 0 22px !important;
    margin: 0 !important;
    letter-spacing: .2px;
    font-size: 11.5px !important;
    color: var(--dit-text-muted) !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    height: var(--dit-footer-h);
    min-height: var(--dit-footer-h);
    line-height: 1;
}

/* Reserve space so nothing gets hidden underneath the fixed footer */
body { padding-bottom: var(--dit-footer-h); }

body .leftpanel {
    height: calc(100vh - var(--dit-footer-h)) !important;
}

    .rt_footer p,
    .rt_footer .rt_footer_left,
    .rt_footer .rt_footer_right {
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        float: none !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .rt_footer .rt_footer_right,
    .rt_footer .rt_footer_right * {
        color: #000000 !important;
    }

    .rt_footer .rt_footer_left::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 14px;
        background: var(--dit-primary);
        margin-right: 4px;
        border-radius: 1px;
    }

    .rt_footer strong {
        color: var(--dit-slate-dark);
        font-weight: 600;
    }

    .rt_footer a {
        color: #000000 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: var(--dit-transition);
        border-bottom: 1px dotted transparent;
    }

    .rt_footer a:hover {
        color: #000000 !important;
        text-decoration: none !important;
        border-bottom-color: #000000;
    }

    .rt_footer_right a {
    color: #000;
    text-decoration: none; /* Optional: removes underline */
}

.rt_footer_right a:hover {
    color: #333; /* Optional hover color */
}
@media (max-width: 767px) {
    .rt_footer,
    body .rt_footer {
        flex-direction: column;
        text-align: center;
        gap: 4px;
        padding: 12px 16px !important;
    }

        .rt_footer .rt_footer_left::before {
            display: none;
        }
}

    .rt_footer a {
        color: #fff !important;
        transition: var(--dit-transition);
    }

        .rt_footer a:hover {
            opacity: .85;
            text-decoration: none !important;
        }

/* ---------- AJAX loader polish ---------- */
.ajax-loader-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(20, 30, 48, .55) !important;
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000 !important;
    padding: 0 !important;
}

    .ajax-loader-main[style*="display: block"],
    .ajax-loader-main[style*="display:block"] {
        display: flex !important;
    }

.ajax-loader-internal {
    background: #fff !important;
    border-radius: var(--dit-radius) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35) !important;
    padding: 28px 36px !important;
    text-align: center;
    max-width: 90vw;
    display: inline-block;
}

    .ajax-loader-main .ajax-loader-internal {
        padding: 28px 36px !important;
    }

    .ajax-loader-internal img {
        height: 90px !important;
        width: auto;
    }

    .ajax-loader-internal span {
        color: var(--dit-primary-dark);
        font-weight: 500;
        letter-spacing: .3px;
        display: inline-block;
        margin-top: 8px;
    }

/* ---------- Message modal redesign — compact centered toast card ---------- */
#messageModal.modal {
    text-align: center;
    padding: 0 !important;
}

    #messageModal.modal::before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

#messageModal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 460px !important;
    max-width: calc(100vw - 32px);
    margin: 0 auto !important;
}

#messageModal .modal-content {
    width: 100%;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 64px rgba(15, 25, 45, .35), 0 2px 6px rgba(15, 25, 45, .12) !important;
    overflow: hidden;
    animation: ditModalPop .22s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes ditModalPop {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

    #messageModal .modal-header {
        padding: 22px 46px 22px 24px !important;
        border-bottom: none !important;
        background: #fff !important;
        color: var(--dit-primary-dark) !important;
        text-align: left;
        position: relative;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

    #messageModal .modal-header .close {
        position: absolute;
        top: 10px;
        right: 14px;
        margin: 0 !important;
        font-size: 24px;
        line-height: 1;
        opacity: .5;
        color: #4a5568 !important;
        text-shadow: none !important;
        font-weight: 400;
        transition: opacity .15s;
        z-index: 5;
    }

        #messageModal .modal-header .close:hover {
            opacity: 1;
        }

    #messageModal .modal-title {
        color: var(--dit-primary-dark);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.55;
        margin: 0;
        padding: 0;
        text-align: left;
        word-wrap: break-word;
    }

        /* Neutralize Bootstrap alert box inside the modal so it blends as the card body */
        #messageModal .modal-title .alert {
            margin: 0 !important;
            padding: 0 0 0 42px !important;
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            color: inherit !important;
            font-size: 15px;
            line-height: 1.55;
            position: relative;
            min-height: 32px;
            display: flex;
            align-items: center;
        }

        #messageModal .modal-title .alert > i {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            margin: 0 !important;
        }

        /* Alert-type accent (left color bar + icon color) */
        #messageModal .modal-title .alert-success {
            color: #1b5e20 !important;
        }

            #messageModal .modal-title .alert-success > i {
                background: #e6f4ea;
                color: #1e8e3e;
            }

        #messageModal .modal-title .alert-danger {
            color: #8b1a1a !important;
        }

            #messageModal .modal-title .alert-danger > i {
                background: #fdecea;
                color: #d93025;
            }

        #messageModal .modal-title .alert-warning {
            color: #7a4e00 !important;
        }

            #messageModal .modal-title .alert-warning > i {
                background: #fef7e0;
                color: #f9ab00;
            }

        #messageModal .modal-title .alert-info {
            color: #0b4a6b !important;
        }

            #messageModal .modal-title .alert-info > i {
                background: #e8f0fe;
                color: #1a73e8;
            }

    /* Color accent strip on the left of the whole card, based on alert type */
    #messageModal .modal-content:has(.alert-success) {
        border-left: 4px solid #1e8e3e !important;
    }

    #messageModal .modal-content:has(.alert-danger) {
        border-left: 4px solid #d93025 !important;
    }

    #messageModal .modal-content:has(.alert-warning) {
        border-left: 4px solid #f9ab00 !important;
    }

    #messageModal .modal-content:has(.alert-info) {
        border-left: 4px solid #1a73e8 !important;
    }

/* ---------- Utility: shadowed rounded card wrapper ---------- */
.dit-card {
    background: #fff;
    border-radius: var(--dit-radius);
    box-shadow: var(--dit-shadow);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--dit-border);
}

.dit-section-title {
    color: #14345f;
    font-weight: 600;
    letter-spacing: .3px;
    padding-bottom: 10px;
    margin: 0 0 14px 0;
    border-bottom: 1px solid var(--dit-border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    text-transform: uppercase;
}

    .dit-section-title i {
        color: var(--dit-primary);
        font-size: 13px;
    }

/* ---------- Compact info tile (used in extended dashboards) ---------- */
.dit-tile {
    background: #fff;
    border-radius: var(--dit-radius);
    border: 1px solid var(--dit-border);
    border-left: 3px solid var(--dit-primary);
    box-shadow: none;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--dit-transition);
    height: 100%;
    margin-bottom: 15px;
}

    .dit-tile:hover {
        box-shadow: var(--dit-shadow-sm);
    }

    .dit-tile .dit-tile-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--dit-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        flex-shrink: 0;
    }

.dit-tile-icon.bg-primary { background: var(--dit-primary); }
.dit-tile-icon.bg-success { background: var(--dit-success); }
.dit-tile-icon.bg-warning { background: var(--dit-warning); }
.dit-tile-icon.bg-danger  { background: var(--dit-danger); }
.dit-tile-icon.bg-violet  { background: #5a4a8a; }
.dit-tile-icon.bg-teal    { background: #1f6b5d; }
.dit-tile-icon.bg-pink    { background: #9c3d63; }
.dit-tile-icon.bg-slate   { background: var(--dit-slate); }

.dit-tile.tile-primary { border-left-color: var(--dit-primary); }
.dit-tile.tile-success { border-left-color: var(--dit-success); }
.dit-tile.tile-warning { border-left-color: var(--dit-warning); }
.dit-tile.tile-danger  { border-left-color: var(--dit-danger); }
.dit-tile.tile-violet  { border-left-color: #5a4a8a; }
.dit-tile.tile-teal    { border-left-color: #1f6b5d; }
.dit-tile.tile-pink    { border-left-color: #9c3d63; }
.dit-tile.tile-slate   { border-left-color: var(--dit-slate); }

.dit-tile .dit-tile-body {
    flex: 1;
    min-width: 0;
}

.dit-tile .dit-tile-label {
    color: var(--dit-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.dit-tile .dit-tile-value {
    color: var(--dit-slate-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.3px;
}

.dit-tile .dit-tile-sub {
    color: var(--dit-text-muted);
    font-size: 11px;
    margin-top: 4px;
}

/* ---------- Mini progress bar (for KPI reports) ---------- */
.dit-mini-progress {
    height: 6px;
    background: #eceff1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

    .dit-mini-progress > div {
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, #1e88e5, #26a69a);
        transition: width .8s ease;
    }

/* ---------- KPI ring (pure CSS) ---------- */
.dit-ring {
    --p: 0;
    --c: #1e88e5;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), #eceff1 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
}

    .dit-ring::before {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        background: #fff;
    }

    .dit-ring .dit-ring-value {
        position: relative;
        z-index: 1;
        font-weight: 700;
        color: #1a2a44;
        font-size: 18px;
    }

/* ---------- Scrollbar polish (webkit) ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f4f8;
}

::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #78909c;
    }

/* ---------- Small helpers ---------- */
.mt-8 {
    margin-top: 8px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

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

/* ---------- Print-friendly softening ---------- */
@media print {
    .leftpanel, .headerwrapper, .rt_footer, .btn, .pagination { display: none !important; }
    .panel { box-shadow: none !important; border: 1px solid #ccc !important; }
    body { background: #fff !important; }
}

/* ---------- Mobile-only header controls (back button + brand logo) ---------- */
.mobile-back-btn,
.mobile-brand {
    display: none;
}

/* ============================================================
   RESPONSIVE / MOBILE LAYER — refined tablet + phone rules
   ============================================================ */

/* Prevent any horizontal scroll globally */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* --- Tablet (≤ 991px) --- */
@media (max-width: 991px) {
    .contentpanel {
        padding: 14px !important;
    }

    .row-stat h1 {
        font-size: 30px !important;
    }

    .pageheader {
        padding: 14px 16px !important;
    }

    .pageheader h4 {
        font-size: 16px !important;
    }

    .headingSec {
        font-size: 13px !important;
        letter-spacing: normal !important;
    }

    /* Panel body padding tighter */
    .panel-body {
        padding: 14px !important;
    }

    .contentpanel .panel .panel-body {
        padding: 16px !important;
    }

    /* Tables always horizontally scrollable on touch */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto !important;
    }
}

/* --- Mobile + Tablet drawer (≤ 991px) --- */
@media (max-width: 991px) {
    /* Header: single-row compact bar (applies to mobile AND tablet) */
    body header {
        position: sticky;
        top: 0;
        z-index: 500;
    }

    body .headerwrapper {
        height: 64px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: stretch !important;
        background: #ffffff !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .05) !important;
    }

    /* Kill the theme's -240px offset trick — use a compact left cluster */
    /* order:2 explicitly places the hamburger at the RIGHT of the header */
    body .headerwrapper .header-left {
        position: static !important;
        margin-left: 0 !important;
        width: auto !important;
        background: transparent !important;
        border-right: none !important;
        text-align: left !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 8px 0 0 !important;
        flex: 0 0 auto;
        z-index: 3000;
        order: 2;
    }

        /* "Kashmir" wordmark hidden on mobile/tablet — replaced by centered logo */
        body .headerwrapper .header-left .logo {
            display: none !important;
        }

        body .headerwrapper .header-left .pull-right {
            float: none !important;
        }

    /* Hamburger: clean navy rounded-square icon-button (no theme circle) */
    body .headerwrapper .header-left .menu-collapse {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: var(--dit-primary-dark) !important;
        color: #fff !important;
        font-size: 17px !important;
        border: none !important;
        border-radius: 8px !important;
        margin: 0 !important;
        box-shadow: 0 2px 4px rgba(20, 52, 95, .18);
        transition: var(--dit-transition);
    }

        body .headerwrapper .header-left .menu-collapse:hover,
        body .headerwrapper .header-left .menu-collapse:focus {
            background: var(--dit-primary) !important;
            color: #fff !important;
            box-shadow: 0 3px 8px rgba(20, 52, 95, .28);
        }

    /* Header-right fills remaining space: back-btn + centered brand + user dropdown */
    /* order:1 places it FIRST (leftmost) */
    body .headerwrapper .header-right {
        flex: 1 1 auto;
        margin-left: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 0 6px 0 0 !important;
        min-width: 0;
        overflow: hidden;
        gap: 4px;
        border-bottom: none !important;
        order: 1;
    }

        /* Empty on mobile (headingSec hidden) — remove from flex to give room to brand */
        body .headerwrapper .header-right .pull-left {
            display: none !important;
        }

        body .headerwrapper .header-right .pull-right {
            float: none !important;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            margin-left: 0;
        }

    /* Hide long org title — the logo image already carries the branding */
    body .headerwrapper .header-right .headingSec {
        display: none !important;
    }

    /* Mobile back button — subtle icon-only button */
    .mobile-back-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--dit-primary-dark) !important;
        font-size: 18px;
        text-decoration: none !important;
        border: none;
        background: transparent;
        flex: 0 0 auto;
        margin: 0 4px;
        border-radius: 8px;
        transition: background .15s, color .15s;
    }

        .mobile-back-btn:hover,
        .mobile-back-btn:focus,
        .mobile-back-btn:active {
            background: #eef2f7;
            color: var(--dit-primary) !important;
            text-decoration: none !important;
            outline: none;
        }

        .mobile-back-btn i {
            line-height: 1;
        }

    /* Brand logo — grows to fill center, image displayed prominently */
    .mobile-brand {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 64px;
        padding: 8px 8px;
        flex: 1 1 auto;
        min-width: 0;
        text-decoration: none !important;
        overflow: hidden;
    }

        .mobile-brand img {
            display: block;
            max-height: 48px;
            max-width: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        .mobile-brand:hover {
            opacity: .85;
        }

    /* User dropdown caret button — compact, matches header height */
    body .headerwrapper .header-right .btn-group-option .btn {
        height: 44px !important;
        min-height: 44px;
        padding: 0 12px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--dit-primary-dark) !important;
    }

        body .headerwrapper .header-right .btn-group-option .btn:hover,
        body .headerwrapper .header-right .btn-group-option .btn:focus {
            background: #eef2f7 !important;
            border-color: transparent !important;
        }

    /* Sidebar as slide-in drawer */
    body .leftpanel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 270px !important;
        max-width: 82vw !important;
        z-index: 1200 !important;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 4px 0 22px rgba(0, 0, 0, .18);
        display: block !important;
        overflow-y: auto;
    }

    body.show-left .leftpanel {
        transform: translateX(0) !important;
    }

    /* Neutralize theme's shift-right hack; keep content in place */
    body.show-left .mainpanel,
    body.show-left .headerwrapper .header-right,
    body.show-left .headerwrapper .header-left {
        margin-left: 0 !important;
        transform: none !important;
    }

    body .mainpanel {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Backdrop overlay when drawer is open */
    body.show-left::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 25, 45, .55);
        z-index: 1190;
        opacity: 1;
        cursor: pointer;
        animation: ditBackdropFade .22s ease;
    }

    @keyframes ditBackdropFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Prevent body scroll when drawer open */
    body.show-left {
        overflow: hidden !important;
    }

    /* Content: tighter padding */
    .contentpanel {
        padding: 12px !important;
    }

    .pageheader {
        padding: 12px 14px !important;
    }

    .breadcrumb {
        font-size: 11px !important;
        padding: 6px 0 !important;
    }

    /* Panels take full width, tighter margins */
    .panel {
        margin-bottom: 14px !important;
    }

    /* Form columns stack cleanly with breathing room */
    .row > [class*="col-sm-"],
    .row > [class*="col-md-"] {
        margin-bottom: 6px;
    }

    /* Larger tap targets on form controls */
    .form-control,
    input[type="text"].form-control,
    input[type="email"].form-control,
    input[type="password"].form-control,
    input[type="file"].form-control,
    select.form-control {
        min-height: 44px !important;
        font-size: 15px !important;
    }

    textarea.form-control {
        min-height: 88px !important;
        font-size: 15px !important;
    }

    /* Buttons: full-width in panel footers/toolbars */
    .panel-footer .btn,
    .contentpanel form .btn-primary,
    .contentpanel form .btn-success,
    .contentpanel form .btn-danger,
    .contentpanel form input[type="submit"] {
        width: 100% !important;
        min-height: 46px;
        font-size: 14px !important;
    }

    .btn {
        min-height: 40px;
    }

    /* Modals fit the viewport with margin */
    .modal-dialog {
        margin: 12px !important;
        width: auto !important;
    }

    .modal-lg,
    .bs-example-modal-lg {
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* messageModal already handles its own centering; ensure it fits */
    #messageModal .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: 460px !important;
    }

    /* Loader gif smaller on mobile */
    .ajax-loader-internal {
        padding: 20px 24px !important;
    }

        .ajax-loader-internal img {
            height: 70px !important;
        }

    /* Footer: stop pinning to bottom on mobile — let it flow in doc */
    body .rt_footer,
    .rt_footer {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    body {
        padding-bottom: 0 !important;
    }

    .rt_footer p,
    .rt_footer .rt_footer_left,
    .rt_footer .rt_footer_right {
        float: none !important;
        display: block !important;
        margin: 0 !important;
        font-size: 11px !important;
        text-align: center !important;
        width: 100%;
        line-height: 1.45 !important;
        white-space: normal !important;
    }

    .rt_footer .rt_footer_left::before {
        display: none !important;
    }

    /* Dropdown menus reposition to avoid clipping */
    .headerwrapper .header-right .dropdown-menu {
        right: 6px !important;
        left: auto !important;
    }
}

/* --- Small phones (≤ 480px) --- */
@media (max-width: 480px) {
    .headerwrapper .header-left .logo {
        font-size: 14px !important;
    }

    .contentpanel {
        padding: 10px !important;
    }

    .pageheader h4 {
        font-size: 15px !important;
    }

    /* Dashboard tile numbers */
    .row-stat .panel-heading h1,
    .row-stat h1 {
        font-size: 26px !important;
    }

    /* Compact table cells */
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 8px 10px !important;
        font-size: 12.5px !important;
    }

    /* File preview stack: icon slot slightly smaller */
    #userImg,
    .file-type-preview {
        height: 60px !important;
    }

    .file-type-preview i {
        font-size: 24px;
    }

    /* Message modal — tighter on tiny screens */
    #messageModal .modal-header {
        padding: 18px 40px 18px 18px !important;
    }

    #messageModal .modal-title .alert {
        padding-left: 38px !important;
        font-size: 14px !important;
    }
}

/* --- Landscape phones: allow drawer scroll but keep chrome visible --- */
@media (max-width: 768px) and (orientation: landscape) {
    body .leftpanel {
        width: 260px !important;
    }
}

/* ---------- File input polish (native <input type=file>) ---------- */
input[type="file"].form-control {
    padding: 6px 10px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 38px;
    background: #fff !important;
    border: 1px solid var(--dit-border) !important;
    border-radius: var(--dit-radius) !important;
    font-size: 13px !important;
    cursor: pointer;
    color: var(--dit-text-muted);
}

    input[type="file"].form-control::-webkit-file-upload-button,
    input[type="file"].form-control::file-selector-button {
        background: var(--dit-primary);
        color: #fff;
        border: none;
        padding: 6px 14px;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12.5px;
        font-weight: 500;
        margin-right: 10px;
        transition: background .15s;
    }

    input[type="file"].form-control:hover::-webkit-file-upload-button,
    input[type="file"].form-control:hover::file-selector-button {
        background: var(--dit-primary-dark);
    }

    input[type="file"].form-control:focus {
        border-color: var(--dit-primary) !important;
        box-shadow: 0 0 0 2px rgba(30, 77, 139, .12) !important;
        outline: none !important;
    }

/* ---------- Publication Details / Upload page polish ---------- */
/* Give the "empty" table below the form its own panel look */
.contentpanel > .row:last-child > .col-md-12 > .table-responsive {
    background: #fff;
    border: 1px solid var(--dit-border);
    border-radius: var(--dit-radius);
    box-shadow: var(--dit-shadow-sm);
    padding: 0;
    margin-top: 18px;
    overflow: hidden;
}

    .contentpanel > .row:last-child > .col-md-12 > .table-responsive > .table {
        margin-bottom: 0 !important;
    }

/* Nicer table headers */
.table.table-primary > thead > tr > th,
.table-primary > thead > tr > th {
    background: #1e4d8b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid #1e4d8b !important;
    padding: 12px 14px !important;
}

.table.table-primary > tbody > tr > td,
.table-primary > tbody > tr > td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-top: 1px solid #eef2f7 !important;
    color: var(--dit-text) !important;
    font-size: 13px !important;
}

/* Empty-tbody hint */
.table-responsive .table > tbody:empty::after {
    content: "No publication files uploaded yet.";
    display: block;
    padding: 30px 20px;
    text-align: center;
    color: var(--dit-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* Preview image slot: give the empty placeholder a subtle frame */
#userImg {
    border: 1px dashed var(--dit-border);
    border-radius: var(--dit-radius);
    background: #fafbfc;
    object-fit: cover;
}

/* File-type icon preview (for non-image uploads: PDF, DOC, etc.) */
.file-type-preview {
    height: 70px;
    width: 100%;
    border: 1px solid var(--dit-border);
    border-radius: var(--dit-radius);
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--dit-primary);
    line-height: 1;
    padding: 6px 4px;
}

    .file-type-preview i {
        font-size: 28px;
        line-height: 1;
    }

    .file-type-preview .ext-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: var(--dit-text-muted);
    }

    /* Per-type accent colors */
    .file-type-preview.ext-pdf i { color: #d93025; }
    .file-type-preview.ext-doc i,
    .file-type-preview.ext-docx i { color: #1a73e8; }
    .file-type-preview.ext-xls i,
    .file-type-preview.ext-xlsx i,
    .file-type-preview.ext-csv i { color: #1e8e3e; }
    .file-type-preview.ext-ppt i,
    .file-type-preview.ext-pptx i { color: #e8710a; }
    .file-type-preview.ext-zip i,
    .file-type-preview.ext-rar i,
    .file-type-preview.ext-7z i { color: #7a4e00; }
    .file-type-preview.ext-mp3 i,
    .file-type-preview.ext-wav i { color: #9334e6; }
    .file-type-preview.ext-mp4 i,
    .file-type-preview.ext-mov i,
    .file-type-preview.ext-avi i { color: #d81b60; }
    .file-type-preview.ext-txt i,
    .file-type-preview.ext-rtf i { color: var(--dit-slate); }

/* Ensure the "Details" panel spacing feels comfortable on the upload page */
.contentpanel .panel .panel-body {
    padding: 22px !important;
}

.contentpanel .panel .panel-footer {
    padding: 14px 22px !important;
}

/* Better disabled Submit look */
.btn.btn-primary:disabled,
.btn.btn-primary[disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
}