/* 
 * Main Stylesheet for JW Project - Apple Style
 */

/* ===== VARIABLES ===== */
:root {
    /* Apple colors */
    --apple-blue: #007aff;
    --apple-green: #34c759;
    --apple-orange: #ff9500;
    --apple-red: #ff3b30;
    --apple-purple: #af52de;
    --apple-yellow: #ffcc00;
    --apple-gray: #8e8e93;
    --apple-gray2: #aeaeb2;
    --apple-gray3: #c7c7cc;
    --apple-gray4: #d1d1d6;
    --apple-gray5: #e5e5ea;
    --apple-gray6: #f2f2f7;
    
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f2f2f7;
    --bg-tertiary: #e5e5ea;
    
    /* Text colors */
    --text-primary: #000000;
    --text-secondary: #3c3c43;
    --text-tertiary: #8e8e93;
    
    /* Border colors */
    --border-color: #e5e5ea;
    
    /* Shadow values */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* Brand color (set to the green of the new logo) */
    /* NOTE: aggiorna questo valore se il verde del logo differisce */
    --brand-green: #3AB54A; /* exact logo green */
    --brand-green-dark: #2E9A3B; /* darker shade for hover/contrast */
}

/* ===== iOS COMPATIBILITY ENHANCEMENTS ===== */
/* Prevent auto-zoom on inputs */
input, select, textarea, button { font-size: 16px; }

/* Avoid unexpected text resizing on iOS */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Safe-area CSS variables */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --vh: 1vh;      /* fallback */
  --dvh: 100dvh;  /* modern browsers */
}

/* Utility: full viewport height robust on iOS */
.full-height { height: var(--dvh); }

/* Smooth momentum scroll for overflow containers */
.scroll-touch { -webkit-overflow-scrolling: touch; }

/* Better touch behavior */
body { overscroll-behavior: contain; touch-action: manipulation; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== AUTH PAGES: LOGO SIZE ===== */
.login-logo { display:inline-block; height:auto; width:auto; max-height:72px; max-width:min(260px, 80%); object-fit:contain; }
@media (min-width: 768px) { .login-logo{ max-height:90px; max-width:min(280px, 70%); } }

/* ===== GENERAL STYLES ===== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sticky footer layout */
html, body { height: 100%; }
body { display:flex; flex-direction:column; }
.main-wrapper { flex: 1 0 auto; }
footer.footer-apple { margin-top: auto; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

a {
    color: var(--brand-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-green-dark);
    text-decoration: none;
}

/* ===== LAYOUT COMPONENTS ===== */

/* Container with Apple-style padding */
.container-apple {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section spacing */
.section {
    padding: 32px 0;
}

/* ===== NAVBAR STYLES ===== */
.navbar {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Brand navbar variant using the new logo green */
.navbar-apple {
    background-color: rgba(248, 249, 250, 0.95) !important; /* light/grey header */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.navbar-apple .navbar-brand,
.navbar-apple .navbar-brand:focus,
.navbar-apple .navbar-brand:hover {
    color: var(--text-primary) !important;
}

.navbar-apple .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

.navbar-apple .navbar-nav .nav-link:hover,
.navbar-apple .navbar-nav .nav-link:focus,
.navbar-apple .navbar-nav .nav-link.active {
    color: var(--brand-green) !important;
    background-color: rgba(58, 181, 74, 0.12) !important; /* brand green tint */
}

.navbar-apple .navbar-toggler,
.navbar-apple .navbar-toggler:focus,
.navbar-apple .navbar-toggler:hover {
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.15);
}

.navbar-apple .fa-bars { color: var(--text-secondary); }

/* Logo: no background pill, keep it clean */
.navbar-apple .navbar-brand img { background: transparent; padding: 0; box-shadow: none; border-radius: 0; }

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.navbar-nav .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--apple-blue);
    background-color: rgba(0, 122, 255, 0.1);
}

.navbar-nav .nav-link.active {
    color: var(--apple-blue);
    background-color: rgba(0, 122, 255, 0.1);
}

/* ===== CARD STYLES ===== */
.card {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--bg-primary);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px;
    font-weight: 600;
}

.card-body {
    padding: 20px;
}

.card-footer {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 16px 20px;
}

/* ===== BUTTON STYLES ===== */
.btn {
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
}

.btn-primary {
    background-color: var(--brand-green);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-green-dark);
    color: #ffffff;
}

.btn-success {
    background-color: var(--apple-green);
    color: white;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #2ba84a;
    color: white;
}

.btn-danger {
    background-color: var(--apple-red);
    color: white;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #d9342a;
    color: white;
}

.btn-warning {
    background-color: var(--apple-orange);
    color: white;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #e67e00;
    color: white;
}

.btn-outline-primary {
    border: 1px solid var(--brand-green);
    color: var(--brand-green);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-green);
    color: #ffffff;
}

/* ===== FORM STYLES ===== */
.form-control,
.form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(58, 181, 74, 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

/* ===== TABLE STYLES ===== */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table th {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-top: none;
    border-bottom: 1px solid var(--border-color);
}

.table td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* Subtle enhancement for striped tables used in incarichi */
.table.table-striped.align-middle > thead th {
    border-bottom: 2px solid var(--border-color);
}
.table.table-striped.align-middle tbody tr:hover {
    background-color: #f8fafc;
}

/* ===== BADGE STYLES ===== */
.badge {
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

/* Elegant type-specific badges for incarichi */
.badge-type-default {
    background: linear-gradient(135deg, #e7ebef, #d6dce2);
    color: #2b3136;
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0,0,0,0.06);
}

.badge-type-infra {
    background: linear-gradient(135deg, #bfe7ff, #99d7ff);
    color: #063a4c;
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 10px rgba(8, 76, 97, 0.15);
    border: 1px solid rgba(8, 76, 97, 0.18);
}

.badge-type-infra2 {
    background: linear-gradient(135deg, #dec8ff, #c9adff);
    color: #3e216f;
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 10px rgba(75, 46, 131, 0.16);
    border: 1px solid rgba(75, 46, 131, 0.2);
}

.badge-type-fs {
    background: linear-gradient(135deg, #ffd6b0, #ffc490);
    color: #6a2f00;
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 10px rgba(122, 62, 0, 0.16);
    border: 1px solid rgba(122, 62, 0, 0.2);
}

.badge-type-uscente {
    background: linear-gradient(135deg, #c6f5e0, #a7eed0);
    color: #0f4a29;
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 10px rgba(20, 90, 50, 0.16);
    border: 1px solid rgba(20, 90, 50, 0.22);
}

.badge-type-discorso {
    background: linear-gradient(135deg, #c8f3d1, #aeeec0);
    color: #0f5c2e; /* verde profondo, armonizzato col brand */
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 10px rgba(15, 92, 46, 0.16);
    border: 1px solid rgba(15, 92, 46, 0.22);
}

.bg-success {
    background-color: var(--apple-green) !important;
}

.bg-danger {
    background-color: var(--apple-red) !important;
}

.bg-warning {
    background-color: var(--apple-orange) !important;
}

.bg-info {
    background-color: var(--apple-blue) !important;
}

.bg-secondary {
    background-color: var(--apple-gray) !important;
}

/* ===== MODAL STYLES ===== */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    background-color: var(--bg-primary);
}

.modal-title {
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    background-color: var(--bg-primary);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    background-color: var(--bg-primary);
}

.btn-close {
    background-color: var(--apple-gray4);
    border-radius: 50%;
    opacity: 1;
    padding: 0.5rem;
}

/* ===== ALERT STYLES ===== */
.alert {
    border: none;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.alert-primary {
    background-color: rgba(58, 181, 74, 0.1);
    color: var(--brand-green);
}

.alert-success {
    background-color: rgba(52, 199, 89, 0.1);
    color: var(--apple-green);
}

.alert-danger {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--apple-red);
}

.alert-warning {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--apple-orange);
}

/* ===== UTILITY CLASSES ===== */
.text-primary {
    color: var(--brand-green) !important;
}

.text-success {
    color: var(--apple-green) !important;
}

.text-danger {
    color: var(--apple-red) !important;
}

.text-warning {
    color: var(--apple-orange) !important;
}

.text-secondary {
    color: var(--apple-gray) !important;
}

/* Background utilities */
.bg-primary-apple {
    background-color: var(--apple-blue) !important;
    color: white;
}

.bg-light-apple {
    background-color: var(--bg-secondary) !important;
}

/* Brand background utility for footer/header blocks */
.bg-brand-green {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
}

.bg-brand-green a {
    color: #ffffff !important;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

.bg-brand-green a:hover { color: #ffffff !important; opacity: 0.95; }

/* Footer specific tweaks for readability */
footer.footer-apple {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
    border-top: none !important;
}

footer.footer-apple .text-apple { color: #ffffff !important; }
footer.footer-apple small { color: #ffffff !important; }

/* Shadow utilities */
.shadow-sm-apple {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md-apple {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg-apple {
    box-shadow: var(--shadow-lg) !important;
}

/* Border radius utilities */
.rounded-apple {
    border-radius: var(--radius-md) !important;
}

.rounded-lg-apple {
    border-radius: var(--radius-lg) !important;
}

/* ===== DASHBOARD SPECIFIC STYLES ===== */
.dashboard-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--apple-blue);
}

.dashboard-card.card-proclamatori .dashboard-icon {
    color: var(--apple-blue);
}

.dashboard-card.card-gruppi .dashboard-icon {
    color: var(--apple-green);
}

.dashboard-card.card-associazioni .dashboard-icon {
    color: var(--apple-purple);
}

.dashboard-card.card-report .dashboard-icon {
    color: var(--apple-orange);
}

.dashboard-card.card-programma .dashboard-icon {
    color: var(--apple-red);
}

.dashboard-card.card-impostazioni .dashboard-icon {
    color: var(--apple-gray);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
    
    .container-apple {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .card-header, .card-body, .card-footer {
        padding: 16px;
    }
    
    .table th, .table td {
        padding: 10px 12px;
    }
    
    .dashboard-icon {
        font-size: 2rem;
    }
}