/* Fismapant — shared chrome for non-sidebar pages (login, errors, admin dashboard). */
@import url('/css/tokens.css');

body.fm-shell {
    margin: 0;
    font-family: var(--fm-font);
    background: linear-gradient(135deg, var(--fm-c-bg) 0%, #e8eef7 100%);
    color: var(--fm-c-text);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--fm-space-4);
    box-sizing: border-box;
}

/* When .fm-shell appears on top of pages that also render a sidebar
   (login redirect flows, error pages), pin body content above any
   stacking context from legacy layouts. Skip children che hanno già
   il loro position (es. .fm-card--modal usa position:fixed). */
body.fm-shell > *:not(.fm-card--modal) { position: relative; z-index: 10000; }

/* Modal-shell: dim backdrop + centered card. Activate by setting
   body class="fm-shell fm-shell--modal" on auth/error pages. */
body.fm-shell--modal::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    pointer-events: none;
}

.fm-card {
    background: var(--fm-c-surface);
    padding: var(--fm-space-8);
    border-radius: var(--fm-radius-lg);
    box-shadow: var(--fm-shadow-lg);
    width: min(440px, 92vw);
    box-sizing: border-box;
    animation: fm-card-in .25s ease-out;
}

.fm-card--wide { width: min(1040px, 94vw); padding: var(--fm-space-6); }

/* Modal card variant: pinned center + above dim backdrop. */
.fm-card--modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
}

@keyframes fm-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fm-card--modal { animation: fm-modal-in .25s ease-out; }
@keyframes fm-modal-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.fm-title {
    margin: 0 0 var(--fm-space-4);
    font-size: 1.35rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
}

.fm-muted { color: var(--fm-c-muted); font-size: .9rem; }

.fm-label {
    display: block;
    margin: var(--fm-space-3) 0 var(--fm-space-1);
    font-size: .85rem;
    color: var(--fm-c-text-2);
    font-weight: 500;
}

.fm-input {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--fm-c-border);
    border-radius: var(--fm-radius-sm);
    font-size: 1rem;
    box-sizing: border-box;
    background: #fff;
    color: var(--fm-c-text);
}
.fm-input:focus {
    outline: 2px solid var(--fm-c-primary);
    outline-offset: 1px;
    border-color: var(--fm-c-primary);
}

.fm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    padding: .6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--fm-radius-sm);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, transform .08s;
    user-select: none;
}
.fm-btn:hover     { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fm-btn:active    { transform: translateY(1px); }
.fm-btn:focus-visible { outline: 2px solid var(--fm-c-primary); outline-offset: 2px; }
.fm-btn--primary  { background: var(--fm-c-primary); color: #fff; }
.fm-btn--primary:hover { background: var(--fm-c-primary-d); }
.fm-btn--danger   { background: var(--fm-c-danger);  color: #fff; }
.fm-btn--danger:hover  { background: #a5203c; }
.fm-btn--ghost    { background: transparent; color: var(--fm-c-text-2); border-color: var(--fm-c-border); }
.fm-btn--ghost:hover { background: var(--fm-c-bg); color: var(--fm-c-text); }
.fm-btn--full     { width: 100%; margin-top: var(--fm-space-4); }
.fm-btn--sm       { padding: .35rem .7rem; font-size: .85rem; }

.fm-alert {
    padding: var(--fm-space-3) var(--fm-space-4);
    border-radius: var(--fm-radius-sm);
    margin: var(--fm-space-2) 0;
    font-size: .9rem;
    border-left: 4px solid transparent;
}
.fm-alert--error    { background: #fee; color: #8a1a2b; border-color: var(--fm-c-danger); }
.fm-alert--warning  { background: #fff7e6; color: #8a4b07; border-color: var(--fm-c-warning); }
.fm-alert--success  { background: #e9f6ec; color: #1b5c2b; border-color: var(--fm-c-success); }
.fm-alert--info     { background: #e7f0fb; color: #0a3972; border-color: var(--fm-c-primary); }

.fm-status {
    display: inline-block;
    padding: .15rem var(--fm-space-2);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fm-status[data-role="administrator"],
.fm-status[data-role="admin"]        { background: #fde8ec; color: var(--fm-c-danger); }
.fm-status[data-role="collaborator"] { background: #e7f0fb; color: var(--fm-c-primary); }
.fm-status[data-role="student"]      { background: #e9f6ec; color: var(--fm-c-success); }
.fm-status[data-role="guest"]        { background: #eef1f6; color: var(--fm-c-muted); }

.fm-grid { display: grid; gap: var(--fm-space-4); }
.fm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.fm-tile {
    padding: var(--fm-space-4);
    background: var(--fm-c-bg);
    border: 1px solid var(--fm-c-border);
    border-radius: var(--fm-radius-sm);
}
.fm-tile h3 { margin: 0 0 var(--fm-space-2); font-size: 1rem; }
.fm-tile .fm-big { font-size: 1.6rem; font-weight: 700; color: var(--fm-c-primary); }

.fm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.fm-table th, .fm-table td {
    text-align: left;
    padding: var(--fm-space-2) var(--fm-space-3);
    border-bottom: 1px solid var(--fm-c-border);
}
.fm-table th { background: var(--fm-c-bg); font-weight: 600; color: var(--fm-c-text-2); }
.fm-table tr:hover td { background: #fafbfd; }

.fm-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .85rem;
    background: #f3f4f7;
    padding: .1em .35em;
    border-radius: 3px;
}

.fm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-space-4);
    margin-bottom: var(--fm-space-6);
    padding-bottom: var(--fm-space-3);
    border-bottom: 1px solid var(--fm-c-border);
    flex-wrap: wrap;
}
.fm-topbar h1 { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: var(--fm-space-2); }
.fm-tb-actions { display: flex; align-items: center; gap: var(--fm-space-2); flex-wrap: wrap; }

.fm-link { color: var(--fm-c-primary); text-decoration: none; font-weight: 500; }
.fm-link:hover { text-decoration: underline; }

/* Breadcrumb / back navigation */
.fm-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--fm-space-2);
    font-size: .85rem;
    color: var(--fm-c-muted);
    margin: 0 0 var(--fm-space-4);
}
.fm-breadcrumb a { color: var(--fm-c-primary); text-decoration: none; }
.fm-breadcrumb a:hover { text-decoration: underline; }
.fm-bc-sep { color: var(--fm-c-border); }

/* Back link */
.fm-back {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-1);
    color: var(--fm-c-text-2);
    text-decoration: none;
    font-size: .9rem;
    padding: .35rem .7rem;
    border-radius: var(--fm-radius-sm);
    transition: background .15s;
}
.fm-back:hover { background: var(--fm-c-bg); color: var(--fm-c-primary); }
.fm-back::before { content: "←"; font-weight: bold; }

/* Responsive adjustments */
@media (max-width: 640px) {
    .fm-card { padding: var(--fm-space-6); }
    .fm-card--wide { padding: var(--fm-space-4); }
    .fm-topbar { flex-direction: column; align-items: stretch; }
    .fm-topbar h1 { font-size: 1.1rem; }
    .fm-tb-actions { justify-content: flex-start; }
}