/*
Theme Name: MyPlan
Theme URI: https://example.com/myplan
Author: MyPlan
Author URI: https://example.com
Description: MyPlan — bảng điều khiển kế hoạch cá nhân theo phong cách app: bento toàn màn hình, SPA 4 màn (Trang chủ / Lịch / Tài chính / Cá nhân), dark mode, đổi màu chủ đề. Bản dựng giao diện (tĩnh) từ thiết kế, dùng Tailwind + Lucide.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myplan
*/

:root{--bg1:#eef4f1;--bg2:#f6f8fb;--card:#fff;--cardbd:rgba(255,255,255,.9);--t1:#1e293b;--t2:#64748b;--t3:#94a3b8;--surface:#f1f5f9;--topbar:rgba(255,255,255,.8);--dock:rgba(255,255,255,.88);--line:#eef1f6;}
html.dark{--bg1:#0a1018;--bg2:#0b1220;--card:#111a2b;--cardbd:rgba(255,255,255,.06);--t1:#e7edf5;--t2:#94a3b8;--t3:#64748b;--surface:#1b2638;--topbar:rgba(13,20,33,.8);--dock:rgba(17,26,43,.92);--line:rgba(255,255,255,.07);}
*{min-width:0}
body{font-family:'Inter',sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2));height:100vh;overflow:hidden}
.head{font-family:'Sora',sans-serif}
.card{background:var(--card);border:1px solid var(--cardbd)}.soft{background:var(--surface)}
.t1{color:var(--t1)}.t2{color:var(--t2)}.t3{color:var(--t3)}.ln{border-color:var(--line)}
.topbar-bg{background:var(--topbar)}.dock-bg{background:var(--dock)}
.chip-green{background:rgba(var(--acc-rgb),.13);color:var(--acc-d)}.dark .chip-green{color:var(--acc2)}
.chip-blue{background:rgba(59,130,246,.13);color:#3b82f6}.dark .chip-blue{color:#60a5fa}
.chip-amber{background:rgba(245,158,11,.15);color:#d97706}.dark .chip-amber{color:#fbbf24}
.chip-red{background:rgba(239,68,68,.13);color:#ef4444}.dark .chip-red{color:#f87171}
.chip-violet{background:rgba(139,92,246,.15);color:#8b5cf6}.dark .chip-violet{color:#a78bfa}
:root{--acc:#22c55e;--acc2:#4ade80;--acc-d:#16a34a;--acc-rgb:34,197,94}
.bg-brand-500{background-color:var(--acc)!important}
.text-brand-600,.text-brand-700{color:var(--acc-d)!important}
.dark .text-brand-600,.dark .text-brand-700{color:var(--acc2)!important}
.from-emerald-400{--tw-gradient-from:var(--acc2) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(var(--acc-rgb),0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-brand-600{--tw-gradient-from:var(--acc-d) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(var(--acc-rgb),0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-emerald-500{--tw-gradient-to:rgba(var(--acc-rgb),0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--acc) var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-brand-600{--tw-gradient-to:var(--acc-d) var(--tw-gradient-to-position)!important}
.to-brand-500{--tw-gradient-to:var(--acc) var(--tw-gradient-to-position)!important}
.swatch-active{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--acc)}
.card{transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:0 6px 22px rgba(16,24,40,.08)}
.task-row:hover{background:var(--surface)!important;border-radius:12px}
.cal-day{cursor:pointer;transition:background .12s}
.cal-day:hover{background:rgba(var(--acc-rgb),.13)}
.cal-sel{box-shadow:0 0 0 2px var(--acc)}
button,a{transition:transform .12s ease,opacity .15s,background .15s,color .15s}
button:active{transform:scale(.96)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.45)}
#toast{opacity:0;transition:opacity .25s ease,transform .25s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.view{display:none}
.view.on{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:.75rem;animation:vfade .25s ease}
@keyframes vfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ----- responsive: streamline on smaller screens ----- */
@media (max-width:1279px){
  body{height:auto;min-height:100vh;overflow:auto}
  main{height:auto;display:block}
  .view.on{display:flex;flex:none}
  main > .view > section{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main > .view > section > div{min-height:180px}
}
@media (max-width:680px){
  main > .view > section{grid-template-columns:1fr!important}
  main > .view > section > div{min-height:150px}
}
[data-lucide]{width:1.2em;height:1.2em;stroke-width:1.9}