@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url("rollin-tokens-C80HCCP.css");

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

body {
    margin: 0;
    font-family: var(--rollin-font-body);
    font-size: var(--rollin-text-base);
    color: var(--rollin-text);
    background: var(--rollin-bg);
    line-height: 1.5;
}

a {
    color: var(--rollin-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.rollin-page {
    min-height: 100vh;
}

.rollin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 var(--rollin-space-4);
    background: var(--rollin-card);
    border-bottom: 1px solid var(--rollin-border);
}

.rollin-header__brand {
    display: flex;
    align-items: center;
    gap: var(--rollin-space-2);
    font-family: var(--rollin-font-title);
    font-weight: 700;
    color: var(--rollin-navy);
}

.rollin-header__brand img {
    height: 40px;
}

.rollin-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--rollin-space-4);
}

.rollin-card-panel {
    background: var(--rollin-card);
    border-radius: var(--rollin-radius);
    box-shadow: var(--rollin-shadow-soft);
    padding: var(--rollin-space-4);
}

.rollin-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--rollin-space-2);
}

.rollin-form-field label {
    font-size: var(--rollin-text-sm);
    font-weight: 600;
    color: var(--rollin-navy);
}

.rollin-form-field input {
    border: 1px solid var(--rollin-border);
    border-radius: var(--rollin-radius);
    padding: 12px 14px;
    font: inherit;
}

.rollin-form-field input:focus {
    outline: none;
    border-color: var(--rollin-green);
    box-shadow: 0 0 0 3px rgba(83, 180, 0, 0.15);
}

.rollin-form-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.rollin-form-field--inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--rollin-green);
}

.rollin-form-field--inline label {
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.rollin-form-field input[type="file"] {
    padding: 10px 0;
    border: none;
    background: transparent;
}

.rollin-form-field .form-help,
.rollin-form-field .help-text {
    font-size: var(--rollin-text-sm);
    color: var(--rollin-muted);
    margin: 0;
}

.rollin-alert-error {
    background: var(--rollin-error-bg);
    color: var(--rollin-error);
    border-radius: var(--rollin-radius);
    padding: var(--rollin-space-2);
    margin-bottom: var(--rollin-space-2);
    font-size: var(--rollin-text-sm);
}

/* Login split layout */
.rollin-login {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr 1fr;
}

.rollin-login__hero {
    background: linear-gradient(160deg, var(--rollin-navy-deep), var(--rollin-navy));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rollin-space-8);
}

.rollin-login__hero h1 {
    font-family: var(--rollin-font-title);
    font-size: var(--rollin-text-2xl);
    margin: 0 0 var(--rollin-space-2);
}

.rollin-login__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rollin-space-4);
    background: var(--rollin-card);
}

.rollin-login__form {
    width: 100%;
    max-width: 400px;
}

@media (max-width: 768px) {
    .rollin-login {
        grid-template-columns: 1fr;
    }

    .rollin-login__hero {
        padding: var(--rollin-space-4);
        min-height: 200px;
    }
}

/* Admin */
.rollin-nav { display: flex; gap: 6px; margin-left: 24px; }
.rollin-nav__link { font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 8px; color: var(--rollin-muted); text-decoration: none; }
.rollin-nav__link.is-active, .rollin-nav__link:hover { color: var(--rollin-navy); background: #F4F6F8; }
.rollin-title { font-family: var(--rollin-font-title); font-size: var(--rollin-text-xl); color: var(--rollin-navy); margin: 0 0 16px; }
.rollin-subtitle { font-family: var(--rollin-font-title); font-size: 22px; color: var(--rollin-navy); margin: 0 0 20px; }
.rollin-muted { color: var(--rollin-muted); font-size: var(--rollin-text-sm); }
.rollin-page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.rollin-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
.rollin-kpi-grid--6 { grid-template-columns: repeat(3, 1fr); }
.rollin-kpi-label { font-size: 13px; color: var(--rollin-muted); font-weight: 600; }
.rollin-kpi-value { display: block; font-family: var(--rollin-font-title); font-size: 34px; color: var(--rollin-navy); margin-top: 8px; }
.rollin-table-wrap { overflow-x: auto; }
.rollin-table { width: 100%; border-collapse: collapse; }
.rollin-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--rollin-muted); padding: 12px 16px; background: #FAFBFC; }
.rollin-table td { padding: 14px 16px; border-top: 1px solid var(--rollin-border); font-size: 14px; }
.rollin-table tr.is-overdue { background: var(--rollin-warning-bg); }
.rollin-badge { display: inline-flex; padding: 5px 11px; border-radius: var(--rollin-radius-pill); font-size: 12.5px; font-weight: 600; }
.rollin-badge--success { color: var(--rollin-success); background: var(--rollin-success-bg); }
.rollin-badge--error { color: var(--rollin-error); background: var(--rollin-error-bg); }
.rollin-badge--warning { color: var(--rollin-warning); background: var(--rollin-warning-bg); }
.rollin-badge--muted { color: var(--rollin-noresp); background: var(--rollin-neutral-bg); }
.rollin-back { display: inline-block; margin-bottom: 16px; color: var(--rollin-muted); font-size: 14px; text-decoration: none; }
.rollin-flash { padding: 12px 16px; border-radius: var(--rollin-radius); margin-bottom: 16px; font-size: 14px; }
.rollin-flash--success { background: var(--rollin-success-bg); color: var(--rollin-success); }
.rollin-flash--error { background: var(--rollin-error-bg); color: var(--rollin-error); }
.rollin-flash--warning { background: var(--rollin-warning-bg); color: var(--rollin-warning); }
.rollin-stepper { display: flex; align-items: center; margin-bottom: 32px; }
.rollin-stepper__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 90px; }
.rollin-stepper__circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--rollin-font-title); border: 2px solid var(--rollin-border); color: var(--rollin-muted); background: #fff; }
.rollin-stepper__circle.is-active { border-color: var(--rollin-green); color: #fff; background: var(--rollin-green); }
.rollin-stepper__circle.is-done { border-color: var(--rollin-blue); color: #fff; background: var(--rollin-blue); }
.rollin-stepper__line { flex: 1; height: 2px; background: var(--rollin-border); margin: 0 6px 22px; }
.rollin-stepper__line.is-done { background: var(--rollin-blue); }
.rollin-stepper__label { font-size: 12.5px; font-weight: 600; color: var(--rollin-muted); }
.rollin-stepper__label.is-active { color: var(--rollin-navy); }
.rollin-wizard-panel { max-width: 860px; }
.rollin-form-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.rollin-form-grid--2 { grid-template-columns: 1fr 1fr; }
.rollin-form-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.rollin-locked-block { background: #F8FAFB; border: 1px solid var(--rollin-border); border-radius: var(--rollin-radius); padding: 16px; margin-bottom: 24px; }
.rollin-dropzone { border: 2px dashed var(--rollin-border); border-radius: var(--rollin-radius); padding: 24px; margin-bottom: 16px; }
.rollin-import-report { margin-top: 20px; padding: 12px 16px; border-radius: var(--rollin-radius); }
.rollin-import-report.is-success { background: var(--rollin-success-bg); color: var(--rollin-success); }
.rollin-import-report.is-error { background: var(--rollin-error-bg); color: var(--rollin-error); }
.rollin-option-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.rollin-option-code { font-size: 12px; font-weight: 700; color: var(--rollin-muted); }
.rollin-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.rollin-tabs__item { padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--rollin-muted); text-decoration: none; }
.rollin-tabs__item.is-active { background: #fff; color: var(--rollin-navy); box-shadow: var(--rollin-shadow-soft); }
.rollin-actions-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rollin-progress-panel { margin-top: 20px; padding: 16px; background: #F8FAFB; border: 1px solid var(--rollin-border); border-radius: var(--rollin-radius); }
.rollin-progress-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.rollin-progress-track { height: 10px; background: #E8ECF0; border-radius: var(--rollin-radius-pill); overflow: hidden; }
.rollin-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--rollin-green), var(--rollin-blue)); border-radius: var(--rollin-radius-pill); transition: width 0.35s ease; }
.rollin-filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.rollin-input, select.rollin-input, textarea.rollin-input { border: 1px solid var(--rollin-border); border-radius: var(--rollin-radius); padding: 10px 12px; font: inherit; min-width: 160px; }
.rollin-radio-cards { display: flex; flex-direction: column; gap: 10px; }
.rollin-radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--rollin-border); border-radius: var(--rollin-radius); cursor: pointer; }
.rollin-radio-card:has(input:checked) { border-color: var(--rollin-green); background: var(--rollin-success-bg); }

/* Public */
.rollin-page--public { background: var(--rollin-bg); }
.rollin-public-header { background: var(--rollin-navy); padding: 16px 24px; }
.rollin-public-header img { height: 32px; filter: brightness(0) invert(1); }
.rollin-public-main { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
.rollin-info-box { background: var(--rollin-blue-bg); padding: 12px 16px; border-radius: var(--rollin-radius); margin: 16px 0; font-size: 14px; }
.rollin-public-footer { margin-top: 32px; font-size: 13px; color: var(--rollin-muted); }
.rollin-confirm { text-align: center; padding: 48px 24px; background: var(--rollin-card); border-radius: var(--rollin-radius); box-shadow: var(--rollin-shadow-soft); }
.rollin-confirm__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; font-weight: 700; }
.rollin-confirm--success .rollin-confirm__icon { background: var(--rollin-success-bg); color: var(--rollin-success); }
.rollin-confirm--error .rollin-confirm__icon { background: var(--rollin-error-bg); color: var(--rollin-error); }

@media (max-width: 900px) {
    .rollin-kpi-grid, .rollin-kpi-grid--6 { grid-template-columns: 1fr 1fr; }
    .rollin-form-grid--2 { grid-template-columns: 1fr; }
}