/* Datalastic Maritime API – Frontend Styles */
:root {
    --dl-primary:   #0a3d62;
    --dl-accent:    #1e90ff;
    --dl-success:   #27ae60;
    --dl-warning:   #f39c12;
    --dl-danger:    #e74c3c;
    --dl-border:    #dde3ec;
    --dl-bg:        #f4f7fb;
    --dl-text:      #2c3e50;
    --dl-muted:     #7f8c8d;
    --dl-radius:    10px;
    --dl-shadow:    0 2px 16px rgba(10,61,98,.10);
}

/* Card wrapper */
.dl-card {
    background: #fff;
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    box-shadow: var(--dl-shadow);
    overflow: hidden;
    margin: 1.5rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dl-text);
}

/* Header */
.dl-card-header {
    background: var(--dl-primary);
    color: #fff;
    padding: .9rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dl-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
}
.dl-card-header small {
    font-size: .8rem;
    opacity: .75;
}
.dl-ship-icon { font-size: 1.3rem; }

/* Body */
.dl-card-body { padding: 1.2rem; }

/* 2-col grid for key/value rows */
.dl-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem .8rem;
}
.dl-row {
    display: flex;
    flex-direction: column;
    padding: .45rem .6rem;
    background: var(--dl-bg);
    border-radius: 6px;
}
.dl-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dl-muted);
    font-weight: 600;
}
.dl-value {
    font-size: .92rem;
    font-weight: 500;
    margin-top: 2px;
    word-break: break-word;
}

/* Footer */
.dl-card-footer {
    padding: .5rem 1.2rem;
    font-size: .75rem;
    color: var(--dl-muted);
    border-top: 1px solid var(--dl-border);
    text-align: right;
}

/* Badges */
.dl-badge {
    display: inline-block;
    padding: .18em .55em;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.dl-badge-green  { background:#d4edda; color:#155724; }
.dl-badge-yellow { background:#fff3cd; color:#856404; }
.dl-badge-blue   { background:#cce5ff; color:#004085; }
.dl-badge-grey   { background:#e2e3e5; color:#383d41; }

/* Alerts */
.dl-alert {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin: .8rem 0;
    font-size: .9rem;
}
.dl-alert-error { background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; }
.dl-alert-info  { background:#e8f4fd; color:#1a5276; border:1px solid #bee5eb; }

/* Table */
.dl-table-wrap { overflow-x: auto; }
.dl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.dl-table th {
    background: var(--dl-primary);
    color: #fff;
    padding: .55rem .75rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.dl-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--dl-border);
}
.dl-table tbody tr:last-child td { border-bottom: none; }
.dl-table tbody tr:hover td { background: var(--dl-bg); }

/* Search forms */
.dl-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .8rem;
}
.dl-input {
    flex: 1 1 160px;
    padding: .5rem .75rem;
    border: 1px solid var(--dl-border);
    border-radius: 6px;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
}
.dl-input:focus { border-color: var(--dl-accent); }
.dl-btn {
    padding: .5rem 1.2rem;
    background: var(--dl-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.dl-btn:hover { background: #0070d8; }

.dl-results-area { margin-top: .75rem; }
.dl-results-count { font-size: .85rem; color: var(--dl-muted); margin-bottom: .5rem; }

/* Map link */
.dl-map-wrapper { padding: .6rem 1.2rem; background: var(--dl-bg); border-top: 1px solid var(--dl-border); }
.dl-map-link { font-size: .88rem; color: var(--dl-accent); text-decoration: none; }
.dl-map-link:hover { text-decoration: underline; }

.dl-note { font-size:.8rem; color:var(--dl-muted); margin-top:.5rem; }

/* Loading spinner */
.dl-loading::after {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid #ccc;
    border-top-color: var(--dl-accent);
    border-radius: 50%;
    animation: dl-spin .7s linear infinite;
    vertical-align: middle;
    margin-left: .4rem;
}
@keyframes dl-spin { to { transform: rotate(360deg); } }

/* Hormuz card extras */
.dl-hormuz-header { background: linear-gradient(135deg, #0a3d62 0%, #1a5276 100%); }

.dl-hormuz-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    padding: .6rem 1.2rem;
    background: #eaf2fb;
    border-bottom: 1px solid var(--dl-border);
    font-size: .82rem;
}
.dl-summary-label { color: var(--dl-muted); font-weight: 600; }
.dl-type-chip {
    background: #fff;
    border: 1px solid var(--dl-border);
    border-radius: 999px;
    padding: .15em .55em;
    font-size: .78rem;
    white-space: nowrap;
}
.dl-type-chip strong { color: var(--dl-accent); }
.dl-summary-coords { margin-left: auto; color: var(--dl-muted); font-size: .78rem; }