* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f7fa;
    color: #1f2937;
}

.layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */

.sidebar {
    width: 240px;
    background: #172033;
    color: white;
    padding: 24px 16px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    transition: width .2s ease, padding .2s ease;
}

.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:0 4px 30px 12px; }
.logo {
    font-size: 21px;
    font-weight: bold;
}

.sidebar-toggle { position:absolute; top:50%; right:10px; transform:translateY(-50%); width:30px; height:30px; border:0; border-radius:6px; background:#26344d; color:#fff; font-size:24px; line-height:1; cursor:pointer; z-index:1; }
.sidebar-toggle:hover { background:#33466a; }

.nav-item {
    display: block;
    padding: 12px;
    margin-bottom: 6px;
    color: #d8dee9;
    text-decoration: none;
    border-radius: 8px;
}

.nav-item:hover {
    background: #26344d;
    color: white;
}

.nav-item.active {
    background: #33466a;
    color: white;
}

.nav-group { position: relative; }
.nav-heading { cursor: default; }
.nav-submenu { display: block; padding: 2px 0 4px 28px; }
.nav-item.sub { font-size: 13px; padding: 8px 12px; margin-bottom: 2px; color: #b7c0cf; }
.nav-item.sub.active { background: #33466a; color: #fff; }

/* Main */

.main {
    flex: 1;
    padding: 32px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    margin: 0;
    font-size: 28px;
}

.user-info {
    color: #6b7280;
}

/* Cards */

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.tool-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.tool-card h3 {
    margin-top: 0;
}

.tool-card p {
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
}

.tool-button {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 9px 15px;
    background: #2563eb;
    color: white;
    border-radius: 7px;
    text-decoration: none;
}

.tool-button:hover {
    background: #1d4ed8;
}

.coming-soon {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 12px;
    background: #eef0f3;
    color: #6b7280;
    border-radius: 7px;
}

.sidebar.collapsed { width:64px; padding:24px 10px; }
.sidebar.collapsed .sidebar-header { justify-content:center; padding:0 0 20px; }
.sidebar.collapsed .logo, .sidebar.collapsed .nav-item { display:none; }

/* Add or Replace Card workflow */
.tool-page { max-width: 1540px; }
.notice { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; color: #1e3a5f; line-height: 1.45; }
.workflow-section { margin: 0 0 20px; padding: 22px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.compact-section { padding-bottom: 20px; }
.plain-list { margin: 0; padding-left: 20px; line-height: 1.6; color: #374151; }
.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 19px; }.section-heading p { margin: 4px 0 0; color: #6b7280; }
.step-number { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #fff; font-weight: bold; }
.input-methods { display: flex; gap: 12px; margin-bottom: 16px; }.choice-card { display:flex; align-items:flex-start; gap:8px; min-width:230px; padding:12px; border:1px solid #dbe2ea; border-radius:8px; cursor:pointer; }.choice-card small { display:block; margin-top:3px; color:#6b7280; }
.form-grid { display:grid; gap:14px; margin-bottom:16px; }.form-grid label { display:grid; align-content:start; gap:6px; font-size:14px; font-weight:600; color:#374151; }.three-column { grid-template-columns:repeat(3, minmax(0, 1fr)); }.four-column { grid-template-columns:repeat(4, minmax(0, 1fr)); }.two-column { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.form-grid input, .form-grid select { width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-weight:normal; background:#fff; }
.form-grid .field-note { display:flex; align-items:center; gap:6px; margin-top:2px; color:#64748b; font-size:12px; font-weight:normal; }.form-grid .field-note input { width:auto; padding:0; }
.form-grid .field-note a { color:#2563eb; text-decoration:underline; }
.form-grid .checkbox-line { display:flex; align-items:center; gap:8px; }
.form-grid .checkbox-line input { width:auto; padding:0; }
.form-grid input:disabled, .form-grid select:disabled { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.form-grid .extension-status { display:block; font-size:9px !important; font-weight:normal !important; color:#6b7280 !important; line-height:1.45; }.form-grid .extension-status a { color:#2563eb !important; text-decoration:underline; }
.form-grid [hidden] { display:none !important; }
.action-row, .table-actions { display:flex; align-items:center; gap:9px; }.table-actions { justify-content:flex-end; margin-bottom:10px; }.muted { color:#6b7280; font-size:14px; }
.primary-button, .secondary-button, .danger-button { border:0; border-radius:7px; padding:9px 14px; font:inherit; font-weight:600; cursor:pointer; }.primary-button { background:#2563eb; color:#fff; }.primary-button:hover { background:#1d4ed8; }.secondary-button { background:#e9eef6; color:#1e3a5f; }.danger-button { background:#fee2e2; color:#991b1b; }.primary-button:disabled, .secondary-button:disabled { cursor:not-allowed; opacity:.55; }
.row-toggle { border:0; background:transparent; color:#2563eb; cursor:pointer; font-size:12px; padding:2px 6px; }
.row-toggle:disabled { visibility:hidden; }
.file-detail td { background:#f8fafc; }
.vehicle-editor label { display:grid; gap:6px; font-weight:600; margin-bottom:12px; max-width:440px; color:#374151; }
.vehicle-editor input[type="text"], .vehicle-editor input[type="number"] { padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-weight:normal; }
.vehicle-editor table { width:100%; border-collapse:collapse; font-size:13px; margin-top:12px; }
.vehicle-editor th, .vehicle-editor td { padding:7px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:middle; }
.vehicle-editor th { background:#f1f5f9; }
.vehicle-editor input[type="checkbox"] { width:16px; height:16px; }
.vehicle-editor input[type="number"] { width:110px; }
.vehicle-editor input[type="text"] { width:170px; }
.vehicle-editor select { padding:6px; border:1px solid #cbd5e1; border-radius:5px; }
.table-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:8px; }.table-wrap table { width:100%; min-width:1120px; border-collapse:collapse; font-size:14px; }.table-wrap th { background:#f8fafc; font-weight:600; text-align:left; }.table-wrap th, .table-wrap td { padding:10px; border-bottom:1px solid #e5e7eb; vertical-align:middle; }.table-wrap tbody tr:last-child td { border-bottom:0; }.table-wrap td[contenteditable="true"]:focus { outline:2px solid #93c5fd; outline-offset:-2px; background:#eff6ff; }.table-wrap select { min-width:88px; padding:5px; border:1px solid #cbd5e1; border-radius:5px; }.table-wrap tr.review-needed td, .table-wrap tr:has(td:last-child option[value="Yes"]:checked) td { background:#fff1f5; }.table-wrap tr.review-needed td:last-child select, .table-wrap td:last-child:has(option[value="Yes"]:checked) select { border-color:#f472b6; background:#fce7f3; color:#9d174d; font-weight:600; }.empty-row td { padding:24px; text-align:center; color:#6b7280; }
.log-box { margin:0 0 12px; padding:12px 14px; max-height:280px; overflow:auto; background:#0f172a; color:#dbeafe; border:1px solid #1e293b; border-radius:8px; font-family:Consolas, Menlo, monospace; font-size:12px; line-height:1.5; white-space:pre-wrap; }
.log-box.status-panel { min-height:170px; }
.run-status { margin:0 0 10px; padding:10px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
.run-status-head { display:flex; align-items:center; gap:8px; font-weight:600; color:#0f172a; font-size:14px; }
.activity-dot { width:10px; height:10px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }
.activity-dot.active { background:#10b981; animation:pulse 1.2s infinite; }
.activity-dot.error { background:#ef4444; animation:none; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.progress-track { height:8px; background:#e2e8f0; border-radius:99px; margin:8px 0 6px; overflow:hidden; }
.progress-fill { height:100%; width:0; background:#2563eb; border-radius:99px; transition:width .4s ease; }
.run-status-meta { font-size:12px; color:#64748b; }
.danger-button { color:#b91c1c; border-color:#fca5a5; }
.danger-button:hover { background:#fef2f2; }
@media (max-width: 900px) { .sidebar { width:190px; }.main { padding:20px; }.three-column, .four-column { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px) { .layout { display:block; }.sidebar { width:100%; }.input-methods, .action-row { flex-wrap:wrap; }.two-column, .three-column, .four-column { grid-template-columns:1fr; } }

/* Login page */
.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(37, 99, 235, 0.28), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(14, 116, 144, 0.22), transparent 60%),
        linear-gradient(135deg, #0b1220 0%, #14203d 55%, #172554 100%);
    font-family: Arial, sans-serif;
}

.login-shell {
    width: 100%;
    max-width: 420px;
    padding: 24px;
}

.login-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 36px 28px;
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.login-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 23px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.login-app-name {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.login-app-tag {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.login-title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.login-subtitle {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 14px;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
    font-size: 14px;
}

.login-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.login-field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-weight: 400;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-field input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.login-password-wrap {
    position: relative;
    display: block;
}

.login-password-wrap input {
    padding-right: 66px;
}

.login-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

.login-password-toggle:hover {
    background: #eff6ff;
}

.login-submit {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.login-submit:hover {
    background: #1d4ed8;
}

.login-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-footer {
    margin: 26px 0 0;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}