/* Public UI for SMET App */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --border:#e5e7eb; --text:#111827; --muted:#6b7280;
  --primary:#2563eb; --danger:#dc2626; --success:#059669; --radius:12px;
  --sidebar:#f3f4f6; --sidebar-text:#374151; --sidebar-active:#e5e7eb;
}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--text)}
h1,h2,h3{margin:0 0 8px;line-height:1.25}
h1{font-size:32px}
h2{font-size:28px}
h3{font-size:22px}

/* Layout shell */
.app{display:flex;min-height:100vh}
.app-sidebar{width:260px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column}
.app-sidebar .brand{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.app-sidebar .brand .logo{width:28px;height:28px;border-radius:6px;background:#dbeafe;border:1px solid #bfdbfe}
.app-sidebar .user{padding:16px;border-bottom:1px solid var(--border);color:var(--muted)}
.app-sidebar nav{padding:8px}
.app-sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--sidebar-text);text-decoration:none}
.app-sidebar a.active{background:var(--sidebar-active);}
.app-main{flex:1;display:flex;flex-direction:column}
.app-topbar{height:56px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.app-content{padding:24px}
.app-content .card + .card{margin-top:16px}

/* Components */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 10px 20px rgba(0,0,0,.04)}
.btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn-danger{background:var(--danger)}
.muted{color:var(--muted)}
.list{list-style:none;margin:0;padding:0}

/* Utilities */
.mb-16{margin-bottom:16px}
.mt-12{margin-top:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.break-all{word-break:break-all}
.text-right{text-align:right}
.overflow-auto{overflow:auto}

/* Login page card */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{max-width:380px;width:100%}
.field{position:relative}
input[type=text],input[type=password],input[type=email]{width:90%;padding:10px 12px;border:1px solid var(--border);border-radius:8px}
.toggle-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#374151;cursor:pointer}
.alert{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:8px;margin-bottom:12px}
.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;margin-bottom:12px}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 0;text-align:left;border-bottom:1px solid #f3f4f6}

/* Icons */
.icon{width:18px;height:18px;display:inline-block}

/* Responsive */
@media (max-width: 900px){
  .app-sidebar{width:220px}
}
@media (max-width: 700px){
  /* Nota: .app usa display:flex, non grid — grid-template-columns non ha effetto */
  .app-sidebar{width:64px}
  .app-sidebar .brand .logo{margin:0 auto}
  .app-sidebar .brand .label, .app-sidebar .user, .app-sidebar nav a .label{display:none}
  .app-sidebar nav a{justify-content:center}
}

/* ── Bottom navigation bar (nascosta su desktop) ────────── */
.app-bottom-nav{display:none}

/* ── Smartphone (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px){
  /* Tipografia ridotta */
  h1{font-size:20px}
  h2{font-size:17px}
  h3{font-size:15px}

  /* Sidebar: nascosta su mobile, sostituita dalla bottom nav */
  .app-sidebar{display:none}

  /* Bottom navigation bar fissa in basso */
  .app-bottom-nav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    height:62px;
    background:var(--panel);
    border-top:2px solid var(--border);
    justify-content:space-around;
    align-items:center;
    z-index:200;
    box-shadow:0 -2px 8px rgba(0,0,0,.08);
  }
  .app-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--muted);
    text-decoration:none;
    font-size:11px;
    font-weight:500;
    padding:6px 20px;
    border-radius:8px;
    transition:color .15s;
  }
  .app-bottom-nav a.active{color:var(--primary)}
  .app-bottom-nav a svg{width:22px;height:22px}

  /* Contenuto: meno padding + spazio per bottom nav */
  .app-content{padding:12px;padding-bottom:78px}
  .card{padding:14px}

  /* Topbar: bottoni compatti */
  .app-topbar{padding:0 10px;gap:6px}
  .app-topbar .btn{padding:6px 10px;font-size:13px}

  /* Header "I miei documenti" + form ricerca: stack verticale */
  .docs-header{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
  .docs-header form{flex-wrap:wrap;width:100%;gap:6px}
  .docs-header form input[type=search]{flex:1;min-width:0;width:auto;box-sizing:border-box}
  .docs-header form select{flex:1}

  /* Tabella → card list su mobile */
  .table thead{display:none}
  .table tbody tr{
    display:block;
    border:1px solid var(--border);
    border-radius:8px;
    margin-top:12px;
    padding:10px 12px;
    background:var(--panel);
  }
  .table td{
    display:block;
    padding:3px 0;
    border:none;
    font-size:14px;
  }
  .table td:nth-child(2),
  .table td:nth-child(3){color:var(--muted);font-size:13px}
  .table td.text-right{
    text-align:left;
    padding-top:10px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .table td.text-right .btn{flex:1;justify-content:center;text-align:center}
}