/* Flowbyd — shared UI pieces (brand, modals, toasts, buttons).
   Brand colours: blue #0066ff · sky #38bdf8 · ice #b7e9fd · violet #6c5cfd · ink #0e1b3d
   Fonts (free, open licence): Plus Jakarta Sans for text, Outfit for headings and the wordmark. */
:root{--fb-font:"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;--fb-head:Outfit,"Plus Jakarta Sans","Segoe UI",Arial,sans-serif}
.fbword{font:700 23px/1 var(--fb-head);letter-spacing:-.02em;color:#0e1b3d;white-space:nowrap}
.fbword b{font-weight:700;background:linear-gradient(90deg,#1a8cff,#38c6fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.fbicon{display:block;flex:none;border-radius:24%;box-shadow:0 4px 12px rgba(0,102,255,.28)}
.fbmodal{position:fixed;inset:0;background:rgba(14,27,61,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.fbcard{background:#fff;border-radius:18px;width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.25);color:#0e1b3d;font:13.5px/1.5 var(--fb-font);-webkit-user-select:text;user-select:text}
.fbcard-h{display:flex;align-items:center;padding:16px 20px 8px}.fbcard-h h2{margin:0;font:600 18px var(--fb-head);flex:1}
.fbx{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#66728f;padding:2px 6px;border-radius:6px}.fbx:hover{background:#f0f4fa}
.fbcard-b{padding:6px 20px 12px;overflow:auto}.fbcard-b p{margin:4px 0 12px}
.fbcard-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid #eef2f8}
.fbbtn{border:1px solid #e1e6f0;background:#fff;border-radius:10px;padding:8px 15px;transition:background .15s,border-color .15s,box-shadow .15s;cursor:pointer;font:inherit;font-weight:600;color:inherit;white-space:nowrap}
.fbbtn:hover{border-color:#0066ff}.fbbtn.primary{background:linear-gradient(180deg,#1a75ff,#0060f0);border-color:#0060f0;color:#fff;box-shadow:0 6px 14px rgba(0,102,255,.28)}.fbbtn.primary:hover{background:#0052d9}
.fbbtn.dark{background:#0e1b3d;border-color:#0e1b3d;color:#fff}.fbbtn.danger{background:#e5405a;border-color:#e5405a;color:#fff}
.fbbtn:disabled{opacity:.5;cursor:default}
.fblink{border:none;background:none;color:#0066ff;cursor:pointer;font:inherit;padding:2px 4px}.fblink.danger{color:#c42a43}
.fblabel{display:block;font-size:12px;color:#3b4a6b;margin:4px 0 5px}
.fbinput,.fbsel{height:38px;border:1px solid #e1e6f0;border-radius:10px;padding:0 10px;font:inherit;color:inherit;background:#fff;outline:none;min-width:0}
.fbinput{width:100%}.fbinput:focus,.fbsel:focus{border-color:#0066ff;box-shadow:0 0 0 4px rgba(0,102,255,.12)}
.fbform{display:flex;gap:8px;margin-bottom:12px}.fbform .fbinput{flex:1}
.fblist{display:flex;flex-direction:column;gap:2px}
.fbrow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px}.fbrow:hover{background:#f6f8fc}.fbrow>div:first-child{flex:1;min-width:0}
.fbrow-r{display:flex;align-items:center;gap:6px}
.fbmuted{color:#66728f;font-size:12px}.fberr{color:#c42a43}
#fbToasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:300;pointer-events:none}
.fbtoast{background:#0e1b3d;color:#fff;padding:10px 18px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.2);font:13px var(--fb-font);transition:opacity .3s,transform .3s;max-width:80vw}
.fbtoast.err{background:#c42a43}.fbtoast.ok{background:#0b7a50}.fbtoast.out{opacity:0;transform:translateY(8px)}

/* ===================== Dark mode =====================
   Switched on by shared/theme.js (<html data-theme="dark">). Same layout, only colours change.
   Dark palette: page #0b1220 · panels #111a2e / #16213a · lines #26324f · text #e6ecf8 / #9aa8c7 · blue #3b8bff */
html[data-theme=dark]{color-scheme:dark;--bg:#0b1220;--ink:#e6ecf8;--muted:#9aa8c7;--line:#26324f;--panel:#111a2e;--accent:#3b8bff;--accent-soft:rgba(59,139,255,.16)}
html[data-theme=dark] body{background:var(--bg);color:var(--ink)}
html[data-theme=dark] .fbword{color:#e6ecf8}
html[data-theme=dark] .fbmodal{background:rgba(0,0,0,.6)}
html[data-theme=dark] .fbcard{background:#111a2e;color:#e6ecf8;box-shadow:0 20px 50px rgba(0,0,0,.6)}
html[data-theme=dark] .fbx{color:#9aa8c7}html[data-theme=dark] .fbx:hover{background:#1c2846}
html[data-theme=dark] .fbcard-f{border-top-color:#26324f}
html[data-theme=dark] .fbbtn{background:#16213a;border-color:#2a3757;color:#e6ecf8}
html[data-theme=dark] .fbbtn:hover{border-color:#3b8bff}
html[data-theme=dark] .fbbtn.primary{background:linear-gradient(180deg,#1a75ff,#0060f0);color:#fff;border-color:#1a75ff}html[data-theme=dark] .fbbtn.primary:hover{background:#0052d9}
html[data-theme=dark] .fbbtn.danger{background:#e5405a;border-color:#e5405a;color:#fff}
html[data-theme=dark] .fbbtn.dark{background:#e6ecf8;border-color:#e6ecf8;color:#0b1220}
html[data-theme=dark] .fblink{color:#6aa8ff}html[data-theme=dark] .fblink.danger,html[data-theme=dark] .fberr{color:#ff8094}
html[data-theme=dark] .fblabel{color:#b6c2e2}html[data-theme=dark] .fbmuted{color:#9aa8c7}
html[data-theme=dark] .fbinput,html[data-theme=dark] .fbsel{background:#0f1729;border-color:#2a3757;color:#e6ecf8}
html[data-theme=dark] .fbinput:focus,html[data-theme=dark] .fbsel:focus{border-color:#3b8bff;box-shadow:0 0 0 4px rgba(59,139,255,.2)}
html[data-theme=dark] .fbrow:hover{background:#16213a}
html[data-theme=dark] .fbtoast{background:#e6ecf8;color:#0b1220}html[data-theme=dark] .fbtoast.err{background:#c42a43;color:#fff}html[data-theme=dark] .fbtoast.ok{background:#0b7a50;color:#fff}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#7383a8}

/* home page (index.html) */
html[data-theme=dark] header{background:rgba(17,26,46,.92);border-bottom-color:#26324f}
html[data-theme=dark] #search{background-color:#0f1729;border-color:#2a3757;color:#e6ecf8}
html[data-theme=dark] #search:focus{background-color:#111a2e;border-color:#3b8bff}
html[data-theme=dark] .userchip:hover{background:#16213a;border-color:#2a3757}
html[data-theme=dark] .rolebadge{background:rgba(59,139,255,.18);color:#8cbcff}html[data-theme=dark] .rolebadge.super_admin{background:#e6ecf8;color:#0b1220}
html[data-theme=dark] #side{border-right:1px solid #1a2440}
html[data-theme=dark] .card{background:#111a2e;border-color:#26324f}
html[data-theme=dark] .card:hover{border-color:#3b5a9a;box-shadow:0 14px 30px rgba(0,0,0,.45)}
html[data-theme=dark] .thumb{background-color:#0f1729;background-image:radial-gradient(#22304f 1px,transparent 1px);border-bottom-color:#26324f}
html[data-theme=dark] .cmenu:hover{background:#1c2846;color:#e6ecf8}
html[data-theme=dark] .tag{background:#1c2846;color:#b6c2e2}html[data-theme=dark] .tag.view{background:rgba(245,146,16,.16);color:#ffc078}html[data-theme=dark] .tag.del{background:rgba(229,64,90,.18);color:#ff8094}
html[data-theme=dark] .newcard{background:#0f1729;border-color:#2c4170;color:#6aa8ff}html[data-theme=dark] .newcard:hover{background:#13203d;border-color:#3b8bff}
html[data-theme=dark] .empty{background:#111a2e;border-color:#26324f}
html[data-theme=dark] table{background:#111a2e;border-color:#26324f}
html[data-theme=dark] th{background:#0f1729;color:#9aa8c7}
html[data-theme=dark] th,html[data-theme=dark] td{border-bottom-color:#1f2a45}
html[data-theme=dark] tbody tr:hover td{background:#14203a}
html[data-theme=dark] .panel{background:#111a2e;border-color:#26324f}
html[data-theme=dark] .popmenu{background:#16213a;border-color:#2a3757;box-shadow:0 14px 34px rgba(0,0,0,.5)}
html[data-theme=dark] .popmenu button{color:#e6ecf8}html[data-theme=dark] .popmenu button:hover{background:#1f2c4b}html[data-theme=dark] .popmenu button.danger{color:#ff8094}
html[data-theme=dark] .filter{background:#0f1729;border-color:#2a3757;color:#e6ecf8}
html[data-theme=dark] code{background:#1c2846;color:#cfe0ff}
html[data-theme=dark] .cochip{background:#16213a;border-color:#2a3757;color:#b6c2e2}
html[data-theme=dark] .onbox{background:#111a2e;border-color:#26324f}html[data-theme=dark] .onnote{background:#16213a;color:#b6c2e2}
html[data-theme=dark] .keyout{background:rgba(18,161,107,.12);border-color:#12a16b}
html[data-theme=dark] .mbrand .fbword{color:#e6ecf8}

/* Owner Portal (owner.html) */
html[data-theme=dark] .tabs{background:#111a2e;border-bottom-color:#26324f}
html[data-theme=dark] .kpi,html[data-theme=dark] .tablewrap,html[data-theme=dark] .privacy{background:#111a2e;border-color:#26324f}
html[data-theme=dark] .act{background:#16213a;border-color:#2a3757;color:#e6ecf8}
html[data-theme=dark] .plan{background:rgba(59,139,255,.18);color:#8cbcff}
html[data-theme=dark] .st.active{background:rgba(18,161,107,.18);color:#5fe0aa}html[data-theme=dark] .st.paused{background:rgba(245,146,16,.16);color:#ffc078}html[data-theme=dark] .st.deleted{background:rgba(229,64,90,.18);color:#ff8094}
html[data-theme=dark] .kpi.good .v{color:#5fe0aa}html[data-theme=dark] .kpi.warn .v{color:#ffc078}

/* ===================== Version 2: bell, comments, review ===================== */
.fbbell{position:relative;width:38px;height:38px;border:1px solid transparent;border-radius:10px;background:transparent;color:inherit;display:inline-grid;place-items:center;cursor:pointer;padding:0}
.fbbell:hover{border-color:var(--line,#e1e6f0)}
.fbbell svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fbbell-n:not(:empty){position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e5405a;color:#fff;font:700 10.5px/17px var(--fb-font);text-align:center;box-shadow:0 0 0 2px var(--panel,#fff)}
.fbnotif{position:fixed;z-index:420;width:min(380px,calc(100vw - 16px));max-height:min(520px,80vh);display:flex;flex-direction:column;background:#fff;color:#0e1b3d;border:1px solid #e1e6f0;border-radius:14px;box-shadow:0 18px 44px rgba(14,27,61,.2);font:13.5px/1.45 var(--fb-font);overflow:hidden}
.fbnotif-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef2f8}
.fbnotif-l{overflow:auto}
.fbnotif-i{display:flex;gap:10px;padding:11px 14px;color:inherit;text-decoration:none;border-bottom:1px solid #f2f5fa}
.fbnotif-i:hover{background:#f5f8fd}.fbnotif-i.new{background:#eef4ff}
.fbnotif-av{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6c5cfd);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11.5px}
.fbnotif-av i{position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;background:#fff;color:#0066ff;font:700 10px/17px Arial;text-align:center;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fbnotif-t{display:flex;flex-direction:column;gap:2px;min-width:0}.fbnotif-t small{color:#66728f;font-size:11.5px}
.fbnotif-b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#3b4a6b!important}
/* comments panel (editor) */
.cpanel{position:fixed;z-index:30;top:56px;right:0;bottom:42px;width:min(370px,100vw);display:flex;flex-direction:column;background:var(--panel,#fff);color:var(--ink,#0e1b3d);border-left:1px solid var(--line,#e1e6f0);box-shadow:-10px 0 30px rgba(14,27,61,.08);transform:translateX(105%);transition:transform .18s;font:13.5px/1.45 var(--fb-font)}
.cpanel.show{transform:none}
.cp-h{display:flex;align-items:center;gap:8px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line,#e1e6f0)}.cp-h b{font:600 16px var(--fb-head)}
.cp-tabs{display:flex;gap:2px;margin-left:auto;background:var(--bg,#f3f6fb);border-radius:9px;padding:2px}
.cp-tabs button{border:0;background:transparent;color:var(--muted,#66728f);font:600 12px var(--fb-font);padding:5px 9px;border-radius:7px;cursor:pointer}
.cp-tabs button.on{background:var(--panel,#fff);color:var(--ink,#0e1b3d);box-shadow:0 1px 3px rgba(14,27,61,.12)}
.cp-list{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.cp-empty{color:var(--muted,#66728f);padding:30px 10px;text-align:center}
.cp-t{border:1px solid var(--line,#e1e6f0);border-radius:12px;padding:10px 12px;background:var(--panel,#fff)}
.cp-t.focus{border-color:#6c5cfd;box-shadow:0 0 0 3px rgba(108,92,253,.15)}.cp-t.done{opacity:.75}
.cp-where{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#66728f);margin-bottom:6px}.cp-where .fblink{margin-left:auto;font-size:12px;font-weight:600}
.cp-on{border:0;background:#efecff;color:#4c3fd1;border-radius:6px;padding:1px 7px;font:600 12px var(--fb-font);cursor:pointer;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm{padding:4px 0}.cm.reply{margin-left:22px;padding-left:10px;border-left:2px solid var(--line,#e1e6f0);margin-top:6px}
.cm-h{display:flex;align-items:center;gap:7px;font-size:13px}.cm-h .fbmuted{font-size:11.5px}
.cm-av{width:24px;height:24px;flex:none;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#6c5cfd);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-size:10px}
.cm-b{margin:4px 0 2px 31px;white-space:normal;word-wrap:break-word}.cm-b .mention{color:#0066ff;font-weight:600}
.cm-a{margin-left:27px;display:flex;gap:2px}.cm-a .fblink{font-size:12px}
.cp-new{border-top:1px solid var(--line,#e1e6f0);padding:10px 12px 12px}
.cp-anchor{font-size:12px;color:var(--muted,#66728f);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-anchor b{color:var(--ink,#0e1b3d)}
.cp-box{position:relative}
.cp-box textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#e1e6f0);border-radius:10px;padding:8px 10px;font:inherit;color:inherit;background:var(--panel,#fff);resize:vertical;outline:none}
.cp-box textarea:focus{border-color:#0066ff;box-shadow:0 0 0 3px rgba(0,102,255,.12)}
.cp-send{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.cp-send .fbmuted{font-size:11.5px}
.cp-reply{margin:8px 0 0 22px}
.cp-sug{position:absolute;left:0;right:0;bottom:calc(100% + 4px);z-index:5;background:var(--panel,#fff);border:1px solid var(--line,#e1e6f0);border-radius:10px;box-shadow:0 10px 26px rgba(14,27,61,.16);padding:4px;max-height:230px;overflow:auto}
.cp-sug button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer}
.cp-sug button.on,.cp-sug button:hover{background:#eef4ff}.cp-sug small{display:block;color:var(--muted,#66728f);font-size:11px}
/* review & approval dialog */
.rv-top{margin-bottom:10px}
.rv-st{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:10px;background:#f0f4fa;color:#3b4a6b}
.rv-st.in_review,.rv-st.pending{background:#fff4e0;color:#a35a00}.rv-st.approved{background:#e3f8ee;color:#0b7a50}.rv-st.changes_requested{background:#ffe8eb;color:#c42a43}.rv-st.changed{background:#fff4c2;color:#7a5a00}
.rv-box{border:1px solid #e1e6f0;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.rv-ta{height:auto;padding:8px 10px;resize:vertical}
.rv-btns{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.rv-note{margin-top:6px;padding:6px 10px;border-left:3px solid #0066ff;background:#f5f8fd;border-radius:0 8px 8px 0;white-space:pre-wrap}
.rv-hh{margin:6px 0 8px;font:600 14px var(--fb-head)}
.rv-hist{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow:auto}
.rv-h{display:flex;gap:10px;align-items:flex-start}.rv-h .rv-st{flex:none;margin-top:2px}
.dstat{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:10px;margin-left:4px}
.dstat.in_review{background:#fff4e0;color:#a35a00}.dstat.approved{background:#e3f8ee;color:#0b7a50}.dstat.changes_requested{background:#ffe8eb;color:#c42a43}.dstat.changed{background:#fff4c2;color:#7a5a00}.dstat.tpl{background:#efecff;color:#4c3fd1}
/* dark mode for the above */
html[data-theme=dark] .fbnotif{background:#16213a;color:#e6ecf8;border-color:#2a3757;box-shadow:0 18px 44px rgba(0,0,0,.55)}
html[data-theme=dark] .fbnotif-h{border-bottom-color:#26324f}html[data-theme=dark] .fbnotif-i{border-bottom-color:#1f2a45}
html[data-theme=dark] .fbnotif-i:hover{background:#1c2846}html[data-theme=dark] .fbnotif-i.new{background:#18284a}
html[data-theme=dark] .fbnotif-t small{color:#9aa8c7}html[data-theme=dark] .fbnotif-b{color:#b6c2e2!important}
html[data-theme=dark] .cp-on{background:rgba(108,92,253,.22);color:#c4b5fd}
html[data-theme=dark] .cp-sug button.on,html[data-theme=dark] .cp-sug button:hover{background:#1f2c4b}
html[data-theme=dark] .cm-b .mention{color:#6aa8ff}
html[data-theme=dark] .rv-box{border-color:#26324f}html[data-theme=dark] .rv-note{background:#16213a}
html[data-theme=dark] .rv-st{background:#1c2846;color:#b6c2e2}
html[data-theme=dark] .rv-st.in_review,html[data-theme=dark] .rv-st.pending,html[data-theme=dark] .dstat.in_review{background:rgba(245,146,16,.16);color:#ffc078}
html[data-theme=dark] .rv-st.approved,html[data-theme=dark] .dstat.approved{background:rgba(18,161,107,.18);color:#5fe0aa}
html[data-theme=dark] .rv-st.changes_requested,html[data-theme=dark] .dstat.changes_requested{background:rgba(229,64,90,.18);color:#ff8094}
html[data-theme=dark] .rv-st.changed,html[data-theme=dark] .dstat.changed{background:rgba(217,164,14,.18);color:#ffd866}
html[data-theme=dark] .dstat.tpl{background:rgba(108,92,253,.22);color:#c4b5fd}
@media (max-width:700px){.cpanel{top:0;bottom:0}}
/* dropdowns: our own arrow, always inside the box (Safari/Mac drew the native arrow on the border) */
.fbsel{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2366728f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;cursor:pointer;text-overflow:ellipsis}
html[data-theme=dark] .fbsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa8c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}