Lucide Icons 
i[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
    vertical-align: middle;
    margin-right: 6px;
    color: #0b5ed7;  ReMeBox blue 
}



/* ===============================
   LOGIN PAGE ALIGNMENT FIX
================================ 
*/
body.login-page {
    margin: 0;
    padding: 0;
}

 Full screen center 
.login-overlay {
    min-height: 100vh;
    display: flex;
    align-items: center;  vertical center 
    justify-content: center;  horizontal center 
    padding-top: 0;
}

 Login card 
.login-card {
    width: 420px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

 Remove accidental Bootstrap spacing 
.login-overlay .row,
.login-overlay .container {
    margin: 0 !important;
    padding: 0 !important;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   APPLICATION BACKGROUND (MAIN _Layout)
   Scoped safely – does not affect login
========================================================= 
*/
body.app-layout {
    height: 100vh;
    margin: 0;
    overflow: hidden;  🔑 body never scrolls 
    position: relative;  🔑 anchor for bg 
}

/*     Fixed background layer */
body.app-layout {
    position: relative;
    min-height: 100vh;
}

    body.app-layout .app-bg {
        position: fixed;
        inset: 0;
        background-image: url('/images/remeboxback.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1; /* ✅ MUST be negative */
        pointer-events: none;
    }



/* ===============================
   TOP NAVBAR (FIXED HEIGHT)
================================ 
 ===============================
   TOP STRIP – BLENDED BLUE STYLE
================================ 
*/
.rb-navbar {
    height: 64px;
    background: linear-gradient( to bottom, #0a2fd6 0%,  deep royal blue 
    #0b4dff 100%  clean bright blue 
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

     White text on image 
    .rb-navbar .nav-link,
    .rb-depot-name {
        color: #fff !important;
    }

.activity-report-box-blur {
    display: block;
    width: 100vw;  full window width 
    box-sizing: border-box;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8);  semi-transparent white 
    border: 2px solid #001f5b;  dark blue border 
    border-radius: 6px;
    padding: 15px 30px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.25);  soft shadow 
    font-weight: bold;
    font-size: 1.75rem;
    color: #001f5b;
     blur effect 
    backdrop-filter: blur(5px);  makes background slightly blurred 
    -webkit-backdrop-filter: blur(5px);  Safari support 

    margin-bottom: 20px;
}

/* GRADIENT TEXT */
.gradient-outline-text {
    font-weight: bold;
    font-size: 2rem;  adjust as needed 
    background: linear-gradient(270deg, #007bff, #00d4ff, #6610f2, #ff7f50);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
     Dark blue outline 
    -webkit-text-stroke: 1.5px #001f5b;  Chrome/Safari 
    text-stroke: 1.5px #001f5b;  Future support 
     Optional subtle shadow 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     Gradient animation 
    animation: gradientAnimation 8s ease infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.form-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.form-header {
    display: flex;
    align-items: center;  Vertical center 
    justify-content: center;  Horizontal center - optional 
    height: 28px;  or whatever your strip height is 
     MATCHED PREMIUM GRADIENT 
    background: linear-gradient( to right, #1e40af 0%, #2563eb 45%, #0d9488 100% );
     3D EFFECT 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),  top highlight 
    inset 0 -1px 0 rgba(0,0,0,0.25),  bottom depth 
    0 4px 10px rgba(0,0,0,0.25);  lift 
    border-radius: 12px 12px 0 0;
}

.button-text {
    line-height: 1;  Reset if there's extra spacing 
}

/* ===============================
   MASTER / FORM CONTAINER
   =============================== 
*/.form-container,
.master-card,
.card {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 0;
}

/* ===== BASE MASTER CARD ===== */
.master-card {
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    background: linear-gradient( 135deg, #e7f2f1 0%, #edf4fb 45%, #e9effa 100% );
    max-height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    overflow: visible;  
}

/*     ===== CARD SECTIONS ===== */
    .master-card .card-header,
    .master-card .card-footer {
        flex-shrink: 0;
    }

    .master-card .card-body {
        flex: 1 1 auto;
        overflow-y: auto;  ✅ scroll here 
        overflow-x: hidden;
        padding: 12px;
    }

     /*===== MASTER CARD WIDTH VARIANTS ===== */

    .master-card.w-400 {
        width: 400px;
    }

    .master-card.w-600 {
        width: 600px;
    }

    .master-card.w-700 {
        width: 700px;
    }

    .master-card.w-900 {
        width: 900px;
    }

/*     Full width option (for reports / grids) */
    .master-card.w-full {
        width: calc(100vw - 30px);
    }

@media (max-width: 992px) {
    .master-card.w-900,
    .master-card.w-700 {
        width: calc(100vw - 30px);
    }
}

/* ===== MOBILE HANDLING ===== */
@media (max-width: 768px) {

    .master-card {
        height: 100%;  🔑 NOT max-height 
        margin: 0;
        border-radius: 0;
    }

     ✅ Correct selector 
    .master-card-body {
        padding: 10px;
        overflow-y: auto;  🔑 vertical scroll 
        overflow-x: auto;  🔑 horizontal scroll 
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .master-card.w-600,
    .master-card.w-400 {
        width: calc(100vw - 20px);
    }
}

/* ===============================
   FORM HEADER
   =============================== 
 FORM HEADER – FIXED (NO BORDER MERGE) */
.form-header {
    display: flex;
    justify-content: center;  CENTER horizontally 
    align-items: center;  CENTER vertically 

    padding: 10px 0;
    background: transparent;  header itself is neutral 
}

.heading-3d {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffffff;
     Reverse gradient stays 
    background: linear-gradient( to left, #0d9488 0%, #2563eb 60%, #1e40af 100% );
    padding: 8px 16px;
    margin: 0 auto 12px auto;
    border-radius: 6px;
     ❌ REMOVED outer shadow 
     box-shadow: 0 2px 6px rgba(0,0,0,0.25); 
     ✅ Optional very subtle inner depth (safe) 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
     ✅ Keep text clarity 
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    display: inline-block;
}

/* ===============================
   FORM ACTION STRIP (BOTTOM)
   =============================== 
*/.form-actions-strip {
    display: flex;
    justify-content: space-between;  left & right 
    align-items: center;
    margin-top: 20px;
    padding: 12px 20px;
    background-color: #ffffff;  white strip 
    border-top: 1px solid #e3e8ef;  subtle separator 

    border-radius: 0 0 8px 8px;  soft bottom rounding 
}

/* ===============================
   FORM LABELS – WHITE TEXT
   =============================== 
*/
.form-container label,
.master-card label {
    color: #111827;
     white labels 
    font-weight: 400;
}


.form-header,
.form-container h3 {
    background: linear-gradient(to right, #1e40af, #0d9488);
    color: #ffffff;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 400;
    margin: 0;  🔴 important 
    border-radius: 12px 12px 0 0;  🔴 only top corners 
}

.form-container input,
.form-container select,
.form-container textarea {
    background-color: #f9fbff;
}

/* ================================
   Inputs / Textareas / Forms
================================ 
*/input, textarea, select {
    box-sizing: border-box;
}

textarea {
    height: auto;
    max-height: 40vh;  prevent very tall textareas 
    width: 100%;  fill container 
    resize: vertical;  allow vertical resizing only 
}

/* Reduce input/textarea height for small screens */
@media screen and (max-width: 1024px) {
    body {
        font-size: 11x;
    }

    input, textarea {
        height: 22px;
    }
}

 Focus highlight 
.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-inline .form-control {
    width: auto !important;
    min-width: unset !important;
}

.w-150 {
    width: 150px !important;
    flex: 0 0 auto;
}
/* ================================
   Toast / Popup Centered
================================ 
*/.custom-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    width: 60%;
    max-width: 600px;
    max-height: 70vh;  prevent page overflow 
    overflow-y: auto;  scroll inside toast if content too big 
    overflow-x: hidden;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 0;  remove padding from container itself 
}

    .custom-toast-container .toast {
        display: block;  ensure toast is full width 
        width: 100%;
    }

    .custom-toast-container .toast-header {
        padding: 0.75rem 1rem;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
    }

    .custom-toast-container .toast-body {
        padding: 1.5rem 1rem;  add enough space so it’s not a thin strip 
        font-size: 1.3rem;
        text-align: center;
    }

/* Responsive for small screens */
@media (max-width: 768px) {
    .custom-toast-container {
        width: 90%;
        max-width: 90%;
    }
}

/* ================================
   Tables / Forms Container
================================ 
*/.form-container {
    max-height: 100vh;  prevent page scroll due to table/form 
    overflow-y: auto;  scroll inside container if needed 
    padding-bottom: 1rem;
}

/* ================================
   Prevent unwanted scroll from modals
================================ 
*/.modal-open {
    overflow: hidden;  prevent body scroll when modal open 
}

.modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

 allow modal horizontal shifting 
.modal-dialog {
    position: relative;
}

/* ============================= 
 FIXED INDEX PAGE LAYOUT       
 ============================= 
*/
.form-container-fixed {
    margin-top: 5px;
    margin-left: 5px;
    padding: 0;
    height: calc(100vh - 160px);  🔥 key line 
    display: flex;
    flex-direction: column;
}

 /*Header + search stays natural height */
.list-header {
    flex-shrink: 0;
}

 /*GRID AREA gets remaining space */
.grid-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

     Sticky table header 
    .grid-area thead th {
        position: sticky;
        top: 0;
        z-index: 2;
    }

/* =========================================================
   MASTER LIST HEADER BAR  (GLOBAL)
   Used for ALL Master Index pages
   ========================================================= 
*/.list-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    background: linear-gradient(135deg, #006994, #87ceeb);
    color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}

.list-title {
    font-weight: bold;
    font-size: 16px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

 /*RIGHT SIDE */
.list-actions {
    display: flex;
    align-items: center;
    gap: 10px;  👈 SPACIOUS 
    margin: 0;
}

.search-group {
    width: 320px;
}

.search-box {
    height: 30px;
}

.btn-create {
    height: 30px;
    font-size: 14px;
}
 Full height 
.inward-page {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

 /*Header strip */
.inward-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background: linear-gradient(90deg, deepskyblue, #2a6fd6);
    color: #fff;
    padding: 0 10px;
    border-radius: 4px;
}

.toolbar-left {
    font-size: 16px;
    font-weight: 500;
}

.toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
}

.search-box {
    width: 220px;
}

 /*Grid fills remaining space */
.inward-grid {
    flex: 1;
    overflow-y: auto;
    margin-top: 8px;
}

 /*Table header */
.table-header th {
    background: #5bc0eb;
    color: white;
    text-align: center;
    white-space: nowrap;
}

 /*Action column */
.action-col {
    white-space: nowrap;
    text-align: center;
}

 /*Pagination center */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}
/* =========================================================
   INPUT LABEL AND TEXT LEFT RIGHT ALIGNMENT
   CAN BE Used for ALL pages
   ========================================================= 
*/

 /*===== Inward / Outward Standard Form ===== */
.form-grid-main {
    display: grid;
    grid-template-columns: 460px 460px 220px;  👈 exact control 
    column-gap: 16px;
    align-items: start;
}

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

.form-row {
    display: grid;
    grid-template-columns: 100px auto;  🔥 KEY CHANGE 
    column-gap: 10px;
    align-items: center;
    row-gap: 6px;  ✅ ADD THIS 
    margin-bottom: 8px;  ✅ AND THIS 
    align-items: center;
}

    .form-row label {
        font-weight: 200;
        text-align: right;
        padding-right: 10px;
        white-space: nowrap;
    }

    .form-row input,
    .form-row select {
        height: 28px;
    }

.form-inline {
    display: flex;
    gap: 4px;
    align-items: center;
}
 /*captcha / small-input row */
.form-row.captcha-row {
    grid-template-columns: 100px max-content;
}

/* =========================================================
   STOP BOOTSTRAP FROM FORCING FULL WIDTH INSIDE FORM GRID
   ========================================================= 
*/
.form-row input,
.form-row select,
.form-row textarea {
    width: auto !important;  🔥 THIS IS THE KEY 
}



/* input width variants 
 =========================================================
   SELECT2 WIDTH ALIGNMENT – GLOBAL STANDARD
   ========================================================= 
*/
 /*Match Select2 width with input width system */
.w-xss + .select2-container {
    width: 80px !important;
}

.w-xs + .select2-container {
    width: 100px !important;
}

.w-sm + .select2-container {
    width: 150px !important;
}

.w-md + .select2-container {
    width: 220px !important;
}

.w-lg + .select2-container {
    width: 300px !important;
}

.w-xl + .select2-container {
    width: 100% !important;
}
/* ===============================
   REMOVE NUMBER SPIN BUTTONS
   =============================== 
*/
 /*Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

 /*Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* =========================================================
   FIX: Allow width utilities inside form-row grid
   ========================================================= 
*/
.form-row .form-control[class*="w-"] {
    justify-self: start;
}

 /*label width variants */
.label-sm {
    grid-template-columns: 120px 1fr;
}

.label-md {
    grid-template-columns: 160px 1fr;
}

.label-lg {
    grid-template-columns: 200px 1fr;
}

 /*DATE & TIME WIDTH CONTROL */
input[type="date"].date-sm {
    width: 140px !important;
    min-width: 140px !important;
}

input[type="time"].time-xs {
    width: 100px !important;
    min-width: 100px !important;
}

@media (max-width: 992px) {
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}
.entry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.footer-left {
    flex: 1;
}

.footer-right {
    display: flex;
    gap: 8px;
}
.payment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0px;
}

.payment-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payment-right {
    display: none;
    align-items: center;
    gap: 8px;
}

.payment-label {
    min-width: 90px;  aligns nicely with your form labels 
    font-weight: 500;
}

.upi-input {
    width: 150px;
    height: 28px;
}


/*// TARIFF TABLEt //
 ===== TARIFF MATRIX TABLE ===== 
*/.tariff-table {
    background: #fff;
    font-size: 12px;
}

.tariff-table thead th {
    background: linear-gradient(90deg, #48b3ff, #2a8fee);
    color: #fff;
    text-align: center;
    font-weight: 600;
    padding: 6px;
}

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

    .tariff-table tbody td:first-child {
        font-weight: 500;
        background: #f5f9ff;
    }

 /*Inputs inside table */
.tariff-table input {
    width: 100%;
    height: 30px;
    border: 1px solid #cfd8e3;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 12px;
    text-align: right;
}

     Focus 
    .tariff-table input:focus {
        outline: none;
        border-color: #2a8fee;
        box-shadow: 0 0 0 2px rgba(42,143,238,0.15);
    }


/*=========================
   NAV DROPDOWN RESPONSIVE FIX
========================= 
*/
 /*Desktop default */
.navbar .dropdown-menu {
    max-width: 320px;
    width: auto;
}

 /*🔑 Mobile fix */
@media (max-width: 768px) {

    .navbar .dropdown-menu {
        position: fixed !important;
        top: 56px;  height of navbar 
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0;
        margin: 0;
    }

        .navbar .dropdown-menu.show {
            transform: none !important;
        }
}