* {
    box-sizing: border-box;
}

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

.topbar {
    background: #172554;
    color: #fff;
    padding: 18px 0;
}

.container {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
}

.brand {
    font-size: 24px;
    font-weight: 700;
}

.subtitle {
    margin-top: 5px;
    opacity: .8;
    font-size: 13px;
}

.page {
    padding: 28px 0 50px;
}

.card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
}

h1 {
    margin-top: 0;
    margin-bottom: 8px;
}

h2 {
    margin-top: 0;
}

.intro {
    color: #5b6472;
    line-height: 1.6;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.step {
    display: flex;
    gap: 12px;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 15px;
}

.step > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #172554;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.step small {
    display: block;
    color: #6b7280;
    margin-top: 5px;
    line-height: 1.4;
}

.button-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    border: 0;
    border-radius: 8px;
    padding: 11px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
}

.btn.primary {
    background: #172554;
    color: white;
}

.btn.secondary {
    background: #e5e7eb;
    color: #111827;
}

.btn.big {
    margin-top: 8px;
    padding: 13px 22px;
}

.search-form {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr auto;
    gap: 16px;
    align-items: end;
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
}

.field input,
.field select {
    width: 100%;
    height: 43px;
    border: 1px solid #cfd5df;
    border-radius: 7px;
    padding: 0 12px;
    font-size: 14px;
    background: white;
}

.field small {
    display: block;
    color: #6b7280;
    margin-top: 5px;
}

.alert {
    padding: 13px 15px;
    border-radius: 8px;
    margin: 15px 0;
    line-height: 1.5;
}

.alert.success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert.warning {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.note {
    border-left: 4px solid #172554;
}

.result-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.result-header p {
    color: #6b7280;
}

.badge {
    background: #e0e7ff;
    color: #3730a3;
    padding: 7px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.detail {
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 14px;
}

.detail span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 6px;
}

.detail strong {
    font-size: 18px;
}

.detail.highlight {
    background: #f8fafc;
    border-color: #c7d2fe;
}

@media (max-width: 850px) {
    .steps,
    .search-form,
    .details-grid {
        grid-template-columns: 1fr;
    }
}


.editable-payment-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #c7d2fe;
    background: #f8fafc;
    border-radius: 10px;
}

.live-due {
    min-height: 43px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
    padding: 9px 12px;
}

.live-due span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 3px;
}

.live-due strong {
    font-size: 18px;
}

.danger-text {
    color: #b91c1c;
}

.history-card {
    overflow: hidden;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.section-heading p {
    color: #6b7280;
    margin: 4px 0 0;
}

.history-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.history-table {
    width: 100%;
    min-width: 1150px;
    border-collapse: collapse;
    font-size: 13px;
}

.history-table th,
.history-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 11px;
    text-align: left;
    white-space: nowrap;
}

.history-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

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

.history-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 11px;
}

.status-success {
    background: #dcfce7;
    color: #166534;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.message-cell {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-history {
    padding: 22px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
}

code {
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 5px;
}

@media (max-width: 850px) {
    .editable-payment-box {
        grid-template-columns: 1fr;
    }

    .section-heading {
        flex-direction: column;
    }
}

.rule-box {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    margin: 14px 0 18px;
    line-height: 1.5;
}

.batch-amount {
    width: 130px;
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-weight: 600;
}

.status-skipped {
    background: #fff3cd;
    color: #8a5a00;
}

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

.take-payment {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.selection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.formula-cell {
    color: #475569;
    font-size: 12px;
    white-space: nowrap;
}

.auto-payment-cell {
    color: #64748b;
    font-style: italic;
    font-size: 12px;
}

.confirmation-card {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.formula-banner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    background: #eef2ff;
    color: #312e81;
}

.next-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 13px 15px;
    background: #f8fafc;
    cursor: pointer;
}

.next-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.next-check span {
    color: #64748b;
    font-size: 13px;
    margin-left: 2px;
}

@media (max-width: 850px) {
    .selection-toolbar,
    .formula-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.month-summary { min-width: 280px; }
.month-chip { display:inline-block; padding:4px 7px; margin:2px; border-radius:6px; background:#f1f5f9; font-size:12px; }


/* Version 6.6 login and multi-automation dashboard */
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand-link { color:inherit; text-decoration:none; }
.topbar-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topbar-dashboard, .signed-in { color:#fff; font-size:13px; text-decoration:none; }
.logout-btn { border:1px solid rgba(255,255,255,.5); color:#fff; background:transparent; padding:8px 12px; border-radius:7px; cursor:pointer; font-weight:700; }
.login-wrap { min-height:calc(100vh - 180px); display:flex; align-items:center; justify-content:center; }
.login-card { width:min(440px,100%); background:#fff; border-radius:16px; padding:34px; box-shadow:0 10px 35px rgba(15,23,42,.1); }
.login-card h1 { margin:12px 0 8px; }
.login-mark { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:white; background:#172554; font-weight:800; }
.login-form { display:grid; gap:16px; margin-top:22px; }
.login-form .field input { margin-top:2px; }
.full-width { width:100%; }
.login-note { color:#6b7280; font-size:12px; line-height:1.5; margin-top:18px; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin:4px 0 24px; }
.eyebrow { color:#4f46e5; font-weight:800; letter-spacing:.12em; font-size:11px; }
.dashboard-heading h1 { margin:8px 0; }
.user-pill { border:1px solid #dbe3ef; background:#fff; border-radius:24px; padding:10px 14px; color:#64748b; font-size:12px; white-space:nowrap; }
.user-pill strong { color:#172554; }
.automation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.automation-card { display:block; color:inherit; text-decoration:none; background:#fff; border:1px solid #e1e7f0; border-radius:14px; padding:24px; min-height:220px; box-shadow:0 4px 18px rgba(0,0,0,.04); transition:transform .15s ease,box-shadow .15s ease; }
.automation-card:hover { transform:translateY(-2px); box-shadow:0 9px 24px rgba(0,0,0,.08); }
.automation-card.featured { border-color:#b8c5ff; background:linear-gradient(135deg,#fff 50%,#f2f5ff); }
.automation-icon { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:12px; background:#e0e7ff; color:#172554; font-weight:800; }
.automation-card h2 { margin:16px 0 8px; font-size:19px; }
.automation-card p { color:#64748b; line-height:1.6; font-size:14px; }
.card-link { display:inline-block; margin-top:8px; color:#3730a3; font-size:13px; font-weight:800; }
.future-card { border-style:dashed; background:#f9fafb; }
.coming-soon { display:inline-block; margin-top:8px; color:#475569; background:#e2e8f0; padding:6px 9px; border-radius:7px; font-size:12px; font-weight:700; }
.dashboard-tip { margin-top:20px; border-left:4px solid #172554; }
.dashboard-tip p { color:#64748b; line-height:1.6; margin-bottom:0; }
@media(max-width:700px) { .topbar-inner,.dashboard-heading { align-items:flex-start; flex-direction:column; } .automation-grid { grid-template-columns:1fr; } .login-card { padding:24px; } }

/* BMS adjustment automation */
.field textarea { width:100%; border:1px solid #cfd5df; border-radius:8px; padding:12px; font:14px/1.5 Arial,Helvetica,sans-serif; resize:vertical; background:#fff; }
.muted { color:#64748b; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.danger-confirm { display:flex; gap:10px; align-items:flex-start; margin:18px 0; padding:14px; border:1px solid #fecaca; border-radius:8px; background:#fff7f7; color:#991b1b; line-height:1.5; font-weight:700; }
.danger-confirm input { margin-top:4px; flex:0 0 auto; }
.action-log { padding-left:24px; line-height:1.7; color:#334155; }
.action-log li { margin:5px 0; overflow-wrap:anywhere; }

/* Client-ready ERP automation branding and settings */
.login-wrap { min-height:calc(100vh - 150px); padding:28px 0; position:relative; }
.login-wrap::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 15% 20%,rgba(79,70,229,.12),transparent 32%),radial-gradient(circle at 85% 75%,rgba(14,165,233,.10),transparent 28%),#f3f6fb; }
.login-card { width:min(460px,100%); padding:40px; border:1px solid #e6eaf2; border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.12); }
.login-mark { width:56px; height:56px; border-radius:16px; margin-bottom:22px; background:linear-gradient(135deg,#172554,#4338ca); box-shadow:0 8px 20px rgba(49,46,129,.24); font-size:16px; letter-spacing:.04em; }
.login-card h1 { font-size:30px; letter-spacing:-.03em; margin:8px 0 10px; }
.login-card .intro { margin:0; font-size:14px; }
.login-form { gap:18px; }
.login-form .field label { color:#253047; font-size:13px; }
.login-form .field input { height:48px; border-color:#d9dfeb; border-radius:9px; }
.login-form .field input:focus, .settings-card .field input:focus { outline:3px solid rgba(79,70,229,.12); border-color:#6366f1; }
.login-form .btn.primary { min-height:48px; border-radius:9px; background:linear-gradient(135deg,#172554,#3730a3); box-shadow:0 7px 16px rgba(49,46,129,.18); }
.login-note { border-top:1px solid #edf0f5; padding-top:16px; }
.settings-card { padding:26px; }
.settings-card h2 { margin-bottom:8px; }
.settings-card .field { margin-top:18px; }
.settings-card .field input { margin-top:2px; }
.settings-toggle-list { display:grid; gap:0; margin-top:18px; border:1px solid #e4e9f2; border-radius:12px; overflow:hidden; }
.settings-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 18px; border-bottom:1px solid #e8edf4; cursor:pointer; }
.settings-toggle:last-child { border-bottom:0; }
.settings-toggle:hover { background:#f8faff; }
.settings-toggle strong, .settings-toggle small { display:block; }
.settings-toggle strong { color:#1e293b; font-size:14px; }
.settings-toggle small { color:#64748b; margin-top:5px; line-height:1.45; }
.settings-toggle input { width:19px; height:19px; accent-color:#3730a3; flex:0 0 auto; }
.settings-actions { margin:4px 0 24px; }
@media(max-width:700px) { .login-card { padding:28px 22px; } .settings-card { padding:20px; } .settings-toggle { padding:14px; } }