/* ============================================
   Endotek CMS - Stile minimal B&W (Anton/Impact + Inter)
   ============================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:#fff;
    color:#000;
    font-size:14px;
    line-height:1.5;
    display:flex;
    min-height:100vh;
}

/* Titoli con font tipo Impact */
h1, h2, h3, .page-title, .section-title-big, .hero {
    font-family:'Anton', 'Impact', 'Arial Black', sans-serif;
    font-weight:400;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:#000;
}

/* ───── Sidebar ───── */
.sidebar {
    width:240px;
    background:#000;
    color:#fff;
    display:flex;
    flex-direction:column;
    padding:24px 0;
    position:sticky;
    top:0;
    height:100vh;
    flex-shrink:0;
    overflow-y:auto;
}
.brand {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 24px 24px;
    border-bottom:1px solid #222;
    margin-bottom:14px;
    text-decoration:none;
}
.brand-logo {
    display:block;
    max-width:160px;
    width:100%;
    height:auto;
    filter:brightness(0) invert(1); /* forza il logo in bianco anche se la PNG è scura */
}

.nav { flex:1; display:flex; flex-direction:column; gap:2px; padding:0 12px; }
.nav-section {
    padding:14px 14px 6px;
    font-size:9px;
    letter-spacing:2px;
    color:#666;
    text-transform:uppercase;
    font-weight:700;
}
.nav-item {
    display:flex; align-items:center; gap:12px;
    padding:11px 14px;
    color:#bbb;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    border-radius:4px;
    transition:0.15s;
}
.nav-item i { width:18px; text-align:center; font-size:13px; }
.nav-item:hover { background:#1a1a1a; color:#fff; }
.nav-item.active { background:#fff; color:#000; }
.nav-sub {
    display:flex; align-items:center; gap:10px;
    padding:7px 14px 7px 36px;
    color:#888;
    text-decoration:none;
    font-size:12px;
    border-radius:4px;
    transition:0.15s;
}
.nav-sub i { font-size:10px; width:12px; }
.nav-sub:hover { background:#1a1a1a; color:#fff; }

.sidebar-foot {
    padding:14px 24px 4px;
    border-top:1px solid #222;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.user { display:flex; align-items:center; gap:10px; }
.user i { font-size:24px; color:#666; }
.user-name { font-size:13px; font-weight:600; }
.user-role { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:1px; }
.logout {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    color:#888; text-decoration:none; border-radius:4px; transition:0.15s;
}
.logout:hover { background:#1a1a1a; color:#fff; }

/* ───── Main ───── */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
    background:#fff;
    border-bottom:1px solid #000;
    padding:24px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
}
.page-title { font-size:36px; line-height:1; }
.page-actions { display:flex; gap:8px; align-items:center; }
.content { padding:32px 40px; flex:1; }

/* ───── Card / pannello ───── */
.card {
    background:#fff;
    border:1px solid #000;
    padding:24px;
    margin-bottom:24px;
}
.card-title {
    font-family:'Anton', Impact, sans-serif;
    font-size:18px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
    border-bottom:1px solid #000;
    padding-bottom:8px;
}

/* ───── Statistiche ───── */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin-bottom:32px; }
.stat { border:1px solid #000; padding:20px; background:#fff; }
.stat-label { font-size:10px; letter-spacing:2px; color:#666; text-transform:uppercase; margin-bottom:8px; }
.stat-value { font-family:'Anton', Impact, sans-serif; font-size:42px; line-height:1; color:#000; }
.stat-extra { font-size:11px; color:#666; margin-top:6px; }
.stat-extra a { color:#000; text-decoration:none; font-weight:600; }
.stat-extra a:hover { text-decoration:underline; }

/* ───── Tabelle ───── */
.table { width:100%; border-collapse:collapse; background:#fff; }
.table th, .table td { padding:12px 14px; text-align:left; border-bottom:1px solid #e5e5e5; font-size:13px; }
.table th {
    font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:#666; font-weight:600;
    border-bottom:2px solid #000;
    background:#fafafa;
}
.table tr:hover td { background:#fafafa; }
.table .row-actions { display:flex; gap:6px; }
.table .row-actions a, .table .row-actions button {
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid #ddd; background:#fff; color:#666;
    text-decoration:none; cursor:pointer; border-radius:3px;
    transition:0.15s; font-size:12px;
}
.table .row-actions a:hover, .table .row-actions button:hover { border-color:#000; color:#000; }
.table .row-actions .danger:hover { border-color:#e53935; color:#e53935; }

/* ───── Form ───── */
.form { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.form .full { grid-column:1 / -1; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label {
    font-size:10px; letter-spacing:1.5px;
    text-transform:uppercase; color:#666; font-weight:600;
}
.field input, .field textarea, .field select {
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:0;
    font-family:inherit;
    font-size:14px;
    background:#fff;
    color:#000;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:#000; outline:none; }
.field textarea { min-height:120px; resize:vertical; }
.field-checkbox { flex-direction:row; align-items:center; gap:8px; }
.field-checkbox label { text-transform:none; letter-spacing:0; color:#000; font-size:13px; font-weight:500; }

/* ───── Buttons ───── */
.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    background:#000; color:#fff; border:1px solid #000;
    font-family:inherit;
    font-size:12px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; cursor:pointer;
    text-decoration:none;
    transition:0.15s;
}
.btn:hover { background:#222; }
.btn-light { background:#fff; color:#000; }
.btn-light:hover { background:#f5f5f5; }
.btn-danger { background:#fff; color:#000; border-color:#000; }
.btn-danger:hover { background:#e53935; color:#fff; border-color:#e53935; }
.btn-sm { padding:6px 12px; font-size:11px; }

/* ───── Toolbar ───── */
.toolbar {
    display:flex; gap:12px; align-items:center;
    margin-bottom:20px; flex-wrap:wrap;
}
.toolbar input[type="search"], .toolbar select {
    padding:8px 12px; border:1px solid #ccc;
    font-family:inherit; font-size:13px; min-width:240px;
}
.toolbar input[type="search"]:focus, .toolbar select:focus { border-color:#000; outline:none; }
.toolbar .spacer { flex:1; }

/* ───── Flash ───── */
.flash {
    padding:12px 16px;
    margin-bottom:20px;
    border:1px solid #000;
    background:#fff;
    font-size:13px; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
}
.flash-success { background:#000; color:#fff; }
.flash-error   { background:#e53935; color:#fff; border-color:#e53935; }
.flash-info    { background:#fafafa; }

/* ───── Badge ───── */
.badge {
    display:inline-block; padding:3px 8px;
    font-size:10px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase;
    border:1px solid #000; color:#000;
}
.badge-on  { background:#000; color:#fff; }
.badge-off { background:#fff; color:#999; border-color:#ccc; }
.badge-draft     { background:#fafafa; color:#666; border-color:#ccc; }
.badge-scheduled { background:#fff;    color:#000; border-color:#000; }
.badge-sent      { background:#000;    color:#fff; }

/* ───── Empty ───── */
.empty {
    text-align:center;
    padding:60px 24px;
    color:#999;
    border:1px dashed #ccc;
}
.empty i { font-size:48px; display:block; margin-bottom:14px; color:#ddd; }
.empty p { font-size:13px; }

/* ───── Pagination ───── */
.pagination { display:flex; gap:4px; margin-top:24px; justify-content:center; }
.pagination a, .pagination span {
    padding:6px 12px; border:1px solid #ddd;
    text-decoration:none; color:#000;
    font-size:12px; font-weight:600;
}
.pagination a:hover { border-color:#000; }
.pagination .current { background:#000; color:#fff; border-color:#000; }

/* ───── Login ───── */
.login-page {
    display:flex; align-items:center; justify-content:center;
    background:#fff;
}
.login-box {
    width:100%;
    max-width:380px;
    padding:40px 32px;
    border:1px solid #000;
    background:#fff;
}
.login-brand { text-align:center; margin-bottom:32px; }
.login-brand h1 {
    font-family:'Anton', Impact, sans-serif;
    font-size:48px;
    letter-spacing:4px;
    line-height:1;
    margin-bottom:4px;
}
.login-brand p {
    font-size:11px; letter-spacing:3px;
    text-transform:uppercase; color:#666;
}
.login-box .field { margin-bottom:16px; }
.login-box .btn { width:100%; justify-content:center; }
.login-error {
    background:#e53935; color:#fff;
    padding:10px 14px;
    font-size:12px; font-weight:600;
    text-transform:uppercase; letter-spacing:1px;
    margin-bottom:20px; text-align:center;
}

/* ───── Responsive ───── */
@media (max-width:768px) {
    body { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:relative; padding:16px 0; }
    .nav { flex-direction:row; overflow-x:auto; gap:4px; padding:0 12px; }
    .nav-section { display:none; }
    .nav-item span, .nav-sub span { display:none; }
    .nav-item, .nav-sub { padding:10px 14px; }
    .sidebar-foot { padding-top:12px; }
    .topbar, .content { padding:20px; }
    .page-title { font-size:28px; }
}