/* css/theme.css - the Belicit look: ink background with a soft aurora, rounded panels, ring accent colours.
   Loaded after Tailwind and css/mobile.css. Only appearance is changed here, never behaviour. */

:root {
    --ink: #06070b;
    --panel: #0c0f16;
    --panel-2: #121722;
    --panel-3: #181e2c;
    --line: #1a2030;
    --line-2: #262e42;
    --text: #e8ebf3;
    --muted: #8a93a8;
    --blue: #60a5fa;
    --green: #4ade80;
    --violet: #c084fc;
    --grad: linear-gradient(135deg, #60a5fa 0%, #4ade80 100%);
}

html { background: var(--ink); }
body.bg-black {
    background:
        radial-gradient(900px 520px at 6% -8%, rgba(96, 165, 250, .11), transparent 62%),
        radial-gradient(820px 520px at 100% 0%, rgba(192, 132, 252, .09), transparent 62%),
        radial-gradient(760px 520px at 62% 112%, rgba(74, 222, 128, .07), transparent 62%),
        var(--ink);
    background-attachment: fixed;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--text);
}
body h1, body h2, body h3 { font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif; letter-spacing: -.015em; }
::selection { background: rgba(96, 165, 250, .35); }
body a:focus-visible, body button:focus-visible, body input:focus-visible, body textarea:focus-visible, body select:focus-visible {
    outline: 2px solid rgba(96, 165, 250, .7); outline-offset: 2px;
}

/* ---- palette: the colour classes the pages already use ---- */
body .bg-black { background-color: var(--ink); }
body .bg-black\/80, body .bg-black\/70, body .bg-black\/90 { background-color: rgba(6, 7, 11, .78); }
body .bg-gray-950, body .bg-gray-950\/50, body .bg-gray-950\/60 { background-color: var(--panel); }
body .bg-gray-900 { background-color: var(--panel-2); }
body .bg-gray-800 { background-color: var(--panel-3); }
body .bg-gray-700 { background-color: #222a3d; }
body .border-gray-800 { border-color: var(--line); }
body .border-gray-700 { border-color: var(--line-2); }
body .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
body .text-gray-300 { color: #c4cad8; }
body .text-gray-400 { color: #9aa3b8; }
body .text-gray-500 { color: var(--muted); }
body .hover\:bg-gray-900:hover, body .hover\:bg-gray-950\/50:hover, body .hover\:bg-gray-950\/60:hover { background-color: var(--panel-2); }
body .hover\:bg-gray-800:hover { background-color: var(--panel-3); }

/* main buttons use the ring gradient */
body .bg-blue-500, body .bg-blue-600 { background: var(--grad); color: #04140a; }
body .hover\:bg-blue-600:hover { background: var(--grad); filter: brightness(1.08); }
body .text-blue-400, body .text-blue-500 { color: var(--blue); }
body .border-blue-500, body .focus\:border-blue-500:focus { border-color: var(--blue); }
body .bg-blue-950\/40 { background-color: rgba(96, 165, 250, .08); }
body .hover\:bg-blue-900\/50:hover { background-color: rgba(96, 165, 250, .13); }
body .border-l-blue-500 { border-left-color: var(--blue); }

/* ---- wide screens: floating side panel, cards in the middle ---- */
@media (min-width: 768px) {
    body div.max-w-7xl { gap: 14px; padding: 0 14px; }
    body div.max-w-7xl > header {
        top: 14px; height: calc(100vh - 28px); margin: 14px 0; padding: 20px 14px;
        background: linear-gradient(180deg, var(--panel), #0a0d13);
        border: 1px solid var(--line); border-radius: 28px;
    }
    body div.max-w-7xl > main { border-right: 0; border-left: 0; }
    body div.max-w-7xl > main .sticky.top-0 {
        margin: 0 4px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px;
        background: rgba(6, 7, 11, .78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
}

/* logo */
header a[title="Belicit home"] h1 {
    position: relative; padding-left: 2.2rem; font-size: 1.7rem; line-height: 1.2;
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
header a[title="Belicit home"] h1::before {
    content: ""; position: absolute; left: .45rem; top: 50%; width: 1.4rem; height: 1.4rem; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='8' fill='%2360a5fa'/%3E%3Ccircle cx='32' cy='32' r='16' fill='none' stroke='%234ade80' stroke-width='4'/%3E%3Ccircle cx='32' cy='32' r='26' fill='none' stroke='%23c084fc' stroke-width='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* side panel menu */
header nav a[href] { border-radius: 16px; padding: .8rem 1rem; color: var(--muted); font-weight: 600; transition: background .15s, color .15s; }
header nav a[href]:hover { background: var(--panel-2); color: var(--text); }
header nav a[href].bg-gray-900:not(#admin-control-nav) {
    background: linear-gradient(90deg, rgba(96, 165, 250, .18), rgba(74, 222, 128, .05));
    color: #fff; box-shadow: inset 3px 0 0 var(--blue);
}
header nav a[href] svg { width: 1.4rem; height: 1.4rem; }
header nav a#admin-control-nav { background: rgba(192, 132, 252, .09); color: var(--violet); }
#sidebar-user-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 10px 12px; }

/* ---- feed ---- */
.seg-tabs {
    margin: 14px 14px 6px; padding: 5px; gap: 4px;
    border: 1px solid var(--line); border-radius: 9999px; background: var(--panel);
}
.seg-tabs .feed-tab[type="button"], #profile-tabs .profile-tab[data-tab] {
    border: 0; border-radius: 9999px; padding: .55rem 0; color: var(--muted); transition: background .15s, color .15s;
}
.seg-tabs .feed-tab.border-blue-500, #profile-tabs .profile-tab.border-blue-500 {
    background: var(--panel-3); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 22px rgba(96, 165, 250, .12);
}
#profile-tabs { margin: 12px 14px 6px; padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 9999px; background: var(--panel); }

.composer-box.p-4 {
    margin: 12px 14px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel);
    transition: border-color .2s, box-shadow .2s;
}
.composer-box:focus-within { border-color: rgba(96, 165, 250, .45); box-shadow: 0 0 0 4px rgba(96, 165, 250, .08); }
.composer-box textarea { font-size: 1.05rem; }

.post-card-item, main article.p-4 {
    margin: 10px 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel);
    transition: border-color .18s, background .18s, transform .18s;
    animation: belIn .28s ease both;
}
.post-card-item:hover, main article.p-4:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-1px); }
.post-card-item img.rounded-full, main article.p-4 img.rounded-full { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px rgba(96, 165, 250, .3); }
@keyframes belIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .post-card-item, main article.p-4 { animation: none; } }

.comment-trigger, .repost-modal-trigger, .like-btn, .pf-repost, .pf-like, .pf-reply {
    padding: .35rem .65rem; border-radius: 9999px; transition: background .15s, color .15s;
}
.comment-trigger:hover, .repost-modal-trigger:hover, .like-btn:hover, .pf-repost:hover, .pf-like:hover, .pf-reply:hover { background: rgba(255, 255, 255, .055); }

/* right column */
aside .rounded-2xl { border-radius: 22px; }
aside .bg-gray-900.rounded-2xl, aside .bg-gray-900.border { background: var(--panel); border: 1px solid var(--line); }
#sidebar-user-search { border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }

/* notifications */
#notifications-container { padding: 8px 0 24px; }
#notifications-container > div { margin: 8px 14px; border: 1px solid var(--line); border-radius: 18px; }

/* settings */
body .s-card { background: var(--panel); border-color: var(--line); border-radius: 22px; }
body .settings-tab[aria-selected="true"] { border-bottom-color: var(--blue); }

/* ---- phones: same look, tighter ---- */
@media (max-width: 767px) {
    .seg-tabs, #profile-tabs { margin: 10px 8px 4px; }
    .composer-box.p-4 { margin: 8px; padding: 14px; }
    .post-card-item, main article.p-4 { margin: 8px; padding: 14px; border-radius: 20px; }
    .m-topbar, .m-bottomnav { background: rgba(6, 7, 11, .9); border-color: var(--line); }
    .m-bottomnav .is-on { color: var(--blue); }
    .m-topbar .m-logo { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .m-avatar { background: var(--panel-3); }
    #loc-scope { max-width: 11rem; }
    body.m-ready div.max-w-7xl > header { background: linear-gradient(180deg, var(--panel), #090c12); }
    #notifications-container > div { margin: 8px; }
}

/* composer: the bottom row wraps instead of running off the screen */
.composer-box > .flex-1 > div:last-child { flex-wrap: wrap; row-gap: .6rem; }
.composer-box > .flex-1 > div:last-child > div:first-child { flex-wrap: wrap; row-gap: .4rem; }
.composer-box select { max-width: 100%; }