/*
|--------------------------------------------------------------------------
| Captain’s Toolkit Themes
|--------------------------------------------------------------------------
| Theme system prepared for:
| - white-label buyers
| - dark mode
| - marine custom skins
| - future fleet branding
|--------------------------------------------------------------------------
*/

/* =========================================================
   DEFAULT / LIGHT THEME
========================================================= */

:root,
.theme-default,
[data-theme="default"],
[data-theme="light"] {
  color-scheme: light;

  --theme-bg:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 32rem),
    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.06), transparent 28rem),
    var(--color-bg);

  --theme-surface: #ffffff;
  --theme-surface-soft: #f8fbff;
  --theme-surface-muted: #f1f5f9;
  --theme-surface-raised: #ffffff;

  --theme-text: var(--color-text);
  --theme-muted: var(--color-muted);
  --theme-muted-light: var(--color-muted-light);

  --theme-sidebar: var(--color-navy);
  --theme-sidebar-soft: #14233a;

  --theme-primary: var(--color-blue);
  --theme-primary-soft: rgba(37, 99, 235, 0.1);

  --theme-success: var(--color-green);
  --theme-success-soft: rgba(22, 163, 74, 0.1);

  --theme-danger: var(--color-red);
  --theme-danger-soft: rgba(220, 38, 38, 0.1);

  --theme-warning: var(--color-warning);
  --theme-warning-soft: rgba(245, 158, 11, 0.12);

  --theme-border: var(--color-border);
  --theme-border-strong: rgba(148, 163, 184, 0.48);

  --theme-header-bg: rgba(244, 247, 251, 0.9);
  --theme-bottom-nav-bg: rgba(255, 255, 255, 0.94);

  --theme-input-bg: #ffffff;
  --theme-input-border: var(--color-border);
  --theme-input-placeholder: var(--color-muted-light);

  --theme-card-shadow: var(--shadow-soft);
  --theme-card-shadow-strong: var(--shadow-card);
}

/* =========================================================
   DARK MARINE THEME
========================================================= */

.theme-dark,
[data-theme="dark"],
[data-theme="marine-dark"] {
  color-scheme: dark;

  --color-bg: #07111f;
  --color-text: #f5f9ff;
  --color-muted: rgba(226, 232, 240, 0.68);
  --color-muted-light: rgba(226, 232, 240, 0.42);
  --color-border: rgba(148, 163, 184, 0.14);

  --theme-bg:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.14), transparent 30rem),
   /* linear-gradient(180deg, #07111f 0%, #091827 100%);*/
    linear-gradient(180deg, #173156 0%, #204060 100%);

  --theme-surface: #0f1b2e;
  --theme-surface-soft: #13233a;
  --theme-surface-muted: #0b1728;
  --theme-surface-raised: #14243b;

  --theme-text: #f5f9ff;
  --theme-muted: rgba(226, 232, 240, 0.68);
  --theme-muted-light: rgba(226, 232, 240, 0.42);

  --theme-sidebar: #050d18;
  --theme-sidebar-soft: #0b1728;

  --theme-primary: #38bdf8;
  --theme-primary-soft: rgba(56, 189, 248, 0.13);

  --theme-success: #34d399;
  --theme-success-soft: rgba(52, 211, 153, 0.13);

  --theme-danger: #fb7185;
  --theme-danger-soft: rgba(251, 113, 133, 0.13);

  --theme-warning: #fbbf24;
  --theme-warning-soft: rgba(251, 191, 36, 0.13);

  --theme-border: rgba(148, 163, 184, 0.14);
  --theme-border-strong: rgba(226, 232, 240, 0.22);

  --theme-header-bg: rgba(7, 17, 31, 0.88);
  --theme-bottom-nav-bg: rgba(7, 17, 31, 0.94);

  --theme-input-bg: #0b1728;
  --theme-input-border: rgba(148, 163, 184, 0.16);
  --theme-input-placeholder: rgba(226, 232, 240, 0.34);

  --theme-card-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28);

  --theme-card-shadow-strong:
    0 26px 60px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   OCEAN BLUE THEME
========================================================= */

.theme-ocean,
[data-theme="ocean"] {
  --theme-primary: #0284c7;
  --theme-primary-soft: rgba(2, 132, 199, 0.11);
  --theme-success: #0f766e;

  --theme-bg:
    radial-gradient(circle at top left, rgba(2, 132, 199, 0.12), transparent 30rem),
    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.08), transparent 26rem),
    #f2f8fc;

  --theme-surface-soft:
    linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
}

/* =========================================================
   LIGHT SAND THEME
========================================================= */

.theme-sand,
[data-theme="sand"] {
  --theme-primary: #b45309;
  --theme-primary-soft: rgba(180, 83, 9, 0.11);

  --theme-bg:
    radial-gradient(circle at top left, rgba(217, 119, 6, 0.08), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.07), transparent 26rem),
    #faf7f2;

  --theme-surface-soft:
    linear-gradient(180deg, #ffffff 0%, #fffaf3 100%);
}

/* =========================================================
   GLOBAL THEME APPLICATION
========================================================= */

body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.app-shell {
  background: var(--theme-bg);
}

.app-sidebar {
  background: var(--theme-sidebar);
}

.app-header {
  background: var(--theme-header-bg);
  border-bottom-color: var(--theme-border);
}

.bottom-nav {
  background: var(--theme-bottom-nav-bg);
  border-top-color: var(--theme-border);
}

.card,
.layout-panel,
.list-card,
.empty-layout {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
}

.card-premium,
.layout-panel-muted {
  background: var(--theme-surface-soft);
}

.card-dark {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.2), transparent 18rem),
    var(--theme-sidebar);
}

.button-primary {
  background: var(--theme-primary);
}

.button-primary:hover {
  filter: brightness(0.96);
}

.button-secondary,
.icon-button {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.button-danger {
  background: var(--theme-danger);
}

.status-success,
.text-success {
  color: var(--theme-success);
}

.status-warning,
.text-warning {
  color: var(--theme-warning);
}

.status-danger,
.text-danger {
  color: var(--theme-danger);
}

.status-info,
.text-info {
  color: #8ccff3;
}

.progress {
  background: var(--theme-surface-muted);
}

.progress-bar {
  background: var(--theme-primary);
}

.progress-bar.success {
  background: var(--theme-success);
}

.progress-bar.warning {
  background: var(--theme-warning);
}

.progress-bar.danger {
  background: var(--theme-danger);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  background:
    linear-gradient(135deg, var(--theme-primary), #0ea5e9);
}

.bottom-nav-link.active,
.bottom-nav-link[aria-current="page"] {
  color: var(--theme-primary);
}

.brand-mark {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 28px),
    linear-gradient(135deg, var(--theme-primary), #0ea5e9);
}

.offline-dot {
  background: var(--theme-success);
}

.offline-dot.is-offline {
  background: var(--theme-warning);
}

/* =========================================================
   TYPOGRAPHY THEME FIXES
========================================================= */

.card-title,
.screen-title,
.section-title,
.metric-value,
.data-value,
.form-label,
.header-title strong,
.quick-nav-title {
  color: var(--theme-text);
}

.emergency-card-title {
    color: #fff5bf;
    font-weight: 600;
    margin-bottom: 6px;
}

.emergency-card-subtitle {
    color: #c7c8ca;
}


p,
.text-muted,
.card-subtitle,
.data-label,
.header-title span,
.screen-description,
.section-description,
.quick-nav-text,
.form-hint,
.help-text {
  color: var(--theme-muted);
}

/* =========================================================
   FORMS THEME FIXES
========================================================= */

.input,
.select,
.textarea,
.form-control {
  background: var(--theme-input-bg);
  border-color: var(--theme-input-border);
  color: var(--theme-text);
}

.input::placeholder,
.textarea::placeholder,
.form-control::placeholder {
  color: var(--theme-input-placeholder);
}

.input:hover,
.select:hover,
.textarea:hover,
.form-control:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 36%, var(--theme-input-border));
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.form-control:disabled,
.input[readonly],
.textarea[readonly],
.form-control[readonly] {
  background: var(--theme-surface-muted);
  color: var(--theme-muted);
}

/* =========================================================
   BANNERS / ALERTS
========================================================= */

.app-banner {
  background:
    linear-gradient(
      135deg,
      var(--theme-surface) 0%,
      var(--theme-surface-soft) 100%
    );
  border-color: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-border));
}

.alert-info {
  background: var(--theme-primary-soft);
  border-color: color-mix(in srgb, var(--theme-primary) 24%, var(--theme-border));
}

.alert-success {
  background: var(--theme-success-soft);
  border-color: color-mix(in srgb, var(--theme-success) 24%, var(--theme-border));
}

.alert-warning {
  background: var(--theme-warning-soft);
  border-color: color-mix(in srgb, var(--theme-warning) 28%, var(--theme-border));
}

.alert-danger {
  background: var(--theme-danger-soft);
  border-color: color-mix(in srgb, var(--theme-danger) 28%, var(--theme-border));
}

/* =========================================================
   TABLES / DATA ROWS
========================================================= */

.table,
.data-table {
  color: var(--theme-text);
}

.table th,
.data-table th {
  color: var(--theme-muted);
  border-color: var(--theme-border);
}

.table td,
.data-table td,
.data-row {
  border-color: var(--theme-border);
}

.data-row:hover,
.table tr:hover td,
.data-table tr:hover td {
  background: var(--theme-surface-soft);
}

/* =========================================================
   EMERGENCY / DANGER UI
========================================================= */

.emergency-card,
.mayday-card,
.danger-panel {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-danger) 14%, var(--theme-surface)) 0%,
      var(--theme-surface) 100%
    );
  border-color: color-mix(in srgb, var(--theme-danger) 32%, var(--theme-border));
}

.emergency-accent,
.danger-accent {
  color: var(--theme-danger);
}

.nav-link-emergency.active,
.nav-link-emergency[aria-current="page"] {
  background: linear-gradient(135deg, #dc2626, var(--theme-danger));
}

/* =========================================================
   DARK MARINE SPECIFIC FIXES
========================================================= */

.theme-dark .card,
.theme-dark .layout-panel,
.theme-dark .list-card,
.theme-dark .empty-layout,
[data-theme="dark"] .card,
[data-theme="dark"] .layout-panel,
[data-theme="dark"] .list-card,
[data-theme="dark"] .empty-layout,
[data-theme="marine-dark"] .card,
[data-theme="marine-dark"] .layout-panel,
[data-theme="marine-dark"] .list-card,
[data-theme="marine-dark"] .empty-layout {
  box-shadow: var(--theme-card-shadow);
}

.theme-dark .button-secondary:hover,
.theme-dark .icon-button:hover,
[data-theme="dark"] .button-secondary:hover,
[data-theme="dark"] .icon-button:hover,
[data-theme="marine-dark"] .button-secondary:hover,
[data-theme="marine-dark"] .icon-button:hover {
  background: var(--theme-surface-raised);
}

.theme-dark .select,
[data-theme="dark"] .select,
[data-theme="marine-dark"] .select {
  background-color: var(--theme-input-bg);
}

.theme-dark .input-action:hover,
[data-theme="dark"] .input-action:hover,
[data-theme="marine-dark"] .input-action:hover {
  background: rgba(226, 232, 240, 0.08);
  color: var(--theme-text);
}

.theme-dark .bottom-nav,
[data-theme="dark"] .bottom-nav,
[data-theme="marine-dark"] .bottom-nav {
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.34);
}

.theme-dark .quick-nav-link,
[data-theme="dark"] .quick-nav-link,
[data-theme="marine-dark"] .quick-nav-link {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

.theme-dark .quick-nav-icon,
[data-theme="dark"] .quick-nav-icon,
[data-theme="marine-dark"] .quick-nav-icon {
  background: var(--theme-primary-soft);
  color: var(--theme-primary);
}

.theme-dark .app-shell.sidebar-open::after,
[data-theme="dark"] .app-shell.sidebar-open::after,
[data-theme="marine-dark"] .app-shell.sidebar-open::after {
  background: rgba(0, 0, 0, 0.62);
}

/* Marine Dark: global form field color system */
[data-theme="marine-dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="marine-dark"] textarea,
[data-theme="marine-dark"] select,
[data-theme="marine-dark"] .form-control,
[data-theme="marine-dark"] .input,
[data-theme="marine-dark"] .select,
[data-theme="marine-dark"] .textarea {
  background: #51637e;
  color: #f5f9ff;
  border-color: rgba(148, 163, 184, 0.24);
}

[data-theme="marine-dark"] input:not([type="checkbox"]):not([type="radio"])::placeholder,
[data-theme="marine-dark"] textarea::placeholder,
[data-theme="marine-dark"] .form-control::placeholder,
[data-theme="marine-dark"] .input::placeholder,
[data-theme="marine-dark"] .textarea::placeholder {
  color: rgba(226, 232, 240, 0.42);
}

[data-theme="marine-dark"] input:not([type="checkbox"]):not([type="radio"]):hover,
[data-theme="marine-dark"] textarea:hover,
[data-theme="marine-dark"] select:hover,
[data-theme="marine-dark"] .form-control:hover,
[data-theme="marine-dark"] .input:hover,
[data-theme="marine-dark"] .select:hover,
[data-theme="marine-dark"] .textarea:hover {
  border-color: rgba(56, 189, 248, 0.36);
}

[data-theme="marine-dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="marine-dark"] textarea:focus,
[data-theme="marine-dark"] select:focus,
[data-theme="marine-dark"] .form-control:focus,
[data-theme="marine-dark"] .input:focus,
[data-theme="marine-dark"] .select:focus,
[data-theme="marine-dark"] .textarea:focus {
  background: #172b45;
  color: #f5f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
  outline: none;
}

[data-theme="marine-dark"] select option,
[data-theme="marine-dark"] .select option,
[data-theme="marine-dark"] .form-control option {
  background: #13233a;
  color: #f5f9ff;
}

/* Marine Dark: readable data rows on dark cards */
[data-theme="marine-dark"] .data-row {
  color: var(--theme-text);
  border-color: rgba(148, 163, 184, 0.16);
}

[data-theme="marine-dark"] .data-row .data-label {
  color: rgba(226, 232, 240, 0.58);
}

[data-theme="marine-dark"] .data-row .data-value {
  color: #f5f9ff;
}

/* Keep light-style metric/status/summary cards readable if they use light backgrounds */
[data-theme="marine-dark"] .metric-card,
[data-theme="marine-dark"] .status-card,
[data-theme="marine-dark"] .summary-card {
  color: #0f172a;
}

[data-theme="marine-dark"] .metric-label,
[data-theme="marine-dark"] .status-label,
[data-theme="marine-dark"] .summary-label {
  color: #475569;
}

[data-theme="marine-dark"] .metric-value,
[data-theme="marine-dark"] .status-value,
[data-theme="marine-dark"] .summary-value {
  color: #0f172a;
}

/* Checklist delete buttons: Marine Dark contrast fix */
[data-theme="marine-dark"] .screen-checklists .checklist-item-row .btn[data-checklist-delete-item] {
  background: rgb(97 144 195 / 22%);
  border-color: rgb(136 151 192 / 38%);
  color: #000000;
  box-shadow: none;
}

[data-theme="marine-dark"] .screen-checklists .checklist-item-row .btn[data-checklist-delete-item]:hover {
  background: rgb(133 133 133 / 16%);
  border-color: rgb(123 123 123 / 38%);
  color: #616161;
}

[data-theme="marine-dark"] .screen-checklists .checklist-item-row .btn[data-checklist-delete-item]:focus-visible {
  outline: 3px solid rgba(251, 113, 133, 0.28);
  outline-offset: 2px;
}

/* Dashboard data rows: Marine Dark contrast fix */
[data-theme="marine-dark"] .screen-dashboard .dashboard-data-label {
  color: rgba(226, 232, 240, 0.58);
}

[data-theme="marine-dark"] .screen-dashboard .dashboard-data-value {
  color: #f5f9ff;
}

[data-theme="marine-dark"] .screen-dashboard .dashboard-data-row {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

/* Emergency screen: Marine Dark readable data/contact values */
[data-theme="marine-dark"] .screen-emergency .emergency-data-label,
[data-theme="marine-dark"] .screen-emergency .emergency-contact-label {
  color: rgba(226, 232, 240, 0.58);
}

[data-theme="marine-dark"] .screen-emergency .emergency-data-value,
[data-theme="marine-dark"] .screen-emergency .emergency-contact-value {
  color: #f5f9ff;
}

[data-theme="marine-dark"] .screen-emergency .emergency-data-row,
[data-theme="marine-dark"] .screen-emergency .emergency-contact-row {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

/* Emergency Crew Notes: keep readable text on light crew cards in Marine Dark */
[data-theme="marine-dark"] .screen-emergency .emergency-crew-card {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.22);
}

[data-theme="marine-dark"] .screen-emergency .emergency-crew-card .emergency-data-label {
  color: #64748b;
}

[data-theme="marine-dark"] .screen-emergency .emergency-crew-card .emergency-data-value {
  color: #0f172a;
}

[data-theme="marine-dark"] .screen-emergency .emergency-crew-card .emergency-data-row {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

/* Export Storage Summary: readable badges on light rows in Marine Dark */
[data-theme="marine-dark"] .screen-exports [data-export-summary] .export-row {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.18);
}

[data-theme="marine-dark"] .screen-exports [data-export-summary] .badge-success {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.24);
}

[data-theme="marine-dark"] .screen-exports [data-export-summary] .badge-muted {
  color: #475569;
  background: rgba(100, 116, 139, 0.14);
  border: 1px solid rgba(100, 116, 139, 0.22);
}

[data-theme="marine-dark"] .dashboard-progress-top strong {
    color: #ffffff;
}

[data-theme="marine-dark"].dashboard-progress-top span {
    color: #ffffff;
}

/* =========================================================
   AUTO DARK MODE SUPPORT
========================================================= */

@media (prefers-color-scheme: dark) {
  body.auto-theme {
    color-scheme: dark;
    background: #07111f;
  }

  body.auto-theme:not(.theme-default):not(.theme-ocean):not(.theme-sand) {
    --color-bg: #07111f;
    --color-text: #f5f9ff;
    --color-muted: rgba(226, 232, 240, 0.68);
    --color-border: rgba(148, 163, 184, 0.14);

    --theme-bg:
      radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 28rem),
      linear-gradient(180deg, #07111f 0%, #091827 100%);

    --theme-surface: #0f1b2e;
    --theme-surface-soft: #13233a;
    --theme-surface-muted: #0b1728;
    --theme-text: #f5f9ff;
    --theme-muted: rgba(226, 232, 240, 0.68);
    --theme-sidebar: #050d18;
    --theme-primary: #38bdf8;
    --theme-border: rgba(148, 163, 184, 0.14);
    --theme-header-bg: rgba(7, 17, 31, 0.88);
    --theme-bottom-nav-bg: rgba(7, 17, 31, 0.94);
    --theme-input-bg: #0b1728;
    --theme-input-border: rgba(148, 163, 184, 0.16);
  }
}

/* =========================================================
   PRINT THEME
========================================================= */

@media print {
  :root,
  body,
  .theme-default,
  .theme-dark,
  [data-theme] {
    color-scheme: light;

    --theme-bg: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-soft: #ffffff;
    --theme-text: #000000;
    --theme-muted: #333333;
    --theme-border: #cccccc;
    --theme-card-shadow: none;
    --theme-card-shadow-strong: none;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
}
/* =========================================================
   PWA INSTALL / STANDALONE MODE FIXES
========================================================= */

[hidden] {
  display: none !important;
}

#appBanner[hidden],
html.is-installed #appBanner,
html.is-standalone #appBanner,
html[data-install-status="installed"] #appBanner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  #appBanner {
    display: none !important;
  }
}

/* =========================================================
   PWA UPDATE TOAST
========================================================= */

.app-update-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
}

.app-toast-action {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--theme-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.app-toast-action:hover {
  filter: brightness(0.96);
}

html.has-app-update .app-update-toast {
  display: flex;
}
/* =========================================================
   APP TOASTS
========================================================= */

.app-toast {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center;
  gap: 10px;

  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));

  padding: 14px 16px;
  border-radius: 14px;

  background: var(--theme-surface, #ffffff);
  color: var(--theme-text, #172033);

  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.12));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.app-toast.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.app-toast[data-type="success"] {
  border-left: 4px solid var(--theme-success, #16a34a);
}

.app-toast[data-type="warning"] {
  border-left: 4px solid var(--theme-warning, #f59e0b);
}

.app-toast[data-type="danger"] {
  border-left: 4px solid var(--theme-danger, #dc2626);
}

.app-toast[data-type="info"] {
  border-left: 4px solid var(--theme-primary, #2563eb);
}

@media (max-width: 768px) {
  .app-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: none;
  }
}