/**
 * ScubaDiabetes Logbook - Pannello Medico
 */

/* ============================================================
   FILTER SELECT
   ============================================================ */
.sd-filter-select {
    padding: 7px 10px;
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--sd-gray-700);
    background: var(--sd-white);
}

/* ============================================================
   DIVER LIST
   ============================================================ */
.sd-diver-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-diver-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sd-white);
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.sd-diver-card:hover {
    border-color: var(--sd-blue);
    box-shadow: var(--sd-shadow-md);
}

.sd-diver-card--diabetic {
    border-left: 4px solid #D97706;
    background: #FFFBEB;
}

.sd-diver-card--diabetic:hover {
    border-color: #D97706;
    border-left-color: #D97706;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}

/* Stat card cliccabile */
.sd-stat-card--filter {
    cursor: pointer;
    transition: all 0.2s;
}

.sd-stat-card--filter:hover {
    border-color: var(--sd-blue);
    box-shadow: var(--sd-shadow-md);
    transform: translateY(-1px);
}

.sd-stat-card--active {
    border-color: var(--sd-blue);
    background: #EFF6FF;
}

.sd-stat-card--active .sd-stat-value {
    color: var(--sd-blue);
}

.sd-stat-card--active .sd-stat-label {
    color: var(--sd-blue);
}

.sd-diver-card.sd-hidden {
    display: none;
}

.sd-meta-no-diabetes {
    background: #F0FDF4;
    color: #16A34A;
}

.sd-diver-card-avatar {
    flex-shrink: 0;
}

.sd-diver-card-avatar .sd-avatar-img {
    border-radius: 50%;
    border: 2px solid var(--sd-gray-200);
}

.sd-diver-card-info {
    flex: 1;
    min-width: 0;
}

.sd-diver-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--sd-gray-900);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-diver-card-meta {
    font-size: 11px;
    color: var(--sd-gray-500);
    margin-top: 2px;
}

.sd-diver-card-arrow {
    flex-shrink: 0;
    color: var(--sd-gray-300);
}

/* ============================================================
   SLIDE-IN PANEL
   ============================================================ */
.sd-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99999;
}

.sd-panel {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    background: var(--sd-gray-50);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    animation: sdSlideIn 0.25s ease;
}

@keyframes sdSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.sd-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sd-blue-deep);
    color: var(--sd-white);
}

.sd-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}

.sd-panel-back {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
    background: var(--sd-gray-100) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 20px;
    color: var(--sd-gray-500) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1;
}
.sd-panel-back:hover {
    background: var(--sd-red) !important;
    color: #FFF !important;
}

.sd-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ============================================================
   PANEL CONTENT
   ============================================================ */
.sd-panel-section {
    background: var(--sd-white);
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.sd-panel-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sd-gray-500);
    margin-bottom: 8px;
}

/* Profile info in panel */
.sd-panel-profile-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.sd-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--sd-gray-100);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sd-gray-700);
}

.sd-panel-tag-diabetes {
    background: #FEF3C7;
    color: #D97706;
}

.sd-record-card.sd-record-clickable {
    cursor: pointer;
}

.sd-panel-open-icon {
    color: var(--sd-gray-400);
    font-size: 14px;
    font-weight: 700;
}

/* Glycemia table in panel */
.sd-glic-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sd-glic-table th {
    text-align: left;
    font-weight: 700;
    color: var(--sd-gray-500);
    font-size: 10px;
    text-transform: uppercase;
    padding: 4px 6px;
    border-bottom: 1px solid var(--sd-gray-200);
}

.sd-glic-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--sd-gray-100);
}

.sd-glic-val {
    font-weight: 800;
    font-size: 14px;
    color: var(--sd-blue-deep);
}

.sd-glic-method {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 0 4px;
    border-radius: 3px;
}

.sd-glic-method-C { background: #FEE2E2; color: #DC2626; }
.sd-glic-method-S { background: #E0F2F1; color: #00897B; }

/* Decision badge */
.sd-decision-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.sd-decision-autorizzata { background: #DCFCE7; color: #16A34A; }
.sd-decision-sospesa { background: #FEF3C7; color: #D97706; }
.sd-decision-annullata { background: #FEE2E2; color: #DC2626; }

/* Supervision notes */
.sd-note-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--sd-gray-100);
}

.sd-note-item:last-child {
    border-bottom: none;
}

.sd-note-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--sd-gray-500);
    margin-bottom: 3px;
}

.sd-note-text {
    font-size: 13px;
    color: var(--sd-gray-900);
    line-height: 1.4;
}

.sd-note-status {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sd-note-status-approvata { background: #DCFCE7; color: #16A34A; }
.sd-note-status-sospesa { background: #FEF3C7; color: #D97706; }
.sd-note-status-annullata { background: #FEE2E2; color: #DC2626; }
.sd-note-status-in_revisione { background: var(--sd-gray-100); color: var(--sd-gray-500); }

.sd-dive-note-status {
    margin-right: 6px;
    white-space: nowrap;
}

.sd-dive-card {
    border-left-width: 4px;
}

.sd-dive-card.sd-dive-status-approvata {
    border-left-color: #16A34A;
}

.sd-dive-card.sd-dive-status-sospesa {
    border-left-color: #D97706;
}

.sd-dive-card.sd-dive-status-annullata {
    border-left-color: #DC2626;
}

.sd-dive-card.sd-dive-status-in_revisione {
    border-left-color: #6B7280;
}

.sd-dive-card.sd-dive-no-review {
    background: #CCE5FF;
}

.sd-dive-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 10px;
    font-size: 11px;
    color: var(--sd-gray-600);
}

.sd-dive-status-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sd-dive-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.sd-dive-status-dot-approvata { background: #16A34A; }
.sd-dive-status-dot-sospesa { background: #D97706; }
.sd-dive-status-dot-annullata { background: #DC2626; }
.sd-dive-status-dot-in_revisione { background: #6B7280; }

/* Add note form in panel */
.sd-add-note-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sd-gray-200);
}

.sd-add-note-form textarea {
    width: 100%;
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
}

.sd-add-note-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.sd-add-note-row select {
    padding: 6px 8px;
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
    font-family: inherit;
}

.sd-btn-add-note {
    padding: 7px 16px;
    background: var(--sd-teal);
    color: var(--sd-white);
    border: none;
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-left: auto;
}

.sd-btn-add-note:hover {
    background: #0d47a1;
}

/* Dive card in panel */
.sd-panel-dive {
    padding: 8px 0;
    border-bottom: 1px solid var(--sd-gray-100);
    cursor: pointer;
}

.sd-panel-dive:hover {
    background: var(--sd-gray-50);
}

.sd-panel-dive:last-child {
    border-bottom: none;
}

.sd-panel-dive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sd-panel-dive-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--sd-gray-900);
}

.sd-panel-dive-date {
    font-size: 11px;
    color: var(--sd-gray-500);
}

.sd-panel-dive-meta {
    font-size: 11px;
    color: var(--sd-gray-500);
    margin-top: 2px;
}

.sd-panel-dive-glic {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.sd-panel-dive-glic-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--sd-gray-100);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

/* ============================================================
   MAP BUTTONS
   ============================================================ */
.sd-btn-form-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--sd-gray-100);
    color: var(--sd-gray-500);
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: not-allowed;
    transition: all 0.2s;
}

.sd-btn-form-map:disabled {
    opacity: 0.6;
}

.sd-btn-form-map.sd-btn-form-map--active {
    background: var(--sd-blue);
    color: var(--sd-white);
    border-color: var(--sd-blue);
    cursor: pointer;
}

.sd-btn-form-map.sd-btn-form-map--active:hover {
    background: #2563EB;
    border-color: #2563EB;
    box-shadow: var(--sd-shadow-md);
}

.sd-form-map-label {
    font-weight: 600;
}

/* Map button in dive card */
.sd-btn-map-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--sd-blue);
    color: var(--sd-white);
    border: none;
    border-radius: var(--sd-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sd-btn-map-card:hover {
    background: #2563EB;
    box-shadow: var(--sd-shadow-md);
}

/* ============================================================
   MAP MODAL (Leaflet)
   ============================================================ */
.sd-map-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-map-modal {
    background: var(--sd-white);
    border-radius: var(--sd-radius-md);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    width: 90%;
    max-width: 900px;
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    animation: sdMapModalSlideIn 0.3s ease;
}

@keyframes sdMapModalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sd-map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--sd-blue-deep);
    color: var(--sd-white);
    border-radius: var(--sd-radius-md) var(--sd-radius-md) 0 0;
}

.sd-map-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.sd-map-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    color: var(--sd-white);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.sd-map-modal-close:hover {
    background: rgba(255,255,255,0.25);
}

.sd-map-modal-body {
    flex: 1;
    overflow: hidden;
    border-radius: 0 0 var(--sd-radius-md) var(--sd-radius-md);
}

/* Leaflet map overrides */
#sd-map-container {
    width: 100%;
    height: 100%;
}

#sd-map-container .leaflet-control-zoom {
    border: 1px solid var(--sd-gray-200);
    border-radius: var(--sd-radius-sm);
}

#sd-map-container .leaflet-control-zoom-in,
#sd-map-container .leaflet-control-zoom-out {
    color: var(--sd-gray-700);
    font-weight: 700;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .sd-map-modal {
        width: 95%;
        max-height: 90vh;
    }
}