/* ============================================================
   App-specific styles (συμπλήρωμα του Tailwind CDN)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* ------------------------------------------------------------
   Feather-style icons polish (καθολικό)
   ------------------------------------------------------------ */
svg[fill="none"] {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Sidebar — Tile-style (icon + label centered)
   ============================================================ */

.sidebar-section {
  padding: 0.25rem 0.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #475569; /* slate-600 */
}

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.tile-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.1rem 0.75rem;
  border-radius: 0.85rem;
  background-color: rgba(30, 41, 59, 0.4);    /* slate-800/40 */
  border: 1px solid rgba(51, 65, 85, 0.5);    /* slate-700/50 */
  color: #cbd5e1;                              /* slate-300 */
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease,
              color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  text-align: center;
  min-height: 104px;
}

.tile-link:hover {
  background-color: rgba(51, 65, 85, 0.6);    /* slate-700/60 */
  border-color: rgba(71, 85, 105, 0.7);       /* slate-600/70 */
  color: #f8fafc;
  transform: translateY(-1px);
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #93c5fd;                              /* sky-300 */
  transition: color 150ms ease, transform 150ms ease;
}

.tile-link:hover .tile-icon {
  color: #bedcff;                              /* brand-200 */
  transform: scale(1.06);
}

.tile-label {
  font-size: 0.825rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  word-break: break-word;
  hyphens: auto;
}

/* ---- Active tile ---- */
.tile-link.is-active {
  background: linear-gradient(160deg, #1e5ef5 0%, #1949dc 100%);
  border-color: #5da3ff;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(30, 94, 245, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tile-link.is-active:hover {
  background: linear-gradient(160deg, #1949dc 0%, #1a3dab 100%);
  color: #ffffff;
  transform: translateY(-1px);
}

.tile-link.is-active .tile-icon {
  color: #ffffff;
}

/* ============================================================
   Scrollbars
   ============================================================ */
main::-webkit-scrollbar { width: 10px; height: 10px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
  border: 2px solid #f8fafc;
}
main::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

nav::-webkit-scrollbar { width: 4px; }
nav::-webkit-scrollbar-track { background: transparent; }
nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius: 4px; }

/* Σκουρόχρωμη scrollbar για το sidebar — ταιριάζει με το slate-900 bg */
.app-sidebar nav::-webkit-scrollbar { width: 6px; }
.app-sidebar nav::-webkit-scrollbar-track {
  background: #0f172a; /* slate-900, ίδιο με το sidebar bg */
}
.app-sidebar nav::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 6px;
  border: 1px solid #1e293b; /* slate-800 — λεπτό border για depth */
}
.app-sidebar nav::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}
/* Firefox */
.app-sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: #334155 #0f172a;
}

/* ============================================================
   Forms
   ============================================================ */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: none;
}

/* ============================================================
   Tables
   ============================================================ */
tbody tr {
  transition: background-color 100ms ease;
}

/* Παραδομένα δέματα — ελαφρύ κόκκινο με αριστερή ένδειξη */
tr.row-delivered {
  background-color: rgba(254, 226, 226, 0.45); /* rose-100/45 */
  box-shadow: inset 3px 0 0 #fda4af;            /* rose-300 */
}
tr.row-delivered:hover {
  background-color: rgba(254, 205, 211, 0.55); /* rose-200/55 */
}

/* ============================================================
   Print — Όλες οι ΣΤΗΛΕΣ σε μία σελίδα (A4 landscape)
   ============================================================
   Στόχος: το πλάτος του πίνακα να χωράει πλήρως σε μία A4
   landscape σελίδα (καμία στήλη δεν κόβεται). Οι σειρές
   μπορούν να καταλάβουν περισσότερες σελίδες κάθετα —
   αυτό είναι ΟΚ. Το thead επαναλαμβάνεται αυτόματα σε
   κάθε σελίδα.

   Συνδυάζεται με JS (applyPrintFit) που μετράει το πλάτος
   του πίνακα σε print-mode (μέσω .print-measuring κλάσης
   στο <html>) και ορίζει --print-zoom custom property
   ώστε το CSS να εφαρμόσει zoom μόνο κατά την εκτύπωση.
   ------------------------------------------------------------ */

/* Default: κρύβουμε ό,τι έχει .print-only εκτός εκτύπωσης */
.print-only { display: none !important; }

/* ---------- Print-measuring mode ----------
   Όταν το JS προσθέτει .print-measuring στο <html>, εφαρμόζονται
   οι ίδιες compact διαστάσεις που χρησιμοποιεί και η εκτύπωση
   (font 9pt, μικρά padding). Έτσι το JS μετράει σωστά πόσο
   πλάτος θα πιάσει ο πίνακας στο χαρτί. */
html.print-measuring [data-print-fit] table {
  font-size: 9pt !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
html.print-measuring [data-print-fit] table thead th {
  padding: 4px 6px !important;
  font-size: 7.5pt !important;
}
html.print-measuring [data-print-fit] table tbody td {
  padding: 3px 6px !important;
  line-height: 1.25 !important;
}
/* Στην print-measuring mode κρύβουμε επίσης την τελευταία στήλη
   (ενεργειών) για να μη μετρηθεί στο πλάτος, αφού δεν εκτυπώνεται. */
html.print-measuring [data-print-fit] table thead tr th:last-child,
html.print-measuring [data-print-fit] table tbody tr td:last-child {
  display: none !important;
}

@media print {

  /* ---------- Σελίδα ---------- */
  @page {
    size: A4 landscape;
    margin: 8mm 8mm 10mm 8mm;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force color adjustment παντού — διασφαλίζει ότι τα Tailwind χρώματα
     (π.χ. bg-emerald-100 για το tick περισυλλογής, bg-amber-100 για
     «Εκκρεμεί», bg-rose-100 για «Παραδόθηκε») εκτυπώνονται κανονικά
     σε όλους τους browsers, ειδικά στον Firefox. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Απενεργοποιούμε scrollbars / overflow που χαλάνε layout στην εκτύπωση */
  html, body, main, .app-sidebar, header, [class*="overflow-"] {
    overflow: visible !important;
  }

  /* ---------- Hide chrome ---------- */
  .app-sidebar,
  aside,
  header,
  nav,
  details,                       /* το collapsible φίλτρων */
  form.auto-submit,
  .no-print,
  /* Στήλη ενεργειών στους πίνακες (πάντα η τελευταία) */
  table thead tr th:last-child,
  table tbody tr td:last-child {
    display: none !important;
  }

  /* Κάθε form (π.χ. φίλτρα ή φόρμα νέου πλοίου στο /ships) δεν εκτυπώνεται,
     εκτός αν έχει markaρισθεί ρητά ως .print-keep */
  form:not(.print-keep) {
    display: none !important;
  }

  /* ---------- Layout containers ---------- */
  body, .h-full {
    height: auto !important;
    min-height: 0 !important;
  }

  .flex.h-full {
    display: block !important;
  }

  main {
    overflow: visible !important;
    padding: 0 !important;
  }

  main > div {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------- Print header (τίτλος + ημερομηνία) ---------- */
  .print-only.print-header {
    display: block !important;
    margin: 0 0 6px 0;
    padding: 0 0 6px 0;
    border-bottom: 1.5px solid #000;
  }
  .print-header .print-title {
    font-size: 14pt;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
  }
  .print-header .print-subtitle {
    font-size: 10pt;
    color: #222;
    margin-top: 2px;
    line-height: 1.2;
  }
  .print-header .print-meta {
    font-size: 8pt;
    color: #555;
    margin-top: 2px;
  }

  /* ---------- Card / panel που περιέχει τον πίνακα ---------- */
  .bg-white.rounded-xl,
  [class*="rounded-xl"] {
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ---------- Print-fit wrapper ----------
     Εφαρμόζουμε CSS zoom με βάση την τιμή που έχει βάλει το JS στο
     --print-zoom custom property. Το zoom διαφέρει από transform:scale
     στο ότι σέβεται τα page-break rules — έτσι οι σειρές σπάνε
     σωστά σε πολλαπλές σελίδες χωρίς να κόβονται στη μέση.

     Αν το JS δεν έχει ορίσει --print-zoom (π.χ. ο πίνακας χωράει
     ούτως ή άλλως), η default τιμή είναι 1 (κανένα zoom). */
  [data-print-fit] {
    zoom: var(--print-zoom, 1);
  }

  /* ---------- Tables ---------- */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt;
  }

  table thead {
    display: table-header-group; /* επανάληψη header σε κάθε νέα σελίδα */
  }
  table thead tr {
    background: #f3f4f6 !important;
  }
  table thead th {
    color: #000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 7.5pt;
    letter-spacing: 0.02em;
    padding: 4px 6px !important;
    border-bottom: 1.2px solid #000 !important;
    text-align: left;
    background: #f3f4f6 !important;
  }
  /* Δεξιά στοίχιση όπου ήδη ορίζεται με Tailwind */
  table thead th.text-right { text-align: right; }
  table thead th.text-center { text-align: center; }

  table tbody td {
    padding: 3px 6px !important;
    border-bottom: 0.5px solid #d1d5db !important;
    color: #000 !important;
    line-height: 1.25;
    /* Κάθετα κεντραρισμένα — έτσι τα tick / status badges πέφτουν στο
       μέσον της γραμμής ακόμα κι όταν διπλανά κελιά έχουν 2 γραμμές
       κειμένου (π.χ. Πλοίο + Εταιρεία). */
    vertical-align: middle;
    /* Επιτρέπουμε wrapping ώστε πολύ μακρύ κείμενο να μην
       φουσκώνει τη στήλη οριζόντια — προτεραιότητα είναι να
       χωρέσουν ΟΛΕΣ οι στήλες σε μία σελίδα. */
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Στις στήλες που έχουμε δηλώσει whitespace-nowrap (π.χ. ημερομηνίες,
     διαστάσεις) το διατηρούμε ώστε να μη σπάνε σε δύο γραμμές. */
  table td.whitespace-nowrap,
  table th.whitespace-nowrap {
    white-space: nowrap !important;
  }

  /* Μην σπάμε ΜΕΣΑ σε μία σειρά (αλλά μπορούμε να σπάμε ΑΝΑΜΕΣΑ σε σειρές). */
  table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Διατηρούμε την οπτική ένδειξη παράδοσης (αχνό κόκκινο left-stripe) */
  tr.row-delivered {
    background-color: #fee2e2 !important;
    box-shadow: inset 3px 0 0 #fda4af !important;
  }

  /* Status & checkpoint badges:
     Διατηρούμε τα χρώματα και τα tick icons όπως στην οθόνη.
     Το `print-color-adjust: exact` (στο html/body) διασφαλίζει ότι τα
     pastel backgrounds εκτυπώνονται και δεν γίνονται διάφανα.
     Σημείωση: ΔΕΝ κρύβουμε τα SVG μέσα σε badges, αλλιώς θα χανόταν
     το tick της στήλης «Περισυλλογή» (που είναι ΜΟΝΟ SVG, χωρίς text). */

  /* Links μέσα στον πίνακα: μαύρο κείμενο, χωρίς underline */
  table a {
    color: #000 !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   Sidebar — Collapsible / Rail mode
   ============================================================ */
.app-sidebar {
  width: 16rem;
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transitions για τα εσωτερικά στοιχεία */
.app-sidebar .sb-tile,
.app-sidebar .sb-brand,
.app-sidebar .sb-user-card {
  transition: padding 220ms ease, min-height 220ms ease, gap 220ms ease;
}

.app-sidebar .sb-tile-label,
.app-sidebar .sb-section-title,
.app-sidebar .sb-brand-text,
.app-sidebar .sb-user-text,
.app-sidebar .sb-user-chevron {
  transition: opacity 120ms ease;
}

/* ------------------------------------------------------------
   Collapsed (rail) — μόνο εικονίδια
   ------------------------------------------------------------ */
html.sidebar-collapsed .app-sidebar {
  width: 4.75rem; /* 76px */
}

html.sidebar-collapsed .app-sidebar .sb-section-title,
html.sidebar-collapsed .app-sidebar .sb-tile-label,
html.sidebar-collapsed .app-sidebar .sb-brand-text,
html.sidebar-collapsed .app-sidebar .sb-user-text,
html.sidebar-collapsed .app-sidebar .sb-user-chevron {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: block;
  /* Αναγκαστική απενεργοποίηση του flex-grow:1 (κλάση `flex-1`) —
     αλλιώς το κρυμμένο element εξακολουθεί να πιάνει χώρο και
     ρίχνει το logo/avatar αριστερά αντί να κεντράρεται. */
  flex: 0 0 0 !important;
}

/* Συμπτυγμένα tiles — μικρά, κεντραρισμένα icons */
html.sidebar-collapsed .app-sidebar .sb-tile {
  min-height: 52px !important;
  padding: 10px !important;
  gap: 0 !important;
  border-radius: 12px;
}

html.sidebar-collapsed .app-sidebar .sb-tile-icon svg {
  width: 26px !important;
  height: 26px !important;
}

/* Στοίχιση κάθετων section spacings */
html.sidebar-collapsed .app-sidebar nav {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Λογότυπο κεντραρισμένο */
html.sidebar-collapsed .app-sidebar .sb-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

/* Avatar χρήστη κεντραρισμένο */
html.sidebar-collapsed .app-sidebar .sb-user-card {
  justify-content: center;
  gap: 0;
  padding: 0.5rem;
}

/* ------------------------------------------------------------
   Toggle button
   ------------------------------------------------------------ */
.sidebar-toggle .sidebar-toggle-icon {
  transition: transform 200ms ease;
}

html.sidebar-collapsed .sidebar-toggle .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* ============================================================
   MOBILE FIRST — Responsive tables → κάρτες (≤767px)
   ------------------------------------------------------------
   Σε κινητά οι πίνακες με πολλές στήλες δεν χωράνε. Κάθε
   <table data-responsive> μετατρέπεται σε στοίβα από κάρτες:
   κάθε γραμμή = μία κάρτα, κάθε κελί = ζεύγος «ετικέτα / τιμή».

   Οι ετικέτες (data-label) προστίθενται αυτόματα από το app.js
   διαβάζοντας το <thead>, οπότε δεν χρειάζεται χειροκίνητη
   επεξεργασία κάθε κελιού. Αν το JS δεν τρέξει, ο πίνακας
   παραμένει οριζόντια κυλιόμενος (overflow-x-auto) — graceful
   degradation.
   ============================================================ */
@media (max-width: 767.98px) {

  /* Καταργούμε το οριζόντιο scroll wrapper — οι κάρτες ρέουν κάθετα */
  table[data-responsive] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
  }

  /* Κρύβουμε τις κεφαλίδες — η πληροφορία τους μπαίνει ως ::before */
  table[data-responsive] thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  table[data-responsive] tbody {
    display: block;
  }

  /* Κάθε γραμμή = κάρτα */
  table[data-responsive] tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;          /* slate-200 */
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 0.35rem 0.9rem;
    margin-bottom: 0.85rem;
  }

  /* Διατηρούμε την ένδειξη παραδομένου δέματος και ως κάρτα */
  table[data-responsive] tbody tr.row-delivered {
    background-color: rgba(254, 226, 226, 0.55);
    box-shadow: inset 3px 0 0 #fda4af;
    border-color: #fecdd3;
  }

  /* Κάθε κελί = ζεύγος ετικέτα/τιμή σε μία γραμμή */
  table[data-responsive] tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: auto !important;
    padding: 0.5rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;  /* slate-100 */
    text-align: right;
    white-space: normal !important;
  }

  table[data-responsive] tbody td:last-child {
    border-bottom: 0 !important;
  }

  /* Η ετικέτα από το data-label */
  table[data-responsive] tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;                      /* slate-500 */
    text-align: left;
  }

  /* Κελιά χωρίς ετικέτα (π.χ. στήλη ενεργειών): χωρίς ::before,
     στοίχιση των κουμπιών δεξιά και με αρκετό target για άγγιγμα */
  table[data-responsive] tbody td[data-label=""]::before,
  table[data-responsive] tbody td:not([data-label])::before {
    content: none;
  }
  table[data-responsive] tbody td[data-label=""] {
    justify-content: flex-end;
    padding-top: 0.65rem !important;
  }
  table[data-responsive] tbody td[data-label=""] .inline-flex {
    gap: 0.35rem;
  }
  /* Μεγαλύτερα touch targets για τα action icons σε κινητά */
  table[data-responsive] tbody td[data-label=""] a,
  table[data-responsive] tbody td[data-label=""] button {
    padding: 0.5rem;
  }

  /* Γραμμή «κενής κατάστασης» (single colspan cell): κανονική εμφάνιση */
  table[data-responsive] tbody tr.is-empty-row td,
  table[data-responsive] tbody td[colspan] {
    display: block;
    text-align: center;
    border-bottom: 0 !important;
  }
  table[data-responsive] tbody tr.is-empty-row td::before,
  table[data-responsive] tbody td[colspan]::before {
    content: none;
  }
}