/* ── Area Riservata – Frontend ───────────────────────────────────────────── */
:root {
  --ar-primary:   #1a5fa8;
  --ar-primary-d: #144d8a;
  --ar-accent:    #e8f1fb;
  --ar-border:    #d0d7e2;
  --ar-radius:    10px;
  --ar-shadow:    0 2px 12px rgba(0,0,0,.08);
  --ar-green:     #2e7d32;
  --ar-red:       #c62828;
  --ar-orange:    #e65100;
}

.ar-wrap { max-width:700px; margin:0 auto; font-family:system-ui,sans-serif; }

/* Tabs */
.ar-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--ar-border); }
.ar-tab  { padding:10px 22px; border-radius:var(--ar-radius) var(--ar-radius) 0 0;
           text-decoration:none; color:var(--ar-primary); background:#fff;
           border:2px solid var(--ar-border); border-bottom:none; font-weight:500; }
.ar-tab--active { background:var(--ar-primary); color:#fff; border-color:var(--ar-primary); }

/* Form */
.ar-form { background:#fff; border:1px solid var(--ar-border); border-radius:var(--ar-radius);
           padding:28px; box-shadow:var(--ar-shadow); }
.ar-form label { display:flex; flex-direction:column; gap:5px; margin-bottom:14px;
                 font-size:.9rem; color:#333; font-weight:500; }
.ar-form input  { padding:10px 12px; border:1px solid var(--ar-border);
                  border-radius:6px; font-size:1rem; transition:border-color .2s; }
.ar-form input:focus { border-color:var(--ar-primary); outline:none; }
.ar-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ar-hint  { font-size:.8rem; color:#888; margin:-8px 0 12px; }

/* Button */
.ar-btn { display:inline-block; padding:10px 22px; background:var(--ar-primary);
          color:#fff; border:none; border-radius:6px; cursor:pointer;
          font-size:.95rem; font-weight:600; text-decoration:none;
          transition:background .2s, transform .1s; }
.ar-btn:hover { background:var(--ar-primary-d); }
.ar-btn:active { transform:scale(.98); }
.ar-btn--sm { padding:6px 14px; font-size:.82rem; }
.ar-btn--outline { background:transparent; border:2px solid var(--ar-primary);
                   color:var(--ar-primary); }
.ar-btn--outline:hover { background:var(--ar-accent); }

/* Message */
.ar-msg { padding:10px 14px; border-radius:6px; margin-bottom:12px;
          display:none; font-size:.9rem; }
.ar-msg--ok  { background:#e8f5e9; color:var(--ar-green); border:1px solid #a5d6a7; }
.ar-msg--err { background:#ffebee; color:var(--ar-red); border:1px solid #ef9a9a; }

/* Header area */
.ar-header { display:flex; justify-content:space-between; align-items:center;
             padding:12px 18px; background:var(--ar-accent);
             border-radius:var(--ar-radius); margin-bottom:20px; font-weight:500; }
.ar-section-title { margin:0 0 14px; font-size:1.05rem; font-weight:700; color:#222; }
.ar-empty { color:#888; font-style:italic; }

/* File cards */
.ar-files-grid { display:flex; flex-direction:column; gap:12px; }
.ar-file-card  { display:flex; align-items:center; gap:14px; padding:14px 18px;
                 background:#fff; border:1px solid var(--ar-border);
                 border-radius:var(--ar-radius); box-shadow:var(--ar-shadow); }
.ar-file-icon  { font-size:2rem; line-height:1; }
.ar-file-info  { flex:1; display:flex; flex-direction:column; gap:2px; }
.ar-file-info strong { font-size:.95rem; }
.ar-file-info span   { font-size:.82rem; color:#555; }
.ar-file-info small  { font-size:.78rem; color:#999; }
.ar-file-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; }

@media(max-width:540px) {
  .ar-row-2 { grid-template-columns:1fr; }
  .ar-file-card { flex-wrap:wrap; }
  .ar-file-actions { width:100%; }
}

/* Privacy checkbox */
.ar-privacy-box { margin:4px 0 10px; }
.ar-privacy-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: normal !important;
  cursor: pointer;
  font-size: .88rem;
  color: #444;
  line-height: 1.5;
}
.ar-privacy-label input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--ar-primary);
  cursor: pointer;
}
.ar-privacy-label a { color: var(--ar-primary); text-decoration: underline; }
.ar-privacy-label a:hover { color: var(--ar-primary-d); }
.ar-req      { color: #c62828; font-weight: 700; }
.ar-req-note { font-size: .78rem; color: #888; margin: 0 0 14px; }

/* Password match hint */
.ar-pwd-hint { font-size: .83rem; font-weight: 600; padding: 5px 0 2px; }
.ar-pwd-ok   { color: var(--ar-green); }
.ar-pwd-err  { color: var(--ar-red); }

/* Copyright footer */
.ar-footer-copy {
  text-align: center;
  font-size: .78rem;
  color: #fff;
  margin-top: 18px;
  padding: 10px 16px;
  background: var(--ar-primary);
  border-radius: 0 0 var(--ar-radius) var(--ar-radius);
}

/* ── Anno scolastico accordion (frontend) ─────────────────────────────────── */
.ar-anno-block { margin-bottom: 12px; border: 1px solid var(--ar-border);
                 border-radius: var(--ar-radius); overflow: hidden; }

.ar-anno-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; background: var(--ar-accent);
  border: none; cursor: pointer; text-align: left;
  font-size: .95rem; font-weight: 600; color: #222;
  transition: background .15s;
}
.ar-anno-toggle:hover { background: #d8e8f8; }
.ar-anno-toggle--open { background: var(--ar-primary); color: #fff; }

.ar-anno-icon  { font-size: 1.1rem; }
.ar-anno-label { flex: 1; }
.ar-anno-count { font-size: .78rem; font-weight: 400;
                 background: rgba(255,255,255,.25); padding: 2px 8px;
                 border-radius: 12px; }
.ar-anno-toggle:not(.ar-anno-toggle--open) .ar-anno-count {
  background: rgba(26,95,168,.12); color: var(--ar-primary);
}
.ar-anno-chevron { font-size: .85rem; transition: transform .25s; }
.ar-anno-toggle--open .ar-anno-chevron { transform: rotate(180deg); }

.ar-anno-content { display: none; padding: 14px 18px 18px; }
.ar-anno-content--open { display: block; }