/******************************************************************************************
 ****************************************************************************************** THEME
 ******************************************************************************************/

/* Palette presa dal wireframe MyCantiere. Da qui in poi si usano solo queste variabili. */
:root{
    --app-dark:      #26251f;
    --app-dark-soft: #3a3934;
    --app-primary:   #3f6ea6;
    --app-gold:      #c9a24b;
    --app-muted:     #7c776c;
    --app-faint:     #a49f94;

    --app-surface:   #faf9f5;
    --app-field:     #f4f2ec;
    --app-subtle:    #f1efe9;
    --app-border:    #e6e3db;
    --app-border-2:  #c9c6bf;

    --app-ok-fg:   #4d7a4f;  --app-ok-bg:   #e9f1e8;  --app-ok-bd:   #cde0cc;
    --app-warn-fg: #8a6d2a;  --app-warn-bg: #f6efdb;  --app-warn-bd: #e2cf94;
    --app-bad-fg:  #a5463a;  --app-bad-bg:  #f3e0dd;  --app-bad-bd:  #ddb9b1;
    --app-info-fg: #335072;  --app-info-bg: #eef3f9;  --app-info-bd: #cfdcec;
}

body{
    background: var(--app-subtle);
    color: var(--app-dark);
}


/******************************************************************************************
 ****************************************************************************************** LAYOUT
 ******************************************************************************************/

.app-navbar{
    background: var(--app-dark);
}

.app-navbar .nav-link{
    color: #ddd;
}

.app-navbar .nav-link.active{
    color: #fff;
    font-weight: bold;
}

.app-logo{
    max-width: 180px;
}

.app-footer{
    background: var(--app-dark);
    color: #fff;
}

.app-avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--app-gold);
    color: var(--app-dark);
    font-weight: 700;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/******************************************************************************************
 ****************************************************************************************** COMPONENTS
 ******************************************************************************************/

/* Etichetta di sezione: monospace maiuscola, come "INFO DEL CANTIERE" nel wireframe. */
.app-section-label{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--app-faint);
}

.app-card{
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
}

.app-card-tinted{
    background: var(--app-surface);
}

.app-breadcrumb{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: var(--app-faint);
}

.app-breadcrumb a{
    color: var(--app-faint);
    text-decoration: none;
}

.app-breadcrumb a:hover{
    color: var(--app-dark);
}

.app-breadcrumb .app-breadcrumb-current{
    color: var(--app-dark);
}

/* Bottone scuro pieno del wireframe. */
.app-btn-dark{
    background: var(--app-dark);
    border-color: var(--app-dark);
    color: #fff;
}

.app-btn-dark:hover,
.app-btn-dark:focus{
    background: var(--app-dark-soft);
    border-color: var(--app-dark-soft);
    color: #fff;
}

/* Badge di stato: verde / ambra / rosso / neutro. */
.app-badge{
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: .75rem;
    padding: .25rem .55rem;
    border: 1px solid transparent;
}

.app-badge-ok{   color: var(--app-ok-fg);   background: var(--app-ok-bg);   border-color: var(--app-ok-bd); }
.app-badge-warn{ color: var(--app-warn-fg); background: var(--app-warn-bg); border-color: var(--app-warn-bd); }
.app-badge-bad{  color: var(--app-bad-fg);  background: var(--app-bad-bg);  border-color: var(--app-bad-bd); }
.app-badge-off{  color: var(--app-muted);   background: #eceae3;            border-color: #dad6cd; }

/* Riquadro azzurro delle note e degli aiuti. */
.app-note{
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-bd);
    border-left: 3px solid var(--app-primary);
    border-radius: .5rem;
    color: var(--app-info-fg);
    font-size: .82rem;
    padding: .7rem .85rem;
}

/* Segnaposto delle sezioni non ancora attive (documenti, diario, portale). */
.app-placeholder{
    border: 1px dashed var(--app-border-2);
    border-radius: .45rem;
    color: var(--app-faint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    padding: .2rem .45rem;
}

.app-doc-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--app-subtle);
    font-size: .85rem;
}

.app-doc-row:last-child{
    border-bottom: 0;
}

.app-doc-label{
    flex: 1 1 14rem;
    min-width: 0;
}

.app-doc-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

/*
 * Elenchi di documenti lunghi (lavoratore, corsi) su più colonne: una in verticale, due dal
 * tablet, tre da desktop. Si mette sul contenitore attorno a documentList(), non nella
 * funzione, così gli elenchi corti restano su una colonna sola.
 */
.app-doc-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
}

@media (min-width: 768px){
    .app-doc-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px){
    .app-doc-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* In griglia l'ultima riga di ogni colonna non è "l'ultima": la linea la tolgono tutte. */
.app-doc-grid .app-doc-row{
    border-bottom: 1px solid var(--app-subtle);
}

/* Dove il nome del file si vede ancora (verbali del diario) non deve spingere fuori riga. */
.app-doc-name{
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/*
 * Le icone di azione in fondo alla riga: download e ingranaggio (o freccia di caricamento).
 * Stessa forma per tutte, così restano allineate e larghe uguale.
 */
.app-doc-action{
    line-height: 1;
    padding: .2rem .4rem;
}

/* Un'attività del diario può essere lunga: va a capo invece di allargare la tabella. */
.app-diary-text{
    white-space: pre-line;
    min-width: 18rem;
}

.app-diary-area{
    height: 7rem;
}

/* Una scadenza nella card del cantiere: etichetta, intestatario e badge della data. */
.app-expiry-item{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: .45rem;
    padding: .35rem .6rem;
}

/* Il nome del file è un link: si comporta da badge ma resta cliccabile. */
a.app-badge{
    text-decoration: none;
}

a.app-badge:hover{
    filter: brightness(.95);
}


/******************************************************************************************
 ****************************************************************************************** SITES LIST + MAP
 ******************************************************************************************/

.app-map{
    height: 640px;
    border-radius: .5rem;
}

.app-site-item{
    display: block;
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    padding: .75rem;
    margin-bottom: .5rem;
    text-decoration: none;
    color: inherit;
}

.app-site-item:hover{
    border-color: var(--app-primary);
    background: var(--app-surface);
}

.app-site-item.active{
    border-color: #dfe7f0;
    background: #f2f7fc;
}

.app-site-item.app-site-closed{
    opacity: .62;
}

.app-site-list{
    max-height: 640px;
    overflow-y: auto;
}


/******************************************************************************************
 ****************************************************************************************** INLINE EDIT
 *  Il form è sempre a schermo. Finché il <fieldset> è disabled i campi si leggono come
 *  testo; "Modifica" lo riattiva (vedi assets/js/inline_edit.js), "Annulla" ricarica.
 ******************************************************************************************/

form.app-editable .form-control,
form.app-editable .form-select{
    border-color: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--app-dark);
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
    opacity: 1;
}

/* Bootstrap sbiadisce i controlli disabilitati: in lettura devono restare leggibili. */
form.app-editable .form-control:disabled,
form.app-editable .form-select:disabled{
    background-color: transparent;
    color: var(--app-dark);
}

form.app-editable .form-control::placeholder{
    color: var(--app-faint);
    font-style: italic;
}

/*
 * Due marcatori per le parti che cambiano fra lettura e modifica. Si appoggiano alla stessa
 * classe che inline_edit.js toglie e rimette, quindi non serve altro JS: mentre si legge il
 * form ha app-editable, mentre si modifica no.
 */
form.app-editable .js-edit-only{
    display: none;
}

form:not(.app-editable) .js-view-only{
    display: none;
}

/*
 * Il nome del cantiere è il titolo della pagina e insieme un campo del form. La larghezza
 * segue il testo (attributo size) invece del solito 100% di .form-control, così il badge di
 * stato gli sta a fianco e non in fondo alla riga.
 */
.app-site-title{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    height: auto;
    width: auto;
    max-width: 100%;
}

/* Va dopo la regola dei campi disabilitati, che altrimenti lo riporterebbe a colore pieno. */
.app-site-address,
form.app-editable .app-site-address:disabled{
    color: var(--app-muted);
}


/******************************************************************************************
 ****************************************************************************************** SPECIFIC PAGE CSS
 ******************************************************************************************/