/* v9.0.2 */
/* 

 * Inventory Audit Module V3.0 CSS

 * Implements Desktop 2-column modal and Mobile Stack-tabs

 */



/* Setup Form Overlay */

.audit-setup-card {

    background: var(--mcs-surface, #fff);

    width: 600px;

    max-width: 95%;

    border-radius: 12px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



.audit-setup-header {

    background: var(--mcs-bg, #f8fafc);

    padding: 20px 30px;

    border-bottom: 1px solid var(--mcs-border, #e2e8f0);

    display: flex;

    align-items: center;

    gap: 15px;

}



.audit-setup-header h2 {

    margin: 0;

    font-size: 20px;

    font-weight: 700;

    color: var(--mcs-text-main, #1e293b);

}



.audit-setup-body {

    padding: 30px;

}



.setup-group {

    margin-bottom: 24px;

}



.setup-group label {

    display: block;

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 8px;

    color: var(--mcs-text-sec, #64748b);

}



.setup-input {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--mcs-border, #cbd5e1);

    border-radius: 8px;

    font-size: 15px;

    outline: none;

    transition: border-color 0.2s;

    background: var(--mcs-bg, #f8fafc);

    color: var(--mcs-text-main, #1e293b);

}



.setup-input:focus {

    border-color: var(--ui-accent, #0A5C56);

}



.setup-scope-pill {

    background: var(--ui-accent-light, #ecfdf5);

    color: var(--ui-accent, #0A5C56);

    padding: 12px 16px;

    border-radius: 8px;

    font-size: 16px;

    border: 1px solid #a7f3d0;

}



.setup-method-tiles {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.method-tile {

    padding: 20px;

    border: 2px solid var(--mcs-border, #e2e8f0);

    border-radius: 12px;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s;

}



.method-tile i {

    font-size: 32px;

    margin-bottom: 12px;

    color: #94a3b8;

}



.method-tile span {

    display: block;

    font-weight: 600;

}



.method-tile.active {

    border-color: var(--ui-accent, #0A5C56);

    background: rgba(10, 92, 86, 0.05);

    color: var(--ui-accent, #0A5C56);

}



.method-tile.active i {

    color: var(--ui-accent, #0A5C56);

}



.audit-setup-footer {

    padding: 20px 30px;

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

    background: var(--mcs-bg);

    display: flex;

    justify-content: flex-end;

    gap: 16px;

}



.audit-btn-primary {

    background: var(--ui-accent, #0A5C56);

    color: #fff;

    border: none;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s;

}



.audit-btn-primary:hover {

    background: #07453f;

}



.audit-btn-text {

    background: transparent;

    color: #64748b;

    border: none;

    padding: 12px 24px;

    font-weight: 600;

    cursor: pointer;

}



.audit-btn-danger {

    background: #ef4444;

    color: #fff;

    border: none;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: 600;

    cursor: pointer;

    width: 100%;

}





/* MAIN WORKSPACE OVERLAY */

.audit-workspace-overlay,

.audit-modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(15, 23, 42, 0.8);

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    backdrop-filter: blur(4px);

}



.aw-header {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 60px;

    background: #fff;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

    border-bottom: 1px solid #e2e8f0;

}



.aw-header-info {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 700;

    font-size: 18px;

}



.aw-header-info i {

    color: var(--ui-accent);

}



.aw-close {

    background: transparent;

    border: none;

    font-size: 20px;

    color: #64748b;

    cursor: pointer;

    height: 40px;

    width: 40px;

}



.aw-method-toggle {

    display: flex;

    background: #f1f5f9;

    border-radius: 20px;

    position: relative;

    width: 160px;

    height: 36px;

    cursor: pointer;

    align-items: center;

    overflow: hidden;

    border: 1px solid #cbd5e1;

}



.amt-slider {

    position: absolute;

    top: 2px;

    bottom: 2px;

    width: calc(50% - 4px);

    background: #fff;

    border-radius: 16px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.amt-slider.manual {

    transform: translateX(2px);

}



.amt-slider.scanner {

    transform: translateX(calc(100% + 2px));

}



.amt-label {

    flex: 1;

    text-align: center;

    font-size: 12px;

    font-weight: 600;

    z-index: 2;

    user-select: none;

    transition: color 0.2s;

}



.amt-slider.manual~.amt-label.manual {

    color: var(--ui-accent);

}



.amt-slider.scanner~.amt-label.scanner {

    color: var(--ui-accent);

}



.aw-body {

    position: absolute;

    top: 60px;

    left: 0;

    right: 0;

    bottom: 0;

    display: flex;

    flex-direction: row;

    background: #f8fafc;

}



.aw-panel-input {

    width: 400px;

    padding: 24px;

    border-right: 1px solid #e2e8f0;

    display: flex;

    flex-direction: column;

    background: #fff;

}



.aw-panel-list {

    flex: 1;

    display: flex;

    flex-direction: column;

    position: relative;

    background: #f8fafc;

    overflow: hidden;

}



/* Scanner Input Input */

.aw-input-wrapper {

    position: relative;

    margin-bottom: 20px;

}



#awScannerInput {

    width: 100%;

    padding: 20px;

    font-size: 24px;

    font-family: monospace;

    font-weight: 700;

    border: 2px solid #cbd5e1;

    border-radius: 12px;

    text-align: center;

    outline: none;

    transition: all 0.2s;

}



#awScannerInput:focus {

    border-color: var(--ui-accent);

    box-shadow: 0 0 0 4px rgba(10, 92, 86, 0.1);

}



.aw-autocomplete {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    margin-top: 8px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

    z-index: 10;

    display: none;

}



.aw-suggest-item {

    padding: 12px 16px;

    border-bottom: 1px solid #f1f5f9;

    cursor: pointer;

    display: flex;

    flex-direction: column;

}



.aw-suggest-item:hover {

    background: #f8fafc;

}



.aw-suggest-item span {

    font-weight: 700;

    font-size: 16px;

}



.aw-suggest-item small {

    color: #64748b;

    font-size: 13px;

    margin-top: 4px;

}



/* Badges */

.aw-status-badge {

    padding: 16px;

    font-size: 16px;

    font-weight: 700;

    border-radius: 8px;

    text-align: center;

    margin-bottom: auto;

    background: #f1f5f9;

    color: #64748b;

    border: 1px solid #e2e8f0;

}



.aw-status-badge.success {

    background: #ecfdf5;

    color: #10b981;

    border-color: #a7f3d0;

}



.aw-status-badge.error {

    background: #fef2f2;

    color: #ef4444;

    border-color: #fecaca;

}



.aw-status-badge.warning {

    background: #fffbeb;

    color: #f59e0b;

    border-color: #fde68a;

}



/* Sync Panel */

.aw-sync-panel {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 20px;

    margin-top: 24px;

}



.aw-sync-stats {

    display: flex;

    justify-content: space-between;

    margin-bottom: 16px;

    font-size: 15px;

}



.aw-sync-stats span {

    display: block;

    font-size: 12px;

    color: #64748b;

    font-weight: 400;

}



#awSyncBtn {

    width: 100%;

}



/* List */

.aw-mobile-tabs {

    display: none;

    background: #fff;

    border-bottom: 1px solid #e2e8f0;

}



/* Only mobile */

.aw-list-scroll {

    flex: 1;

    overflow-y: auto;

    padding: 20px;

}



.aw-list-row {

    background: #fff;

    padding: 16px;

    border-radius: 8px;

    margin-bottom: 10px;

    border: 1px solid #e2e8f0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}



.aw-row-main {

    flex: 1;

}



.aw-row-code {

    font-weight: 700;

    font-size: 16px;

    color: #1e293b;

}



.aw-row-name {

    font-size: 13px;

    color: #64748b;

    margin-top: 4px;

}



.aw-row-loc {

    font-size: 12px;

    color: #0284c7;

    margin-top: 4px;

    font-weight: 600;

}



.aw-list-row.checked {

    background: #fdfdfd;

    border-color: #a7f3d0;

    opacity: 0.8;

}



.aw-list-row.checked .aw-row-code {

    color: #065f46;

    text-decoration: line-through;

}



.aw-row-icon i {

    font-size: 24px;

}





/* RESPONSIVE RULES (Mobile) */

@media (max-width: 768px) {

    .aw-body {

        flex-direction: column;

    }



    .aw-panel-input {

        width: 100%;

        border-right: none;

        height: 100%;

        padding: 16px;

        flex-shrink: 0;

    }



    .aw-panel-list {

        display: none;

    }



    .aw-mobile-tabs {

        display: flex;

    }



    .aw-tab {

        flex: 1;

        padding: 12px;

        text-align: center;

        font-weight: 600;

        background: #f8fafc;

        border: none;

        border-bottom: 2px solid transparent;

        color: #64748b;

        cursor: pointer;

    }



    .aw-tab.active {

        background: #fff;

        color: var(--ui-accent);

        border-bottom-color: var(--ui-accent);

    }



    /* Custom Data Attribute driven layout */

    .audit-workspace-overlay[data-view-tab="done"] .aw-panel-input,

    .audit-workspace-overlay[data-view-tab="list"] .aw-panel-input {

        display: none !important;

    }



    /* Show list globally if tab is active */

    .audit-workspace-overlay[data-view-tab="list"] .aw-panel-list,

    .audit-workspace-overlay[data-view-tab="done"] .aw-panel-list {

        display: flex;

        width: 100%;

        height: 100%;

    }



    /* Tab filtering using CSS Trick */

    .audit-workspace-overlay[data-view-tab="list"] .aw-list-row.checked {

        display: none;

    }



    .audit-workspace-overlay[data-view-tab="done"] .aw-list-row:not(.checked) {

        display: none;

    }



    /* At mobile, we need a way to go back to Scanner... wait, tabs need "Quét" tab? */

    .aw-mobile-tabs::before {

        content: 'Bắn QR';

        display: block;

        flex: 1;

        padding: 12px;

        text-align: center;

        font-weight: 600;

        background: #f8fafc;

        color: #64748b;

        border-bottom: 2px solid transparent;

        border-right: 1px solid #e2e8f0;

    }

}