* { box-sizing: border-box; }

body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background-color: #f6f7fb; }

/* ===================== Page Layout ===================== */

.page-wrapper { max-width: 1350px;margin: 0 auto;padding: 1rem;}
@media (min-width: 768px) { .page-wrapper { padding-top: 2rem;}}

/* ===================== Top Bar / Header ===================== */

.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: #0d47a1; color: #fff; }
.topbar .brand { font-weight: 700; }
.topbar .apps { display: flex; gap: 8px; flex: 1; }

.topbar .app-link { color: #e3f2fd; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.topbar .app-link.active,
.topbar .app-link:hover { background: rgba(255,255,255,0.18); }

.topbar .ctx .chip { padding: 4px 8px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-right: 8px; }
.topbar .ctx .chip.warn { background: #f57c00; }

.topbar .user { display: flex; align-items: center; gap: 10px; }
.topbar .logout { color: #fff; text-decoration: underline; }

/* ===================== Company Logo ===================== */

.company-logo { max-height: 64px; max-width: 100%; height: auto; width: auto; object-fit: contain; display: block; }

/* ===================== Auth / Login ===================== */

.auth-body { display: grid; place-items: center; min-height: 100vh; background: #f5f7fb; }

.auth-card { width: 360px; background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.auth-card h2 { margin-top: 0; }
.auth-card .error { color: #c62828; }

.auth-card label { display: block; margin: 10px 0; }
.auth-card input { width: 100%; padding: 10px; border: 1px solid #cfd8dc; border-radius: 8px; }

.auth-card button { width: 100%; padding: 10px; border: 0; background: #0d47a1; color: #fff; border-radius: 8px; cursor: pointer; }
.auth-card button:hover { background: #0b3c8f; }

/* ===================== Mainboard / Cards ===================== */

.main-card { border-radius: 18px; border: 1px solid #dfe3e8; padding: 22px; transition: 0.15s; cursor: pointer; background: #ffffff; }
.main-card:hover { background: #f3f4f7; }

.sect-letter { font-size: 1.2rem; font-weight: 700; color: #0d6efd; }
.sect-title { font-size: 1.15rem; font-weight: 650; }
.sect-desc { margin-top: 4px; font-size: 0.92rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 410px; }

.logout-btn { position: absolute; top: 22px; right: 22px; }

/* =========================================
   Cronus Modal Picker Pattern (Sticky UX)
   ========================================= */

/* =========================================
   Cronus Modal Picker Pattern (Sticky UX)
   ========================================= */

.customer-modal-body,
.modal-picker-wrap {
    background: #fff;
}

.modal-picker-wrap {
    display: flex;
    flex-direction: column;
}

.modal-sticky-tools {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
}

.modal-picker-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.modal-picker-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8f9fa;
    white-space: nowrap;
    border-bottom: 1px solid #dee2e6;
}
/* ===================== Responsive ===================== */

@media (max-width: 768px) { 
  .main-card { padding: 18px; }.sect-title { font-size: 1.05rem; }
  .sect-desc { font-size: 0.88rem; max-width: 260px; }
  .logout-btn { top: 14px; right: 14px; }
}