/*************************************************
    SALMYA ERP
    CLEAN LINUX MINT MOBILE-FIRST THEME
*************************************************/

:root{
    --font:"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
    --bg:#eef5ef;
    --bg-2:#dce9dd;
    --surface:#ffffff;
    --surface-2:#f6faf6;
    --panel:#edf6ee;
    --line:#d4e1d6;
    --line-strong:#a7bca9;
    --text:#203128;
    --muted:#63766b;
    --mint:#2f8f46;
    --mint-2:#24743a;
    --mint-3:#e2f3e5;
    --teal:#287a71;
    --blue:#2f6f9f;
    --amber:#c9891a;
    --red:#bc4545;
    --shadow:0 14px 34px rgba(31,65,42,.14);
    --shadow-soft:0 4px 14px rgba(31,65,42,.08);
    --radius:8px;
    --touch:42px;
    --desktop-shell:1360px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    min-height:100%;
    font-size:16px;
    background:var(--bg);
    -webkit-text-size-adjust:100%;
}

body{
    min-width:0;
    min-height:100vh;
    margin:0;
    overflow-x:hidden;
    overflow-y:auto;
    color:var(--text);
    font-family:var(--font);
    font-size:14px;
    line-height:1.45;
    background:
        radial-gradient(circle at 10% -10%, rgba(47,143,70,.22), transparent 34rem),
        radial-gradient(circle at 100% 0%, rgba(40,122,113,.16), transparent 30rem),
        linear-gradient(135deg, #f9fcf9 0%, var(--bg) 48%, var(--bg-2) 100%);
    background-attachment:fixed;
}

img{
    max-width:100%;
    height:auto;
}

a{
    color:var(--mint-2);
    text-decoration:none;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    color:var(--mint-2);
    font-weight:750;
    letter-spacing:0;
    line-height:1.18;
}

h1{font-size:clamp(1.2rem, 1rem + .8vw, 1.75rem);}
h2{font-size:clamp(1.08rem, .98rem + .45vw, 1.35rem);}
h3{font-size:1rem;}

p{
    margin:0;
    color:var(--muted);
}

small,
label,
.user-label,
.card-label,
.summary-title,
.status-text{
    color:var(--muted);
}

.background{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.78), transparent 56%),
        radial-gradient(circle at 50% 20%, rgba(47,143,70,.12), transparent 22rem);
}

.container,
.window,
.page,
.main,
.wrapper,
.content,
.login-card,
.panel,
.summary-card,
.report-card,
.stat-card,
.menu-card,
.filter,
.filter-panel,
.filter-box,
.filter-card,
.search-section,
.search-box,
.toolbar,
.table-wrap,
.table-card,
.modal-content,
.modal-box,
.detail-box,
.form-card,
.loading-window,
.group-box,
.info-bar,
.alert,
fieldset{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
}

.container,
.window,
.page,
.main,
.wrapper,
.content{
    width:min(var(--desktop-shell), calc(100% - 24px));
    margin:12px auto;
    padding:0;
}

.window,
.container,
.page{
    overflow:hidden;
}

.window-body,
.panel-body,
.card-body,
.modal-body,
.detail-print{
    padding:14px;
    background:var(--surface);
}

.header,
.page-header,
.window-title,
.panel-header,
.card-header,
.modal-header,
.task-pane-header,
.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:10px 14px;
    color:#fff;
    background:linear-gradient(135deg, var(--mint), var(--mint-2));
    border-bottom:1px solid rgba(0,0,0,.12);
}

.header h1,
.page-header h1,
.window-title h1,
.panel-header h1,
.card-header h1,
.modal-header h1,
.header h2,
.page-header h2,
.window-title h2,
.panel-header h2,
.card-header h2,
.modal-header h2{
    color:#fff;
}

.header span,
.page-header span,
.window-title span,
.panel-header span,
.card-header span,
.modal-header span{
    color:rgba(255,255,255,.84);
}

.window-title{
    justify-content:space-between;
}

.window-title-left,
.window-title-right,
.header-user,
.dashboard-header,
.status-left,
.status-right,
.toolbar-group,
.action,
.card-action,
.modal-footer,
.footer-summary,
.pagination{
    display:flex;
    align-items:center;
    gap:8px;
}

.toolbar,
.filter,
.filter-panel,
.filter-box,
.filter-card{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:10px;
    margin:12px;
    padding:12px;
}

.filter-panel,
.filter-box,
.filter-card,
.form-grid,
.summary-grid,
.menu-grid,
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
}

.filter-item,
.form-group,
.field,
.summary-item{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

input,
select,
textarea{
    width:100%;
    min-height:var(--touch);
    padding:10px 12px;
    color:var(--text);
    font:inherit;
    background:#fff;
    border:1px solid var(--line-strong);
    border-radius:7px;
    outline:none;
}

textarea{
    min-height:92px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--mint);
    box-shadow:0 0 0 3px rgba(47,143,70,.18);
}

button,
.btn,
[class^="btn"],
[class*=" btn"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.back,
.window-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:var(--touch);
    min-width:var(--touch);
    padding:9px 14px;
    color:var(--text);
    font:inherit;
    font-weight:650;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    background:linear-gradient(to bottom, #fff, #edf6ee);
    border:1px solid var(--line-strong);
    border-radius:7px;
    box-shadow:0 1px 2px rgba(36,74,47,.08);
}

button:hover,
.btn:hover,
[class^="btn"]:hover,
[class*=" btn"]:hover,
.back:hover,
.window-btn:hover{
    background:var(--mint-3);
}

button:active,
.btn:active,
[class^="btn"]:active,
[class*=" btn"]:active{
    transform:translateY(1px);
}

.btn-primary,
.btn-success,
.btn-info,
.btn-filter,
.btnTambah,
.btnSave,
.btn-simpan,
.btn-bayar,
.btn-detail,
.btn-tambah,
.summary-value{
    color:#fff;
    background:linear-gradient(135deg, #3aa958, var(--mint-2));
    border-color:var(--mint-2);
}

.btn-danger,
.btn-delete,
.btn-hapus,
.btnDelete,
.modal-header button{
    color:#fff;
    background:linear-gradient(135deg, #d65b5b, #a83232);
    border-color:#9b2d2d;
}

.btn-warning{
    color:#3c2a06;
    background:linear-gradient(135deg, #ffe0a0, #d99a25);
    border-color:#b77c19;
}

.back,
.window-btn{
    padding:0;
}

.summary-card,
.stat-card,
.report-card,
.menu-card{
    padding:14px;
}

.summary-value,
#footerTotal{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:8px 12px;
    border-radius:7px;
    font-size:1.35rem;
    font-weight:800;
}

.menu-grid{
    padding:14px;
}

.menu-card{
    min-height:126px;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.menu-card:hover{
    transform:translateY(-2px);
    border-color:var(--mint);
    box-shadow:var(--shadow);
}

.menu-card img,
.window-icon,
.avatar,
.welcome-logo,
.loading-logo,
.logo img{
    display:block;
    object-fit:contain;
}

.menu-card img{width:44px;height:44px;margin:0 auto 10px;}
.window-icon{width:24px;height:24px;}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--mint-3);}
.welcome-logo,.loading-logo{width:64px;height:64px;}
.logo img{width:112px;height:112px;margin:0 auto 14px;}

.login-card{
    width:min(420px, calc(100% - 28px));
    margin:8vh auto;
    padding:28px;
    text-align:center;
}

.login-card form{
    display:grid;
    gap:12px;
    margin-top:18px;
}

#message{
    margin-top:14px;
    color:var(--red);
}

.table-wrap,
.table-card{
    margin:12px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    min-width:760px;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}

thead{
    background:linear-gradient(135deg, var(--mint), var(--mint-2));
}

th,
td{
    padding:11px 12px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--line);
}

th{
    color:#fff;
    font-weight:750;
    white-space:nowrap;
}

td{
    color:var(--text);
}

tbody tr:nth-child(even){
    background:#f8fbf8;
}

tbody tr:hover{
    background:var(--mint-3);
}

.number,
td.number,
th.number{
    text-align:right;
}

.badge,
[class*="badge"],
.status,
.chip,
.user-role{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:4px 10px;
    color:#fff;
    font-size:.78rem;
    font-weight:750;
    line-height:1;
    background:var(--mint);
    border-radius:999px;
}

.status.hutang,
.status.piutang,
.badge-warning{
    color:#372704;
    background:#f2c45d;
}

.status.batal,
.status.gagal,
.badge-danger{
    background:var(--red);
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:rgba(26,43,31,.48);
}

.popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(26,43,31,.48);
}

.modal-content,
.modal-box,
.popup-box{
    width:min(920px, 100%);
    max-height:90vh;
    overflow:auto;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.popup-box.small{
    width:min(420px, 100%);
}

.modal-header,
.popup-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    color:#fff;
    background:linear-gradient(135deg, var(--mint), var(--mint-2));
    border-bottom:1px solid rgba(0,0,0,.12);
}

.popup-header h2,
.popup-header h3{
    color:#fff;
}

#popupBody,
.popup-box > p,
.popup-box > h3{
    padding:14px;
}

.modal-footer,
.popup-footer,
.footer-summary,
.statusbar{
    justify-content:space-between;
    flex-wrap:wrap;
    padding:12px 14px;
    background:var(--panel);
    border-top:1px solid var(--line);
}

.hidden,
[hidden]{
    display:none !important;
}

.text-center{text-align:center;}
.text-right{text-align:right;}
.w100{width:100%;}
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mb-10{margin-bottom:10px;}
.p-10{padding:10px;}

.desktop{
    display:block;
}

.mobile,
.card-container{
    display:none;
}

.customer-list,
.mobile,
.card-container{
    gap:12px;
}

.card,
.mobile-card,
.customer-card,
.transaction-card{
    display:block;
    margin:0 0 12px;
    padding:14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
}

.card-row,
.card-item,
.mobile-row{
    display:grid;
    grid-template-columns:minmax(96px, 36%) 1fr;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
}

.card-row:last-child,
.card-item:last-child,
.mobile-row:last-child{
    border-bottom:0;
}

.card-row span:first-child,
.card-item span:first-child,
.mobile-row span:first-child{
    color:var(--muted);
    font-weight:700;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:var(--panel);
}

::-webkit-scrollbar-thumb{
    background:var(--line-strong);
    border:2px solid var(--panel);
    border-radius:999px;
}

@media(min-width:901px){
    :root{
        --touch:34px;
    }

    body{
        font-size:13px;
    }

    .container,
    .window,
    .page,
    .main,
    .wrapper,
    .content{
        width:min(var(--desktop-shell), calc(100% - 32px));
        margin:16px auto;
        border-radius:10px;
        box-shadow:var(--shadow);
    }

    .window-body,
    .panel-body,
    .card-body,
    .modal-body,
    .detail-print{
        padding:16px;
    }

    .header,
    .page-header,
    .window-title,
    .panel-header,
    .card-header,
    .modal-header,
    .task-pane-header,
    .card-title{
        min-height:42px;
        padding:9px 14px;
    }

    .header{
        justify-content:flex-start;
    }

    .header > div,
    .window-title-left,
    .header-title{
        min-width:0;
    }

    .toolbar,
    .filter,
    .filter-panel,
    .filter-box,
    .filter-card{
        align-items:end;
        grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
        gap:10px;
        margin:12px 14px;
        padding:12px;
    }

    .toolbar{
        display:flex;
        justify-content:space-between;
    }

    .toolbar > input,
    .toolbar > select,
    .toolbar .search-box{
        max-width:360px;
    }

    .filter-action,
    .toolbar-group,
    .action,
    .card-action,
    .modal-footer,
    .footer-summary,
    .pagination{
        display:flex;
        align-items:center;
        flex-direction:row;
        flex-wrap:wrap;
        gap:8px;
    }

    .filter-action{
        align-self:end;
        justify-content:flex-end;
    }

    input,
    select,
    textarea{
        min-height:34px;
        padding:7px 10px;
        font-size:13px;
    }

    textarea{
        min-height:82px;
    }

    button,
    .btn,
    [class^="btn"],
    [class*=" btn"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]{
        width:auto;
        min-height:34px;
        min-width:34px;
        padding:7px 12px;
        font-size:13px;
        white-space:nowrap;
    }

    .back,
    .window-btn,
    .modal-header button{
        width:34px;
        min-width:34px;
        flex:0 0 34px;
        padding:0;
    }

    .summary-grid{
        grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
        margin:14px;
    }

    .summary-card,
    .stat-card,
    .report-card{
        padding:14px;
    }

    .summary-value,
    #footerTotal{
        width:auto;
        min-height:36px;
        padding:7px 12px;
        font-size:1.05rem;
    }

    .menu-grid{
        grid-template-columns:repeat(auto-fill, minmax(128px, 1fr));
        gap:12px;
        padding:14px;
    }

    .menu-card{
        min-height:118px;
        padding:14px 10px;
    }

    .menu-card img{
        width:40px;
        height:40px;
    }

    .desktop{
        display:block !important;
    }

    .mobile,
    .card-container{
        display:none !important;
    }

    .table-wrap,
    .table-card,
    .desktop{
        margin:12px 14px;
        overflow:auto;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:8px;
        box-shadow:none;
    }

    .desktop > table,
    .table-wrap > table,
    .table-card > table,
    table{
        display:table;
        width:100%;
        min-width:760px;
        border-collapse:separate;
        border-spacing:0;
        table-layout:auto;
        background:#fff;
    }

    thead{
        display:table-header-group;
        background:linear-gradient(to bottom, #348f4a, #24743a);
    }

    tbody{
        display:table-row-group;
    }

    tr{
        display:table-row;
    }

    th,
    td{
        display:table-cell;
        padding:9px 10px;
        line-height:1.35;
        border-right:1px solid #e6eee7;
        border-bottom:1px solid #dce7de;
        vertical-align:middle;
    }

    th:last-child,
    td:last-child{
        border-right:0;
    }

    th{
        position:sticky;
        top:0;
        z-index:2;
        color:#fff;
        font-size:12px;
        font-weight:750;
        text-transform:none;
        background:linear-gradient(to bottom, #348f4a, #24743a);
        box-shadow:inset 0 -1px rgba(0,0,0,.18);
    }

    td{
        background:inherit;
    }

    tbody tr:nth-child(even){
        background:#f8fbf8;
    }

    tbody tr:hover{
        background:#eaf6ec;
    }

    td[data-label]::before{
        content:none;
    }

    .number,
    td.number,
    th.number,
    td:nth-last-child(2):not(:first-child){
        text-align:right;
    }

    .status,
    .badge,
    [class*="badge"],
    .chip,
    .user-role{
        min-height:22px;
        padding:3px 9px;
        font-size:11px;
    }

    .modal-content,
    .modal-box,
    .popup-box{
        width:min(920px, calc(100vw - 48px));
        max-height:88vh;
    }

    .popup,
    .modal{
        align-items:center;
        justify-content:center;
    }
}

@media(max-width:900px){
    :root{
        --touch:44px;
    }

    body{
        font-size:14px;
        background-attachment:scroll;
    }

    .container,
    .window,
    .page,
    .main,
    .wrapper,
    .content{
        width:calc(100% - 14px);
        margin:7px auto;
        border-radius:9px;
    }

    .header,
    .window-title,
    .panel-header,
    .card-header,
    .modal-header{
        align-items:flex-start;
        flex-wrap:wrap;
        min-height:0;
        padding:12px;
    }

    .window-title-right{
        margin-left:auto;
    }

    .dashboard-header,
    .header-user,
    .toolbar,
    .filter,
    .filter-panel,
    .filter-box,
    .filter-card,
    .footer-summary,
    .statusbar,
    .modal-footer,
    .popup-footer,
    .action,
    .card-action{
        align-items:stretch;
        flex-direction:column;
        width:auto;
    }

    .toolbar,
    .filter,
    .filter-panel,
    .filter-box,
    .filter-card,
    .table-wrap,
    .table-card{
        margin:10px;
    }

    .filter-panel,
    .filter-box,
    .filter-card,
    .form-grid,
    .summary-grid,
    .grid{
        grid-template-columns:1fr;
    }

    button,
    .btn,
    [class^="btn"],
    [class*=" btn"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]{
        width:100%;
    }

    .back,
    .window-btn,
    .modal-header button,
    .popup-header button{
        width:var(--touch);
        flex:0 0 var(--touch);
    }

    .menu-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        padding:10px;
    }

    .menu-card{
        min-height:104px;
        padding:12px 8px;
    }

    .menu-card img{
        width:36px;
        height:36px;
    }

    .summary-value,
    #footerTotal{
        width:100%;
        font-size:1.1rem;
    }

    .desktop{
        display:none !important;
    }

    .mobile,
    .card-container,
    .customer-list{
        display:grid;
        padding:10px;
    }

    .card-container:empty,
    .mobile:empty,
    .customer-list:empty{
        display:none;
    }

    .table-wrap,
    .table-card{
        overflow:visible;
        background:transparent;
        border:0;
        box-shadow:none;
    }

    .popup,
    .modal{
        align-items:flex-start;
        padding:10px;
        overflow:auto;
    }

    .popup-box,
    .modal-content,
    .modal-box{
        width:100%;
        max-height:none;
    }

    table.responsive-card-table,
    .responsive-card-table thead,
    .responsive-card-table tbody,
    .responsive-card-table tr,
    .responsive-card-table th,
    .responsive-card-table td{
        display:block;
        width:100%;
        min-width:0;
    }

    .responsive-card-table{
        min-width:0;
        background:transparent;
        border:0;
    }

    .responsive-card-table thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

    .responsive-card-table tbody tr{
        margin:0 0 12px;
        padding:12px;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:var(--shadow-soft);
    }

    .responsive-card-table tbody td{
        display:grid;
        grid-template-columns:minmax(96px, 36%) 1fr;
        gap:10px;
        min-height:0;
        padding:9px 0;
        text-align:right;
        border:0;
        border-bottom:1px solid var(--line);
        white-space:normal;
        word-break:break-word;
    }

    .responsive-card-table tbody td:last-child{
        border-bottom:0;
    }

    .responsive-card-table tbody td::before{
        content:attr(data-label);
        color:var(--muted);
        font-weight:750;
        text-align:left;
    }

    .responsive-card-table tbody td[colspan]{
        display:block;
        text-align:center;
    }

    .responsive-card-table tbody td[colspan]::before{
        content:"";
        display:none;
    }
}

@media(max-width:520px){
    .container,
    .window,
    .page,
    .main,
    .wrapper,
    .content{
        width:100%;
        margin:0;
        border-radius:0;
        border-left:0;
        border-right:0;
    }

    .login-card{
        width:calc(100% - 20px);
        margin:6vh auto;
        padding:22px;
    }

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

    .card-row,
    .card-item,
    .mobile-row,
    .responsive-card-table tbody td{
        grid-template-columns:1fr;
        text-align:left;
    }

    th,
    td{
        padding:10px;
    }
}