/* KeCMS Frontend - Main Stylesheet */

/* Tailwind CDN - In produzione usare build locale */
@import url('tailwind.min.css');
/* import main.css */
/**
 * KeCMS - Main Stylesheet
 * Utilizza CSS Variables definite in :root dal ThemeService
 * Servito come file statico, cacheable dal browser
 */

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {box-sizing: border-box;}
body {margin: 0;font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}
p {margin-top: 10px;}
span {color: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;}
img, picture, video, canvas, svg {display: block;max-width: 100%;height: auto;}
/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-text);
margin-top: 0;
}

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

a:hover {
color: var(--color-primary-hover);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-primary {
background-color: var(--color-primary);
color: #ffffff !important;
}

.btn-primary:hover {
background-color: var(--color-primary-hover);
}

.btn-secondary {
background-color: var(--color-secondary);
color: #ffffff;
}

.btn-accent {
background-color: var(--color-accent);
color: #ffffff;
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   ─── CSS TABELLE RESPONSIVE (Compatibile con Tiptap) ───
   ═══════════════════════════════════════════════════════════════════════════ */

table.responsive-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 2rem 0;
    background-color: #ffffff;
}

/* Fix per i paragrafi forzati da Tiptap dentro le celle */
table.responsive-table th p,
table.responsive-table td p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Intestazione tabella (default arancio, override via data-theme) ─── */
table.responsive-table thead th {
    background-color: var(--color-primary, #ea580c);
    color: #ffffff;
    font-weight: 600;
    text-align: left;
}

/* Fallback per tabelle vecchie senza <thead> */
table.responsive-table tr:first-child:has(th) {
    background-color: var(--color-primary, #ea580c);
}
table.responsive-table tr:first-child th {
    color: #ffffff;
    font-weight: 600;
    text-align: left;
}

/* ─── Varianti colore intestazione (data-theme) ─── */
table.responsive-table[data-theme="orange"] thead th { background-color: #f97316; }
table.responsive-table[data-theme="blue"] thead th { background-color: #3b82f6; }
table.responsive-table[data-theme="green"] thead th { background-color: #22c55e; }
table.responsive-table[data-theme="red"] thead th { background-color: #ef4444; }
table.responsive-table[data-theme="indigo"] thead th { background-color: #6366f1; }
table.responsive-table[data-theme="gray"] thead th { background-color: #6b7280; }
table.responsive-table[data-theme="teal"] thead th { background-color: #14b8a6; }
table.responsive-table[data-theme="pink"] thead th { background-color: #ec4899; }

/* Fallback vecchie tabelle senza <thead> */
table.responsive-table[data-theme="orange"] tr:first-child:has(th) { background-color: #f97316; }
table.responsive-table[data-theme="blue"] tr:first-child:has(th) { background-color: #3b82f6; }
table.responsive-table[data-theme="green"] tr:first-child:has(th) { background-color: #22c55e; }
table.responsive-table[data-theme="red"] tr:first-child:has(th) { background-color: #ef4444; }
table.responsive-table[data-theme="indigo"] tr:first-child:has(th) { background-color: #6366f1; }
table.responsive-table[data-theme="gray"] tr:first-child:has(th) { background-color: #6b7280; }
table.responsive-table[data-theme="teal"] tr:first-child:has(th) { background-color: #14b8a6; }
table.responsive-table[data-theme="pink"] tr:first-child:has(th) { background-color: #ec4899; }


table.responsive-table th,
table.responsive-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    color: #374151;
}

table.responsive-table th:last-child,
table.responsive-table td:last-child {
    border-right: none;
}

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

/* ─── VISTA MOBILE (Trasformazione in Card) ─── */
@media screen and (max-width: 768px) {
    /* Spegne il colgroup di Tiptap che sballa le larghezze */
    table.responsive-table colgroup { display: none !important; }
    
    table.responsive-table, 
    table.responsive-table tbody {
        border: none;
        border-radius: 0;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        background-color: transparent;
        margin: 0;
    }

   /* Nascondiamo l'intestazione */
table.responsive-table thead,
table.responsive-table tr:first-child:has(th) {
    display: none !important; 
}


    /* Ogni riga di dati (tr) diventa una Card full-width */
    table.responsive-table tr {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        box-sizing: border-box;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem; 
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); 
        overflow: hidden;
    }

    /* Le celle (td) diventano righe flex: etichetta a sx, testo a dx */
    table.responsive-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        width: 100% !important;
        box-sizing: border-box;
        border-right: none; 
        border-bottom: 1px solid #e5e7eb; 
        padding: 1.25rem;
        gap: 1rem;
    }

    /* Il testo dentro il paragrafo di Tiptap deve stare a destra */
    table.responsive-table td > p {
        text-align: right;
        flex: 1;
        word-break: break-word;
    }

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

    /* Il titoletto sopra al testo preso dal data-label */
    table.responsive-table td::before {
        content: attr(data-label);
        display: block;
        flex-shrink: 0;
        max-width: 45%;
        text-align: left;
        font-size: 0.75rem; 
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-primary, #ea580c);
        line-height: 1.4;
        white-space: normal;
    }
	
	/* Varianti colore label mobile */
table.responsive-table[data-theme="orange"] td::before { color: #f97316; }
table.responsive-table[data-theme="blue"] td::before { color: #3b82f6; }
table.responsive-table[data-theme="green"] td::before { color: #22c55e; }
table.responsive-table[data-theme="red"] td::before { color: #ef4444; }
table.responsive-table[data-theme="indigo"] td::before { color: #6366f1; }
table.responsive-table[data-theme="gray"] td::before { color: #6b7280; }
table.responsive-table[data-theme="teal"] td::before { color: #14b8a6; }
table.responsive-table[data-theme="pink"] td::before { color: #ec4899; }


    /* Sfondino grigio alla prima cella per farla sembrare l'intestazione della card */
    table.responsive-table td:first-child {
        background-color: #f9fafb;
    }
}

/* ============================================
   FORMS
   ============================================ */

.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: var(--border-radius);
background-color: var(--color-background);
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input.error,
.form-textarea.error {
border-color: var(--color-error);
}

/* ============================================
   CARDS
   ============================================ */

.card {
background-color: var(--color-background);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}

.card-body {
padding: 1.5rem;
}


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

.alert {
padding: 1rem 1.25rem;
border-radius: var(--border-radius);
margin-bottom: 1rem;
}

.alert-success {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--color-success);
color: #065f46;
}

.alert-warning {
background-color: rgba(245, 158, 11, 0.1);
border-left: 4px solid var(--color-warning);
color: #92400e;
}

.alert-error {
background-color: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--color-error);
color: #991b1b;
}

/* ============================================
   UTILITIES
   ============================================ */

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-light { color: var(--color-text-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-alt { background-color: var(--color-background-alt); }

.container {
width: 100%;
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}

.section {
padding: 4rem 0;
}
.section-alt {
background-color: var(--color-background-alt);
}
article ul {
list-style-type: disc;
padding-left: 1.5rem; 
margin-top: 0.5rem;
margin-bottom: 1rem;
}

article ol {
list-style-type: decimal;
padding-left: 1.5rem; 
margin-top: 0.5rem;
margin-bottom: 1rem;
}

article ul ul, 
article ol ul {
list-style-type: circle;
margin-top: 0.25rem;
margin-bottom: 0;
}

article li {
margin-bottom: 0.25rem;
}
/* end import main.css */
/* Custom Styles */
h1 {font-size: 2.5em;line-height: 1.5;padding-bottom: 10px;padding-top: 10px;font-weight:700;}
h2 {font-size: 2em;line-height: 1.5;font-weight:700;padding-top:10px;padding-bottom:10px;}
h3 {font-size: 1.75em;line-height: 1.5;font-weight:700;padding-top:10px;padding-bottom:10px;}
h4 {font-size: 1.5em;line-height: 1.5;font-weight:700;padding-top:10px;padding-bottom:10px;}
h5 {font-size: 1.25em;line-height: 1.5;font-weight:700;padding-top:10px;padding-bottom:10px;}
h6 {font-size: 1.1em;line-height: 1.5;font-weight:700;padding-top:10px;padding-bottom:10px;}

.text-base-content\/70 { color: rgba(31, 41, 55, 0.7);}
.text-base-content\/80 { color: rgba(31, 41, 55, 0.8);}
.text-base-content\/60 { color: rgba(31, 41, 55, 0.6);}
.leading-relaxed {line-height: 1.6;}
.space-y-6 > * + * {margin-top: 1.5rem;}
.space-y-4 > * + * {margin-top: 1rem;}
.space-y-2 > * + * {margin-top: 0.5rem;}
@media (min-width: 1024px) {
.lg\:grid-cols-2 {grid-template-columns: repeat(2, 1fr);}}
/* ===== Card ===== */
.card {border-radius: 1rem;overflow: hidden;}
.card-body {padding: 2rem;}
.card-title {font-weight: 600;}
.card:hover {box-shadow:0 0px 3px rgba(85, 142, 213, 0.66);transition: box-shadow 0.3s ease;cursor:pointer;}
/* ===== TABLE ==== */
.table-offerta-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;}
/* ===== TABELLA BASE ===== */
table{margin-bottom:10px;margin-top:10px;width: 100%; /* desktop minimo */border-collapse: separate;border-spacing: 0;/* border-radius: 0.75rem; */overflow: hidden;/* box-shadow: 0 8px 20px rgba(0,0,0,0.05); */background-color: #ffffff;box-sizing: border-box;/* border: 1px solid #d4d4d4; */}
@media (min-width: 768px) {table {border: 1px solid #d4d4d4;}}
table:not(.responsive-table) thead {background-color: #383838; color: #ffffff; font-weight: 600; text-align: left;}
th,td {padding: 1rem 1.25rem;border-bottom: 1px solid #e5e7eb;}
tbody tr:nth-child(even) {background-color: #f3f4f6; /* zebra rows */}
tbody tr:hover {background-color: #e8d1b9; /* hover leggero */box-shadow: 0 4px 15px rgba(0,0,0,0.05);transition: all 0.3s ease;}
td {color: #374151;}
a.btn-download {background-color: #558ed5;color: #ffffff;padding: 0.5rem 1rem;border-radius: 0.5rem;display: inline-block;transition: background-color 0.2s ease;}
a.btn-download:hover {background-color: #4172b8;
color: #ffffff;}@media (max-width: 768px) {table:not(.responsive-table) thead {display: none;}
tbody tr {display: block;margin-bottom: 1rem;border: 1px solid #d1d5db;/* border-radius: 0.75rem; */box-shadow: 0 4px 15px rgba(0,0,0,0.05);background-color: #ffffff;}
tbody td {display: flex;justify-content: space-between;padding: 0.75rem 1rem;border-bottom: 1px solid #e5e7eb;position: relative;flex-wrap: wrap;box-sizing: border-box;}
tbody td::before {content: attr(data-label);flex-basis: 50%;font-weight: 600;color: #111827;}tbody td:last-child {border-bottom: 0;}}
/* ====  END TABLE ==== */
/* ===== Form ===== */
.form-control {display: flex;flex-direction: column;}
.label {margin-bottom: 0.5rem;font-size: 0.875rem;font-weight: 500;}
.label-text {
color: #1f2937;}
.input,.textarea {width: 100%;padding: 0.75rem 1rem;border-radius: 0.75rem;border: 1px solid #e5e7eb;font-size: 1rem;transition: all 0.2s ease;}
.input:focus,.textarea:focus {outline: none;border-color: #558ed578;box-shadow: 0px 0px 3px 0px rgb(85, 142, 213);}
.textarea {resize: vertical;}
.btn {display: inline-block;padding: 0.75rem 1.25rem;border-radius: 0.75rem;border: none;cursor: pointer;font-weight: 600;transition: all 0.2s ease;margin-top: 10px;margin-bottom: 5px;}
.btn-primary {background-color: #7c3aed;color: #ffffff;}
/* Border radius */
.rounded-full {border-radius: 9999px;}
.rounded-b-lg {border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;}
/* Font size */
.text-xs {font-size: 0.75rem;}
/* Transition */
.transition-colors {transition: background-color 0.2s ease, color 0.2s ease;}
.duration-200 {transition-duration: 0.2s;}
/* Hover */
.hover\:bg-purple-600:hover {background-color: #7c3aed;}
.group:hover > .group-hover\:block {display: block;}
/* END Custom Styles */
.prose {max-width: 65ch;color: #374151;line-height: 1.75;}
.prose h1, .prose h2, .prose h3, .prose h4 {color: #111827;font-weight: 700;line-height: 1.25;margin-top: 2em;margin-bottom: 0.5em;}
.prose h1 { font-size: 2.25rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p {margin-top: 1.25em;margin-bottom: 1.25em;}
.prose a {color: #2563eb;text-decoration: underline;}
.prose a:hover {color: #1d4ed8;}
.prose ul, .prose ol {margin-top: 1.25em;margin-bottom: 1.25em;padding-left: 1.625em;}
.prose li {margin-top: 0.5em;margin-bottom: 0.5em;}
.prose ul > li {
list-style-type: disc;}
.prose ol > li {list-style-type: decimal;}
.prose blockquote {border-left: 4px solid #e5e7eb;padding-left: 1em;font-style: italic;color: #6b7280;margin: 1.5em 0;}
.prose img {max-width: 100%;height: auto;border-radius: 0.5rem;margin: 2em 0;}
.prose code {background-color: #f3f4f6;padding: 0.2em 0.4em;border-radius: 0.25rem;font-size: 0.875em;}
.prose pre {background-color: #1f2937;color: #f9fafb;padding: 1em;border-radius: 0.5rem;overflow-x: auto;margin: 1.5em 0;}
.prose pre code {background-color: transparent;padding: 0;}
/* Utilities */
.line-clamp-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.line-clamp-3 {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
/* Transitions */
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
.transition-shadow {transition-property: box-shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
/* Focus states */
*:focus {outline: none;}
*:focus-visible {outline: 2px solid #3b82f6;outline-offset: 2px;}
/* Print styles */
@media print {
header, footer, nav, .no-print {
display: none !important;}
.prose {max-width: 100%;}}
/* === OVERRIDE COLORI AZIENDALI === */
/* Navbar */
#mobile-menu {background-color:#fff !important;padding-bottom: 10px;border-bottom: 1px solid #d9d9d9;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;}
#mobile-menu a:hover {background-color:transparent !important;color:#ee5511 !important;}
.navbar, nav.bg-purple-700, nav.bg-purple-800,header nav {background-color: var(--color-primary)}
.navbar a:hover, nav a:hover {background-color: var(--color-primary-hover) !important;color:#fff;}
#homepage-head nav ul li a {color:#383838;} #homepage-head nav ul li a:hover{color:#ee5511 !important;}
/* Link */
a {color: var(--color-primary);}
/* Bottoni */
.btn-primary, 
.bg-purple-600, 
.bg-purple-700 {background-color: var(--color-primary) !important;}
.bg-purple-800 {background-color: var(--color-primary-hover) !important;}
.btn-primary:hover,.bg-purple-600:hover,.bg-purple-700:hover {background-color: var(--color-primary-hover) !important;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;}
/* Footer */
footer {background-color: var(--color-footer-bg) !important;}
footer .text-lg.font-semibold.mb-4{color: var(--color-title-footer) !important}
.text-blue-600, .text-gray-400{color: var(--color-footer-text) !important;}
.home {background: #fff !important;}
.home-a:hover {background:none !important;}
.text-home-cerchio{color:#6b6b6b;}
#breadcrumb-category{padding:10px;}
.bordo {border: 1px solid var(--color-primary) !important;margin-top: 5px; cursor:pointer;}