/* OD Dashboard – visual refresh
   Presentation-only: existing modules, routes, bindings and API calls remain unchanged. */

:root {
  --ion-font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ion-color-primary: #0d3b66;
  --ion-color-primary-rgb: 13, 59, 102;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #0b345a;
  --ion-color-primary-tint: #25527a;
  --ion-color-secondary: #e36b2c;
  --ion-color-secondary-rgb: 227, 107, 44;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-success: #16805a;
  --ion-color-danger: #c53d4c;
  --ion-color-light: #f5f7fa;
  --ion-background-color: #f5f7fa;
  --ion-text-color: #1e293b;
}

body { background: #f5f7fa; color: #1e293b; }
ion-header ion-toolbar[color="primary"] {
  --background: linear-gradient(112deg, #082f54 0%, #0d3b66 58%, #15527f 100%);
  --color: #fff; --border-width: 0; --min-height: 62px;
  box-shadow: 0 2px 10px rgba(8, 47, 84, .16);
}
ion-toolbar[color="light"] { --background: #fff; --color: #30475f; --border-color: #e7edf4; --min-height: 46px; }
ion-title { font-size: 18px; font-weight: 650; letter-spacing: .1px; }
ion-toolbar[color="light"] ion-title { font-size: 13px; font-weight: 650; }
ion-menu-button, ion-back-button, ion-toolbar ion-button { --color: currentColor; }

ion-content { --background: #f5f7fa; }
ion-grid { max-width: 1280px; margin: 0 auto; }
ion-content > ion-grid { padding: 20px 14px 30px; }
ion-list { margin: 0; padding: 0; background: transparent; border-radius: 14px; overflow: hidden; }
ion-list-header { --background: transparent; --color: #64748b; min-height: 38px; padding: 14px 14px 5px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
ion-item { --background: #fff; --color: #1e293b; --border-color: #e7edf4; --inner-padding-end: 16px; --padding-start: 16px; min-height: 76px; margin-bottom: 1px; transition: transform .16s ease, box-shadow .16s ease; }
ion-item[detail] { --detail-icon-color: #8ca0b5; --detail-icon-opacity: 1; }
ion-item:hover { --background: #fbfdff; }
ion-item ion-label h2 { color: #162b43; font-size: 15px; font-weight: 650; }
ion-item ion-label p { color: #718096; font-size: 13px; line-height: 1.45; }

ion-thumbnail, ion-thumbnail.dashboard-thumbnail {
  width: 42px; height: 42px; padding: 9px; margin-inline-end: 14px;
  border-radius: 12px; background: #eef4f9;
}
ion-badge { --background: #dceafa; --color: #0d3b66; min-width: 25px; padding: 6px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
ion-badge[color="danger"] { --background: #fde7ea; --color: #b42337; }

ion-card { --background: #fff; margin: 0; border: 1px solid #e4ebf2; border-radius: 16px; box-shadow: 0 10px 25px rgba(20, 50, 75, .06); }
ion-card-header { padding: 20px 20px 12px; }
ion-card-subtitle { color: #718096; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
ion-card-title { color: #162b43; font-size: 21px; font-weight: 700; }
ion-card-content { padding: 12px 20px 20px; }
.chart-container { min-height: 280px; }

/* Login gets a focused card while preserving all existing fields and validation. */
ion-content.ion-padding { --padding-top: 26px; --padding-bottom: 26px; }
ion-content.ion-padding ion-grid { max-width: 620px; padding: 0; }
.logo { display: block; max-width: 240px; max-height: 90px; margin: 12px auto 28px; object-fit: contain; }
ion-content.ion-padding ion-list { padding: 8px 18px 18px; border: 1px solid #e4ebf2; border-radius: 16px; background: #fff; box-shadow: 0 14px 35px rgba(15, 50, 78, .08); }
ion-content.ion-padding ion-item { --padding-start: 0; --inner-padding-end: 0; min-height: 64px; }
ion-content.ion-padding ion-list-header { padding-left: 0; padding-right: 0; }
ion-content.ion-padding ion-button[type="submit"] { --background: #e36b2c; --background-hover: #c75e27; --box-shadow: 0 8px 18px rgba(227, 107, 44, .25); height: 48px; margin: 20px 0 0; font-size: 14px; font-weight: 700; }

ion-button { --border-radius: 10px; font-weight: 650; letter-spacing: .01em; }
ion-fab-button { --background: #e36b2c; --box-shadow: 0 8px 18px rgba(227, 107, 44, .28); }
ion-menu ion-header ion-toolbar { --background: #0d3b66; --color: #fff; }
ion-menu ion-content { --background: #fff; }
ion-menu ion-item { --background: #fff; --color: #30475f; min-height: 54px; }
ion-menu ion-item.activated, ion-menu ion-item.selected { --background: #eaf2f8; --color: #0d3b66; font-weight: 700; }

@media (min-width: 768px) {
  ion-content > ion-grid { padding: 30px 24px 38px; }
  ion-list { border: 1px solid #e4ebf2; box-shadow: 0 8px 24px rgba(20, 50, 75, .05); }
  ion-list-header { padding-left: 20px; }
  ion-item { --padding-start: 20px; --inner-padding-end: 20px; }
}
@media (max-width: 575px) {
  ion-header ion-toolbar[color="primary"] { --min-height: 56px; }
  ion-title { font-size: 16px; }
  ion-content > ion-grid { padding: 10px 0 20px; }
  ion-list { border-radius: 0; }
  ion-list-header { padding-left: 16px; }
  ion-item { --padding-start: 16px; --inner-padding-end: 12px; min-height: 70px; }
  ion-thumbnail, ion-thumbnail.dashboard-thumbnail { width: 38px; height: 38px; padding: 8px; margin-inline-end: 11px; border-radius: 10px; }
  ion-card { border-left: 0; border-right: 0; border-radius: 0; }
}