/* Brand display face — same as the homepage hero/headings (Sora) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

/* ============================================================
   AlbGIS — App polish layer (subpage tools)
   Loaded AFTER each page's inline <style>, so it refines the
   shared look without touching layout. Built on the
   ui-design-taste + emil-kowalski-design heuristics:
   - softer layered depth instead of hard borders
   - calm accent focus rings, fast ease-out micro-motion
   - quieter scrollbars, tidy selection, reduced-motion safe
   Palette matches assets/style.css design tokens.
   ============================================================ */

:root {
    --rd-accent:     #f0476a;
    --rd-accent-2:   #35d6c5;
    --rd-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --rd-shadow:     0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.30);
}

::selection { background: rgba(240,71,106,.30); color: #fff; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Quiet, modern scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: #2a3140 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #2a3140;
    border: 2px solid transparent;
    border-radius: 99px;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3a4250; background-clip: padding-box; }

/* ---- Depth on the work surfaces (shadows > borders) ---- */
.card, .panel {
    box-shadow: var(--rd-shadow);
    border: 1px solid rgba(255,255,255,.06);
    transition: box-shadow .22s var(--rd-ease),
                border-color .22s var(--rd-ease);
}

/* ---- Inputs: calm accent focus ring instead of a hard border flip ---- */
input, select, textarea {
    transition: border-color .13s var(--rd-ease),
                box-shadow .13s var(--rd-ease),
                background .13s var(--rd-ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--rd-accent) !important;
    box-shadow: 0 0 0 3px rgba(240,71,106,.18);
}

/* ---- Buttons: subtle press + lift, fast ease-out ---- */
button {
    transition: background .15s var(--rd-ease),
                box-shadow .15s var(--rd-ease),
                filter .15s var(--rd-ease),
                transform .12s var(--rd-ease);
}
button:not(:disabled):active { transform: translateY(1px); }
#btn-report:not(:disabled):hover,
button.calc-btn:not(:disabled):hover,
.btn-primary:not(:disabled):hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(240,71,106,.28);
}

/* ---- Links / back-link affordance ---- */
.back-link { transition: color .13s var(--rd-ease); }
.back-link:hover { color: var(--rd-accent) !important; }

/* ============================================================
   Unify subpage chrome with the homepage
   The homepage has an ambient atmosphere, soft accent
   treatments and a Sora display face. The tool pages were
   flat #0e1016 with a hard 2px pink slab on the sidebar /
   page title. These rules (loaded last) bring every tool up
   to the homepage's level without touching page layout.
   ============================================================ */

/* ---- Shared ambient atmosphere (same as homepage body) ---- */
body {
    background-image:
        radial-gradient(900px 500px at 12% -8%, rgba(240,71,106,.10), transparent 60%),
        radial-gradient(800px 600px at 100% 0%, rgba(70,120,240,.07), transparent 55%);
    background-attachment: fixed;
}

/* ---- Sidebar: drop the hard pink slab for a calm hairline ---- */
#sidebar,
#sidebar-head {
    border-right-color: rgba(255,255,255,.07);
}
#sidebar {
    border-right-width: 1px;
    border-right-style: solid;
}

/* ---- Page title: hairline divider + short gradient accent bar ---- */
/* Titulli i faqes është <h1> (për SEO); h2 mbahet për përputhshmëri me faqet e vjetra. */
#sidebar h1,
#sidebar-head h1,
#sidebar h2,
#sidebar-head h2 {
    position: relative;
    font-family: 'Sora', 'Inter', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding-bottom: 11px;
}
#sidebar h1::after,
#sidebar-head h1::after,
#sidebar h2::after,
#sidebar-head h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 44px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-2));
}

/* ---- Mobile: soften the stacked-sidebar accent border too ---- */
@media (max-width: 768px) {
    #sidebar {
        border-bottom-color: rgba(255,255,255,.07) !important;
        border-bottom-width: 1px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}