/* ====================================================
   Multitenant Activity Tracker — Front-end styles
   Design system condiviso con "Calcolo provvigionale"
   ==================================================== */

/* ===== VARIABILI ===== */
.mat-shell, .mat-shell *,
.mat-shell *::before, .mat-shell *::after { box-sizing: border-box; }

.mat-shell {
    --mat-sidebar-w: 240px;
    --mat-accent: #A07860;
    --mat-accent-lt: #B8906E;
    --mat-accent-bg: #FCF5F0;
    --mat-accent-border: #EDD8CC;
    --mat-accent-soft: #FCF3EE;
    --mat-primary: #1A1A1A;
    --mat-black: #0F0F0F;
    --mat-bg: #f0f2f5;
    --mat-white: #ffffff;
    --mat-border: #e0e0e0;
    --mat-border-light: #f5f5f5;
    --mat-text: #1a1a2e;
    --mat-muted: #777;
    --mat-success: #2e7d32;
    --mat-success-bg: #e8f5e9;
    --mat-danger: #c62828;
    --mat-danger-bg: #ffebee;
    --mat-warning: #f57f17;
    --mat-warning-bg: #fff3e0;
    --mat-info: #1565c0;
    --mat-info-bg: #e3f2fd;
    --mat-shadow: 0 1px 6px rgba(0,0,0,.07);
    --mat-shadow-md: 0 4px 14px rgba(0,0,0,.13);
    --mat-radius: 10px;
    --mat-radius-sm: 6px;

    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: var(--mat-text);
    background: var(--mat-bg);
    display: flex;
    min-height: 700px;
    border-radius: var(--mat-radius);
    overflow: hidden;
    box-shadow: var(--mat-shadow);
    margin: 16px 0;
}

/* layout bare per login */
.mat-shell.mat-shell-bare {
    min-height: 0;
    background: var(--mat-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    box-shadow: none;
}

/* ===== SIDEBAR ===== */
.mat-shell .mat-sidebar {
    width: var(--mat-sidebar-w);
    min-width: var(--mat-sidebar-w);
    background: #262626;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.mat-shell .mat-brand {
    padding: 20px 16px 14px;
    border-bottom: 1px solid var(--mat-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.mat-shell .mat-brand-icon {
    width: 32px; height: 32px;
    background: var(--mat-accent-lt);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 16px;
    flex-shrink: 0;
}
.mat-shell .mat-brand-icon-lg {
    width: 56px; height: 56px;
    font-size: 28px;
    border-radius: 10px;
    margin: 0 auto 12px;
}
.mat-shell .mat-brand-text strong {
    display: block; font-size: 14px; font-weight: 700;
    color: var(--mat-accent-lt); letter-spacing: .4px;
}
.mat-shell .mat-brand-text span {
    display: block; font-size: 11px; color: #aaa; margin-top: 1px;
}
.mat-shell .mat-nav { flex: 1; padding: 12px 0; }
.mat-shell .mat-nav-group {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5);
    text-transform: uppercase; padding: 14px 16px 4px; letter-spacing: 1px;
}
.mat-shell .mat-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; color: #fff; text-decoration: none; font-size: 13px;
    border-left: 3px solid transparent; transition: all .15s; cursor: pointer;
}
.mat-shell .mat-nav-link:hover { background: var(--mat-primary); border-left-color: var(--mat-accent); }
.mat-shell .mat-nav-link.active { background: var(--mat-primary); border-left-color: var(--mat-accent); font-weight: 600; }
.mat-shell .mat-nav-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

.mat-shell .mat-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--mat-primary);
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-top: auto;
}
.mat-shell .mat-user-chip { margin-bottom: 8px; line-height: 1.35; }
.mat-shell .mat-user-chip strong { color: #fff; font-size: 13px; }
.mat-shell .mat-user-chip small { color: rgba(255,255,255,.55); font-size: 11px; }
.mat-shell .mat-logout-link {
    display: inline-block; color: var(--mat-accent-lt); font-size: 12px;
    text-decoration: none; padding: 4px 0;
}
.mat-shell .mat-logout-link:hover { color: #fff; }

/* ===== MAIN ===== */
.mat-shell .mat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--mat-bg); }
.mat-shell .mat-topbar {
    background: var(--mat-white);
    padding: 0 24px;
    border-bottom: 1px solid var(--mat-border);
    height: 54px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    flex-shrink: 0;
}
.mat-shell .mat-topbar-title { font-size: 16px; font-weight: 700; color: var(--mat-black); margin: 0; }
.mat-shell .mat-topbar-meta { display: flex; gap: 8px; align-items: center; }
.mat-shell .mat-chip {
    background: var(--mat-bg); color: var(--mat-text);
    font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 20px; border: 1px solid var(--mat-border);
}
.mat-shell .mat-chip-accent {
    background: var(--mat-accent-bg); color: var(--mat-black);
    border-color: var(--mat-accent-border);
}
.mat-shell .mat-content { flex: 1; overflow-y: auto; padding: 24px; }

/* ===== TITOLI ===== */
.mat-shell .mat-section-title { font-size: 22px; font-weight: 800; color: var(--mat-black); margin-bottom: 3px; }
.mat-shell .mat-section-sub { font-size: 13px; color: var(--mat-muted); margin-bottom: 20px; }
.mat-shell .mat-h3 { font-size: 14px; font-weight: 700; color: var(--mat-black); margin: 16px 0 8px; }

/* ===== STAT CARDS ===== */
.mat-shell .mat-cards-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.mat-shell .mat-stat-card {
    background: var(--mat-white); border-radius: var(--mat-radius);
    padding: 18px 22px; flex: 1; min-width: 160px;
    box-shadow: var(--mat-shadow);
    border-left: 4px solid var(--mat-accent);
    transition: .15s;
}
.mat-shell .mat-stat-card:hover { box-shadow: var(--mat-shadow-md); transform: translateY(-2px); }
.mat-shell .mat-stat-label { font-size: 11px; color: var(--mat-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; font-weight: 600; }
.mat-shell .mat-stat-value { font-size: 28px; font-weight: 800; color: var(--mat-black); line-height: 1; }
.mat-shell .mat-stat-sub { font-size: 11px; color: #999; margin-top: 4px; }
.mat-shell .mat-stat-accent  { border-left-color: var(--mat-accent); }
.mat-shell .mat-stat-accent .mat-stat-value  { color: var(--mat-accent); }
.mat-shell .mat-stat-warning { border-left-color: var(--mat-warning); }
.mat-shell .mat-stat-warning .mat-stat-value { color: var(--mat-warning); }
.mat-shell .mat-stat-success { border-left-color: var(--mat-success); }
.mat-shell .mat-stat-success .mat-stat-value { color: var(--mat-success); }
.mat-shell .mat-stat-muted   { border-left-color: var(--mat-muted); }
.mat-shell .mat-stat-muted .mat-stat-value   { color: var(--mat-muted); }

/* ===== PANELS ===== */
.mat-shell .mat-panel {
    background: var(--mat-white); border-radius: var(--mat-radius);
    overflow: hidden; margin-bottom: 20px; box-shadow: var(--mat-shadow);
}
.mat-shell .mat-panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--mat-border-light);
    display: flex; align-items: center; justify-content: space-between;
}
.mat-shell .mat-panel-header h2 { font-size: 14px; font-weight: 700; color: var(--mat-black); margin: 0; display: flex; align-items: center; gap: 8px; }
.mat-shell .mat-panel-body { padding: 20px; }

/* ===== SECTOR CARDS (dashboard) ===== */
.mat-shell .mat-sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mat-shell .mat-sector-card {
    background: var(--mat-accent-soft);
    border: 1px solid var(--mat-accent-border);
    border-radius: var(--mat-radius-sm);
    padding: 14px;
}
.mat-shell .mat-sector-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mat-shell .mat-sector-head h3 { font-size: 14px; font-weight: 700; color: var(--mat-black); margin: 0; }
.mat-shell .mat-pill { background: var(--mat-primary); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.mat-shell .mat-sector-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mat-shell .mat-sector-stat { background: var(--mat-white); border-radius: var(--mat-radius-sm); padding: 8px 10px; border: 1px solid var(--mat-border-light); }
.mat-shell .mat-sector-stat a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.mat-shell .mat-num { font-size: 18px; font-weight: 800; line-height: 1; }
.mat-shell .mat-lbl { font-size: 11px; color: var(--mat-muted); margin-top: 3px; }
.mat-shell .mat-sector-stat.mat-status-open       { border-left: 3px solid var(--mat-accent); }
.mat-shell .mat-sector-stat.mat-status-in_progress{ border-left: 3px solid var(--mat-warning); }
.mat-shell .mat-sector-stat.mat-status-resolved   { border-left: 3px solid var(--mat-success); }
.mat-shell .mat-sector-stat.mat-status-closed     { border-left: 3px solid var(--mat-muted); }
.mat-shell .mat-sector-stat.mat-status-open       .mat-num { color: var(--mat-accent); }
.mat-shell .mat-sector-stat.mat-status-in_progress .mat-num { color: var(--mat-warning); }
.mat-shell .mat-sector-stat.mat-status-resolved   .mat-num { color: var(--mat-success); }
.mat-shell .mat-sector-stat.mat-status-closed     .mat-num { color: var(--mat-muted); }

/* ===== TABLES ===== */
.mat-shell .mat-tbl-wrap { overflow-x: auto; }
.mat-shell .mat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mat-shell .mat-table thead th {
    background: var(--mat-accent-bg); color: var(--mat-black);
    font-weight: 700; padding: 10px 14px; text-align: left;
    border-bottom: 2px solid var(--mat-accent-border);
    font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
}
.mat-shell .mat-table tbody td { padding: 10px 14px; color: #333; vertical-align: middle; border-bottom: 1px solid var(--mat-border-light); }
.mat-shell .mat-table tbody tr:last-child td { border-bottom: none; }
.mat-shell .mat-table tbody tr:hover { background: var(--mat-accent-bg); }
.mat-shell .mat-actions-cell { white-space: nowrap; }
.mat-shell .mat-actions-cell .mat-btn { margin-right: 4px; }

/* ===== BADGES ===== */
.mat-shell .mat-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px; color: #fff;
}
.mat-shell .mat-badge-open       { background: var(--mat-accent); }
.mat-shell .mat-badge-in_progress{ background: var(--mat-warning); }
.mat-shell .mat-badge-resolved   { background: var(--mat-success); }
.mat-shell .mat-badge-closed     { background: var(--mat-muted); }
.mat-shell .mat-badge-accent     { background: var(--mat-accent); }

/* ===== BUTTONS ===== */
.mat-shell .mat-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--mat-radius-sm);
    border: 1px solid transparent; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; line-height: 1.2;
    transition: all .15s; font-family: inherit;
}
.mat-shell .mat-btn-primary   { background: var(--mat-primary); color: #fff; border-color: var(--mat-primary); }
.mat-shell .mat-btn-primary:hover { background: var(--mat-black); }
.mat-shell .mat-btn-secondary { background: #f5f5f5; color: #333; border-color: #ddd; }
.mat-shell .mat-btn-secondary:hover { background: #e8e8e8; }
.mat-shell .mat-btn-danger    { background: var(--mat-danger); color: #fff; border-color: var(--mat-danger); }
.mat-shell .mat-btn-danger:hover { background: #b71c1c; }
.mat-shell .mat-btn-accent    { background: var(--mat-accent); color: #fff; border-color: var(--mat-accent); }
.mat-shell .mat-btn-accent:hover { background: #8a6650; }
.mat-shell .mat-btn-sm { padding: 5px 12px; font-size: 12px; }
.mat-shell .mat-btn-block { width: 100%; justify-content: center; }
.mat-shell .mat-btn-icon { padding: 6px 9px; background: transparent; border: 1px solid var(--mat-border); color: var(--mat-muted); }
.mat-shell .mat-btn-icon:hover { background: var(--mat-bg); color: var(--mat-text); }

/* ===== FORMS ===== */
.mat-shell .mat-form { display: flex; flex-direction: column; gap: 14px; }
.mat-shell .mat-form-stacked { gap: 12px; }
.mat-shell .mat-form-grid { display: grid; gap: 14px; }
.mat-shell .mat-form-grid.mat-grid-2 { grid-template-columns: 1fr 1fr; }
.mat-shell .mat-form-grid.mat-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.mat-shell .mat-form-group { display: flex; flex-direction: column; gap: 5px; }
.mat-shell .mat-form-group label {
    font-size: 12px; font-weight: 700; color: #555;
    text-transform: uppercase; letter-spacing: .4px;
}
.mat-shell .mat-form-group input,
.mat-shell .mat-form-group select,
.mat-shell .mat-form-group textarea,
.mat-shell .mat-form input,
.mat-shell .mat-form select,
.mat-shell .mat-form textarea {
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: var(--mat-radius-sm);
    font-size: 14px; color: var(--mat-text); background: #fafafa;
    font-family: inherit; transition: border .15s;
}
.mat-shell .mat-form-group input:focus,
.mat-shell .mat-form-group select:focus,
.mat-shell .mat-form-group textarea:focus,
.mat-shell .mat-form input:focus,
.mat-shell .mat-form select:focus,
.mat-shell .mat-form textarea:focus {
    outline: none;
    border-color: var(--mat-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(160,120,96,.12);
}
.mat-shell .mat-form-group textarea, .mat-shell .mat-form textarea { resize: vertical; min-height: 70px; }
.mat-shell .mat-help { font-size: 11px; color: var(--mat-muted); }
.mat-shell .mat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.mat-shell .mat-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mat-shell .mat-filters select,
.mat-shell .mat-filters input { padding: 7px 11px; border: 1px solid #ddd; border-radius: var(--mat-radius-sm); font-size: 13px; background: #fafafa; }
.mat-shell .mat-filters input[type=search] { flex: 1; min-width: 140px; }

/* ===== ALERTS ===== */
.mat-shell .mat-alert {
    padding: 12px 16px; border-radius: 8px; font-size: 13px;
    margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start;
}
.mat-shell .mat-alert-success { background: var(--mat-success-bg); color: var(--mat-success); border: 1px solid #a5d6a7; }
.mat-shell .mat-alert-error   { background: var(--mat-danger-bg);  color: var(--mat-danger);  border: 1px solid #ef9a9a; }
.mat-shell .mat-alert-warn    { background: var(--mat-warning-bg); color: #e65100;            border: 1px solid #ffcc80; }
.mat-shell .mat-alert-info    { background: var(--mat-info-bg);    color: var(--mat-info);    border: 1px solid #90caf9; }

/* ===== TABS ===== */
.mat-shell .mat-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--mat-accent-border); margin-bottom: 22px; }
.mat-shell .mat-tab {
    padding: 10px 20px; font-size: 13px; font-weight: 600;
    color: var(--mat-muted); cursor: pointer; text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .15s;
}
.mat-shell .mat-tab:hover { color: var(--mat-black); background: var(--mat-accent-bg); }
.mat-shell .mat-tab.active { color: var(--mat-black); border-bottom-color: var(--mat-accent); background: var(--mat-white); }

/* ===== CASE DETAIL ===== */
.mat-shell .mat-grid { display: grid; gap: 16px; }
.mat-shell .mat-grid-main-side { grid-template-columns: 2fr 1fr; }
.mat-shell .mat-grid-side-main { grid-template-columns: 1fr 2fr; }
.mat-shell .mat-case-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--mat-muted); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--mat-border-light); }
.mat-shell .mat-meta-item { color: var(--mat-text); }
.mat-shell .mat-prose { line-height: 1.6; color: #333; }
.mat-shell .mat-prose p { margin: 0 0 10px; }
.mat-shell .mat-immutable-note { color: var(--mat-muted); font-size: 12px; margin-top: 14px; padding: 8px 12px; background: var(--mat-accent-soft); border-radius: var(--mat-radius-sm); border: 1px dashed var(--mat-accent-border); }
.mat-shell .mat-comment { padding: 12px 0; border-bottom: 1px solid var(--mat-border-light); }
.mat-shell .mat-comment:last-of-type { border-bottom: none; }
.mat-shell .mat-comment-meta { font-size: 12px; color: var(--mat-muted); margin-bottom: 4px; }
.mat-shell .mat-comment-meta strong { color: var(--mat-black); }
.mat-shell .mat-comment-body { line-height: 1.5; }
.mat-shell .mat-att-list { list-style: none; padding: 0; margin: 0 0 12px; }
.mat-shell .mat-att-list li { padding: 8px 0; border-bottom: 1px dashed var(--mat-border-light); display: flex; align-items: center; gap: 8px; }
.mat-shell .mat-att-list li:last-of-type { border-bottom: none; }
.mat-shell .mat-att-icon { font-size: 16px; }
.mat-shell .mat-text-muted { color: var(--mat-muted); font-size: 12px; }
.mat-shell .mat-history { margin: 0; padding-left: 18px; }
.mat-shell .mat-history li { margin-bottom: 10px; font-size: 13px; }
.mat-shell .mat-history-note { background: var(--mat-accent-soft); padding: 6px 10px; border-radius: var(--mat-radius-sm); margin-top: 4px; font-size: 12px; }
.mat-shell .mat-link { color: var(--mat-accent); text-decoration: none; font-weight: 600; }
.mat-shell .mat-link:hover { color: var(--mat-black); text-decoration: underline; }

/* ===== EMPTY ===== */
.mat-shell .mat-empty {
    text-align: center; padding: 36px 20px; color: #aaa; font-size: 14px;
    background: var(--mat-bg); border: 1px dashed var(--mat-border); border-radius: var(--mat-radius-sm);
}
.mat-shell .mat-empty-sm { padding: 16px; font-size: 13px; }

/* ===== LOGIN CARD ===== */
.mat-shell.mat-shell-bare .mat-login-card {
    background: var(--mat-white);
    border-radius: var(--mat-radius);
    padding: 32px 28px;
    box-shadow: var(--mat-shadow-md);
    width: 100%;
    max-width: 420px;
}
.mat-shell.mat-shell-bare .mat-login-brand { text-align: center; margin-bottom: 22px; }
.mat-shell.mat-shell-bare .mat-login-brand h2 { font-size: 18px; font-weight: 800; color: var(--mat-black); margin: 0 0 4px; letter-spacing: .3px; }
.mat-shell.mat-shell-bare .mat-login-sub { font-size: 13px; color: var(--mat-muted); margin: 0; }

/* ====================================================
   OVERRIDE TEMA — Twenty Seventeen (e fallback generici)
   Si applicano solo sulla pagina portale (body.mat-portal-page)
   ==================================================== */
body.mat-portal-page #content,
body.mat-portal-page .site-content,
body.mat-portal-page .wrap {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
body.mat-portal-page .site-content-contain { background: var(--mat-bg, #f0f2f5); }

/* Rimuove header/title della pagina sopra al portale (più pulito) */
body.mat-portal-page .entry-header,
body.mat-portal-page .page-header,
body.mat-portal-page .page-banner,
body.mat-portal-page .entry-title { display: none !important; }

/* La content area del tema può avere padding generosi: li riduciamo */
body.mat-portal-page .entry-content,
body.mat-portal-page .post-thumbnail,
body.mat-portal-page article.page,
body.mat-portal-page .hentry {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* Twenty Seventeen specifico: rimuove image header gigante e padding default */
body.mat-portal-page.twentyseventeen .custom-header,
body.mat-portal-page.twentyseventeen .custom-header-media { display: none !important; }
body.mat-portal-page.twentyseventeen #primary { padding: 0 !important; }
body.mat-portal-page.twentyseventeen #content { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Su mobile lascia respirare un po' (la shell ha già un suo padding interno) */
@media (max-width: 900px) {
    body.mat-portal-page .site-content,
    body.mat-portal-page .wrap { padding: 0 !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .mat-shell { flex-direction: column; min-height: 0; border-radius: 0; margin: 0; }
    .mat-shell .mat-sidebar { width: 100%; min-width: 0; flex-direction: row; align-items: center; padding: 8px 12px; overflow-x: auto; }
    .mat-shell .mat-brand { padding: 0 8px 0 0; border-right: 1px solid var(--mat-primary); border-bottom: none; }
    .mat-shell .mat-nav { display: flex; padding: 0 8px; flex-direction: row; }
    .mat-shell .mat-nav-group { display: none; }
    .mat-shell .mat-nav-link { white-space: nowrap; padding: 6px 10px; border-left: none; border-bottom: 2px solid transparent; }
    .mat-shell .mat-nav-link.active, .mat-shell .mat-nav-link:hover { border-left: none; border-bottom-color: var(--mat-accent); }
    .mat-shell .mat-sidebar-footer { display: none; }
    .mat-shell .mat-form-grid.mat-grid-2,
    .mat-shell .mat-form-grid.mat-grid-3 { grid-template-columns: 1fr; }
    .mat-shell .mat-grid-main-side, .mat-shell .mat-grid-side-main { grid-template-columns: 1fr; }
    .mat-shell .mat-content { padding: 16px; }
}