/* ============================================================================
   KPC Time — Features & Add-ons styles (v8.5.0). Loads after app.css.
   Scoped under .kfeat-* / .kf-* + dark-mode overrides.
   ========================================================================== */
:root{ --kf-accent:#1769e0; --kf-gold:#c8a24a; --kf-work:#e2ad1f; --kf-night:#3d82df; --kf-rest:#3fb473; --kf-holiday:#e5304a; }

/* toggle to hide the earlier quick-tools launcher when its feature is off */
.kf-hide-tools .kpc-tools-launcher{ display:none !important; }

/* ---- settings panel ---- */
.kfeat-settings{ margin-top:14px; border:1px solid color-mix(in srgb, var(--blue) 22%, var(--line)); }
.kfeat-settings::before{ content:""; position:absolute; inset:0 0 auto; height:4px; border-radius:var(--radius-xl,26px) var(--radius-xl,26px) 0 0; background:linear-gradient(90deg,#0b2340,#3f8ddb,#c8a24a); opacity:.9; }
.kfeat-settings{ position:relative; }
.kfeat-set-head h2{ margin:.2rem 0 .3rem; }
.kfeat-set-head .muted{ margin:0; }
.kfeat-toggle-list{ display:grid; gap:10px; margin-top:14px; }
.kfeat-toggle-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--line); border-radius:15px; background:var(--soft,rgba(15,40,80,.03)); }
.kfeat-toggle-icon{ width:38px; height:38px; display:grid; place-items:center; font-size:19px; border-radius:11px; background:color-mix(in srgb, var(--blue) 8%, var(--card)); }
.kfeat-toggle-copy b{ display:block; font-size:.92rem; }
.kfeat-toggle-copy small{ display:block; color:var(--muted); font-size:.74rem; margin-top:2px; line-height:1.5; }
.kfeat-switch{ position:relative; display:inline-block; width:46px; height:27px; flex:0 0 auto; }
.kfeat-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.kfeat-slider{ position:absolute; inset:0; border-radius:99px; background:color-mix(in srgb, var(--muted) 45%, transparent); transition:.2s; }
.kfeat-slider::before{ content:""; position:absolute; width:21px; height:21px; border-radius:50%; right:3px; top:3px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:.2s; }
.kfeat-switch input:checked + .kfeat-slider{ background:linear-gradient(120deg,#1769e0,#3f8ddb); }
.kfeat-switch input:checked + .kfeat-slider::before{ transform:translateX(-19px); }

/* ---- home grid ---- */
.kfeat-home{ margin:16px 0 4px; }
.kfeat-home-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.kfeat-home-kicker{ font-size:.7rem; font-weight:800; color:var(--kf-accent); letter-spacing:.3px; }
.kfeat-home-head h3{ margin:0; font-size:1.02rem; }
.kfeat-home-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:560px){ .kfeat-home-grid{ grid-template-columns:repeat(3,1fr); } }
.kfeat-tile{ display:flex; flex-direction:column; gap:4px; text-align:right; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--text); font:inherit; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; min-height:84px; }
.kfeat-tile:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow:0 10px 22px rgba(15,40,80,.09); }
.kfeat-tile-ic{ font-size:1.5rem; line-height:1; }
.kfeat-tile b{ font-size:.86rem; }
.kfeat-tile small{ font-size:.72rem; color:var(--muted); line-height:1.4; }

/* ---- modal ---- */
.kf-modal{ position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center; background:rgba(15,23,42,.44); padding:0; }
.kf-modal.open{ display:flex; }
@media(min-width:640px){ .kf-modal{ align-items:center; padding:16px; } }
.kf-modal-card{ width:100%; max-width:560px; background:var(--card); border-radius:24px 24px 0 0; max-height:92vh; overflow:auto; box-shadow:0 -8px 40px rgba(9,32,64,.28); }
@media(min-width:640px){ .kf-modal-card{ border-radius:22px; } }
.kf-modal-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--card); border-bottom:1px solid var(--line); }
.kf-modal-head h3{ margin:0; font-size:1.05rem; }
.kf-modal-x{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--soft,transparent); color:var(--text); font-size:1rem; cursor:pointer; }
.kf-modal-body{ padding:16px 18px 22px; }

/* ---- feature body building blocks ---- */
.kf-card{ }
.kf-card-title{ margin:0 0 12px; font-size:.98rem; }
.kf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
@media(max-width:460px){ .kf-grid2{ grid-template-columns:1fr; } }
.kf-modal-body label{ display:block; font-size:.8rem; font-weight:600; color:var(--text); }
.kf-modal-body label input, .kf-modal-body label select{ width:100%; margin-top:5px; padding:10px 11px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--text); font:inherit; }
.kf-btn{ margin-top:4px; }
.kf-out{ margin-top:14px; }
.kf-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.86rem; }
.kf-row span{ color:var(--muted); }
.kf-row b{ font-weight:800; }
.kf-hr{ border:0; border-top:1px solid var(--line); margin:8px 0; }
.kf-total{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:12px 14px; border-radius:14px; background:linear-gradient(120deg, color-mix(in srgb,var(--blue) 10%,var(--card)), var(--card)); border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line)); }
.kf-total span{ font-size:.82rem; color:var(--muted); font-weight:700; }
.kf-total b{ font-size:1.15rem; font-weight:900; }
.kf-note{ margin:12px 0 0; padding:10px 12px; border-radius:12px; background:color-mix(in srgb,var(--blue) 5%,var(--card)); border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line)); color:var(--muted); font-size:.76rem; line-height:1.7; }
.kf-bar{ height:9px; border-radius:99px; background:color-mix(in srgb,var(--muted) 20%,transparent); overflow:hidden; margin:6px 0; }
.kf-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1769e0,#3f8ddb); }

/* stats */
.kf-stat{ padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.kf-stat small{ display:block; color:var(--muted); font-size:.74rem; font-weight:700; }
.kf-stat b{ display:block; font-size:1.35rem; font-weight:900; margin-top:4px; letter-spacing:-.5px; }
.kf-statbars{ margin:12px 0 2px; display:grid; gap:10px; }
.kf-mb-head{ display:flex; justify-content:space-between; font-size:.78rem; font-weight:700; color:var(--muted); }
.kf-mb-head b{ color:var(--text); }

/* list rows (swap, family, habit list) */
.kf-list{ margin-top:12px; display:grid; gap:8px; }
.kf-li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.kf-li b{ font-size:.86rem; display:block; }
.kf-li small{ display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }
.kf-del{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--holiday,#e5304a); cursor:pointer; flex:0 0 auto; }
.kf-mini{ padding:5px 9px; border-radius:9px; border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line)); background:color-mix(in srgb,var(--blue) 8%,var(--card)); color:var(--kf-accent); font:inherit; font-size:.72rem; font-weight:700; cursor:pointer; margin-left:5px; }

/* swap balance */
.kf-bal-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); margin-bottom:7px; font-size:.84rem; }
.kf-bal-row b{ font-weight:800; }
.kf-bal-row.pos{ background:color-mix(in srgb,var(--kf-rest) 12%,var(--card)); border-color:color-mix(in srgb,var(--kf-rest) 35%,var(--line)); }
.kf-bal-row.neg{ background:color-mix(in srgb,var(--kf-holiday) 10%,var(--card)); border-color:color-mix(in srgb,var(--kf-holiday) 32%,var(--line)); }

/* prayer / ramadan */
.kf-next{ text-align:center; padding:14px; border-radius:15px; background:linear-gradient(135deg,#0b2340,#173c60); color:#fff; margin-bottom:12px; }
.kf-next small{ display:block; font-size:.72rem; color:#cfe0f5; font-weight:700; }
.kf-next b{ display:block; font-size:1.2rem; font-weight:900; margin:4px 0 2px; }
.kf-next span{ display:block; font-size:.74rem; color:#a9c6f0; }
.kf-pray-list{ display:grid; gap:6px; }
.kf-pray-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:.88rem; }
.kf-pray-row.azan{ background:color-mix(in srgb,var(--kf-gold) 10%,var(--card)); border-color:color-mix(in srgb,var(--kf-gold) 34%,var(--line)); }
.kf-pray-row b{ font-weight:800; }

/* savings goal */
.kf-goal{ padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:8px; }
.kf-goal-head{ display:flex; align-items:center; justify-content:space-between; }
.kf-goal-head b{ font-size:.9rem; }
.kf-goal-head span{ font-weight:900; color:var(--kf-accent); }
.kf-goal-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.kf-goal-foot small{ color:var(--muted); font-size:.74rem; }

/* habit */
.kf-hb-head{ font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:8px; }
.kf-hb-item{ display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); margin-bottom:7px; cursor:pointer; font-weight:600; }
.kf-hb-item input{ width:19px; height:19px; }
.kf-hb-item.on{ background:color-mix(in srgb,var(--kf-rest) 12%,var(--card)); border-color:color-mix(in srgb,var(--kf-rest) 36%,var(--line)); }

/* tips */
.kf-tips{ margin:6px 0 0; padding-right:18px; }
.kf-tips li{ margin:6px 0; font-size:.84rem; line-height:1.7; color:var(--text); }

/* ---- dark mode ---- */
body.dark .kfeat-toggle-row, body.dark .kfeat-tile, body.dark .kf-stat, body.dark .kf-li, body.dark .kf-pray-row, body.dark .kf-goal, body.dark .kf-hb-item, body.dark .kf-bal-row{ background:#111f31; }
body.dark .kf-modal-card, body.dark .kf-modal-head{ background:#0d1a2b; }
body.dark .kf-modal-body label input, body.dark .kf-modal-body label select{ background:#0e1c30; color:#f5f9ff; }
body.dark .kfeat-toggle-icon{ background:#0e1c30; }
body.dark .kf-total{ background:linear-gradient(120deg,#12324f,#0d1a2b); }