/* home.skola.digital: layout and components not present in the compiled Metronic CSS. */

:root {
    --sd-ok: #16a34a;
    --sd-off: #9ca3af;
    --sd-error-bg: #fef2f2;
    --sd-error-fg: #b91c1c;
    --sd-error-border: #fecaca;
    --sd-success-bg: #f0fdf4;
    --sd-success-fg: #15803d;
    --sd-success-border: #bbf7d0;
    --sd-info-bg: #eff6ff;
    --sd-info-fg: #1e40af;
    --sd-info-border: #bfdbfe;
}
.dark {
    --sd-error-bg: rgba(220, 38, 38, .12);
    --sd-error-fg: #fca5a5;
    --sd-error-border: rgba(220, 38, 38, .35);
    --sd-success-bg: rgba(22, 163, 74, .12);
    --sd-success-fg: #86efac;
    --sd-success-border: rgba(22, 163, 74, .35);
    --sd-info-bg: rgba(37, 99, 235, .12);
    --sd-info-fg: #93c5fd;
    --sd-info-border: rgba(37, 99, 235, .35);
}

/* --- App shell --- */
header { height: var(--header-height); }
#sidebar-toggle { margin: -10px; }
#main-content-wrap { padding-top: var(--header-height-mobile); }
#context-topbar {
    position: sticky;
    top: var(--header-height-mobile);
    z-index: 5;
    min-height: var(--toolbar-height);
}

@media (min-width: 1024px) {
    #main-content-wrap {
        padding-top: var(--header-height);
        padding-left: calc(var(--rail-width) + var(--contextbar-width));
    }
    #context-topbar { top: var(--header-height); }
    #header-branding {
        width: calc(var(--contextbar-width) - 1px);
        flex: 0 0 var(--contextbar-width);
    }
}
@media (max-width: 1023px) {
    #header-brand-shell {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

.kt-dropdown-menu[data-kt-dropdown-menu] { min-width: 250px; }

.sd-logo-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--brand-color, #1d4ed8); color: #fff;
    font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
.sd-brand-mark { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--brand-color, #1d4ed8); }
.sd-brand-mark span { color: var(--foreground, inherit); opacity: .75; }
.sd-brand-mark-sm { font-size: 16px; }

.sd-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9999px; flex: 0 0 auto;
    background: var(--brand-color, #1d4ed8); color: #fff; font-weight: 600; font-size: 13px;
}
.sd-avatar-lg { width: 52px; height: 52px; font-size: 20px; }

.sd-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 6px; font-size: 14px;
    color: var(--foreground, inherit);
}
.sd-nav-link i { font-size: 16px; color: var(--muted-foreground, #6b7280); }
.sd-nav-link:hover { background: var(--muted, rgba(0,0,0,.04)); }
.sd-nav-link.active { background: var(--muted, rgba(0,0,0,.06)); font-weight: 600; }
.sd-nav-link.active i { color: var(--brand-color, #1d4ed8); }

/* --- Auth --- */
.sd-auth-card { max-width: 380px; }
.sd-auth-aside { background: linear-gradient(135deg, rgba(29, 78, 216, .08), rgba(29, 78, 216, .02)); }
.sd-auth-lead { max-width: 420px; font-size: 15px; line-height: 1.6; }
.sd-local-login summary { cursor: pointer; }
.sd-note { font-size: 13px; color: var(--secondary-foreground, #6b7280); text-align: center; }

/* --- Alerts --- */
.sd-alert { border: 1px solid; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.sd-alert-error { background: var(--sd-error-bg); color: var(--sd-error-fg); border-color: var(--sd-error-border); }
.sd-alert-success { background: var(--sd-success-bg); color: var(--sd-success-fg); border-color: var(--sd-success-border); }
.sd-alert-info { background: var(--sd-info-bg); color: var(--sd-info-fg); border-color: var(--sd-info-border); }

/* --- Grids --- */
.sd-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sd-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; transition: border-color .15s, box-shadow .15s; }
a.sd-tile:hover { border-color: var(--brand-color, #1d4ed8); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.sd-tile-icon { font-size: 26px; color: var(--brand-color, #1d4ed8); margin-bottom: 6px; }
.sd-tile-disabled { opacity: .6; }

.sd-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sd-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }

.sd-two-col { display: grid; gap: 20px; grid-template-columns: 1fr; }
.sd-detail { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) {
    .sd-two-col { grid-template-columns: 1fr 1fr; }
    .sd-detail { grid-template-columns: minmax(300px, 380px) 1fr; }
}

.sd-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.sd-filters label { min-width: 160px; }
.sd-filter-grow { flex: 1 1 220px; }

/* --- Misc --- */
.sd-table-scroll { overflow-x: auto; }
.sd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.sd-pre { white-space: pre-wrap; font-size: 13px; }
.sd-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 14px; }
.sd-dl dt { color: var(--secondary-foreground, #6b7280); }
.sd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; margin-right: 6px; vertical-align: middle; }
.sd-dot-ok { background: var(--sd-ok); }
.sd-dot-off { background: var(--sd-off); }
.sd-access-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-access-form .kt-input { max-width: 170px; }
.sd-history { display: flex; flex-direction: column; gap: 10px; }
.sd-history li { display: flex; flex-direction: column; gap: 2px; }
.sd-file { max-width: 340px; }

.sd-error-page {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
}

.sd-narrow { max-width: 480px; }