/* ==========================================================================
   MASARCEP
   Common Application Design System
   ========================================================================== */


/* ==========================================================================
   1. Reset / Variables
   ========================================================================== */

:root {
    --primary: #0878c9;
    --primary-dark: #0766ad;
    --primary-soft: #eaf5fd;

    --sidebar: #183d5d;
    --sidebar-dark: #14334e;
    --sidebar-text: #dce8f2;

    --orange: #ff7900;

    --page-bg: #f4f8fc;
    --card-bg: #ffffff;

    --text: #16324d;
    --text-medium: #52677b;
    --text-muted: #8293a4;

    --border: #dce5ed;
    --border-light: #ebf0f4;

    --success-bg: #d9f7e6;
    --success-text: #087443;

    --completed-bg: #e9eef3;
    --completed-text: #42586d;

    --danger: #e53935;
    --danger-soft: #fff0ef;

    --warning: #e99a16;

    --radius: 8px;
    --radius-large: 12px;

    --sidebar-width: 250px;
    --header-height: 60px;

    --shadow:
        0 3px 12px
        rgba(24, 61, 93, .06);
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;

    margin: 0;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 14px;

    background: var(--page-bg);
}


button,
input,
select,
textarea {
    font: inherit;
}


a {
    color: inherit;
}


/* ==========================================================================
   2. Login Page
   ========================================================================== */

.login-body {
    background: #eef5fa;
}


.login-shell {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(400px, 46%)
        1fr;
}


.login-brand-panel {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 60px;

    background:
        linear-gradient(
            145deg,
            #123958,
            #075f9d 65%,
            #0878c9
        );
}


.login-brand-panel::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: -150px;
    right: -140px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .05);
}


.login-brand-panel::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -120px;
    left: -90px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .04);
}


.login-brand-content {
    position: relative;

    z-index: 2;

    max-width: 520px;

    color: #ffffff;
}


.login-brand-logo {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 70px;
}


.login-brand-logo img {
    width: 58px;
    height: 58px;

    object-fit: cover;

    border-radius: 13px;
}


.login-brand-name {
    color: #ffffff;

    font-size: 31px;
    font-weight: 750;

    letter-spacing: -.8px;
}


.login-brand-name span {
    color: #ff9b21;
}


.login-brand-copy h1 {
    max-width: 420px;

    margin: 0 0 20px;

    font-size: 42px;
    line-height: 1.13;

    letter-spacing: -1.4px;
}


.login-brand-copy p {
    max-width: 450px;

    margin: 0;

    color: #d8e9f5;

    font-size: 16px;
    line-height: 1.75;
}


.login-form-panel {
    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;
}


.login-card {
    width: 100%;

    max-width: 410px;
}


.login-card-header {
    margin-bottom: 28px;
}


.login-card-header h2 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 30px;

    letter-spacing: -.6px;
}


.login-card-header p {
    margin: 0;

    color: var(--text-muted);

    font-size: 14px;
}


.login-card .form-group {
    margin-bottom: 19px;
}


.login-card label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}


.login-card input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border:
        1px solid
        #ccd9e4;

    border-radius: 7px;

    outline: 0;

    background: #ffffff;

    color: var(--text);

    transition:
        border .2s,
        box-shadow .2s;
}


.login-card input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8, 120, 201, .10);
}


.password-field {
    position: relative;
}


.password-field input {
    padding-right: 65px;
}


.password-toggle {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    padding: 7px;

    border: 0;

    background: transparent;

    color: var(--primary);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


.login-submit {
    width: 100%;
    height: 46px;

    margin-top: 5px;

    border: 0;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #0766ad
        );

    color: #ffffff;

    font-weight: 650;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(8, 120, 201, .18);

    transition:
        transform .15s,
        box-shadow .2s;
}


.login-submit:hover {
    box-shadow:
        0 7px 18px
        rgba(8, 120, 201, .24);
}


.login-submit:active {
    transform: translateY(1px);
}


.login-footer-text {
    margin-top: 25px;

    color: var(--text-muted);

    font-size: 12px;

    text-align: center;
}


/* ==========================================================================
   3. Alerts
   ========================================================================== */

.alert {
    margin-bottom: 18px;

    padding: 11px 13px;

    border-radius: 7px;

    font-size: 13px;
}


.alert-error,
.error {
    border:
        1px solid
        #ffc5c1;

    background: #fff1f0;

    color: #bd302b;
}


.alert-success,
.success {
    border:
        1px solid
        #bce8ce;

    background: #edfbf3;

    color: #087443;
}


/* ==========================================================================
   4. Sidebar
   ========================================================================== */

.app-sidebar {
    position: fixed;

    z-index: 1100;

    top: 0;
    bottom: 0;
    left: 0;

    width: var(--sidebar-width);

    display: flex;

    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            var(--sidebar),
            var(--sidebar-dark)
        );

    color: var(--sidebar-text);

    box-shadow:
        3px 0 12px
        rgba(15, 43, 65, .08);

    transition:
        transform .25s ease;
}


.sidebar-brand {
    flex-shrink: 0;

    height: var(--header-height);

    background: #ffffff;
}


.sidebar-brand a {
    height: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 22px;

    text-decoration: none;
}


.sidebar-brand img {
    width: 38px;
    height: 38px;

    object-fit: cover;

    border-radius: 8px;
}


.sidebar-brand-text {
    color: #15426c;

    font-size: 22px;
    font-weight: 750;

    letter-spacing: -.7px;

    white-space: nowrap;
}


.sidebar-brand-text span {
    color: var(--orange);
}


.sidebar-navigation {
    flex: 1;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 15px 0;
}


.sidebar-item,
.sidebar-parent {
    position: relative;

    width: 100%;
    min-height: 47px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        0 22px;

    border: 0;

    background: transparent;

    color: var(--sidebar-text);

    text-decoration: none;

    text-align: left;

    cursor: pointer;

    transition:
        background .18s,
        color .18s;
}


.sidebar-item:hover,
.sidebar-parent:hover {
    background:
        rgba(255,255,255,.065);

    color: #ffffff;
}


.sidebar-item.active,
.sidebar-menu-group.open
> .sidebar-parent {
    background:
        linear-gradient(
            90deg,
            #0878c9,
            #0b6bad
        );

    color: #ffffff;
}


.sidebar-item.active::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background: #21a4fa;
}


.menu-symbol {
    width: 23px;

    flex-shrink: 0;

    color: currentColor;

    font-size: 18px;

    text-align: center;
}


.menu-text {
    flex: 1;

    font-size: 14px;

    white-space: nowrap;
}


.menu-arrow {
    margin-left: auto;

    font-size: 20px;

    transition:
        transform .2s;
}


.sidebar-menu-group.open
.menu-arrow {
    transform: rotate(90deg);
}


.sidebar-submenu {
    display: none;

    padding:
        4px 0 6px;

    background:
        rgba(0,0,0,.10);
}


.sidebar-menu-group.open
.sidebar-submenu {
    display: block;
}


.sidebar-submenu a {
    display: block;

    padding:
        10px 18px
        10px 57px;

    color: #cfe0ec;

    font-size: 13px;

    text-decoration: none;

    transition:
        background .18s,
        color .18s;
}


.sidebar-submenu a:hover {
    background:
        rgba(255,255,255,.055);

    color: #ffffff;
}


.sidebar-submenu a.active {
    border-left:
        4px solid #20a7fb;

    background:
        rgba(8,120,201,.55);

    color: #ffffff;

    padding-left: 53px;
}


.sidebar-section-label {
    margin:
        17px 22px 7px;

    color: #7fa0b8;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .9px;

    text-transform: uppercase;
}


.sidebar-bottom {
    flex-shrink: 0;

    padding: 8px 0;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.sidebar-logout:hover {
    background:
        rgba(255, 72, 72, .10);

    color: #ffffff;
}


/* ==========================================================================
   5. Header
   ========================================================================== */

.app-header {
    position: fixed;

    z-index: 1000;

    top: 0;
    right: 0;
    left: var(--sidebar-width);

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 25px;

    border-bottom:
        1px solid
        var(--border);

    background: #ffffff;

    box-shadow:
        0 1px 7px
        rgba(24,61,93,.04);

    transition:
        left .25s ease;
}


.app-header-left,
.app-header-right {
    display: flex;

    align-items: center;
}


.sidebar-toggle {
    width: 38px;
    height: 38px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    padding: 0;

    border: 0;

    border-radius: 6px;

    background: transparent;

    cursor: pointer;
}


.sidebar-toggle:hover {
    background: #f0f6fa;
}


.sidebar-toggle span {
    width: 18px;
    height: 2px;

    border-radius: 4px;

    background: #234b69;
}


.header-user {
    display: flex;

    align-items: center;

    gap: 9px;
}


.header-avatar {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0580d6,
            #0668ad
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}


.header-user-copy strong {
    display: block;

    color: var(--text);

    font-size: 13px;
}


.header-user-copy span {
    display: block;

    margin-top: 1px;

    color: var(--text-muted);

    font-size: 10px;
}


/* ==========================================================================
   6. Main Layout / Footer
   ========================================================================== */

.app-main {
    min-height:
        calc(
            100vh - 42px
        );

    margin-left:
        var(--sidebar-width);

    padding:
        calc(
            var(--header-height)
            + 25px
        )
        26px
        35px;

    transition:
        margin-left .25s ease;
}


.app-footer {
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-left:
        var(--sidebar-width);

    padding:
        0 26px;

    border-top:
        1px solid
        var(--border-light);

    background: #ffffff;

    color: var(--text-muted);

    font-size: 11px;

    transition:
        margin-left .25s ease;
}


.page-container,
.container {
    width: 100%;

    max-width: 1450px;

    margin: 0 auto;
}


/* ==========================================================================
   7. Sidebar Collapsed
   ========================================================================== */

.sidebar-collapsed
.app-sidebar {
    transform:
        translateX(
            calc(
                var(--sidebar-width)
                * -1
            )
        );
}


.sidebar-collapsed
.app-header {
    left: 0;
}


.sidebar-collapsed
.app-main,
.sidebar-collapsed
.app-footer {
    margin-left: 0;
}


/* ==========================================================================
   8. Common Page Toolbar
   ========================================================================== */

.page-toolbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}


.page-toolbar h1 {
    margin: 0;

    color: #173653;

    font-size: 29px;
    font-weight: 720;

    line-height: 1.2;

    letter-spacing: -.7px;
}


.page-description {
    margin: 5px 0 0;

    color: var(--text-muted);

    font-size: 13px;
}


.btn-primary {
    min-height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 0 16px;

    border: 0;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #0878c9,
            #0668ad
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 620;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 4px 10px
        rgba(8,120,201,.14);
}


.btn-primary:hover {
    background:
        #0668ad;
}


.btn-secondary,
.btn-light {
    min-height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 13px;

    border:
        1px solid
        #ccd9e3;

    border-radius: 7px;

    background: #ffffff;

    color: var(--text);

    font-size: 13px;

    text-decoration: none;

    cursor: pointer;
}


/* ==========================================================================
   9. Common Form Controls
   ========================================================================== */

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


.form-group label,
.filter-field label {
    display: block;

    margin-bottom: 6px;

    color: #344e65;

    font-size: 12px;
    font-weight: 620;
}


input,
select,
textarea {
    border:
        1px solid
        #ccd9e3;

    border-radius: 6px;

    outline: 0;

    background: #ffffff;

    color: var(--text);
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8,120,201,.08);
}


/* ==========================================================================
   10. Fancy Lots Filter
   ========================================================================== */

.filter-card {
    margin-bottom: 18px;

    padding: 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        rgba(255,255,255,.96);

    box-shadow: var(--shadow);
}


.filter-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(145px, 1fr)
        )
        auto;

    gap: 11px;

    align-items: end;
}


.filter-field input,
.filter-field select {
    width: 100%;
    height: 38px;

    padding: 0 10px;
}


.filter-actions {
    display: flex;

    gap: 8px;

    align-items: flex-end;
}


/* ==========================================================================
   11. Fancy Lots Table
   ========================================================================== */

.table-card {
    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #ffffff;

    box-shadow: var(--shadow);
}


.table-card-header {
    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 0 16px;

    border-bottom:
        1px solid
        var(--border-light);
}


.table-title {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #173653;

    font-size: 16px;
    font-weight: 700;
}


.table-title-count {
    color: var(--text-medium);
}


.table-responsive {
    width: 100%;

    overflow-x: auto;
}


.compact-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 12.5px;
}


.compact-table th {
    height: 38px;

    padding: 0 10px;

    border-bottom:
        1px solid
        var(--border);

    background: #f1f6fa;

    color: #4d667b;

    font-size: 11px;
    font-weight: 650;

    text-align: left;

    white-space: nowrap;
}


.compact-table td {
    padding: 8px 10px;

    border-bottom:
        1px solid
        var(--border-light);

    color: #27445e;

    vertical-align: middle;
}


.compact-table tbody tr {
    transition:
        background .15s;
}


.compact-table tbody tr:hover {
    background: #f9fcfe;
}


.compact-table tbody tr:last-child td {
    border-bottom: 0;
}


.text-right {
    text-align: right !important;
}


.text-center {
    text-align: center !important;
}


/* ==========================================================================
   12. Fancy Lots Table Cells
   ========================================================================== */

.lot-number {
    color: #173653;

    font-weight: 650;

    white-space: nowrap;
}


.assignment-cell {
    min-width: 135px;
}


.assignment-cell strong {
    display: block;

    color: #173653;

    font-size: 12px;
    font-weight: 650;
}


.assignment-cell small {
    display: block;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 10.5px;
}


.comment-preview {
    max-width: 150px;

    overflow: hidden;

    color: var(--text-medium);

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================================
   13. Status
   ========================================================================== */

.inline-form {
    display: inline;
}


.status-pill {
    min-width: 65px;

    padding: 5px 10px;

    border: 0;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 650;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;
}


.status-active {
    background:
        var(--success-bg);

    color:
        var(--success-text);
}


.status-completed {
    background:
        var(--completed-bg);

    color:
        var(--completed-text);
}


.status-pill:hover {
    filter: brightness(.97);
}


/* ==========================================================================
   14. Actions
   ========================================================================== */

.table-actions {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
}


.action-link {
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--primary);

    font-size: 11.5px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}


.action-link:hover {
    text-decoration: underline;
}


.action-delete {
    color: var(--danger);
}


.locked-text {
    color: #8798a8;

    font-size: 11.5px;
}


/* ==========================================================================
   15. Table Footer / Pagination
   ========================================================================== */

.table-footer {
    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        10px 16px;

    border-top:
        1px solid
        var(--border-light);

    background: #ffffff;
}


.pagination-summary {
    color: var(--text-muted);

    font-size: 11.5px;
}


.pagination {
    display: flex;

    align-items: center;

    gap: 4px;
}


.pagination a,
.pagination .current {
    min-width: 31px;
    height: 31px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 8px;

    border:
        1px solid
        #d4e0e9;

    border-radius: 5px;

    background: #ffffff;

    color: #435d73;

    font-size: 11.5px;

    text-decoration: none;
}


.pagination a:hover {
    border-color:
        var(--primary);

    color:
        var(--primary);
}


.pagination .current {
    border-color:
        var(--primary);

    background:
        var(--primary);

    color: #ffffff;
}


/* ==========================================================================
   16. Empty / Loading
   ========================================================================== */

.loading-state,
.empty-state {
    padding: 45px 20px;

    color: var(--text-muted);

    font-size: 13px;

    text-align: center;
}


/* ==========================================================================
   17. Mobile Sidebar Overlay
   ========================================================================== */

.mobile-sidebar-overlay {
    position: fixed;

    z-index: 1050;

    inset: 0;

    display: none;

    background:
        rgba(11, 31, 48, .48);
}


/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1050px) {

    .filter-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .filter-actions {
        grid-column:
            span 2;
    }

}


@media (max-width: 900px) {

    .app-sidebar {
        transform:
            translateX(
                calc(
                    var(--sidebar-width)
                    * -1
                )
            );
    }

    .app-header {
        left: 0;
    }

    .app-main,
    .app-footer {
        margin-left: 0;
    }

    .mobile-sidebar-open
    .app-sidebar {
        transform:
            translateX(0);
    }

    .mobile-sidebar-open
    .mobile-sidebar-overlay {
        display: block;
    }

}


@media (max-width: 700px) {

    .login-shell {
        display: block;
    }

    .login-brand-panel {
        min-height: auto;

        padding:
            28px 24px;
    }

    .login-brand-logo {
        margin-bottom: 22px;
    }

    .login-brand-copy h1 {
        font-size: 27px;
    }

    .login-brand-copy p {
        font-size: 14px;
    }

    .login-form-panel {
        padding:
            35px 22px;
    }

    .app-main {
        padding:
            78px 14px
            28px;
    }

    .app-header {
        padding: 0 14px;
    }

    .page-toolbar {
        align-items: stretch;

        flex-direction: column;
    }

    .page-toolbar h1 {
        font-size: 25px;
    }

    .btn-primary {
        align-self: flex-start;
    }

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

    .filter-actions {
        grid-column: auto;
    }

    .table-footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .app-footer-right {
        display: none;
    }

}


@media (max-width: 480px) {

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        min-height: 100vh;
    }

    .header-user-copy {
        display: none;
    }

}
/* ==========================================================================
   ADMIN DASHBOARD
   ========================================================================== */


/* ==========================================================================
   Dashboard Header
   ========================================================================== */

.dashboard-page-toolbar {
    margin-bottom: 20px;
}


.dashboard-date {
    padding:
        8px 12px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    background: #ffffff;

    color: var(--text-medium);

    font-size: 12px;

    box-shadow:
        0 2px 7px
        rgba(24,61,93,.04);
}


/* ==========================================================================
   Main Summary Cards
   ========================================================================== */

.dashboard-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-bottom: 16px;
}


.summary-card {
    position: relative;

    display: block;

    min-width: 0;

    padding: 17px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #ffffff;

    color: inherit;

    text-decoration: none;

    box-shadow:
        var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.summary-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #c9dbe9;

    box-shadow:
        0 7px 20px
        rgba(24,61,93,.09);
}


.summary-card-top {
    display: flex;

    align-items: center;

    gap: 10px;
}


.summary-icon {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    font-size: 13px;
    font-weight: 750;
}


.summary-icon-users {
    background: #e8f4fd;

    color: #0878c9;
}


.summary-icon-vendors {
    background: #f2edff;

    color: #7652c7;
}


.summary-icon-lots {
    background: #fff2e5;

    color: #e8780b;
}


.summary-icon-tasks {
    background: #e9f8ef;

    color: #14834d;
}


.summary-card-label {
    color:
        var(--text-medium);

    font-size: 12px;
    font-weight: 600;
}


.summary-card-value {
    margin-top: 14px;

    color: #173653;

    font-size: 28px;
    font-weight: 750;

    line-height: 1;
}


.summary-card-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 12px;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.summary-card-meta strong {
    color:
        var(--text-medium);

    font-weight: 700;
}


/* ==========================================================================
   Mini Statistics
   ========================================================================== */

.dashboard-mini-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 16px;
}


.mini-stat-card {
    min-width: 0;

    padding:
        14px 15px;

    border:
        1px solid
        var(--border-light);

    border-radius:
        9px;

    background:
        #ffffff;
}


.mini-stat-label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--text-muted);

    font-size: 10.5px;
    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: .03em;
}


.mini-stat-card strong {
    display: block;

    overflow: hidden;

    color: #173653;

    font-size: 18px;
    font-weight: 720;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.mini-stat-card small {
    display: block;

    margin-top: 5px;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


/* ==========================================================================
   Dashboard Panels
   ========================================================================== */

.dashboard-analysis-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;

    margin-bottom: 16px;
}


.dashboard-panel {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #ffffff;

    box-shadow:
        var(--shadow);
}


.dashboard-panel-header {
    min-height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        13px 16px;

    border-bottom:
        1px solid
        var(--border-light);
}


.dashboard-panel-header h2 {
    margin: 0;

    color: #173653;

    font-size: 15px;
    font-weight: 700;
}


.dashboard-panel-header p {
    margin:
        3px 0 0;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.dashboard-panel-header > a {
    color:
        var(--primary);

    font-size: 11.5px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}


.dashboard-panel-header > a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Progress Analytics
   ========================================================================== */

.analytics-progress-list {
    padding:
        16px;
}


.analytics-progress-item
+ .analytics-progress-item {
    margin-top: 18px;
}


.analytics-progress-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;

    color:
        var(--text-medium);

    font-size: 11.5px;
}


.analytics-progress-heading strong {
    color: #173653;

    font-size: 12px;
}


.analytics-progress-heading small {
    margin-left: 4px;

    color:
        var(--text-muted);

    font-size: 9.5px;
    font-weight: 500;
}


.analytics-track {
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background: #edf2f6;
}


.analytics-fill {
    height: 100%;

    min-width: 0;

    border-radius: inherit;

    transition:
        width .3s ease;
}


.analytics-fill-active {
    background:
        #21a465;
}


.analytics-fill-completed {
    background:
        #73879a;
}


.analytics-fill-pending {
    background:
        #e5a126;
}


.analytics-fill-progress {
    background:
        #2f89d0;
}


.analytics-total {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        11px 16px;

    border-top:
        1px solid
        var(--border-light);

    background:
        #fafcfd;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.analytics-total strong {
    color: #173653;

    font-size: 13px;
}


/* ==========================================================================
   Monthly Chart
   ========================================================================== */

.dashboard-monthly-panel {
    margin-bottom: 16px;
}


.monthly-chart {
    height: 230px;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap: 18px;

    align-items: end;

    padding:
        22px
        24px
        18px;
}


.monthly-chart-column {
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;
}


.monthly-chart-value {
    min-height: 20px;

    margin-bottom: 6px;

    color:
        var(--text-medium);

    font-size: 10.5px;
    font-weight: 650;
}


.monthly-chart-bar-area {
    width: 100%;
    height: 150px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    border-bottom:
        1px solid
        var(--border-light);
}


.monthly-chart-bar {
    width: 52%;

    min-height: 4px;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #28a1e8,
            #0878c9
        );

    transition:
        opacity .2s ease;
}


.monthly-chart-bar:hover {
    opacity: .78;
}


.monthly-chart-label {
    margin-top: 8px;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


/* ==========================================================================
   Bottom Grid
   ========================================================================== */

.dashboard-bottom-grid {
    display: grid;

    grid-template-columns:
        minmax(
            260px,
            .72fr
        )
        minmax(
            0,
            1.6fr
        );

    gap: 16px;
}


/* ==========================================================================
   Top Vendors
   ========================================================================== */

.dashboard-ranking {
    padding:
        3px 16px
        8px;
}


.ranking-row {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 56px;

    border-bottom:
        1px solid
        var(--border-light);
}


.ranking-row:last-child {
    border-bottom: 0;
}


.ranking-number {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #edf5fb;

    color:
        var(--primary);

    font-size: 10px;
    font-weight: 700;
}


.ranking-name {
    min-width: 0;

    flex: 1;
}


.ranking-name strong {
    display: block;

    overflow: hidden;

    color: #173653;

    font-size: 11.5px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ranking-name small {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


.ranking-value {
    flex-shrink: 0;

    text-align: right;
}


.ranking-value strong {
    display: block;

    color: #173653;

    font-size: 13px;
}


.ranking-value small {
    display: block;

    color:
        var(--text-muted);

    font-size: 9px;
}


/* ==========================================================================
   Recent Fancy Lots
   ========================================================================== */

.dashboard-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.dashboard-table {
    width: 100%;

    border-collapse:
        collapse;

    font-size: 11px;
}


.dashboard-table th {
    padding:
        9px 11px;

    border-bottom:
        1px solid
        var(--border);

    background:
        #f5f9fc;

    color:
        var(--text-medium);

    font-size: 9.5px;
    font-weight: 650;

    text-align: left;

    text-transform:
        uppercase;

    white-space: nowrap;
}


.dashboard-table td {
    padding:
        9px 11px;

    border-bottom:
        1px solid
        var(--border-light);

    color:
        #36536b;

    vertical-align: middle;

    white-space: nowrap;
}


.dashboard-table tbody
tr:last-child td {
    border-bottom: 0;
}


.dashboard-table tbody
tr:hover {
    background:
        #fafcfe;
}


.dashboard-lot-link {
    color:
        var(--primary);

    font-weight: 650;

    text-decoration: none;
}


.dashboard-lot-link:hover {
    text-decoration: underline;
}


.dashboard-assignment strong {
    display: block;

    color: #173653;

    font-size: 10.5px;
}


.dashboard-assignment small {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 9px;
}


.dashboard-status {
    display: inline-block;

    min-width: 58px;

    padding:
        4px 8px;

    border-radius:
        20px;

    font-size: 9.5px;
    font-weight: 650;

    text-align: center;
}


.dashboard-status-active {
    background:
        var(--success-bg);

    color:
        var(--success-text);
}


.dashboard-status-completed {
    background:
        var(--completed-bg);

    color:
        var(--completed-text);
}


.dashboard-empty {
    padding: 35px 15px;

    color:
        var(--text-muted);

    font-size: 11.5px;

    text-align: center;
}


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

@media (
    max-width: 1150px
) {

    .dashboard-summary-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .dashboard-mini-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .dashboard-bottom-grid {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 760px
) {

    .dashboard-analysis-grid {
        grid-template-columns:
            1fr;
    }


    .monthly-chart {
        gap: 8px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .monthly-chart-bar {
        width: 70%;
    }

}


@media (
    max-width: 560px
) {

    .dashboard-summary-grid,
    .dashboard-mini-grid {
        grid-template-columns:
            1fr;
    }


    .dashboard-date {
        align-self: flex-start;
    }


    .monthly-chart {
        height: 205px;
    }


    .monthly-chart-bar-area {
        height: 125px;
    }

}
/* ==========================================================================
   COMMON PROFESSIONAL FORMS
   ========================================================================== */

.form-card {
    max-width: 950px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #ffffff;

    box-shadow:
        var(--shadow);
}


.form-section {
    padding: 22px;

    border-bottom:
        1px solid
        var(--border-light);
}


.form-section:last-of-type {
    border-bottom: 0;
}


.form-section-heading {
    margin-bottom: 18px;
}


.form-section-heading h2 {
    margin: 0;

    color: #173653;

    font-size: 16px;
    font-weight: 700;
}


.form-section-heading p {
    margin: 4px 0 0;

    color:
        var(--text-muted);

    font-size: 11px;
}


.form-grid {
    display: grid;

    gap:
        16px 18px;
}


.form-grid-two {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
}


.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;

    min-height: 40px;

    padding:
        8px 10px;
}


.form-card textarea {
    min-height: 100px;

    resize: vertical;
}


.form-help {
    display: block;

    margin-top: 5px;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.required {
    color:
        var(--danger);
}


.multi-select {
    min-height: 150px !important;

    padding: 5px !important;
}


.multi-select option {
    padding:
        7px 8px;
}


.form-card-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    padding:
        15px 22px;

    background:
        #fafcfd;

    border-top:
        1px solid
        var(--border-light);
}


/* ==========================================================================
   USERS TABLE
   ========================================================================== */

.user-table-profile {
    min-width: 150px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.user-table-avatar {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        #e7f3fc;

    color:
        var(--primary);

    font-size: 11px;
    font-weight: 700;
}


.user-table-profile strong {
    display: block;

    color: #173653;

    font-size: 12px;
}


.user-table-profile small {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


.user-id-text {
    color: #173653;

    font-size: 11.5px;
    font-weight: 600;
}


.table-muted {
    color:
        #95a4b2;

    font-size: 10.5px;
}


.location-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    max-width: 270px;
}


.location-tag {
    display: inline-flex;

    align-items: center;

    padding:
        3px 7px;

    border-radius: 20px;

    background:
        #eef5fa;

    color:
        #426078;

    font-size: 9.5px;

    white-space: nowrap;
}


.role-badge {
    display: inline-block;

    min-width: 48px;

    padding:
        4px 8px;

    border-radius: 20px;

    font-size: 9.5px;
    font-weight: 650;

    text-align: center;
}


.role-admin {
    background:
        #e9efff;

    color:
        #4e5fc4;
}


.role-user {
    background:
        #eef5fa;

    color:
        #45657d;
}


.status-inactive {
    background:
        #fff1f0;

    color:
        #b64740;
}


.action-warning {
    color:
        #d58a18;
}


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

@media (max-width: 700px) {

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


    .form-section {
        padding:
            17px;
    }


    .form-card-actions {
        padding:
            13px 17px;
    }

}
/* ==========================================================================
   LOCATIONS / VENDORS
   ========================================================================== */

.form-card-small {
    max-width: 620px;
}


.form-card-medium {
    max-width: 780px;
}


.form-alert-wrap {
    padding:
        18px 20px 0;
}


.entity-name-cell {
    min-width: 160px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.entity-name-cell > strong,
.entity-name-cell > div > strong {
    display: block;

    color: #173653;

    font-size: 12px;
    font-weight: 650;
}


.entity-name-cell small {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


.entity-icon {
    width: 31px;
    height: 31px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background:
        #e8f4fd;

    color:
        var(--primary);

    font-size: 11px;
    font-weight: 750;
}


.vendor-entity-icon {
    background:
        #fff1e5;

    color:
        #dd7411;
}


.count-badge {
    min-width: 29px;
    height: 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border-radius: 20px;

    background:
        #edf4f9;

    color:
        #49677e;

    font-size: 10px;
    font-weight: 650;
}


.table-date {
    color:
        var(--text-medium);

    font-size: 10.5px;

    white-space: nowrap;
}


.contact-text {
    color:
        #36536b;

    font-size: 11.5px;

    white-space: nowrap;
}


.table-text-preview {
    max-width: 260px;

    overflow: hidden;

    color:
        var(--text-medium);

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.form-grid-full {
    grid-column:
        1 / -1;
}


/*
|--------------------------------------------------------------------------
| Better Table Spacing
|--------------------------------------------------------------------------
*/

.compact-table td:first-child,
.compact-table th:first-child {
    padding-left: 16px;
}


.compact-table td:last-child,
.compact-table th:last-child {
    padding-right: 16px;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .form-grid-full {
        grid-column: auto;
    }

}
/* ==========================================================================
   FANCY LOT CREATE / EDIT FORM
   ========================================================================== */

.fancy-lot-form-card {
    max-width: 980px;
}


.fancy-lot-form-grid {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}


.amount-input-wrap {
    position: relative;
}


.amount-prefix {
    position: absolute;

    top: 50%;
    left: 11px;

    transform:
        translateY(-50%);

    color:
        var(--text-muted);

    font-size: 12px;

    pointer-events: none;
}


.amount-input-wrap input {
    padding-left: 27px;
}


.assignment-selector {
    max-width: 760px;

    overflow: hidden;

    border:
        1px solid
        #ccd9e3;

    border-radius:
        8px;

    background: #ffffff;

    transition:
        border-color .18s,
        box-shadow .18s;
}


.assignment-selector:focus-within {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8,120,201,.08);
}


.assignment-search {
    width: 100% !important;

    height: 41px;

    padding:
        0 12px !important;

    border: 0 !important;

    border-bottom:
        1px solid
        var(--border-light)
        !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    background:
        #f9fbfd !important;
}


.assignment-select {
    width: 100% !important;

    min-height: 230px !important;

    padding: 5px !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow:
        none !important;
}


.assignment-select option {
    padding:
        7px 9px;
}


.assignment-select optgroup {
    color:
        #173653;

    font-weight: 700;
}


@media (
    max-width: 850px
) {

    .fancy-lot-form-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 600px
) {

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


    .assignment-select {
        min-height:
            200px !important;
    }

}
/* ==========================================================================
   TASKS
   ========================================================================== */

.task-filter-grid {
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(150px, .7fr)
        minmax(150px, .7fr)
        auto;
}

.task-title-cell {
    max-width: 360px;
}

.task-title-cell strong {
    display: block;
    color: #173653;
    font-size: 11.5px;
}

.task-title-cell small {
    display: block;
    max-width: 330px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-cell strong {
    display: block;
    color: #173653;
    font-size: 10.5px;
}

.assignment-cell small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 9px;
}

.priority-pill,
.task-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 650;
    white-space: nowrap;
}

.priority-low {
    background: #edf4f8;
    color: #587185;
}

.priority-medium {
    background: #e9f3fd;
    color: #2476b6;
}

.priority-high {
    background: #fff2df;
    color: #b76c0c;
}

.priority-urgent {
    background: #ffebea;
    color: #c43c35;
}

.task-status-pending {
    background: #fff3df;
    color: #a96b0c;
}

.task-status-in_progress {
    background: #e6f3fd;
    color: #1675b8;
}

.task-status-completed {
    background: var(--success-bg);
    color: var(--success-text);
}


/* ==========================================================================
   PROFILE
   ========================================================================== */

.profile-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-large-avatar {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--primary-soft);
    color: var(--primary);

    font-size: 19px;
    font-weight: 750;
}

.profile-heading h2 {
    margin: 0;
    color: #173653;
    font-size: 16px;
}

.profile-heading p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 10.5px;
}


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

@media (max-width: 900px) {

    .task-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .task-filter-grid {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================================
   USER DASHBOARD
   ========================================================================== */

.user-dashboard-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}


.user-summary-card {
    display: block;
    padding: 17px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #fff;

    color: inherit;
    text-decoration: none;

    box-shadow:
        var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.user-summary-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 19px
        rgba(24,61,93,.09);
}


.user-summary-label {
    display: block;
    margin-bottom: 10px;

    color:
        var(--text-muted);

    font-size: 10.5px;
    font-weight: 650;

    text-transform: uppercase;
}


.user-summary-card strong {
    display: block;

    color: #173653;

    font-size: 26px;
    font-weight: 750;
}


.user-summary-card small {
    display: block;
    margin-top: 5px;

    color:
        var(--text-muted);

    font-size: 10px;
}


/* Fancy summary */

.user-fancy-summary-card {
    margin-bottom: 16px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #fff;

    box-shadow:
        var(--shadow);
}


.user-fancy-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 14px 17px;

    border-bottom:
        1px solid
        var(--border-light);
}


.user-fancy-summary-header h2 {
    margin: 0;

    color: #173653;

    font-size: 15px;
}


.user-fancy-summary-header p {
    margin: 3px 0 0;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.user-fancy-summary-header a {
    color:
        var(--primary);

    font-size: 11px;
    font-weight: 650;

    text-decoration: none;
}


.user-fancy-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}


.user-fancy-stat {
    min-width: 0;

    padding: 18px;

    border-right:
        1px solid
        var(--border-light);

    color: inherit;

    text-decoration: none;
}


.user-fancy-stat:last-child {
    border-right: 0;
}


a.user-fancy-stat:hover {
    background:
        #fafcfe;
}


.user-fancy-stat span {
    display: block;

    color:
        var(--text-muted);

    font-size: 10.5px;
    font-weight: 650;
}


.user-fancy-stat strong {
    display: block;

    margin-top: 7px;

    color: #173653;

    font-size: 23px;
}


.user-fancy-stat small {
    display: block;

    margin-top: 4px;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


/* Dashboard bottom */

.user-dashboard-bottom {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.user-dashboard-bottom-single {
    grid-template-columns:
        minmax(0, 1fr);
}


.user-dashboard-list {
    padding: 0 15px;
}


.user-dashboard-list-row {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        10px 2px;

    border-bottom:
        1px solid
        var(--border-light);

    color: inherit;

    text-decoration: none;
}


.user-dashboard-list-row:last-child {
    border-bottom: 0;
}


.user-dashboard-list-row:hover {
    background:
        #fafcfe;
}


.user-dashboard-list-main {
    min-width: 0;
}


.user-dashboard-list-main strong {
    display: block;

    overflow: hidden;

    color: #173653;

    font-size: 11.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.user-dashboard-list-main small {
    display: block;

    margin-top: 3px;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


.user-dashboard-list-meta {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    color:
        var(--text-muted);

    font-size: 9.5px;
}


/* ==========================================================================
   USER TASK DETAIL
   ========================================================================== */

.user-task-filter-grid {
    grid-template-columns:
        minmax(170px, .8fr)
        minmax(170px, .8fr)
        auto;
}


.task-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(260px, .65fr);

    gap: 16px;

    align-items: start;
}


.task-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.task-detail-heading h2 {
    margin: 0;

    color: #173653;

    font-size: 18px;
}


.task-detail-heading p {
    margin: 5px 0 0;

    color:
        var(--text-muted);

    font-size: 10.5px;
}


.task-detail-description > label {
    display: block;

    margin-bottom: 9px;

    color:
        var(--text-medium);

    font-size: 11px;
    font-weight: 650;
}


.task-description-box {
    padding: 14px;

    border:
        1px solid
        var(--border-light);

    border-radius: 7px;

    background:
        #fafcfd;

    color:
        #36536b;

    font-size: 11.5px;

    line-height: 1.65;
}


.task-detail-side {
    display: grid;
    gap: 16px;
}


.task-info-list {
    padding: 6px 16px;
}


.task-info-row {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom:
        1px solid
        var(--border-light);
}


.task-info-row:last-child {
    border-bottom: 0;
}


.task-info-row span {
    color:
        var(--text-muted);

    font-size: 10.5px;
}


.task-info-row strong {
    color:
        #173653;

    font-size: 10.5px;

    text-align: right;
}


.task-status-form {
    padding: 15px;
}


.btn-full {
    width: 100%;
}


/* ==========================================================================
   USER FANCY LOTS
   ========================================================================== */

.user-fancy-filter-grid {
    grid-template-columns:
        minmax(180px, .75fr)
        minmax(180px, .75fr)
        auto;
}


.table-primary-text {
    color: #173653;

    font-size: 11px;
    font-weight: 650;
}


.lot-number {
    color:
        var(--primary);

    font-weight: 650;
}


.status-completed {
    background:
        var(--completed-bg);

    color:
        var(--completed-text);
}


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

@media (max-width: 1050px) {

    .user-dashboard-summary {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .user-dashboard-bottom {
        grid-template-columns:
            1fr;
    }


    .task-detail-layout {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 700px) {

    .user-task-filter-grid,
    .user-fancy-filter-grid {
        grid-template-columns:
            1fr;
    }


    .user-fancy-stat-grid {
        grid-template-columns:
            1fr;
    }


    .user-fancy-stat {
        border-right: 0;

        border-bottom:
            1px solid
            var(--border-light);
    }


    .user-fancy-stat:last-child {
        border-bottom: 0;
    }

}


@media (max-width: 520px) {

    .user-dashboard-summary {
        grid-template-columns:
            1fr;
    }


    .user-dashboard-list-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .user-dashboard-list-meta {
        width: 100%;
    }

}
/* ==========================================================================
   ADMIN TASK MANAGEMENT
   ========================================================================== */

.task-filter-grid-advanced {
    grid-template-columns:
        minmax(170px, 1fr)
        minmax(180px, 1fr)
        minmax(140px, .7fr)
        minmax(140px, .7fr)
        auto;
}

.task-admin-table {
    min-width: 920px;
}

.task-status-inline-form {
    display: inline-block;
    margin: 0;
}

.task-status-select {
    min-width: 104px;
    height: 27px;

    padding: 2px 24px 2px 9px;

    border: 0;
    border-radius: 20px;

    outline: none;

    font-size: 9.5px;
    font-weight: 650;

    cursor: pointer;

    appearance: auto;
}

.task-status-select-pending {
    background: #fff3df;
    color: #a96b0c;
}

.task-status-select-in_progress {
    background: #e6f3fd;
    color: #1675b8;
}

.task-status-select-completed {
    background: var(--success-bg);
    color: var(--success-text);
}

.task-due-date {
    color: var(--text-medium);
    font-size: 10.5px;
    white-space: nowrap;
}

.task-overdue {
    color: #c43c35;
    font-weight: 650;
}

.action-link.action-delete {
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}

.empty-state strong {
    display: block;

    margin-bottom: 4px;

    color: #173653;

    font-size: 12px;
}

.empty-state p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10.5px;
}


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

@media (max-width: 1100px) {

    .task-filter-grid-advanced {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .task-filter-grid-advanced {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================================
   USERS - FINISHING PASS
   ========================================================================== */

.users-filter-grid {
    grid-template-columns:
        minmax(190px, 1.2fr)
        minmax(120px, .55fr)
        minmax(130px, .6fr)
        minmax(170px, .8fr)
        auto;
}

.users-admin-table {
    min-width: 1020px;
}

.table-email {
    display: inline-block;
    max-width: 190px;

    overflow: hidden;

    color: var(--text-medium);

    font-size: 10.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    white-space: nowrap;
}

.table-actions .inline-form {
    margin: 0;
}

.table-actions button.action-link {
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}

.table-current-user {
    color: var(--text-muted);

    font-size: 9.5px;
    font-weight: 600;
}

@media (max-width: 1150px) {

    .users-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .users-filter-grid {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================================
   LOCATIONS - FINISHING PASS
   ========================================================================== */

.location-filter-grid {
    grid-template-columns:
        minmax(240px, 1fr)
        auto;

    max-width: 650px;
}

.location-admin-table {
    min-width: 700px;
}

.location-admin-table .entity-name-cell {
    min-width: 220px;
}

.location-admin-table .table-actions {
    justify-content: flex-end;
}


/* Keep buttons visually identical to action links */

.location-admin-table button.action-link {
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


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

@media (max-width: 650px) {

    .location-filter-grid {
        grid-template-columns: 1fr;

        max-width: none;
    }

}
/* ==========================================================================
   VENDORS - FINISHING PASS
   ========================================================================== */

.vendor-filter-grid {
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(150px, .55fr)
        auto;

    max-width: 820px;
}

.vendor-admin-table {
    min-width: 920px;
}

.vendor-admin-table .entity-name-cell {
    min-width: 180px;
}

.vendor-admin-table .table-text-preview {
    max-width: 240px;
}

.vendor-admin-table .table-actions {
    justify-content: flex-end;
}

.vendor-admin-table button.action-link {
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


/* Inactive status if not already present */

.status-inactive {
    background: #f1f3f5;
    color: #657687;
}


/* Warning action */

.action-warning {
    color: #c77c12;
}

.action-warning:hover {
    color: #a45f06;
}


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

@media (max-width: 750px) {

    .vendor-filter-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

}
/* ==========================================================================
   FANCY LOTS - FINAL LIST POLISH
   ========================================================================== */

.fancy-lot-filter-grid {
    grid-template-columns:
        minmax(190px, 1.1fr)
        minmax(135px, .65fr)
        minmax(170px, .9fr)
        minmax(180px, 1fr)
        minmax(130px, .6fr)
        auto;
}


.fancy-lot-admin-table {
    min-width: 1080px;
}


.fancy-lot-admin-table .table-text-preview {
    max-width: 180px;
}


.fancy-lot-admin-table .assignment-cell {
    min-width: 140px;
}


.fancy-amount {
    color: #294b66;

    font-size: 10.5px;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}


/* ==========================================================================
   Clickable Status
   ========================================================================== */

.fancy-status-button {
    border: 0;

    font-family: inherit;

    cursor: pointer;

    transition:
        opacity .15s ease,
        transform .15s ease;
}


.fancy-status-button:hover {
    opacity: .82;

    transform:
        translateY(-1px);
}


.fancy-status-button:focus-visible {
    outline:
        2px solid
        rgba(8, 120, 201, .25);

    outline-offset: 2px;
}


/* ==========================================================================
   Locked Completed Record
   ========================================================================== */

.fancy-lot-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;

    padding: 4px 8px;

    border-radius: 20px;

    background: #f1f3f5;

    color: #778694;

    font-size: 9px;
    font-weight: 650;
}


/* ==========================================================================
   AJAX
   ========================================================================== */

.ajax-list-container {
    min-height: 120px;
}


.loading-state {
    padding: 35px 20px;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background: #fff;

    color:
        var(--text-muted);

    font-size: 11px;

    text-align: center;

    box-shadow:
        var(--shadow);
}


/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;

    color:
        var(--text-muted);

    font-size: 11px;
}


button.pagination-btn {
    font-family: inherit;

    cursor: pointer;
}


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

@media (max-width: 1200px) {

    .fancy-lot-filter-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .fancy-lot-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 580px) {

    .fancy-lot-filter-grid {
        grid-template-columns:
            1fr;
    }

}
/* ==========================================================================
   FORM HARDENING / HELPERS
   ========================================================================== */

.required {
    color: var(--danger);
}

.form-help {
    display: block;
    margin-top: 5px;

    color: var(--text-muted);

    font-size: 9.5px;
    line-height: 1.45;
}

.multi-select {
    min-height: 150px;
}

.alert-info {
    border: 1px solid #cde3f4;

    background: #edf7fe;

    color: #226b9f;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-top: 18px;
}

@media (max-width: 520px) {

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        justify-content: center;
        width: 100%;
    }

}
/* ==========================================================================
   ADMIN TASKS - FINAL POLISH
   ========================================================================== */

.task-admin-table {
    min-width: 980px;
}

.task-admin-table .task-title-cell {
    min-width: 190px;
}

.task-admin-table .assignment-cell {
    min-width: 125px;
}

.task-admin-table .table-actions {
    justify-content: flex-end;
}

.task-admin-table button.action-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.task-due-date {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.overdue-label {
    color: #c43c35;
    font-size: 8.5px;
    font-weight: 650;
}

.task-status-select {
    transition:
        box-shadow .15s ease,
        opacity .15s ease;
}

.task-status-select:hover {
    opacity: .88;
}

.task-status-select:focus {
    box-shadow:
        0 0 0 2px
        rgba(8, 120, 201, .14);
}

@media (max-width: 1100px) {

    .task-filter-grid-advanced {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .task-filter-grid-advanced {
        grid-template-columns: 1fr;
    }

}
/* ==========================================================================
   USERS - FINAL ADMIN LIST
   ========================================================================== */

.user-admin-filter-grid {
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(130px, .55fr)
        minmax(130px, .55fr)
        minmax(160px, .7fr)
        auto;
}

.user-admin-table {
    min-width: 1040px;
}

.user-admin-table .assignment-cell {
    min-width: 125px;
}

.user-location-list {
    display: block;
    max-width: 210px;
    overflow: hidden;
    color: var(--text-medium);
    font-size: 10.5px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 650;
    white-space: nowrap;
}

.role-admin {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.role-user {
    background: #f0f3f6;
    color: #53697c;
}

.user-admin-table button.action-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 1100px) {

    .user-admin-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .user-admin-filter-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   MASARCEP COMPATIBILITY / SIDEBAR SAFETY PATCH
   Keeps existing page styles intact while supporting the newer common
   header/sidebar markup and older legacy pages.
   ========================================================================== */

/* --- Newer sidebar markup aliases ---------------------------------------- */

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px 0;
}

.sidebar-link {
    position: relative;
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border: 0;
    background: transparent;
    color: var(--sidebar-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background .18s, color .18s;
}

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

.sidebar-link.active {
    background: linear-gradient(90deg,#0878c9,#0b6bad);
    color: #fff;
}

.sidebar-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #21a4fa;
}

.sidebar-icon {
    width: 23px;
    min-width: 23px;
    flex-shrink: 0;
    color: currentColor;
    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.sidebar-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    transition: transform .2s;
}

.sidebar-menu-group.open > .sidebar-parent .sidebar-arrow {
    transform: rotate(90deg);
}

.sidebar-section-title {
    margin: 17px 22px 7px;
    color: #7fa0b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Newer brand markup aliases ----------------------------------------- */

.sidebar-brand-logo {
    width: 38px;
    height: 38px;
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.sidebar-brand-logo img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}

.sidebar-brand-copy {
    min-width: 0;
}

.sidebar-brand-copy strong {
    display: block;
    color: #15426c;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.sidebar-brand-copy span {
    display: block;
    margin-top: 2px;
    color: #8098aa;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

/* --- Account navigation: force vertical rows ---------------------------- */

.sidebar-account-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-bottom {
    flex-shrink: 0;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.10);
}

.sidebar-bottom > a,
.sidebar-bottom .sidebar-item,
.sidebar-bottom .sidebar-link,
.sidebar-account-nav > a,
.sidebar-account-nav .sidebar-item,
.sidebar-account-nav .sidebar-link {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    margin: 0;
    color: var(--sidebar-text);
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-bottom > a:hover,
.sidebar-account-nav > a:hover {
    background: rgba(255,255,255,.065);
    color: #fff;
}

.sidebar-logout,
.sidebar-bottom .sidebar-logout {
    color: #ffd8d6;
}

.sidebar-logout:hover,
.sidebar-bottom .sidebar-logout:hover {
    background: rgba(255,72,72,.10);
    color: #fff;
}

/* --- Sidebar user footer ------------------------------------------------ */

.sidebar-user {
    flex: 0 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.08);
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.sidebar-user-copy {
    min-width: 0;
    overflow: hidden;
}

.sidebar-user-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-copy span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #9fb4c6;
    font-size: 9.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prevent flex items from overflowing the sidebar. */
.app-sidebar,
.sidebar-navigation,
.sidebar-scroll,
.sidebar-menu-group,
.sidebar-bottom {
    min-width: 0;
}

.app-sidebar form {
    margin: 0;
}

/* --- Common card alias -------------------------------------------------- */

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow);
}

/* --- Generic table compatibility for pages not yet moved to compact-table */

.container > table,
.container .table-responsive > table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
}

.container > table th,
.container .table-responsive > table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: #f1f6fa;
    color: #4d667b;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
}

.container > table td,
.container .table-responsive > table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    color: #27445e;
    font-size: 12px;
    vertical-align: middle;
}

.container > table tbody tr:last-child td,
.container .table-responsive > table tbody tr:last-child td {
    border-bottom: 0;
}

.button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg,#0878c9,#0668ad);
    color: #fff;
    font-size: 12px;
    font-weight: 620;
    text-decoration: none;
}

/* --- Login fallback safety --------------------------------------------- */

/* Support an older single-card login wrapper without disturbing login-shell. */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #eef5fa;
}

.login-page .login-card {
    width: 100%;
    max-width: 410px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(24,61,93,.10);
}

.login-card button[type="submit"]:not(.login-submit) {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg,var(--primary),var(--primary-dark));
    color: #fff;
    font-weight: 650;
    cursor: pointer;
}

.password-field button:not(.password-toggle) {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 7px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Responsive compatibility ----------------------------------------- */

@media (max-width: 900px) {
    .sidebar-user {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 700px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ==========================================================================
   MASARCEP CURRENT PAGE MARKUP COMPATIBILITY
   Applies to the complete PHP replacements that use:
   .card, .filter-grid + .form-group, .table-card > table,
   .form-card > form, .pagination-btn and related classes.
   ========================================================================== */

/* Page headings used by current Admin/User PHP files */
.page-toolbar {
    align-items: flex-start;
}

.page-toolbar p,
.page-toolbar .page-description {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Generic cards used by the current pages */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    background: #fff;
    box-shadow: var(--shadow);
}

/* Filters: current files use form-group inside filter-grid */
.filter-grid .form-group {
    min-width: 0;
    margin-bottom: 0;
}

.filter-grid .form-group label {
    display: block;
    margin-bottom: 6px;
    color: #344e65;
    font-size: 12px;
    font-weight: 620;
}

.filter-grid .form-group input,
.filter-grid .form-group select {
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #ccd9e3;
    border-radius: 6px;
    background: #fff;
    color: var(--text);
}

.filter-grid .form-group input:focus,
.filter-grid .form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(8,120,201,.08);
}

/* Some current list pages wrap filters in .card rather than .filter-card */
.page-toolbar + .card:has(> .filter-grid),
.alert + .card:has(> .filter-grid),
.card:has(> .filter-grid) {
    margin-bottom: 18px;
    padding: 15px;
}

/* Current form replacements put controls directly inside form-card */
.form-card > form:not(:has(.form-section)) {
    padding: 22px;
}

.form-card > form:not(:has(.form-section)) > .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-card > form:not(:has(.form-section)) > .form-actions {
    margin: 18px -22px -22px;
    padding: 15px 22px;
    border-top: 1px solid var(--border-light);
    background: #fafcfd;
}

.form-card > form:not(:has(.form-section)) > .form-group {
    margin-bottom: 0;
}

.form-card > form:not(:has(.form-section)) input,
.form-card > form:not(:has(.form-section)) select,
.form-card > form:not(:has(.form-section)) textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
}

.form-card > form:not(:has(.form-section)) textarea {
    min-height: 100px;
    resize: vertical;
}

/* Tables in current PHP replacements do not always carry compact-table */
.table-card .table-responsive > table,
.table-card > .table-responsive > table,
.table-card table:not(.compact-table):not(.dashboard-table) {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12.5px;
}

.table-card .table-responsive > table th,
.table-card table:not(.compact-table):not(.dashboard-table) th {
    height: 38px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
    background: #f1f6fa;
    color: #4d667b;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
}

.table-card .table-responsive > table td,
.table-card table:not(.compact-table):not(.dashboard-table) td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-light);
    color: #27445e;
    vertical-align: middle;
}

.table-card .table-responsive > table th:first-child,
.table-card .table-responsive > table td:first-child,
.table-card table:not(.compact-table):not(.dashboard-table) th:first-child,
.table-card table:not(.compact-table):not(.dashboard-table) td:first-child {
    padding-left: 16px;
}

.table-card .table-responsive > table th:last-child,
.table-card .table-responsive > table td:last-child,
.table-card table:not(.compact-table):not(.dashboard-table) th:last-child,
.table-card table:not(.compact-table):not(.dashboard-table) td:last-child {
    padding-right: 16px;
}

.table-card .table-responsive > table tbody tr:hover,
.table-card table:not(.compact-table):not(.dashboard-table) tbody tr:hover {
    background: #f9fcfe;
}

.table-card .table-responsive > table tbody tr:last-child td,
.table-card table:not(.compact-table):not(.dashboard-table) tbody tr:last-child td {
    border-bottom: 0;
}

/* Prevent the compact admin tables from collapsing columns together */
.user-admin-table,
.users-admin-table,
.vendor-admin-table,
.location-admin-table,
.task-admin-table,
.fancy-lot-admin-table {
    width: 100%;
}

.user-admin-table th,
.user-admin-table td,
.users-admin-table th,
.users-admin-table td,
.vendor-admin-table th,
.vendor-admin-table td,
.location-admin-table th,
.location-admin-table td,
.task-admin-table th,
.task-admin-table td,
.fancy-lot-admin-table th,
.fancy-lot-admin-table td {
    white-space: nowrap;
}

.user-admin-table td:nth-child(4),
.users-admin-table td:nth-child(4),
.vendor-admin-table td:nth-child(3),
.fancy-lot-admin-table td:nth-child(7),
.task-admin-table .task-title-cell {
    white-space: normal;
}

/* Current table action forms */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    white-space: nowrap;
}

.table-actions form,
.table-actions .inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.table-actions button.action-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* Generic table text helpers used by current replacements */
.table-primary-text {
    color: #173653;
    font-size: 11px;
    font-weight: 650;
}

.table-muted {
    color: #95a4b2;
    font-size: 10.5px;
}

.table-info {
    color: var(--text-muted);
    font-size: 11.5px;
}

.table-title-count {
    color: var(--text-medium);
    font-weight: 600;
}

.table-date {
    color: var(--text-medium);
    font-size: 10.5px;
    white-space: nowrap;
}

/* Pagination markup used by current replacements */
.pagination-btn {
    min-width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #d4e0e9;
    border-radius: 5px;
    background: #fff;
    color: #435d73;
    font-size: 11.5px;
    text-decoration: none;
}

.pagination-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.pagination-dots {
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
}

/* Status/action compatibility */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-warning {
    color: #c77c12;
}

.action-warning:hover {
    color: #a45f06;
}

.action-delete {
    color: var(--danger);
}

/* Fancy Lots AJAX result should not create accidental extra padding */
#fancyLotsResult > .table-card,
#fancyLotsResult .table-card {
    margin-top: 0;
}

#fancyLotsResult.ajax-loading {
    opacity: .68;
    pointer-events: none;
}

/* Task title / assignment cells */
.task-title-cell strong {
    display: block;
    color: #173653;
    font-size: 11.5px;
}

.task-title-cell small {
    display: block;
    max-width: 330px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive rules for the current replacement markup */
@media (max-width: 1100px) {
    .user-admin-filter-grid,
    .users-filter-grid,
    .task-filter-grid-advanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fancy-lot-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .fancy-lot-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .form-card > form:not(:has(.form-section)) {
        padding: 17px;
    }

    .form-card > form:not(:has(.form-section)) > .form-grid {
        grid-template-columns: 1fr;
    }

    .form-card > form:not(:has(.form-section)) > .form-actions {
        margin: 16px -17px -17px;
        padding: 13px 17px;
    }

    .user-admin-filter-grid,
    .users-filter-grid,
    .vendor-filter-grid,
    .location-filter-grid,
    .task-filter-grid-advanced,
    .fancy-lot-filter-grid,
    .user-task-filter-grid,
    .user-fancy-filter-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .filter-actions {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .form-card > form:not(:has(.form-section)) > .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-card > form:not(:has(.form-section)) > .form-actions .btn-primary,
    .form-card > form:not(:has(.form-section)) > .form-actions .btn-secondary {
        width: 100%;
    }
}
/* ==========================================================================
   FANCY LOTS - LAYOUT FIX
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Filter row
|--------------------------------------------------------------------------
| Keep all 5 filters + buttons inside the card.
*/

.fancy-lot-filter-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, .80fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, .78fr)
        auto;

    gap: 12px;

    width: 100%;

    align-items: end;
}


.fancy-lot-filter-grid .form-group {
    min-width: 0;
}


.fancy-lot-filter-grid .form-group input,
.fancy-lot-filter-grid .form-group select {
    width: 100%;

    min-width: 0;
}


.fancy-lot-filter-grid .filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: max-content;

    white-space: nowrap;
}


.fancy-lot-filter-grid .filter-actions .btn-primary,
.fancy-lot-filter-grid .filter-actions .btn-secondary {
    flex-shrink: 0;

    min-width: 76px;
}


/*
|--------------------------------------------------------------------------
| Fancy Lots table
|--------------------------------------------------------------------------
| Desktop should fit without horizontal scrolling.
*/

.fancy-lot-admin-table {
    width: 100%;

    min-width: 0 !important;

    table-layout: fixed;

    border-collapse: collapse;
}


/*
|--------------------------------------------------------------------------
| Column widths
|--------------------------------------------------------------------------
*/

.fancy-lot-admin-table th:nth-child(1),
.fancy-lot-admin-table td:nth-child(1) {
    width: 11%;
}


.fancy-lot-admin-table th:nth-child(2),
.fancy-lot-admin-table td:nth-child(2) {
    width: 9%;
}


.fancy-lot-admin-table th:nth-child(3),
.fancy-lot-admin-table td:nth-child(3) {
    width: 17%;
}


.fancy-lot-admin-table th:nth-child(4),
.fancy-lot-admin-table td:nth-child(4) {
    width: 8%;
}


.fancy-lot-admin-table th:nth-child(5),
.fancy-lot-admin-table td:nth-child(5) {
    width: 9%;
}


.fancy-lot-admin-table th:nth-child(6),
.fancy-lot-admin-table td:nth-child(6) {
    width: 19%;
}


.fancy-lot-admin-table th:nth-child(7),
.fancy-lot-admin-table td:nth-child(7) {
    width: 10%;
}


.fancy-lot-admin-table th:nth-child(8),
.fancy-lot-admin-table td:nth-child(8) {
    width: 8%;
}


/*
|--------------------------------------------------------------------------
| If Admin Actions column exists
|--------------------------------------------------------------------------
*/

.fancy-lot-admin-table th:nth-child(9),
.fancy-lot-admin-table td:nth-child(9) {
    width: 9%;
}


/*
|--------------------------------------------------------------------------
| Cell overflow
|--------------------------------------------------------------------------
*/

.fancy-lot-admin-table th,
.fancy-lot-admin-table td {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
}


.fancy-lot-admin-table .lot-number {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.fancy-lot-admin-table .assignment-cell {
    min-width: 0 !important;
}


.fancy-lot-admin-table .assignment-cell strong,
.fancy-lot-admin-table .assignment-cell small {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.fancy-lot-admin-table .table-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    min-width: 0;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Comment
|--------------------------------------------------------------------------
*/

.fancy-lot-admin-table .comment-preview,
.fancy-lot-admin-table .table-text-preview {
    display: block;

    width: 100%;

    max-width: none;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Table container
|--------------------------------------------------------------------------
*/

#fancyLotsResult .table-responsive {
    width: 100%;

    overflow-x: hidden;
}


#fancyLotsResult .table-card {
    width: 100%;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.fancy-status-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 62px;

    padding: 5px 9px;

    border: 0;
    border-radius: 20px;

    font-size: 10px;
    font-weight: 650;

    line-height: 1;

    white-space: nowrap;
}


.fancy-status-button.status-active {
    background: var(--success-bg);

    color: var(--success-text);
}


.fancy-status-button.status-completed {
    background: var(--completed-bg);

    color: var(--completed-text);
}


/*
|--------------------------------------------------------------------------
| AJAX table footer
|--------------------------------------------------------------------------
*/

#fancyLotsResult .table-footer {
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 16px;
}


#fancyLotsResult .table-info {
    color: var(--text-muted);

    font-size: 10.5px;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

    .fancy-lot-filter-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .fancy-lot-filter-grid .filter-actions {
        grid-column: 1 / -1;

        justify-content: flex-end;
    }


    /*
     * At this size allow table scrolling instead of
     * crushing the columns too tightly.
     */
    .fancy-lot-admin-table {
        min-width: 1050px !important;

        table-layout: auto;
    }


    #fancyLotsResult .table-responsive {
        overflow-x: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .fancy-lot-filter-grid {
        grid-template-columns: 1fr;
    }


    .fancy-lot-filter-grid .filter-actions {
        grid-column: auto;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        width: 100%;
    }


    .fancy-lot-filter-grid .filter-actions .btn-primary,
    .fancy-lot-filter-grid .filter-actions .btn-secondary {
        width: 100%;

        min-width: 0;
    }


    .fancy-lot-admin-table {
        min-width: 1000px !important;
    }

}