/* Base */
html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

body {
    overflow-x: hidden;
    background: linear-gradient(110deg, #4b6cb7 11.3%, #182848 99.3%);
}

input,
select,
textarea {
    box-sizing: border-box;
}

.button-text {
    line-height: 1;
}

textarea {
    width: 100%;
    max-height: 40vh;
    resize: vertical;
}

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

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb;
}

/* Login */
body.login-page {
    padding: 0;
    background: #f9f9f9;
}

.login-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.login-card {
    width: min(420px, calc(100vw - 32px));
    background: rgba(255, 255, 255, .97);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.login-overlay .row,
.login-overlay .container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Application frame */
body.app-layout {
    background: transparent;
}

.app-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.app-layout .app-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('/images/remeboxback.png') center / cover no-repeat;
}

body.app-layout .page-wrapper {
    background: transparent;
}

.rb-navbar {
    z-index: 1000;
    background: linear-gradient(to right, #003f8c, #56c3f7);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

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

.activity-report-box-blur {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 15px 30px;
    color: #001f5b;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: left;
    background: rgba(255, 255, 255, .8);
    border: 2px solid #001f5b;
    border-radius: 6px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, .25);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.gradient-outline-text {
    color: transparent;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
    background: linear-gradient(270deg, #007bff, #00d4ff, #6610f2, #ff7f50);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #001f5b;
    animation: gradientAnimation 8s ease infinite;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

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

/* Master forms */
.master-card,
.card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

.master-card {
    width: 100%;
    margin: 20px auto;
    overflow: hidden;
    background: linear-gradient(135deg, #e7f2f1 0%, #edf4fb 45%, #e9effa 100%);
}

/* Container History: keep wide tables inside their own horizontal scroll area. */
.master-card.w-full.container-history-content {
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.container-history-content .card,
.container-history-content .card-body {
    min-width: 0;
}

.container-history-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.container-history-table {
    width: max-content;
    min-width: 1100px;
    white-space: nowrap;
}

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

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

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

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

    .master-card.w-full {
        width: calc(100vw - 30px);
    }

.form-container {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

.form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    color: #fff;
    background: linear-gradient(to right, #1e40af, #2563eb 45%, #0d9488);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .25);
}

.heading-3d {
    display: inline-block;
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.form-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-grid-main {
    display: grid;
    grid-template-columns: 460px 460px 220px;
    gap: 16px;
    align-items: start;
}

.form-grid section {
    min-width: 0;
}

.form-container h3 {
    margin: 0 0 10px;
    padding: 8px 12px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(to right, #1e40af, #0d9488);
    border-radius: 5px;
}

.form-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    margin-bottom: 8px;
}

    .form-row > label,
    .form-row > span {
        padding-right: 4px;
        color: #111827;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }

    .form-row .form-control,
    .form-row .form-select {
        width: 100%;
        min-height: 30px;
        background: #f9fbff;
    }

.form-inline {
    display: flex;
    gap: 6px;
    align-items: center;
}

.form-row.captcha-row {
    grid-template-columns: 120px max-content;
}

.label-sm {
    grid-template-columns: 120px 1fr;
}

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

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

.form-inline .form-control,
.form-inline .form-select {
    width: auto;
}

.form-actions-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #e3e8ef;
}

.footer-left {
    flex: 1;
}

.footer-right {
    display: flex;
    gap: 8px;
}

.entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

/* Inward and outward entry cards scroll inside the form on shorter screens. */
.master-card.transaction-entry-shell {
    width: min(100%, 1000px);
    height: auto;
    max-height: calc(100dvh - 120px);
    min-height: 0;
    margin: 12px auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transaction-entry-shell > form {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 14px 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.transaction-entry-shell .select-wash + .select2-container {
    width: 150px !important;
    min-width: 150px;
}

.transaction-entry-shell .select-size + .select2-container {
    width: 120px !important;
    min-width: 120px;
}

.transaction-entry-shell .select-wash + .select2-container .select2-selection__rendered {
    padding-right: 24px;
}

.transaction-entry-shell .select-movement + .select2-container {
    width: 200px !important;
    min-width: 200px;
}

.transaction-entry-shell .select-movement + .select2-container .select2-selection__rendered {
    padding-right: 24px;
}

.transaction-entry-shell .select-place + .select2-container,
.transaction-entry-shell .select-voyage + .select2-container {
    width: 200px !important;
    min-width: 200px;
}

.transaction-entry-shell .select-place + .select2-container .select2-selection__rendered,
.transaction-entry-shell .select-voyage + .select2-container .select2-selection__rendered {
    padding-right: 24px;
}

.transaction-entry-shell .select2-container,
.transaction-entry-shell .select2-selection__rendered,
.select2-container--open .select2-search__field,
.select2-container--open .select2-results__option {
    text-align: left !important;
}

.transaction-entry-shell .entry-footer,
.transaction-entry-shell .transaction-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 10px 0 2px;
    background: #fff;
}

.transaction-entry-shell .entry-footer {
    margin-top: 14px;
}

@media (max-width: 600px) {
    .master-card.transaction-entry-shell {
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 105px);
        margin: 6px auto;
    }

    .transaction-entry-shell > form {
        padding: 0 8px 10px;
    }

    .transaction-entry-shell .entry-footer,
    .transaction-entry-shell .transaction-actions {
        flex-wrap: wrap;
    }
}

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

.payment-row {
    margin-top: 0;
}

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

.payment-label {
    min-width: 90px;
    font-weight: 500;
}

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

/* Existing width utilities */
.w-150 {
    width: 150px !important;
}

.w-xss {
    width: 80px !important;
}

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

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

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

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

.w-xl {
    width: 100% !important;
}

.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;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

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

input[type="date"].date-sm {
    width: 140px !important;
}

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

/* Lists, grids and popups */
.form-container-fixed {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    margin: 5px 0 0 5px;
}

.list-header {
    flex-shrink: 0;
}

.grid-area {
    flex: 1;
    overflow: auto;
}

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

.list-header-bar,
.inward-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(180deg, #326492 0%, #285680 100%);
    border: 1px solid #244e75;
    box-shadow: 0 1px 2px rgba(15, 45, 70, .18);
}

.list-header-bar {
    min-height: 46px;
    height: auto;
    padding: 6px 14px;
    border-radius: 6px 6px 0 0;
}

.list-title {
    font-size: 16px;
    font-weight: 600;
    text-shadow: none;
}

.list-actions,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-group {
    width: 320px;
}

.search-box,
.btn-create {
    height: 34px;
    border-radius: 6px;
}

.list-actions .btn {
    min-height: 34px;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .list-header-bar {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px;
    }

    .list-title {
        flex: 1 0 100%;
    }

    .list-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .search-group {
        width: 100%;
        flex: 1 1 100%;
    }
}

.inward-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.inward-toolbar {
    height: 40px;
    padding: 0 10px;
    border-radius: 4px;
}

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

.inward-grid {
    flex: 1;
    margin-top: 8px;
    overflow-y: auto;
}

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

.action-col {
    text-align: center;
    white-space: nowrap;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.custom-toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2000;
    width: min(600px, 90%);
    max-height: 70vh;
    padding: 0;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3);
    transform: translate(-50%, -50%);
}

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

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

    .custom-toast-container .toast-body {
        padding: 1.5rem 1rem;
        font-size: 1.3rem;
        text-align: center;
    }

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

.modal-open {
    overflow: hidden;
}

.modal-dialog {
    position: relative;
}

/* Tariff matrix */
.tariff-table {
    background: #fff;
    font-size: 12px;
}

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

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

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

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

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

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

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

    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    body {
        font-size: 11px;
    }

    input,
    textarea {
        min-height: 22px;
    }
}

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

    .form-row {
        grid-template-columns: 1fr;
    }

        .form-row > label,
        .form-row > span {
            text-align: left;
        }

        .form-row .form-control,
        .form-row .form-select {
            width: 100% !important;
        }
}
.quick-add-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
}

.quick-add-wrap .select2-container {
    flex: 0 1 auto;
    min-width: 0;
}

.quick-add-wrap .quick-add-master {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}