:root{
  --mk-primary: #ed1b24;          /* logo red */
  --mk-primary-600: #c5151c;
  --mk-primary-050: rgba(237,27,36,.10);
  --mk-bg: #f6f8fb;
  --mk-surface: #ffffff;
  --mk-text: #101828;
  --mk-muted: #667085;
  --mk-border: #e5e7eb;
  --mk-radius: 14px;
  --mk-shadow: 0 10px 30px rgba(16,24,40,.08);
}

html{ scroll-behavior: smooth; }
body{ background: var(--mk-bg); color: var(--mk-text); }

/* Links */
a{ color: var(--mk-primary); }
a:hover{ color: var(--mk-primary-600); }

/* Navbar */
.mk-navbar{ background: var(--mk-surface); border-bottom: 1px solid var(--mk-border); }
.mk-logo{
  /* logo.svg is very wide (includes the company name).
     Constrain by both height & width so it never gets clipped on small screens. */
  display: block;
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 240px;
}
.uk-navbar-left,
.uk-navbar-right{ min-width: 0; }
.uk-navbar-item.uk-logo{ min-width: 0; }
.mk-appname{ font-weight: 800; letter-spacing: .02em; color: var(--mk-text); }

@media (max-width: 640px){
  .mk-logo{ max-height: 32px; max-width: 58vw; }
  .mk-logo.uk-margin-small-right{ margin-right: 8px !important; }
  /* Give the logo a bit more room next to the small button + toggle */
  .uk-navbar-right .uk-button.uk-button-small{ padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 360px){
  .mk-logo{ max-width: 52vw; }
}

/* Layout helpers */
.mk-section{ padding-top: 22px; padding-bottom: 22px; }
.mk-page-title{ font-weight: 900; letter-spacing: .02em; }
.mk-muted{ color: var(--mk-muted); }
.mk-footer{ color: #98a2b3; font-size: .9rem; }

/* KPI numbers */
.mk-kpi{ font-weight: 900; font-size: 1.35rem; letter-spacing: .01em; }

/* Small chip (name badge etc.) */
.mk-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-surface);
  font-size: .85rem;
}

/* Cards */
.uk-card.mk-card{
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
}
.uk-card.mk-card .uk-card-header{
  border-bottom: 1px solid var(--mk-border);
}

/* Buttons */
.uk-button-primary{
  background-color: var(--mk-primary);
  border-color: var(--mk-primary);
}
.uk-button-primary:hover,
.uk-button-primary:focus{
  background-color: var(--mk-primary-600);
  border-color: var(--mk-primary-600);
}

.uk-button-default{ border-color: var(--mk-border); }

/* Labels / pills */
.mk-pill{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mk-primary-050);
  color: var(--mk-primary);
  font-weight: 800;
  font-size: .75rem;
  line-height: 1.6;
}

/* Tables */
.uk-table th{ white-space: nowrap; }

/* Crew master: compact accordion on phones */
@media (max-width: 640px){
  .mk-crew-accordion .uk-accordion-title{ font-size: 1rem; padding-top: 12px; padding-bottom: 12px; }
  .mk-crew-accordion .uk-accordion-title::before{ margin-top: 10px; }
  .mk-crew-accordion .uk-accordion-content{ margin-top: 10px; }
  .mk-crew-accordion .uk-description-list dt{ width: 84px; }
}

/* Mobile list pages (spare_parts.php / maintenance.php) */
.mk-item-title{ font-weight: 900; letter-spacing: .01em; }
.mk-iconbtn{ padding-left: 10px; padding-right: 10px; }

@media (max-width: 960px){
  .mk-mobile-toolbar .uk-card-body{ padding: 12px; }
  .mk-mobile-toolbar .uk-input.uk-form-small,
  .mk-mobile-toolbar .uk-select.uk-form-small{ border-radius: 10px; }
  .mk-mobile-list .mk-kpi{ font-size: 1.25rem; }
}

@media (max-width: 640px){
  .mk-item-kpi{ font-size: 1.25rem; }
}

/* Vessel monitor (large screen friendly) */
.mk-vessel-name{ font-weight: 900; letter-spacing: .02em; }
.mk-metric{ font-weight: 800; }
.mk-map{ min-height: 340px; border-radius: var(--mk-radius); }

/* TV mode: optimize for large monitor */
body.mk-tv{ background: var(--mk-bg); }
body.mk-tv .mk-section{ padding-top: 14px; padding-bottom: 14px; }
body.mk-tv .mk-tv-header .mk-page-title{ font-size: 1.8rem; }
body.mk-tv .uk-card-body{ padding: 18px; }
body.mk-tv .uk-card-header{ padding: 14px 18px; }
body.mk-tv .mk-map{ min-height: 52vh; }
body.mk-tv .uk-text-small{ font-size: 0.98rem; }
body.mk-tv .mk-chip{ font-size: 0.95rem; }

/* Mini timeline bar (used by crew_assignment.php) */
.mk-bar-wrap{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
  border: 1px solid var(--mk-border);
  overflow: hidden;
}
.mk-bar{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--l, 0%);
  width: var(--w, 0%);
  background: var(--mk-primary);
  border-radius: 999px;
  opacity: .85;
}

/* Forms */
.uk-input, .uk-select, .uk-textarea{
  border-radius: 10px;
  border-color: var(--mk-border);
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus{
  border-color: rgba(237,27,36,.55);
  box-shadow: 0 0 0 3px rgba(237,27,36,.15);
}

/* Alerts */
.uk-alert-primary{ background: rgba(237,27,36,.10); color: var(--mk-text); border: 1px solid rgba(237,27,36,.18); }
.uk-alert-primary a{ color: var(--mk-primary); }

/* Print area tweaks (used by boarding_history.php) */
@media print{
  .mk-no-print{ display:none !important; }
}

/* Vessel monitor: TV mode hides control selects for source switching (optional) */
.mk-tv #mk-source { display: none; }