/*
    File: /portal.4square.us/static/css/global.css
    Purpose: Global styling system
*/

:root{
    --side-w: 240px;
    --top-h: 72px;
    --row-fs: 12px;
    --row-h: 20px;
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#eef1f4;
}

/* ============== TOP HEADER ============== */
.top{
    height:var(--top-h);
    background:#2b6cb0;
    color:#fff;
    display:flex;
    align-items:center;
    padding:0 20px;
    font-weight:600;
    font-size:16px;
    position:sticky;
    top:0;
    z-index:20;
}

.hamburger{
    display:none;
    background:transparent;
    border:0;
    color:#fff;
    font-size:26px;
    line-height:1;
    padding:6px 10px;
    margin-right:10px;
    cursor:pointer;
}

.top img{ display:block; }

/* ============== LAYOUT ============== */
.wrap{
    display:flex;
    height:calc(100vh - var(--top-h));
}

.side{
    width:var(--side-w);
    background:#ffffff;
    padding:14px 10px;
    position:sticky;
    top:var(--top-h);
    height:calc(100vh - var(--top-h));
    overflow:auto;
    border-right:1px solid #e5e7eb;
}

.side a{
    display:block;
    margin:6px 0;
    padding:10px 12px;
    background:#f3f4f6;
    border:1px solid #000;
    border-radius:8px;
    color:#111;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:background .15s, color .15s;
}

.side a:hover{
    background:#bfdbfe;
    color:#111;
}

.side .active{
    background:#2563eb;
    color:#fff;
    border-color:#000;
}

.side-resizer{
    position:absolute;
    top:0;
    right:0;
    width:8px;
    height:100%;
    cursor:col-resize;
    background:transparent;
}

.main{
    flex:1;
    padding:18px;
    overflow:auto;
}

/* ============== CARDS ============== */
.card{
    background:#fff;
    border-radius:10px;
    padding:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    font-size:12px;
}

/* Page title — ONE rule, applies everywhere */
.card h1{
    font-size:20px;
    font-weight:700;
    color:#111;
    text-align:center;
    margin:0 0 16px;
    padding:0;
}

/* Section card inside a page card */
.section-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:16px;
}

.section-card h2{
    font-size:14px;
    margin:0 0 12px 0;
    color:#1f3f8a;
    padding-bottom:6px;
    border-bottom:1px solid #e5e7eb;
}

/* ============== GRID / KPI ============== */
.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.kpi{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:14px;
}

.kpi .label{
    font-size:12px;
    color:#6b7280;
    margin-bottom:6px;
}

.kpi .value{
    font-size:20px;
    font-weight:700;
    color:#111;
}

.small{
    font-size:12px;
    color:#6b7280;
}

/* ============== BUTTONS ============== */
button{
    padding:10px 14px;
    border:0;
    border-radius:6px;
    background:#2b6cb0;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

/* Compact button — for cards and forms */
.btn-compact{
    padding:7px 16px;
    font-size:12px;
    font-weight:600;
    border:0;
    border-radius:6px;
    background:#2b6cb0;
    color:#ffffff;
    cursor:pointer;
}

.btn-compact:disabled{
    opacity:0.6;
    cursor:not-allowed;
}

/* + Add link / button — same style as compact button but as an <a> */
.btn-add{
    display:inline-block;
    padding:7px 14px;
    font-size:12px;
    font-weight:600;
    background:#2b6cb0;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    margin-bottom:12px;
}

.btn-add:hover{
    background:#1f5598;
    color:#fff;
    text-decoration:none;
}

/* ============== FORM INPUTS ============== */
.form-input{
    width:100%;
    padding:6px 8px;
    font-size:12px;
    border:1px solid #cfcfcf;
    border-radius:6px;
    box-sizing:border-box;
}

/* ============== STATUS TEXT ============== */
.status-text{
    font-size:12px;
    min-height:16px;
    color:#444;
    margin-top:8px;
    margin-bottom:12px;
}

.status-text.error{ color:#c00; font-weight:700; }
.status-text.ok   { color:#16a34a; font-weight:700; }

/* ============== CAUTION BLOCK ============== */
.caution-block{
    margin-top:8px;
    margin-bottom:12px;
    font-size:10px;
    color:#b62d23;
    line-height:1.4;
}

/* ============== UTILITY ============== */
.hidden{ display:none; }

/* ============== STATUS PILLS ============== */
.pill{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:85% !important;
    min-height:15px !important;
    padding:0 12px !important;
    margin:0 auto !important;
    border-radius:999px !important;
    font-size:calc(var(--row-fs) * 1.05) !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
}

.pill-complete    { background:#16a34a; color:#fff; }
.pill-confirmed   { background:#2563eb; color:#fff; }
.pill-hold        { background:#f59e0b; color:#fff; }
.pill-created     { background:#9ca3af; color:#fff; }
.pill-canceled    { background:#dc2626; color:#fff; }
.pill-refunded    { background:#1d4ed8; color:#fff; }
.pill-other       { background:#6b7280; color:#fff; }
.pill-nsf         { background:#dc2626; color:#fff; }
.pill-nsf-final   { background:#991b1b; color:#fff; }
.pill-partial     { background:#1d4ed8; color:#fff; }

/* ============== EDITABLE CELL ============== */
.cell-editable{
    color:#2b6cb0;
    cursor:pointer;
    text-decoration:none;
    font-weight:400;
    transition:none;
}

.cell-editable:hover{
    font-size:calc(var(--row-fs) * 1.15) !important;
    font-weight:700 !important;
    text-decoration:underline;
}

/* ============== INPUT / GENERIC ============== */
input{
    padding:10px;
    border:1px solid #ccc;
    border-radius:6px;
}

.err{
    color:#c00;
    margin-top:10px;
    text-align:center;
}

a{
    color:#2563eb;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* ============== DATATABLE ============== */
table.dataTable{
    border-collapse:collapse !important;
}

table.dataTable thead th,
table.dataTable tbody td{
    border-width:1.3px !important;
    border-style:solid !important;
    border-color:#4b5563 !important;
}

table.dataTable tbody tr:nth-child(odd) > td,
table.dataTable tbody tr:nth-child(odd) > th{
    background: var(--zebra-color-odd, #ffffff) !important;
}

table.dataTable tbody tr:nth-child(even) > td,
table.dataTable tbody tr:nth-child(even) > th{
    background: var(--zebra-color, #9acaed) !important;
}

table.dataTable tbody tr{
    height:var(--row-h, 34px) !important;
}

table.dataTable tbody td,
table.dataTable tbody th{
    font-size:var(--row-fs) !important;
    padding:6px 8px !important;
    height:var(--row-h, 34px) !important;
    vertical-align:middle !important;
}

table.dataTable thead th{
    font-size:var(--row-fs) !important;
    font-weight:600 !important;
    color:#111 !important;
    padding:6px 8px !important;
}

.dataTables_wrapper{
    background:#ffffff;
    border:1px solid #b9c3cf;
    border-radius:10px;
    padding:0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
    padding:10px 12px;
    margin:0;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
    padding:10px 12px;
    margin:0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
    padding:6px 8px;
    border-radius:6px;
    border:1px solid #b9c3cf;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
    font-size:12px !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
    font-size:12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    font-size:12px !important;
}

table.dataTable tbody tr{
    height: var(--row-h, 34px) !important;
}

table.dataTable tbody td,
table.dataTable tbody th{
    box-sizing: border-box !important;
    height: var(--row-h, 34px) !important;
    line-height: calc(var(--row-h, 34px) - 2px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* DataTable column cap */
table.dataTable thead th,
table.dataTable tbody td{
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============== DATATABLE LENGTH / SEARCH CONTROLS ============== */
.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dataTables_length select,
.dataTables_filter input {
    padding: 6px 8px !important;
    font-size: 12px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* ============== ROLE-BASED NAV ============== */
body.role-merchant .side a[data-nav="/ui/rail_accounts.html"],
body.role-merchant .side a[data-nav="/ui/payment_rails.html"],
body.role-merchant .side a[data-nav="/ui/users.html"],
body.role-merchant .side a[data-nav="/ui/admin_tools.html"],
body.role-merchant .side a[data-nav="/ui/customers.html"],
body.role-merchant .side a[data-nav="/ui/merchants.html"],
body.role-merchant .side a[data-nav="/ui/acquirers.html"]{
    display: none !important;
}

body.role-id-3 .side a[data-nav="/ui/reports.html"],
body.role-id-5 .side a[data-nav="/ui/reports.html"],
body.role-id-6 .side a[data-nav="/ui/reports.html"]{
    display: none !important;
}

/* ============== MOBILE ============== */
@media (max-width: 767px){
    .hamburger{ display:block; }
    .top .desktop-only{ display:none !important; }
    .top{ padding:0 10px; font-size:14px; }
    .top img{ height:40px !important; margin-right:8px !important; }

    .side{
        position:fixed;
        top:var(--top-h);
        left:0;
        width:35%;
        max-width:200px;
        height:calc(100vh - var(--top-h));
        z-index:30;
        transform:translateX(-100%);
        transition:transform .22s ease;
        box-shadow:2px 0 12px rgba(0,0,0,.15);
    }

    body.nav-open .side{ transform:translateX(0); }

    .nav-overlay{
        display:none;
        position:fixed;
        top:var(--top-h);
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,.35);
        z-index:25;
    }

    body.nav-open .nav-overlay{ display:block; }

    .side-resizer{ display:none; }

    .main{ padding:10px; }
    .card{ padding:12px; }

    table.dataTable tbody tr:nth-child(odd) > td,
    table.dataTable tbody tr:nth-child(odd) > th{
        background: #f3f4f6 !important;
    }
    table.dataTable tbody tr:nth-child(even) > td,
    table.dataTable tbody tr:nth-child(even) > th{
        background: #cfe2f3 !important;
    }

    table.dataTable tbody tr,
    table.dataTable tbody td,
    table.dataTable tbody th{
        height: 22px !important;
        line-height: 20px !important;
    }

    table.dataTable tbody tr.child:nth-child(odd) > td,
    table.dataTable tbody tr.child:nth-child(even) > td,
    table.dataTable tbody tr.child > td,
    table.dataTable tbody tr.child .dtr-details td{
        background: #ffffff !important;
    }

    .dataTables_wrapper{ overflow-x:auto; }

    input, select, textarea{
        max-width:100%;
        box-sizing:border-box;
    }

    input[type="date"],
    input[type="number"],
    input[type="text"],
    input[type="email"]{
        width:100% !important;
    }

    table.dataTable thead th,
    table.dataTable tbody td{
        font-size:11px !important;
        padding:4px 6px !important;
        max-width:120px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

/* ============== MODAL ============== */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.active { display: flex; }

.modal-box {
    background: #ffffff;
    border-radius: 10px;
    width: 460px;
    max-width: 95vw;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    padding: 20px 22px;
    font-size: 13px;
}

.modal-box.modal-wide   { width: 520px; }
.modal-box.modal-narrow { width: 380px; }

.modal-h2 {
    margin: 0 0 14px 0;
    font-size: 16px;
    color: #1f3f8a;
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-context {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.6;
}

.modal-form-group { margin-bottom: 10px; }

.modal-form-group label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
    color: #111;
}

.modal-form-group input,
.modal-form-group select,
.modal-form-group textarea {
    width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    box-sizing: border-box;
}

.modal-status {
    font-size: 12px;
    min-height: 16px;
    margin-bottom: 10px;
    text-align: center;
    color: #c00;
}

.modal-status.ok { color: #16a34a; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.modal-btn {
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-btn-primary   { background: #2b6cb0; color: #ffffff; }
.modal-btn-secondary { background: #e5e7eb; color: #111; }
.modal-btn-danger    { background: #dc2626; color: #ffffff; }