:root{
  --font-main:'Quicksand',system-ui,sans-serif;
  --green:#0d6b43; --green-2:#145a3e; --mint:#e4f5e7; --mint-2:#f0fae7;
  --gold:#f4c84a; --gold-soft:#fff1bd; --cream:#fbf8ec; --paper:#fffef8;
  --ink:#173529; --muted:#667a70; --line:rgba(20,90,62,.14);
  --danger:#c0392b; --warn:#b7791f; --success:#12824e; --blue:#2c6fb4;
  --shadow:0 18px 50px rgba(11,62,41,.12); --radius:26px; --radius-sm:16px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-main);background:var(--cream);color:var(--ink);min-height:100vh;overflow-x:hidden;font-weight:600}
button,input,textarea,select{font-family:var(--font-main)} button{cursor:pointer} a{color:inherit}.app-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 10% 10%,rgba(95,190,111,.22),transparent 34%),radial-gradient(circle at 90% 5%,rgba(244,200,74,.22),transparent 30%),linear-gradient(135deg,#fbf8ec,#f3f8e7 52%,#eef6ea)}.app-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(13,107,67,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(13,107,67,.04) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.sidebar{position:fixed;left:16px;top:16px;bottom:16px;width:260px;background:rgba(255,255,249,.76);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);border-radius:30px;padding:18px;backdrop-filter:blur(18px);display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:4px 6px 16px;border-bottom:1px solid var(--line);margin-bottom:12px}.brand img{width:52px;height:52px;object-fit:contain;border-radius:16px;background:#fff}.brand strong{display:block;font-size:17px;color:var(--green)}.brand small{color:var(--muted);font-size:12px}.nav{display:flex;flex-direction:column;gap:7px;overflow:auto;padding-right:3px}.nav-item{border:0;background:transparent;color:#33594a;text-align:left;display:flex;align-items:center;gap:10px;border-radius:16px;padding:11px 12px;font-weight:800;transition:.22s}.nav-item span{width:24px;height:24px;border-radius:9px;background:rgba(13,107,67,.08);display:grid;place-items:center;font-size:13px}.nav-item:hover{background:rgba(13,107,67,.08);transform:translateX(2px)}.nav-item.active{background:linear-gradient(135deg,var(--green),#17915b);color:white;box-shadow:0 12px 30px rgba(13,107,67,.22)}.nav-item.active span{background:rgba(255,255,255,.18)}.side-mini{margin-top:auto;background:linear-gradient(135deg,#fffef5,#fff2bd);border:1px solid rgba(244,200,74,.28);padding:14px;border-radius:22px;color:#526a5f}.side-mini b{display:block;color:var(--green);margin-bottom:5px}.side-mini small{display:block;line-height:1.5;margin-bottom:10px}.mini-btn{border:0;border-radius:14px;padding:10px 14px;background:#fff;color:var(--green);font-weight:800;width:100%;box-shadow:0 8px 24px rgba(13,107,67,.06)}
.main{margin-left:292px;padding:18px 24px 50px}.topbar{position:sticky;top:12px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;margin-bottom:18px;border-radius:24px;background:rgba(255,255,248,.72);box-shadow:0 12px 36px rgba(12,80,53,.09);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(16px)}.kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:900;font-size:12px;margin:0 0 6px}.topbar h1{font-size:27px;margin:0;letter-spacing:-.04em;color:var(--green-2)}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.top-link-btn{font-weight:900;text-decoration:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;color:var(--green-2);font-size:13px}.searchbox{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 12px;min-width:260px}.searchbox input{border:0;outline:0;background:transparent;height:42px;width:100%;font-weight:700;color:var(--ink)}.mobile-menu{display:none;border:0;border-radius:14px;background:#fff;color:var(--green);font-weight:900;font-size:20px;padding:9px 12px}
.page{display:none;animation:fadeUp .28s ease both}.page.active{display:block}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card,.hero-card{background:rgba(255,255,249,.82);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:var(--radius);padding:20px;margin-bottom:18px;backdrop-filter:blur(14px)}.hero-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,242,189,.72))}.hero-card:after{content:"";position:absolute;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:rgba(244,200,74,.28);filter:blur(2px)}.hero-card h2{font-size:31px;line-height:1.08;max-width:720px;margin:0 0 10px;color:var(--green-2);letter-spacing:-.05em}.hero-card p:last-child{color:var(--muted);font-size:16px;max-width:680px;line-height:1.65}.hero-visual{position:relative;min-width:180px;height:150px;display:grid;place-items:center}.hero-visual span,.hero-visual i{position:absolute;border-radius:26px;background:#fff;box-shadow:0 18px 50px rgba(13,107,67,.12);animation:floatSoft 5s ease-in-out infinite}.hero-visual span{width:138px;height:90px;transform:rotate(-8deg);left:0;top:20px}.hero-visual i{width:76px;height:118px;right:0;top:10px;animation-delay:1.4s}.hero-visual b{position:relative;z-index:2;background:linear-gradient(135deg,var(--green),#15a867);color:#fff;border-radius:28px;padding:22px 26px;font-size:24px;text-align:center;box-shadow:0 18px 40px rgba(13,107,67,.25)}@keyframes floatSoft{50%{transform:translateY(-10px) rotate(-4deg)}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.split-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);gap:18px}.dashboard-grid.stats{display:grid;grid-template-columns:repeat(6,minmax(145px,1fr));gap:14px;margin-bottom:18px}.stat-card{background:linear-gradient(135deg,#fff,#fff8dc);border:1px solid rgba(244,200,74,.25);border-radius:22px;padding:16px;box-shadow:0 10px 30px rgba(12,80,53,.08);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-24px;top:-24px;width:70px;height:70px;border-radius:50%;background:rgba(13,107,67,.07)}.stat-card small{display:block;color:var(--muted);font-weight:800;margin-bottom:8px}.stat-card b{font-size:24px;color:var(--green-2);letter-spacing:-.04em}.stat-card.danger b{color:var(--danger)}.stat-card.warn b{color:var(--warn)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.card-head h2{margin:0;color:var(--green-2);font-size:20px;letter-spacing:-.03em}.card-head p{margin:0;color:var(--muted);font-size:13px}.link-btn{border:0;background:transparent;color:var(--green);font-weight:900}.btn{border:0;border-radius:16px;padding:12px 17px;font-weight:900;box-shadow:0 10px 28px rgba(13,107,67,.11);transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.small{padding:9px 12px;font-size:13px;border-radius:13px}.btn.primary{background:linear-gradient(135deg,var(--green),#179a60);color:#fff}.btn.secondary{background:#fff;color:var(--green);border:1px solid var(--line)}.btn.ghost{background:rgba(255,255,255,.62);color:var(--green);border:1px solid var(--line);box-shadow:none}.btn.success{background:linear-gradient(135deg,#10a867,#0d7b4c);color:white}.btn.danger{background:#fff1ee;color:var(--danger);border:1px solid rgba(192,57,43,.16)}.button-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.button-row.center{justify-content:center}.sticky-actions{position:sticky;bottom:12px;background:rgba(255,255,249,.8);backdrop-filter:blur(10px);padding:10px;border-radius:18px;z-index:3}.soft-line{height:1px;background:var(--line);margin:16px 0}.pill,.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--mint);color:var(--green);font-size:12px;font-weight:900;padding:7px 10px}.pill.danger,.badge.danger{background:#fff1ee;color:var(--danger)}.pill.warn,.badge.warn{background:#fff6d8;color:var(--warn)}.pill.success,.badge.success{background:#e6f7eb;color:var(--success)}
.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:flex;flex-direction:column;gap:7px;color:#486155;font-weight:900;font-size:13px}input,select,textarea{width:100%;border:1px solid rgba(13,107,67,.16);border-radius:15px;padding:12px 13px;background:#fffefc;color:var(--ink);outline:none;font-weight:700;transition:.2s}textarea{resize:vertical}input:focus,select:focus,textarea:focus{border-color:rgba(13,107,67,.55);box-shadow:0 0 0 4px rgba(13,107,67,.08)}.filter-row,.add-line{display:flex;gap:10px;margin-bottom:13px}.filter-row>*{flex:1}.add-line select,.add-line input{flex:1}.custom-line input:nth-child(2){max-width:90px}.custom-line input:nth-child(3){max-width:150px}.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line)}.data-table{width:100%;border-collapse:collapse;background:#fff}.data-table th,.data-table td{padding:12px;border-bottom:1px solid rgba(13,107,67,.1);text-align:left;vertical-align:top}.data-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--green);background:#f7fbf2}.data-table td{font-size:13px;color:#254538;font-weight:700}.data-table tr:last-child td{border-bottom:0}.data-table input{padding:8px;border-radius:10px}.empty{padding:22px;text-align:center;color:var(--muted);font-weight:800;background:rgba(255,255,255,.52)}
.customer-cards,.product-cards,.task-list,.alert-list,.finance-list{display:grid;gap:10px}.customer-card,.product-card,.task-card,.alert-item,.finance-item,.staff-card,.kanban-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 10px 24px rgba(12,80,53,.06);transition:.2s}.customer-card:hover,.product-card:hover,.task-card:hover,.staff-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(12,80,53,.11)}.customer-card.active,.product-card.active{border-color:rgba(13,107,67,.5);box-shadow:0 0 0 4px rgba(13,107,67,.08)}.customer-card-head,.task-card-head,.profile-line{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.customer-card b,.task-card b,.product-card b{display:block;color:var(--green-2);font-size:16px}.customer-card small,.task-card small,.product-card small,.staff-card small{display:block;color:var(--muted);font-size:12px;line-height:1.5}.customer-meta,.task-meta,.product-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.tabs{display:flex;gap:8px;margin:18px 0 10px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;color:var(--green);font-weight:900}.tab.active{background:var(--green);color:#fff}.detail-content{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}.timeline{display:grid;gap:10px}.timeline-item{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:10px;border-radius:14px;background:#f9fbf3}.timeline-item b{color:var(--green)}
.kanban-board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px;overflow:auto;padding-bottom:6px}.kanban-column{background:rgba(255,255,255,.64);border:1px solid var(--line);border-radius:22px;padding:12px;min-height:240px}.kanban-column h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;color:var(--green);font-size:16px}.kanban-list{display:grid;gap:10px}.kanban-card b{font-size:14px}.pipeline-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-cell{min-height:120px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px}.calendar-cell.muted{opacity:.45}.calendar-date{display:flex;justify-content:space-between;color:var(--green);font-weight:900}.calendar-task{display:block;margin-top:6px;padding:6px;border-radius:10px;background:var(--mint);font-size:11px;font-weight:900;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-task.overdue{background:#fff1ee;color:var(--danger)}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.staff-profile-row{display:flex;gap:12px;align-items:center}.staff-avatar{width:58px;height:58px;border-radius:18px;object-fit:cover;background:var(--mint);border:1px solid var(--line)}.progress{height:9px;background:#eef4e9;border-radius:999px;overflow:hidden;margin:12px 0 8px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:999px}.staff-action-row{display:flex;gap:8px;margin-top:12px}.staff-avatar-editor{display:flex;align-items:center;gap:12px;margin:12px 0}.staff-avatar-editor img{width:84px;height:84px;border-radius:24px;object-fit:cover;background:var(--mint);border:1px solid var(--line)}
.quote-sheet{background:#fff;border-radius:22px;border:1px solid rgba(13,107,67,.14);padding:20px;color:#183b2b}.quote-top{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(13,107,67,.12);padding-bottom:14px;margin-bottom:14px}.quote-top img{max-width:120px;max-height:70px;object-fit:contain}.quote-top h3{margin:0;color:var(--green);font-size:24px}.quote-top p{margin:4px 0 0;color:var(--muted)}.quote-info{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.quote-info div{padding:10px;border-radius:14px;background:#f7fbf2}.quote-table{width:100%;border-collapse:collapse;margin-bottom:14px}.quote-table th,.quote-table td{border-bottom:1px solid #e5eee2;padding:9px;text-align:left}.quote-table th{color:var(--green);background:#f7fbf2}.quote-bottom{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.qr-box{width:118px;text-align:center;color:var(--muted);font-weight:900;font-size:12px}.qr-box img{width:108px;height:108px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}.quote-totals{min-width:230px}.quote-totals div{display:flex;justify-content:space-between;gap:16px;padding:6px 0}.quote-totals .grand{border-top:2px solid var(--green);font-size:18px;color:var(--green)}.quote-note{color:var(--muted);font-size:12px;margin-bottom:0}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.mini-card,.setting-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.mini-card b,.setting-stat b{display:block;color:var(--green);font-size:18px}.mini-card small,.setting-stat span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.status-board{display:grid;gap:8px}.status-row{display:grid;grid-template-columns:120px 1fr 40px;gap:10px;align-items:center}.status-row .bar{height:10px;background:#edf4ea;border-radius:999px;overflow:hidden}.status-row i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:999px}.alert-item.danger{border-color:rgba(192,57,43,.22);background:#fff9f8}.alert-item.warn{border-color:rgba(183,121,31,.25);background:#fffaf0}.alert-item.success{border-color:rgba(18,130,78,.22);background:#f2fbf5}.alert-item b{color:var(--green-2)}.alert-item.danger b{color:var(--danger)}.alert-item.warn b{color:var(--warn)}
.bar-chart,.performance-list{display:grid;gap:12px}.bar-row{display:grid;grid-template-columns:140px 1fr 80px;gap:12px;align-items:center}.bar-track{height:13px;border-radius:999px;background:#eef4e9;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--gold))}.bar-row b{font-size:13px}.finance-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.settings-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}.toggle-line{display:flex;flex-direction:row;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px}.toggle-line input{width:auto}.qr-settings{display:flex;align-items:center;gap:12px;margin-bottom:14px}.qr-settings img{width:118px;height:118px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#fff}.data-actions{display:flex;gap:10px;flex-wrap:wrap}.data-path{color:var(--muted);font-weight:800;font-size:13px}.backup-list{display:grid;gap:8px;margin-top:10px}.backup-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(17,38,28,.42);backdrop-filter:blur(12px)}.modal[hidden]{display:none!important}.modal-card{position:relative;width:min(720px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(135deg,#fff,#fffced);border-radius:30px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.8)}.profile-modal-card{width:min(980px,96vw)}.welcome-card{text-align:center;width:min(640px,95vw)}.welcome-icon img{width:76px;height:76px;border-radius:26px;padding:14px;background:var(--mint)}.modal-card h2{margin-top:0;color:var(--green-2);letter-spacing:-.04em}.icon-btn{border:0;background:rgba(13,107,67,.08);color:var(--green);border-radius:999px;width:42px;height:42px;font-size:22px;font-weight:900}.modal-close{position:absolute;right:18px;top:18px}.checkline{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin-top:10px}.checkline input{width:auto}.qr-modal-preview{text-align:center}.qr-modal-preview img{width:150px;height:150px;border-radius:18px;border:1px solid var(--line);object-fit:cover}.toast{position:fixed;right:22px;bottom:22px;z-index:120;transform:translateY(20px);opacity:0;pointer-events:none;background:var(--green);color:white;border-radius:18px;padding:14px 18px;box-shadow:0 16px 46px rgba(13,107,67,.26);font-weight:900;transition:.25s}.toast.show{transform:none;opacity:1}
@media (max-width:1180px){.dashboard-grid.stats{grid-template-columns:repeat(3,1fr)}.split-layout,.grid-2{grid-template-columns:1fr}.kanban-board{grid-template-columns:repeat(2,1fr)}}@media (max-width:860px){.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.open{transform:none}.mobile-menu{display:block}.main{margin-left:0;padding:12px}.topbar{align-items:flex-start}.top-actions{width:100%;justify-content:flex-start}.searchbox{min-width:100%;order:5}.dashboard-grid.stats{grid-template-columns:repeat(2,1fr)}.form-grid.two,.quote-info{grid-template-columns:1fr}.kanban-board{grid-template-columns:1fr}.calendar-grid{grid-template-columns:1fr}.calendar-cell{min-height:auto}.hero-card{display:block}.hero-visual{margin:auto}.add-line,.filter-row,.quote-bottom{flex-direction:column}.custom-line input:nth-child(2),.custom-line input:nth-child(3){max-width:none}.topbar{flex-wrap:wrap}.card-head{align-items:flex-start;flex-direction:column}.bar-row{grid-template-columns:1fr}.modal-card{padding:22px 16px}.dashboard-grid.stats{grid-template-columns:1fr}}@media print{body{background:white}.sidebar,.topbar,.toast,.button-row,.modal{display:none!important}.main{margin:0;padding:0}.card{box-shadow:none;border:0}.quote-sheet{border:0;border-radius:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ===== V10.2 UX/PDF/Popup upgrade ===== */
.customer-detail-card .readonly-profile,.product-detail-view{display:grid;gap:14px}.readonly-hero,.product-detail-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:linear-gradient(135deg,#f2fbf3,#fff8d8);border:1px solid rgba(13,107,67,.12);border-radius:24px;padding:18px}.readonly-hero h2,.product-detail-hero h2{margin:0;color:var(--green-2);letter-spacing:-.04em}.readonly-hero p,.product-detail-hero p{margin:6px 0 0;color:#4c6659;font-weight:800}.readonly-info-grid,.product-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.info-tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px}.info-tile small{display:block;color:#667a70;font-weight:900;font-size:12px;margin-bottom:4px}.info-tile b{color:#173529;font-size:16px}.readonly-note,.product-desc-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;color:#375447;line-height:1.55}.modal-card.wide-modal{width:min(960px,96vw)}.modal-card.medium-modal{width:min(760px,96vw)}.readonly-modal-section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;margin-top:12px}.readonly-modal-section h3{margin:0 0 10px;color:var(--green)}.modal-form-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fffdf2 36%);padding-top:16px}.product-task-list{display:grid;gap:8px}.product-task-list span{display:block;background:#f7fbf2;border:1px solid rgba(13,107,67,.1);border-radius:14px;padding:9px 11px;color:#244a39;font-weight:800}.customer-card .btn,.product-card .btn{white-space:nowrap}.quote-sheet{position:relative;overflow:hidden}.quote-sheet:before{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(244,200,74,.14);pointer-events:none}.quote-sheet:after{content:"";position:absolute;left:-80px;bottom:-90px;width:220px;height:220px;border-radius:50%;background:rgba(13,107,67,.06);pointer-events:none}.quote-top,.quote-info,.quote-table,.quote-bottom,.quote-note{position:relative}.quote-top{background:linear-gradient(135deg,#ffffff,#fbfff3);border:1px solid rgba(13,107,67,.11);border-radius:20px;padding:16px;margin-bottom:16px}.quote-top h3{letter-spacing:-.045em}.quote-info div{border:1px solid rgba(13,107,67,.08);box-shadow:0 8px 20px rgba(13,107,67,.04)}.quote-totals{background:#fff;border:1px solid rgba(13,107,67,.12);border-radius:18px;padding:12px}.quote-totals .grand{margin-top:6px;padding-top:10px}.qr-box{background:#fff;border:1px solid rgba(13,107,67,.12);border-radius:18px;padding:10px}.ghost-text{color:#6a7f72;font-weight:800}@media(max-width:860px){.readonly-hero,.product-detail-hero{flex-direction:column}.readonly-info-grid,.product-info-grid{grid-template-columns:1fr}.modal-card.wide-modal,.modal-card.medium-modal{width:96vw}}


/* ===== V11 FINAL FINAL Premium UI refresh ===== */
:root{
  --ink:#173328;
  --green-2:#10392b;
  --green:#176b43;
  --muted:#5e7368;
  --line:#d6dfd2;
}
body{color:var(--ink);}
.app-bg::before,.app-bg::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(55px);opacity:.35;pointer-events:none}
.app-bg::before{width:280px;height:280px;right:-80px;top:90px;background:rgba(241,197,74,.35)}
.app-bg::after{width:240px;height:240px;left:-70px;bottom:80px;background:rgba(23,107,67,.18)}
.sidebar{box-shadow:12px 0 30px rgba(16,57,43,.08)}
.nav-item{font-weight:800;color:#244537}
.nav-item.active,.nav-item:hover{background:linear-gradient(135deg,#176b43,#1f7a4d);color:#fff;box-shadow:0 12px 24px rgba(23,107,67,.18)}
.topbar{background:rgba(255,255,252,.84);border:1px solid rgba(255,255,255,.88);box-shadow:0 18px 42px rgba(16,57,43,.10)}
.card{background:linear-gradient(180deg,#fffef8,#fff);box-shadow:0 12px 36px rgba(16,57,43,.07);border:1px solid rgba(214,223,210,.85)}
.card h2,.card h3,.modal-card h2{color:#143628}
.customer-card,.product-card,.mini-card,.task-card,.backup-item,.quote-item,.calendar-cell,.kanban-card{box-shadow:0 8px 20px rgba(16,57,43,.05)}
.customer-card:hover,.product-card:hover,.task-card:hover,.kanban-card:hover{transform:translateY(-2px);transition:.2s ease;box-shadow:0 14px 28px rgba(16,57,43,.10)}
.btn{font-weight:800;letter-spacing:.01em}
.btn.ghost{background:#fff;border:1px solid var(--line);color:#204334}
.btn.secondary{background:#eef6f0;color:#16422f;border:1px solid rgba(23,107,67,.15)}
.btn.danger{background:linear-gradient(135deg,#d04d4d,#b93838);color:#fff;border:0}
.pill,.badge{font-weight:800}
.modal{background:rgba(11,28,20,.46);backdrop-filter:blur(18px)}
.modal-card{border-radius:32px;padding:28px 28px 24px;background:linear-gradient(180deg,#fffefb,#fff8e8);border:1px solid rgba(255,255,255,.9);box-shadow:0 32px 92px rgba(9,20,15,.28)}
.modal-card::after{content:"";position:absolute;right:-44px;bottom:-36px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle, rgba(241,197,74,.22), rgba(241,197,74,0));pointer-events:none}
.profile-modal-card{width:min(1000px,96vw)}
.confirm-modal-card{width:min(580px,94vw)}
.confirm-header{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.confirm-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:26px;background:linear-gradient(135deg,#fff1bd,#f7d76a);color:#7a5600;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.confirm-body{background:#fff;border:1px solid rgba(23,107,67,.12);border-radius:20px;padding:16px 18px;color:#2f4d40;line-height:1.7;font-weight:700;white-space:pre-line}
.confirm-actions{justify-content:flex-end;margin-top:16px}
.readonly-modal-section,.readonly-note,.product-desc-box,.info-tile{background:#fffdfa}
.icon-btn{background:rgba(23,107,67,.08);color:#174c36}
.top-link-btn:hover{background:#f4f8f1}
.searchbox input::placeholder,input::placeholder,textarea::placeholder{color:#809388}
label{color:#244537;font-weight:800}
input,select,textarea{color:#173328;background:#fff;border:1px solid #d7e0d3;font-weight:700}
input:focus,select:focus,textarea:focus{border-color:#1c7a4c;box-shadow:0 0 0 4px rgba(23,107,67,.10)}
@media (max-width:860px){.modal-card{padding:22px 16px 18px}.confirm-header{align-items:flex-start}.confirm-actions{flex-direction:column-reverse}.confirm-actions .btn{width:100%}}


/* ===== V11 FINAL FINAL Modal display fix ===== */
/* Fix scrollbar/overflow bug in confirmation popups */
.modal {
  overflow: hidden;
  padding: clamp(12px, 3vw, 24px);
}

.modal-card {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.modal-card::after {
  right: -18px;
  bottom: -18px;
  width: 132px;
  height: 132px;
}

.confirm-modal-card {
  width: min(580px, calc(100vw - 32px));
  overflow-x: hidden;
}

.confirm-body {
  overflow-wrap: anywhere;
  word-break: normal;
}

.confirm-actions {
  flex-wrap: wrap;
}

.confirm-actions .btn {
  min-width: 132px;
}

@media (max-width: 640px) {
  .modal {
    align-items: center;
    justify-items: center;
  }

  .confirm-modal-card {
    width: calc(100vw - 24px);
    padding: 22px 16px;
    border-radius: 24px;
  }

  .confirm-body {
    padding: 14px;
    font-size: 14px;
  }

  .confirm-actions .btn {
    width: 100%;
  }
}


/* ===== V11 FINAL FINAL Hard fix: remove unwanted modal scrollbars ===== */
/* The previous popup still inherited overflow:auto from .modal-card.
   Confirmation dialogs are short, so they should never show inner scrollbars. */
.modal {
  overflow: hidden !important;
}

.modal-card.confirm-modal-card,
.confirm-modal-card {
  overflow: hidden !important;
  max-height: none !important;
  min-height: auto !important;
  width: min(560px, calc(100vw - 40px)) !important;
}

/* Decorative blobs were creating scrollable overflow inside the card. */
.modal-card.confirm-modal-card::after,
.confirm-modal-card::after,
.confirm-modal-card::before {
  display: none !important;
}

.confirm-modal-card .confirm-body {
  max-height: none !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

.confirm-modal-card .confirm-actions,
.confirm-modal-card .confirm-header {
  position: relative;
  z-index: 2;
}

/* Cleaner layout for delete/customer confirmation */
.confirm-modal-card .confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-height: 520px) {
  .modal-card.confirm-modal-card,
  .confirm-modal-card {
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 640px) {
  .modal-card.confirm-modal-card,
  .confirm-modal-card {
    width: calc(100vw - 24px) !important;
    border-radius: 22px;
  }
}


/* ===== V11 FINAL FINAL Task/PDF fix UI ===== */
.field-hint{display:block;margin-top:3px;color:#6e8478;font-size:12px;font-weight:800;text-transform:none;letter-spacing:0}
.task-groups{display:grid;gap:18px}
.task-group{display:grid;gap:10px}
.task-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#f5fbf2,#fff9df);border:1px solid rgba(23,107,67,.10)}
.task-group-head h3{margin:0;color:#143628;font-size:18px}
.task-group-head small{font-weight:900;color:#5e7368}
.task-list-inner{display:grid;gap:10px}
.task-card .danger{box-shadow:none}
.task-card .button-row{flex-wrap:wrap}


/* ===== V11 FINAL FINAL Recovery: interaction-safe task modal ===== */
.field-hint{display:block;margin-top:3px;color:#6e8478;font-size:12px;font-weight:800;text-transform:none;letter-spacing:0}
.task-command-card .card-head{align-items:flex-start}
.task-command-card .card-head .button-row{align-items:center;justify-content:flex-end}
.task-command-card #taskStatusFilter{min-width:190px;border-radius:999px;height:42px}
.task-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin-top:14px}
.task-board-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;align-items:start}
.task-column-card{min-height:420px}
.task-column-card .card-head{align-items:flex-start}
.task-column-card.partner-column{border-top:5px solid rgba(23,107,67,.75)}
.task-column-card.loose-column{border-top:5px solid rgba(241,197,74,.85)}
.task-list-inner{display:grid;gap:12px}
.legacy-task-list{display:none!important}
.task-modal-card{width:min(980px,96vw)}
.modal-form-heading{padding-right:52px;margin-bottom:14px}
.modal-form-heading h2{margin:0 0 4px;color:#143628}
.task-card .button-row{justify-content:flex-start;flex-wrap:wrap}
.task-card .danger{background:linear-gradient(135deg,#d24b43,#b63832);color:#fff;border:0}
.task-card:hover{transform:translateY(-2px)}
@media(max-width:1180px){.task-board-two{grid-template-columns:1fr}.task-summary-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.task-summary-strip{grid-template-columns:1fr}.task-command-card .card-head .button-row{width:100%;justify-content:flex-start}.task-command-card #taskStatusFilter,.task-command-card .btn{width:100%}}


/* ===== V11 FINAL FINAL UX polish: logos, popups, staff, dashboard, scrollbar ===== */
:root{
  scrollbar-color: #176b43 #f4efdc;
  scrollbar-width: thin;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#f4efdc;border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#176b43,#f1c54a);border:2px solid #f4efdc;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#0f5132,#dcae2f)}

.nav-item[data-page="tasks"] span{font-size:18px}
.button-row{gap:12px;row-gap:12px;flex-wrap:wrap}
label + .button-row,
.form-grid + .button-row,
.card > .button-row,
.modal-form-actions{margin-top:16px}
#page-settings .button-row,
#page-notifications .button-row{margin-top:14px;margin-bottom:8px}
#page-settings label,
#page-notifications label{margin-bottom:10px}
input,select,textarea{min-height:44px}
textarea{min-height:88px}

.modal{overflow:auto!important;padding:24px;align-items:center}
.modal-card{overflow:visible!important;max-height:none!important}
.modal-card.wide-modal,.profile-modal-card,.task-modal-card{overflow:visible!important;max-height:none!important}
@media(max-height:760px){
  .modal{align-items:flex-start}
  .modal-card{margin:18px auto}
}
.modal-card::after{pointer-events:none}

.customer-logo-upload{display:flex;align-items:center;gap:12px;padding:12px;border:1px dashed rgba(23,107,67,.28);border-radius:18px;background:#fffef7}
.customer-logo-upload img{width:58px;height:58px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid #dbe6d5;padding:5px}
.customer-logo-mini{width:54px;height:54px;object-fit:contain;border-radius:16px;background:#fff;border:1px solid #dce8d7;padding:6px}
.customer-card-head{align-items:flex-start}
.customer-card-brand{display:flex;gap:12px;align-items:center}
.profile-logo-lockup{display:flex;align-items:center;gap:16px}
.profile-logo-lockup img{width:78px;height:78px;object-fit:contain;border-radius:24px;background:#fff;border:1px solid #dce8d7;padding:8px;box-shadow:0 10px 24px rgba(16,57,43,.08)}
.quote-customer-logo{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid #dce8d7;grid-column:1/-1}
.quote-customer-logo img{width:64px;height:42px;object-fit:contain}
.quote-customer-logo span{font-size:12px;color:#5d7368;font-weight:800}

#staffCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.staff-card{position:relative;overflow:hidden;border-radius:28px;padding:18px;background:linear-gradient(180deg,#fffef7,#ffffff);border:1px solid rgba(23,107,67,.12);box-shadow:0 14px 34px rgba(16,57,43,.08)}
.staff-card::after{content:"";position:absolute;right:-38px;bottom:-38px;width:118px;height:118px;border-radius:50%;background:rgba(241,197,74,.18)}
.staff-profile-row{position:relative;z-index:1;align-items:center}
.staff-avatar{width:66px;height:66px;border-radius:22px;object-fit:cover;border:3px solid #fff;box-shadow:0 10px 24px rgba(16,57,43,.14)}
.staff-kpi-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.staff-kpi-grid div{padding:10px;border-radius:16px;background:#f7fbf3;border:1px solid rgba(23,107,67,.08);text-align:center}
.staff-kpi-grid b{display:block;color:#143628;font-size:18px}
.staff-kpi-grid small{font-size:11px;color:#6a7d72;font-weight:800}
.staff-action-row{position:relative;z-index:1;margin-top:12px}

.hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f5132,#176b43 58%,#f1c54a);color:#fff;border:0;box-shadow:0 24px 60px rgba(16,57,43,.18)}
.hero-card::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero-card::after{content:"";position:absolute;right:80px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(241,197,74,.25)}
.hero-card h2,.hero-card .kicker{color:#fff}
.hero-card p{color:rgba(255,255,255,.86)}
.stat-card{border-radius:26px;background:linear-gradient(180deg,#fffef9,#fff);border:1px solid rgba(23,107,67,.10);box-shadow:0 12px 28px rgba(16,57,43,.06)}
.stat-card b{color:#113e2d}
.stat-card small{font-weight:900;color:#60766a}
.stat-card.danger{background:linear-gradient(180deg,#fff8f4,#fff);border-color:rgba(210,75,67,.18)}
.dashboard-card-title{display:flex;align-items:center;gap:10px}
.dashboard-card-title::before{content:"";width:10px;height:24px;border-radius:999px;background:linear-gradient(180deg,#176b43,#f1c54a)}

.pdf-font-note{font-family:Arial,Helvetica,sans-serif}


/* ===== V11 FINAL FINAL stability + visual fixes ===== */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#edf4ea;border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a7449,#f1c54a);border-radius:999px;border:2px solid #edf4ea}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#135a39,#d9ad32)}
.modal{overflow-y:auto!important;overflow-x:hidden!important;padding:24px}
.modal-card{overflow:visible!important;max-height:none!important}
.modal-card::-webkit-scrollbar{display:none}
.form-grid{gap:18px!important;margin-bottom:16px}
.form-grid label{display:grid;gap:8px}
label{margin-bottom:10px}
.button-row{gap:12px!important;margin-top:18px;align-items:center;flex-wrap:wrap}
.modal-form-actions,.confirm-actions{padding-top:8px}
input,select,textarea{min-height:44px}
textarea{padding-top:12px}
.settings-grid .button-row,.card .button-row{row-gap:12px}
.nav-item[data-page="calendar"] span,.nav-item[data-page="tasks"] span{font-size:18px}
.customer-logo-mini{width:46px;height:46px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid #dcead9;padding:5px;box-shadow:0 8px 18px rgba(16,57,43,.08)}
.profile-logo-lockup,.customer-card-brand{display:flex;align-items:center;gap:12px}
.quote-customer-logo{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:#f7fbf2;border:1px solid #dcead9;border-radius:18px;padding:12px}
.quote-customer-logo img{width:70px;height:46px;object-fit:contain;background:#fff;border-radius:12px;padding:6px}
.staff-card{background:linear-gradient(180deg,#fffef8,#fff);border:1px solid #dcead9;border-radius:24px;padding:18px;display:grid;gap:14px}
.staff-profile-row{display:flex;align-items:center;gap:13px}
.staff-avatar{width:62px;height:62px;border-radius:20px;object-fit:cover;background:#fff;border:1px solid #dcead9}
.staff-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.staff-kpi-grid div{background:#f7fbf2;border-radius:16px;padding:10px;text-align:center}
.staff-action-row{display:flex;gap:10px;flex-wrap:wrap}
.stat-card{position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-18px;bottom:-18px;width:70px;height:70px;border-radius:50%;background:rgba(241,197,74,.16)}
@media(max-width:720px){.modal{padding:10px}.modal-card{width:calc(100vw - 20px)!important}.button-row .btn{width:100%}}


/* ===== V11 FINAL FINAL global stability layout polish ===== */
.toast.show{max-width:min(720px,calc(100vw - 28px));overflow-wrap:anywhere}
.nav-item[data-page="calendar"] span,.nav-item[data-page="tasks"] span{font-size:18px}
.modal{overflow-y:auto!important;overflow-x:hidden!important}
.modal-card{overflow:visible!important;max-height:none!important}
.button-row{gap:12px!important;row-gap:12px!important;align-items:center;flex-wrap:wrap}
.form-grid{gap:18px!important;margin-bottom:16px}
input,select,textarea{min-height:44px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#edf4ea;border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a7449,#f1c54a);border-radius:999px;border:2px solid #edf4ea}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#135a39,#d9ad32)}


/* ===== V11 FINAL FINAL Clean source UX polish ===== */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#edf4ea;border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a7449,#f1c54a);border-radius:999px;border:2px solid #edf4ea}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#135a39,#d9ad32)}
.toast.show{max-width:min(720px,calc(100vw - 28px));overflow-wrap:anywhere}
.modal{overflow-y:auto!important;overflow-x:hidden!important;padding:24px}
.modal-card{overflow:visible!important;max-height:none!important}
.button-row{gap:12px!important;row-gap:12px!important;align-items:center;flex-wrap:wrap}
.form-grid{gap:18px!important;margin-bottom:16px}
.form-grid label{display:grid;gap:8px}
input,select,textarea{min-height:44px}
textarea{padding-top:12px}
.nav-item[data-page="calendar"] span,.nav-item[data-page="tasks"] span{font-size:18px}
.customer-detail-card > .form-grid.two,
.customer-detail-card > label,
.customer-detail-card > .button-row:not(.quick-profile-actions){display:none!important}
.quick-profile{display:grid;gap:16px}
.quick-profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;border-radius:24px;background:linear-gradient(135deg,#f7fbf2,#fff9df);border:1px solid #dcead9}
.quick-profile-brand{display:flex;align-items:center;gap:14px}
.customer-logo-mini{width:52px;height:52px;object-fit:contain;border-radius:16px;background:#fff;border:1px solid #dcead9;padding:6px;box-shadow:0 8px 18px rgba(16,57,43,.08)}
.profile-logo-lockup,.customer-card-brand{display:flex;align-items:center;gap:12px}
.quick-profile-actions{display:flex;gap:10px;flex-wrap:wrap}
.quote-confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.quote-confirm-box{border:1px solid #dcead9;border-radius:20px;background:#fffef8;padding:14px}
.quote-confirm-box small{display:block;color:#6e8478;font-weight:800;margin-bottom:4px}
.quote-confirm-box b{font-size:18px;color:#123a2b}
.quote-detail-lines{display:grid;gap:10px;margin:16px 0}
.quote-detail-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed #dcead9}
.quote-detail-line b{text-align:right}
.quote-modal-card{width:min(860px,96vw)}
.quote-customer-logo{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:#f7fbf2;border:1px solid #dcead9;border-radius:18px;padding:12px}
.quote-customer-logo img{width:70px;height:46px;object-fit:contain;background:#fff;border-radius:12px;padding:6px}
.customer-logo-upload{display:flex;align-items:center;gap:12px}
.settings-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch}
.setting-card-grid{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:12px}
.setting-stat{border:1px solid #dcead9;background:#fffef8;border-radius:18px;padding:14px}
.setting-stat span{display:block;color:#6e8478;font-weight:800;font-size:12px}.setting-stat b{font-size:18px;color:#123a2b}
@media(max-width:900px){.quote-confirm-grid,.settings-hero,.setting-card-grid{grid-template-columns:1fr}.quick-profile-head{flex-direction:column}.modal{padding:10px}.modal-card{width:calc(100vw - 20px)!important}}


/* ===== V11 FINAL FINAL Settings active buttons polish ===== */
.setting-toggle-card,
.check-card{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  min-height:116px;
  padding:18px 18px 18px 76px!important;
  display:flex!important;
  align-items:center;
  border-radius:22px!important;
  border:1px solid rgba(23,107,67,.16)!important;
  background:linear-gradient(180deg,#fffef8,#ffffff)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.setting-toggle-card:hover,
.check-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(16,57,43,.10);
  border-color:rgba(23,107,67,.35)!important;
}
.setting-toggle-card input[type="checkbox"],
.check-card input[type="checkbox"]{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  appearance:none;
  -webkit-appearance:none;
  border-radius:14px;
  border:2px solid #bfd5c5;
  background:#f5faf2;
  display:grid;
  place-items:center;
  margin:0!important;
  transition:.18s ease;
}
.setting-toggle-card input[type="checkbox"]::after,
.check-card input[type="checkbox"]::after{
  content:"";
  width:9px;
  height:17px;
  border:solid #fff;
  border-width:0 4px 4px 0;
  transform:rotate(45deg) scale(.75);
  opacity:0;
  transition:.18s ease;
  margin-top:-3px;
}
.setting-toggle-card input[type="checkbox"]:checked,
.check-card input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#176b43,#1e8c58);
  border-color:#176b43;
  box-shadow:0 10px 20px rgba(23,107,67,.22);
}
.setting-toggle-card input[type="checkbox"]:checked::after,
.check-card input[type="checkbox"]:checked::after{opacity:1;transform:rotate(45deg) scale(1)}
.setting-toggle-card:has(input:checked),
.check-card:has(input:checked){
  border-color:rgba(23,107,67,.48)!important;
  background:linear-gradient(135deg,#f3fbef,#fff9dd)!important;
  box-shadow:0 14px 34px rgba(23,107,67,.12);
}
.setting-toggle-card:has(input:checked)::after,
.check-card:has(input:checked)::after{
  content:"Đang bật";
  position:absolute;
  right:14px;
  top:14px;
  padding:5px 10px;
  border-radius:999px;
  color:#176b43;
  background:#e6f5ea;
  font-size:11px;
  font-weight:900;
}
.setting-toggle-card span,
.check-card span{
  font-weight:900;
  color:#183b2c;
  line-height:1.35;
}


/* ===== V11 FINAL FINAL hard override settings toggles ===== */
#page-settings label.toggle-line,
#page-settings label.setting-toggle-card{
  position:relative!important;
  overflow:hidden!important;
  cursor:pointer!important;
  min-height:116px!important;
  padding:18px 18px 18px 76px!important;
  display:flex!important;
  align-items:center!important;
  border-radius:22px!important;
  border:1px solid rgba(23,107,67,.18)!important;
  background:linear-gradient(180deg,#fffef8,#ffffff)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
}
#page-settings label.toggle-line:hover,
#page-settings label.setting-toggle-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 34px rgba(16,57,43,.10)!important;
  border-color:rgba(23,107,67,.38)!important;
}
#page-settings label.toggle-line input[type="checkbox"],
#page-settings label.setting-toggle-card input[type="checkbox"],
#settingMinimizeToTray,
#settingRunAtStartup,
#settingNotificationsEnabled{
  position:absolute!important;
  left:20px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  margin:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border-radius:14px!important;
  border:2px solid #bfd5c5!important;
  background:#f5faf2!important;
  display:block!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important;
}
#page-settings label.toggle-line input[type="checkbox"]::after,
#page-settings label.setting-toggle-card input[type="checkbox"]::after,
#settingMinimizeToTray::after,
#settingRunAtStartup::after,
#settingNotificationsEnabled::after{
  content:""!important;
  position:absolute!important;
  left:10px!important;
  top:5px!important;
  width:9px!important;
  height:17px!important;
  border:solid #fff!important;
  border-width:0 4px 4px 0!important;
  transform:rotate(45deg) scale(.72)!important;
  opacity:0!important;
  transition:.18s ease!important;
}
#page-settings label.toggle-line input[type="checkbox"]:checked,
#page-settings label.setting-toggle-card input[type="checkbox"]:checked,
#settingMinimizeToTray:checked,
#settingRunAtStartup:checked,
#settingNotificationsEnabled:checked{
  background:linear-gradient(135deg,#176b43,#1e8c58)!important;
  border-color:#176b43!important;
  box-shadow:0 10px 20px rgba(23,107,67,.22)!important;
}
#page-settings label.toggle-line input[type="checkbox"]:checked::after,
#page-settings label.setting-toggle-card input[type="checkbox"]:checked::after,
#settingMinimizeToTray:checked::after,
#settingRunAtStartup:checked::after,
#settingNotificationsEnabled:checked::after{
  opacity:1!important;
  transform:rotate(45deg) scale(1)!important;
}
#page-settings label.toggle-line:has(input:checked),
#page-settings label.setting-toggle-card:has(input:checked){
  border-color:rgba(23,107,67,.50)!important;
  background:linear-gradient(135deg,#f3fbef,#fff9dd)!important;
  box-shadow:0 14px 34px rgba(23,107,67,.12)!important;
}
#page-settings label.toggle-line:has(input:checked)::after,
#page-settings label.setting-toggle-card:has(input:checked)::after{
  content:"Đang bật";
  position:absolute;
  right:14px;
  top:14px;
  padding:5px 10px;
  border-radius:999px;
  color:#176b43;
  background:#e6f5ea;
  font-size:11px;
  font-weight:900;
}
#page-settings label.toggle-line,
#page-settings label.setting-toggle-card{font-weight:900!important;color:#183b2c!important;line-height:1.35!important}


/* ===== V11 FINAL FINAL minor delete button safety ===== */
.btn.danger,[data-delete-customer],#deleteCustomerBtn{cursor:pointer}


/* ===== V11 FINAL FINAL: task package export + searchable customer selects ===== */
.package-task-export-card{
  margin-top:18px;
  border-top:5px solid rgba(23,107,67,.72);
  background:linear-gradient(180deg,#fffef8,#ffffff);
}
.package-task-form.three,
.form-grid.three{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:16px;
}
.package-task-form label,
.task-modal-card label{
  gap:8px;
}
#taskCustomerSearch,
#packageTaskCustomerSearch{
  border-color:rgba(23,107,67,.22);
  background:#fbfff8;
}
#taskCustomerSearch:focus,
#packageTaskCustomerSearch:focus{
  border-color:#176b43;
  box-shadow:0 0 0 4px rgba(23,107,67,.10);
}
.package-task-export-card .button-row{
  margin-top:12px;
}
@media(max-width:1000px){
  .package-task-form.three,
  .form-grid.three{grid-template-columns:1fr}
}


/* ===== V11 FINAL: payments, product images, search UX ===== */
.nav-item[data-page="payments"] span{font-size:18px}
.product-image-editor{
  display:flex;
  align-items:center;
  gap:14px;
  margin:12px 0 16px;
  padding:14px;
  border:1px solid #dcead9;
  border-radius:20px;
  background:linear-gradient(135deg,#f7fbf2,#fffef7);
}
.product-image-preview{
  width:92px;
  height:72px;
  object-fit:cover;
  border-radius:16px;
  background:#fff;
  border:1px solid #dcead9;
  padding:6px;
  box-shadow:0 8px 20px rgba(16,57,43,.08);
}
.product-image-button{position:relative;overflow:hidden;cursor:pointer}
.product-card{overflow:hidden}
.product-card-image{
  width:100%;
  height:118px;
  object-fit:cover;
  border-radius:18px;
  background:#fff;
  border:1px solid #e3ecdd;
  margin-bottom:12px;
}
.product-card-headline{display:grid;gap:2px}
.payment-open-row{background:linear-gradient(90deg,rgba(255,249,221,.52),rgba(255,255,255,0))}
#paymentStatusFilter{min-width:260px;border-radius:999px;height:42px}
.package-task-export-card .ghost-text,
#page-payments .ghost-text{max-width:620px}
@media(max-width:720px){
  .product-image-editor{align-items:flex-start;flex-direction:column}
  .product-image-preview{width:100%;height:150px}
  #paymentStatusFilter{width:100%;min-width:0}
}


/* ===== V11: payment popup + product info/admin modal ===== */
.product-info-card{
  min-height:520px;
}
.product-info-content{
  display:grid;
  gap:16px;
}
.product-info-hero{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
}
.product-info-hero img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:20px;
  background:#fff;
  border:1px solid #dcead9;
  padding:6px;
}
.product-info-hero h2{
  margin:0;
  color:#153b2b;
}
.product-info-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:10px;
}
.product-info-meta .info-tile{
  background:#fff;
  border:1px solid #e4eedf;
  border-radius:18px;
  padding:12px;
}
.product-info-checklist{
  display:grid;
  gap:8px;
}
.product-info-checklist div{
  padding:10px 12px;
  border-radius:14px;
  background:#f7fbf2;
  border:1px solid #e4eedf;
  font-weight:800;
  color:#264b39;
}
.product-edit-modal-card{
  width:min(980px,96vw);
}
.payment-confirm-card{
  width:min(760px,96vw);
}
.payment-confirm-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:18px;
  align-items:start;
  margin-top:16px;
}
.payment-qr-panel{
  display:grid;
  gap:10px;
  justify-items:center;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
}
.payment-qr-panel img{
  width:170px;
  height:170px;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  padding:10px;
  border:1px solid #e4eedf;
}
.payment-code{
  width:100%;
  text-align:center;
  padding:9px 12px;
  border-radius:999px;
  background:#176b43;
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
}
.payment-confirm-lines{
  display:grid;
  gap:10px;
}
.payment-confirm-line{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px dashed #dcead9;
}
.payment-confirm-line span{
  color:#6e8478;
  font-weight:800;
}
.payment-confirm-line b{
  text-align:right;
  color:#143628;
}
.payment-confirm-line.grand b{
  color:#176b43;
  font-size:22px;
}
@media(max-width:800px){
  .payment-confirm-layout{grid-template-columns:1fr}
  .payment-qr-panel img{width:150px;height:150px}
  .product-info-meta{grid-template-columns:1fr}
}


/* ===== LOCO Ops V11.9.24: Product images are square 1:1 ===== */
.product-card-image{
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  object-fit:cover!important;
  border-radius:22px!important;
}

.product-image-preview,
#productImagePreview,
#pmProductImagePreview{
  width:120px!important;
  height:120px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  border-radius:22px!important;
}

.product-info-hero img{
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  max-height:420px!important;
  object-fit:cover!important;
  border-radius:24px!important;
}

@media(max-width:720px){
  .product-image-preview,
  #productImagePreview,
  #pmProductImagePreview{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
  }
}


/* ===== LOCO Ops V11.9.24: Product cards compact 3-per-row ===== */
#productCards,
.product-grid,
.products-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}

.product-card{
  padding:12px!important;
  border-radius:20px!important;
  display:grid!important;
  gap:8px!important;
  min-height:auto!important;
  cursor:pointer;
}

.product-card-image{
  width:100%!important;
  aspect-ratio:1/1!important;
  height:auto!important;
  object-fit:cover!important;
  border-radius:16px!important;
  margin-bottom:4px!important;
  padding:4px!important;
}

.product-card-headline{
  display:block!important;
}

.product-card-headline b{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  font-size:14px!important;
  line-height:1.25!important;
  color:#153b2b!important;
}

.product-card-headline small,
.product-card .product-meta,
.product-card p,
.product-card > small{
  display:none!important;
}

@media(max-width:1180px){
  #productCards,
  .product-grid,
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
  #productCards,
  .product-grid,
  .products-grid{
    grid-template-columns:1fr!important;
  }
}


/* ===== LOCO Ops V11.9.24: Admin password popup ===== */
.admin-password-modal-card{
  width:min(520px,94vw);
  overflow:hidden!important;
}

.admin-password-box{
  display:grid;
  gap:16px;
  margin-top:14px;
}

.admin-password-hero{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
}

.admin-password-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#176b43,#1e8c58);
  color:#fff;
  font-size:26px;
  box-shadow:0 14px 28px rgba(23,107,67,.2);
}

.admin-password-hero h3{
  margin:0 0 4px;
  color:#143628;
  font-size:20px;
}

.admin-password-hero p{
  margin:0;
  color:#6e8478;
  font-weight:800;
  line-height:1.45;
}

.admin-password-field{
  display:grid;
  gap:8px;
}

.admin-password-field input{
  min-height:52px!important;
  font-size:18px;
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  border-radius:18px!important;
}

.admin-password-error{
  min-height:20px;
  color:#b63832;
  font-weight:900;
  text-align:center;
}

.admin-password-actions{
  justify-content:center!important;
  margin-top:4px!important;
}

.admin-password-actions .btn{
  min-width:150px;
}


/* ===== LOCO Ops V11.9.24: CRM Upgrade ===== */
.crm-command-center{
  margin-bottom:18px;
  display:grid;
  gap:14px;
}

.crm-topline{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}

.crm-hero-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:22px;
  background:linear-gradient(135deg,#123a2b,#176b43 58%,#f1c54a);
  color:#fff;
  box-shadow:0 20px 50px rgba(16,57,43,.18);
}

.crm-hero-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-50px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}

.crm-hero-card .kicker,
.crm-hero-card p{color:rgba(255,255,255,.82)}
.crm-hero-card h2{margin:4px 0 8px;font-size:28px;color:#fff}
.crm-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.crm-hero-actions .btn{background:#fff;color:#176b43;border:0}

.crm-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  gap:12px;
}

.crm-kpi{
  border-radius:22px;
  padding:16px;
  background:#fffef8;
  border:1px solid #dcead9;
  box-shadow:0 12px 26px rgba(16,57,43,.06);
  display:grid;
  gap:5px;
}

.crm-kpi small{
  color:#6e8478;
  font-weight:900;
}

.crm-kpi b{
  font-size:24px;
  color:#143628;
}

.crm-kpi.danger{background:#fff4f2;border-color:#f0c4c0}
.crm-kpi.warn{background:#fff9df;border-color:#ecd47f}
.crm-kpi.success{background:#f0fbf0;border-color:#badfc0}

.crm-toolbar{
  display:grid;
  grid-template-columns:1.2fr repeat(4,minmax(145px,1fr));
  gap:10px;
  padding:12px;
  border-radius:22px;
  background:#f7fbf2;
  border:1px solid #dcead9;
}

.crm-toolbar input,
.crm-toolbar select{
  min-height:44px;
  border-radius:16px;
}

.crm-priority-list{
  border-radius:24px;
  padding:16px;
  background:linear-gradient(180deg,#fffef8,#fff);
  border:1px solid #dcead9;
  display:grid;
  gap:10px;
}

.crm-priority-list h3{
  margin:0;
  color:#143628;
}

.crm-priority-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid #e2ecd8;
  background:#fff;
}

.crm-priority-item b{color:#143628}
.crm-priority-item small{display:block;color:#6e8478;font-weight:800;margin-top:2px}

.crm-score{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:#e8f5ea;
  color:#176b43;
}

.crm-score.hot{background:#fff1dc;color:#b75b00}
.crm-score.danger{background:#ffe8e4;color:#b63832}

.customer-card.crm-card{
  position:relative;
  overflow:hidden;
}

.customer-card.crm-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:#176b43;
}

.customer-card.crm-card.hot::before{background:#f1a10a}
.customer-card.crm-card.danger::before{background:#c94b3f}

.crm-card-main{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.crm-card-title{
  display:flex;
  gap:12px;
  align-items:center;
}

.crm-avatar{
  width:46px;
  height:46px;
  border-radius:16px;
  background:linear-gradient(135deg,#176b43,#f1c54a);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

.crm-next-action{
  padding:10px 12px;
  border-radius:16px;
  background:#f7fbf2;
  border:1px solid #dcead9;
  font-size:12px;
  color:#456153;
  font-weight:800;
}

.crm-card-actions{
  margin-top:12px!important;
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.crm-card-actions .btn{
  padding:8px 10px!important;
  border-radius:12px!important;
}

.crm-contact-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.crm-contact-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dcead9;
  color:#143628;
  font-weight:900;
  text-decoration:none;
  font-size:12px;
}

.crm-profile-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
}

.crm-profile-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(100px,1fr));
  gap:10px;
  margin:14px 0;
}

.crm-info-tile{
  padding:12px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e4eedf;
}

.crm-info-tile small{display:block;color:#6e8478;font-weight:900;margin-bottom:4px}
.crm-info-tile b{color:#143628}

.crm-history-modal-card{
  width:min(760px,96vw);
}

.crm-history-form{
  display:grid;
  gap:14px;
  margin-top:14px;
}

.crm-history-form .form-grid{
  margin-bottom:0;
}

.crm-stage-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#f7fbf2;
  color:#176b43;
  font-weight:900;
  font-size:12px;
  border:1px solid #dcead9;
}

@media(max-width:1180px){
  .crm-topline{grid-template-columns:1fr}
  .crm-kpi-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .crm-toolbar{grid-template-columns:1fr 1fr}
  .crm-profile-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .crm-kpi-grid,.crm-toolbar,.crm-profile-grid{grid-template-columns:1fr}
  .crm-card-main,.crm-profile-head{flex-direction:column}
}


/* ===== LOCO Ops V11.9.24: Notification Center Upgrade ===== */
.notification-center{
  display:grid;
  gap:18px;
}

.notification-hero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:24px;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(135deg,#123a2b,#176b43 60%,#f1c54a);
  box-shadow:0 24px 60px rgba(16,57,43,.18);
  overflow:hidden;
  position:relative;
}

.notification-hero::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-50px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}

.notification-hero .kicker,
.notification-hero p{
  color:rgba(255,255,255,.84);
}

.notification-hero h2{
  color:#fff;
  margin:5px 0 8px;
  font-size:30px;
}

.notification-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  z-index:1;
}

.notification-hero-actions .btn.primary{
  background:#fff;
  color:#176b43;
  border:0;
}
.notification-hero-actions .btn.secondary{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.notification-hero-actions .btn.ghost{
  background:rgba(0,0,0,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}

.notification-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:12px;
}

.notification-stat{
  border-radius:22px;
  padding:16px;
  border:1px solid #dcead9;
  background:#fffef8;
  box-shadow:0 12px 26px rgba(16,57,43,.06);
  display:grid;
  gap:5px;
  min-height:92px;
}

.notification-stat small{
  color:#6e8478;
  font-weight:900;
}

.notification-stat b{
  font-size:24px;
  color:#143628;
}

.notification-stat.danger{background:#fff4f2;border-color:#f0c4c0}
.notification-stat.warn{background:#fff9df;border-color:#ecd47f}
.notification-stat.success{background:#f0fbf0;border-color:#badfc0}
.notification-stat.info{background:#eef8ff;border-color:#c3ddee}

.notification-control-card{
  background:linear-gradient(180deg,#fffef8,#fff);
}

.notification-toolbar{
  display:grid;
  grid-template-columns:1.4fr repeat(3,minmax(150px,1fr));
  gap:12px;
}

.notification-toolbar input,
.notification-toolbar select{
  min-height:44px;
  border-radius:16px;
}

.notification-next-text{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#f7fbf2;
  color:#176b43;
  font-weight:900;
  border:1px solid #dcead9;
}

.notification-list-v117{
  display:grid;
  gap:12px;
}

.notification-item-v117{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:start;
  padding:16px;
  border-radius:22px;
  border:1px solid #dcead9;
  background:#fff;
  box-shadow:0 10px 26px rgba(16,57,43,.05);
}

.notification-item-v117::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:#176b43;
}

.notification-item-v117.danger{
  background:linear-gradient(90deg,#fff4f2,#fff);
  border-color:#f0c4c0;
}

.notification-item-v117.danger::before{background:#c94b3f}

.notification-item-v117.warn{
  background:linear-gradient(90deg,#fff9df,#fff);
  border-color:#ecd47f;
}

.notification-item-v117.warn::before{background:#d09a15}

.notification-item-v117.info::before{background:#2680c2}

.notification-main-v117{
  display:grid;
  gap:8px;
  padding-left:4px;
}

.notification-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.notification-title-row b{
  color:#143628;
  font-size:16px;
}

.notification-type-pill,
.notification-snooze-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:#f7fbf2;
  color:#176b43;
  font-size:11px;
  font-weight:900;
  border:1px solid #dcead9;
}

.notification-snooze-pill{
  background:#f1f1f1;
  color:#58675f;
}

.notification-text-v117{
  color:#566d62;
  font-weight:800;
  line-height:1.45;
}

.notification-actions-v117{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  max-width:420px;
}

.notification-actions-v117 .btn{
  border-radius:12px!important;
  padding:8px 10px!important;
}

.notification-floating{
  position:fixed;
  right:22px;
  bottom:92px;
  width:min(420px,calc(100vw - 28px));
  z-index:9999;
  display:grid;
  gap:10px;
  pointer-events:none;
}

.notification-floating-card{
  pointer-events:auto;
  border-radius:24px;
  padding:16px;
  background:#123a2b;
  color:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.16);
  animation:notifyFloatIn .28s ease;
}

.notification-floating-card b{
  display:block;
  margin-bottom:5px;
  font-size:16px;
}

.notification-floating-card small{
  color:rgba(255,255,255,.78);
  font-weight:800;
  line-height:1.4;
}

.notification-floating-card .button-row{
  margin-top:10px!important;
}

@keyframes notifyFloatIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:1180px){
  .notification-hero{grid-template-columns:1fr}
  .notification-hero-actions{justify-content:flex-start}
  .notification-stats{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .notification-toolbar{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .notification-stats,
  .notification-toolbar{grid-template-columns:1fr}
  .notification-item-v117{grid-template-columns:1fr}
  .notification-actions-v117{justify-content:flex-start;max-width:none}
}


/* ===== LOCO Ops V11.9.24: Global UX/UI polish + animated success/error feedback ===== */
:root{
  --loco-green:#176b43;
  --loco-green-2:#1e8c58;
  --loco-gold:#f1c54a;
  --loco-ink:#143628;
  --loco-soft:#f7fbf2;
  --loco-warm:#fff9dd;
  --loco-danger:#c94b3f;
  --loco-warn:#d09a15;
  --loco-info:#2680c2;
  --loco-card:#fffef8;
  --loco-line:#dcead9;
  --loco-shadow:0 18px 46px rgba(16,57,43,.10);
}

body{
  background:
    radial-gradient(circle at 12% 8%, rgba(241,197,74,.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(23,107,67,.12), transparent 30%),
    linear-gradient(180deg,#fbf8ec,#f7fbf2 42%,#fbf8ec)!important;
}

.page{
  animation:locoPageIn .26s ease both;
}

@keyframes locoPageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.card,
.stat-card,
.customer-card,
.product-card,
.kanban-card,
.modal-card{
  box-shadow:var(--loco-shadow);
  border-color:rgba(23,107,67,.14)!important;
}

.card,
.customer-card,
.product-card,
.staff-card,
.notification-item-v117,
.crm-priority-list{
  backdrop-filter:blur(14px);
}

.card:hover,
.customer-card:hover,
.product-card:hover,
.staff-card:hover,
.notification-item-v117:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 54px rgba(16,57,43,.13);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.btn{
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease!important;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(16,57,43,.12);
}

.btn:active{
  transform:translateY(1px) scale(.99);
}

.btn.primary,
.btn.success{
  background:linear-gradient(135deg,var(--loco-green),var(--loco-green-2))!important;
}

.btn.danger{
  background:linear-gradient(135deg,#c94b3f,#e05c4f)!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--loco-green)!important;
  box-shadow:0 0 0 4px rgba(23,107,67,.11)!important;
  outline:none!important;
}

.modal:not([hidden]){
  animation:locoModalBackdropIn .18s ease both;
}

.modal:not([hidden]) .modal-card{
  animation:locoModalCardIn .28s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes locoModalBackdropIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes locoModalCardIn{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.toast{
  border-radius:18px!important;
  box-shadow:0 16px 40px rgba(16,57,43,.18)!important;
}

.ux-feedback-root{
  position:fixed;
  inset:0;
  z-index:12000;
  pointer-events:none;
  display:grid;
  place-items:center;
  padding:20px;
}

.ux-feedback-card{
  pointer-events:auto;
  width:min(460px,calc(100vw - 32px));
  border-radius:30px;
  padding:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(220,234,217,.9);
  box-shadow:0 30px 90px rgba(16,57,43,.24);
  backdrop-filter:blur(22px);
  display:grid;
  gap:14px;
  position:relative;
  overflow:hidden;
  transform-origin:center;
  animation:uxFeedbackIn .42s cubic-bezier(.2,1.18,.22,1) both;
}

.ux-feedback-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 20% 10%, rgba(241,197,74,.28), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(23,107,67,.16), transparent 32%);
  z-index:-1;
}

.ux-feedback-card.is-leaving{
  animation:uxFeedbackOut .24s ease both;
}

.ux-feedback-card.success{
  border-color:rgba(23,107,67,.28);
}

.ux-feedback-card.error{
  border-color:rgba(201,75,63,.28);
  animation:uxFeedbackIn .42s cubic-bezier(.2,1.18,.22,1) both, uxFeedbackShake .34s ease .18s both;
}

.ux-feedback-card.warn{
  border-color:rgba(208,154,21,.28);
}

.ux-feedback-top{
  display:flex;
  gap:14px;
  align-items:center;
}

.ux-feedback-icon{
  width:68px;
  height:68px;
  border-radius:24px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  position:relative;
  box-shadow:0 16px 34px rgba(16,57,43,.18);
}

.ux-feedback-card.success .ux-feedback-icon{
  background:linear-gradient(135deg,var(--loco-green),var(--loco-green-2));
}

.ux-feedback-card.error .ux-feedback-icon{
  background:linear-gradient(135deg,#c94b3f,#e05c4f);
}

.ux-feedback-card.warn .ux-feedback-icon{
  background:linear-gradient(135deg,#d09a15,#f1c54a);
}

.ux-feedback-card.info .ux-feedback-icon{
  background:linear-gradient(135deg,#267ab5,#36a6e8);
}

.ux-feedback-icon svg{
  width:38px;
  height:38px;
  stroke-width:3.2;
}

.ux-feedback-card.success .ux-feedback-icon svg path,
.ux-feedback-card.success .ux-feedback-icon svg polyline{
  stroke-dasharray:90;
  stroke-dashoffset:90;
  animation:uxDraw .42s ease .16s forwards;
}

.ux-feedback-card.error .ux-feedback-icon svg line{
  stroke-dasharray:42;
  stroke-dashoffset:42;
  animation:uxDraw .32s ease .12s forwards;
}

.ux-feedback-card.warn .ux-feedback-icon svg path,
.ux-feedback-card.info .ux-feedback-icon svg path,
.ux-feedback-card.info .ux-feedback-icon svg circle{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:uxDraw .42s ease .12s forwards;
}

.ux-feedback-copy{
  min-width:0;
}

.ux-feedback-copy small{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  background:#f7fbf2;
  color:var(--loco-green);
  font-weight:900;
  font-size:11px;
  margin-bottom:6px;
}

.ux-feedback-card.error .ux-feedback-copy small{
  background:#fff0ed;
  color:#c94b3f;
}

.ux-feedback-card.warn .ux-feedback-copy small{
  background:#fff5d4;
  color:#a76d00;
}

.ux-feedback-copy h3{
  margin:0;
  color:var(--loco-ink);
  font-size:22px;
  line-height:1.18;
}

.ux-feedback-copy p{
  margin:7px 0 0;
  color:#53695f;
  font-weight:800;
  line-height:1.45;
}

.ux-feedback-progress{
  height:5px;
  border-radius:999px;
  background:#e8f0e4;
  overflow:hidden;
}

.ux-feedback-progress i{
  display:block;
  height:100%;
  width:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--loco-green),var(--loco-gold));
  animation:uxFeedbackProgress var(--feedback-duration, 2800ms) linear forwards;
}

.ux-feedback-card.error .ux-feedback-progress i{
  background:linear-gradient(90deg,#c94b3f,#f1c54a);
}

.ux-feedback-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.ux-feedback-close{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:#f7fbf2;
  color:var(--loco-green);
  font-weight:900;
  cursor:pointer;
}

@keyframes uxFeedbackIn{
  from{opacity:0;transform:translateY(18px) scale(.92)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes uxFeedbackOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(10px) scale(.96)}
}

@keyframes uxFeedbackShake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-8px)}
  36%{transform:translateX(7px)}
  54%{transform:translateX(-5px)}
  72%{transform:translateX(3px)}
}

@keyframes uxDraw{
  to{stroke-dashoffset:0}
}

@keyframes uxFeedbackProgress{
  to{width:0}
}

.ux-success-burst{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ux-success-burst span{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--loco-gold);
  top:50%;
  left:50%;
  opacity:0;
  animation:uxBurst .62s ease .22s forwards;
}

.ux-success-burst span:nth-child(1){--x:-92px;--y:-72px}
.ux-success-burst span:nth-child(2){--x:92px;--y:-66px}
.ux-success-burst span:nth-child(3){--x:-88px;--y:68px}
.ux-success-burst span:nth-child(4){--x:90px;--y:70px}
.ux-success-burst span:nth-child(5){--x:0;--y:-96px}
.ux-success-burst span:nth-child(6){--x:0;--y:96px}

@keyframes uxBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  30%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1)}
}

@media(max-width:720px){
  .ux-feedback-root{
    align-items:end;
    padding:14px;
  }
  .ux-feedback-card{
    border-radius:26px;
    padding:18px;
  }
  .ux-feedback-icon{
    width:58px;
    height:58px;
    border-radius:20px;
  }
  .ux-feedback-copy h3{
    font-size:19px;
  }
}


/* ===== LOCO Ops V11.9.24: Animated feedback limited to important actions ===== */
.toast{
  transform:translateY(0)!important;
  opacity:.96!important;
  font-size:13px!important;
  padding:10px 14px!important;
}

.ux-feedback-card{
  width:min(430px,calc(100vw - 32px))!important;
}

.ux-feedback-copy h3{
  font-size:20px!important;
}

.ux-feedback-copy p{
  font-size:14px!important;
}


/* ===== LOCO Ops V11.9.24: Partner tasks grouped by partner with popup ===== */
.partner-task-group-list{
  display:grid;
  gap:12px;
}

.partner-task-group-card{
  position:relative;
  overflow:hidden;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#fffef8,#ffffff);
  border:1px solid #dcead9;
  box-shadow:0 12px 30px rgba(16,57,43,.07);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.partner-task-group-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(16,57,43,.12);
  border-color:rgba(23,107,67,.34);
}

.partner-task-group-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:linear-gradient(180deg,#176b43,#f1c54a);
}

.partner-task-group-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.partner-task-brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

.partner-task-avatar{
  width:48px;
  height:48px;
  border-radius:17px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#176b43,#1e8c58);
  color:#fff;
  font-weight:900;
  box-shadow:0 12px 26px rgba(23,107,67,.18);
  flex:0 0 auto;
}

.partner-task-brand b{
  color:#143628;
  display:block;
  font-size:16px;
  line-height:1.2;
}

.partner-task-brand small{
  color:#6e8478;
  font-weight:800;
  display:block;
  margin-top:3px;
}

.partner-task-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.partner-task-kpi{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#f7fbf2;
  color:#176b43;
  border:1px solid #dcead9;
}

.partner-task-kpi.warn{
  background:#fff9df;
  color:#b27500;
  border-color:#ecd47f;
}

.partner-task-kpi.danger{
  background:#fff4f2;
  color:#c94b3f;
  border-color:#f0c4c0;
}

.partner-task-progress{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  background:#e7f0e3;
  overflow:hidden;
}

.partner-task-progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#176b43,#f1c54a);
}

.partner-task-preview{
  margin-top:12px;
  display:grid;
  gap:7px;
}

.partner-task-preview div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  background:#f7fbf2;
  font-size:12px;
  font-weight:800;
  color:#3f584c;
}

.partner-task-modal-card{
  width:min(980px,96vw);
}

.partner-task-modal-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:start;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
  margin:14px 0;
}

.partner-task-modal-head h2{
  margin:0 0 4px;
  color:#143628;
}

.partner-task-modal-head p{
  margin:0;
  color:#6e8478;
  font-weight:800;
}

.partner-task-modal-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.partner-task-modal-list{
  display:grid;
  gap:12px;
  max-height:min(60vh,620px);
  overflow:auto;
  padding-right:4px;
}

.partner-task-modal-list .task-card{
  margin:0;
}

@media(max-width:760px){
  .partner-task-group-head,
  .partner-task-modal-head{
    grid-template-columns:1fr;
    flex-direction:column;
  }

  .partner-task-modal-stats{
    justify-content:flex-start;
  }
}


/* ===== LOCO Ops V11.9.24: Font Awesome icons for navigation ===== */
.nav-item i,
.nav-item .fa-solid,
.nav-item .fa-regular,
.nav-item .fa-brands{
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:10px;
  background:rgba(13,107,67,.08);
  display:grid;
  place-items:center;
  font-size:13px;
  line-height:1;
  color:inherit;
  transition:.22s ease;
}

.nav-item:hover i,
.nav-item:hover .fa-solid,
.nav-item:hover .fa-regular,
.nav-item:hover .fa-brands{
  background:rgba(13,107,67,.13);
  transform:scale(1.04);
}

.nav-item.active i,
.nav-item.active .fa-solid,
.nav-item.active .fa-regular,
.nav-item.active .fa-brands{
  background:rgba(255,255,255,.20);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

/* keep old span styling compatible if any legacy icon remains */
.nav-item span{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  border-radius:10px!important;
}


/* ===== LOCO Ops V11.9.24: Login, My Tasks, Roles & Permissions ===== */
.login-modal{
  backdrop-filter:blur(18px);
}

.login-modal-card{
  width:min(560px,94vw);
  overflow:hidden!important;
  border-radius:32px!important;
}

.login-brand{
  display:flex;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(135deg,#123a2b,#176b43 62%,#f1c54a);
  color:#fff;
  margin-bottom:18px;
}

.login-brand img{
  width:70px;
  height:70px;
  object-fit:contain;
  border-radius:22px;
  background:#fff;
  padding:8px;
}

.login-brand .kicker,
.login-brand p{
  color:rgba(255,255,255,.82);
}

.login-brand h2{
  color:#fff;
  margin:3px 0 5px;
}

.login-form{
  display:grid;
  gap:14px;
}

.login-error{
  min-height:20px;
  color:#c94b3f;
  font-weight:900;
  text-align:center;
}

.demo-accounts{
  margin-top:18px;
  padding:14px;
  border:1px solid #dcead9;
  border-radius:22px;
  background:#f7fbf2;
  display:grid;
  gap:8px;
}

.demo-accounts b{
  color:#143628;
}

.demo-accounts button{
  border:1px solid #dcead9;
  background:#fff;
  border-radius:14px;
  padding:9px 10px;
  font-weight:900;
  color:#176b43;
  cursor:pointer;
  text-align:left;
  transition:.18s ease;
}

.demo-accounts button:hover{
  transform:translateX(2px);
  border-color:#176b43;
}

.current-user-chip,
.current-user-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 12px;
  background:#f7fbf2;
  color:#176b43;
  font-weight:900;
  border:1px solid #dcead9;
}

.current-user-chip{
  margin-left:auto;
}

.logout-btn{
  border:0;
  border-radius:999px;
  padding:7px 10px;
  background:#fff4f2;
  color:#c94b3f;
  font-weight:900;
  cursor:pointer;
}

.mytasks-hero-card{
  border-top:5px solid #176b43;
}

.my-task-user-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:24px;
  background:linear-gradient(135deg,#f7fbf2,#fff9dd);
  border:1px solid #dcead9;
  margin-bottom:14px;
}

.my-task-user-card img{
  width:58px;
  height:58px;
  border-radius:18px;
  object-fit:cover;
  background:#fff;
  padding:4px;
  border:1px solid #dcead9;
}

.permission-denied{
  padding:22px;
  border-radius:24px;
  background:#fff4f2;
  color:#9d312a;
  border:1px solid #f0c4c0;
  font-weight:900;
}

.permission-grid{
  display:grid;
  gap:14px;
}

.role-permission-card{
  padding:16px;
  border-radius:24px;
  border:1px solid #dcead9;
  background:linear-gradient(180deg,#fffef8,#fff);
}

.role-permission-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.role-permission-head b{
  color:#143628;
  font-size:17px;
}

.permission-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:10px;
}

.permission-check{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid #e4eedf;
  background:#f7fbf2;
  font-weight:900;
  color:#315546;
}

.permission-check input{
  min-height:auto!important;
  width:18px!important;
  height:18px!important;
}

.staff-account-badge{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:#f7fbf2;
  border:1px solid #dcead9;
  color:#176b43;
  font-size:11px;
  font-weight:900;
  margin-top:5px;
}

.staff-account-badge.locked{
  background:#fff4f2;
  color:#c94b3f;
  border-color:#f0c4c0;
}

.is-permission-disabled{
  opacity:.48;
  pointer-events:none;
  filter:grayscale(.2);
}

@media(max-width:920px){
  .permission-checkbox-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:640px){
  .login-brand{
    align-items:flex-start;
    flex-direction:column;
  }
  .permission-checkbox-grid{
    grid-template-columns:1fr;
  }
}


/* ===== LOCO Ops V11.9.24: interaction fix ===== */
.nav-item{
  cursor:pointer!important;
  user-select:none;
}

.nav-item[hidden]{
  display:none!important;
}

.login-modal[hidden]{
  display:none!important;
}

#loginModalV119:not([hidden]){
  display:grid!important;
}

.current-user-chip{
  z-index:25;
}

.permission-denied .btn,
.nav-item:not([hidden]){
  pointer-events:auto!important;
}


/* ===== LOCO Ops V11.9.24: Floating notification bell ===== */
.floating-bell-v1192{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.32);
  background:linear-gradient(135deg,#176b43,#1e8c58);
  color:#fff;
  display:grid;
  place-items:center;
  z-index:11000;
  box-shadow:0 18px 42px rgba(16,57,43,.26);
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.floating-bell-v1192:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 24px 58px rgba(16,57,43,.32);
}

.floating-bell-v1192:active{
  transform:translateY(0) scale(.98);
}

.floating-bell-v1192 i{
  font-size:22px;
  animation:bellBreathV1192 2.4s ease-in-out infinite;
}

.floating-bell-v1192.has-alerts i{
  animation:bellRingV1192 1.6s ease-in-out infinite;
}

.floating-bell-badge-v1192{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#c94b3f;
  color:#fff;
  font-size:12px;
  font-weight:900;
  border:3px solid #fff;
  box-shadow:0 8px 18px rgba(201,75,63,.25);
}

.floating-bell-badge-v1192[hidden]{
  display:none!important;
}

.floating-bell-panel-v1192{
  position:fixed;
  right:22px;
  bottom:92px;
  width:min(390px,calc(100vw - 28px));
  z-index:11001;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,234,217,.92);
  box-shadow:0 28px 80px rgba(16,57,43,.24);
  backdrop-filter:blur(20px);
  overflow:hidden;
  animation:bellPanelInV1192 .24s cubic-bezier(.2,.9,.2,1) both;
}

.floating-bell-panel-v1192[hidden]{
  display:none!important;
}

.bell-panel-head-v1192{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  background:linear-gradient(135deg,#123a2b,#176b43 62%,#f1c54a);
  color:#fff;
}

.bell-panel-head-v1192 small{
  color:rgba(255,255,255,.82);
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.bell-panel-head-v1192 h3{
  margin:4px 0 0;
  color:#fff;
  font-size:20px;
}

.bell-panel-close-v1192{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.bell-panel-body-v1192{
  padding:14px;
  display:grid;
  gap:10px;
  max-height:420px;
  overflow:auto;
}

.bell-alert-item-v1192{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:start;
  padding:12px;
  border-radius:18px;
  border:1px solid #dcead9;
  background:#fff;
  cursor:pointer;
  transition:.18s ease;
}

.bell-alert-item-v1192:hover{
  transform:translateX(2px);
  border-color:rgba(23,107,67,.36);
  background:#f7fbf2;
}

.bell-alert-icon-v1192{
  width:34px;
  height:34px;
  border-radius:13px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#176b43;
}

.bell-alert-item-v1192.danger .bell-alert-icon-v1192{
  background:#c94b3f;
}

.bell-alert-item-v1192.warn .bell-alert-icon-v1192{
  background:#d09a15;
}

.bell-alert-item-v1192 b{
  color:#143628;
  display:block;
  font-size:14px;
  line-height:1.25;
}

.bell-alert-item-v1192 span{
  display:block;
  color:#6e8478;
  font-weight:800;
  font-size:12px;
  line-height:1.35;
  margin-top:3px;
}

.bell-panel-footer-v1192{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 16px;
  border-top:1px solid #e4eedf;
  background:#fffef8;
}

.bell-panel-empty-v1192{
  padding:22px;
  text-align:center;
  color:#6e8478;
  font-weight:900;
}

@keyframes bellPanelInV1192{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes bellRingV1192{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(12deg)}
  20%{transform:rotate(-10deg)}
  30%{transform:rotate(7deg)}
  40%{transform:rotate(-5deg)}
  50%{transform:rotate(0)}
}

@keyframes bellBreathV1192{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

@media(max-width:720px){
  .floating-bell-v1192{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
    border-radius:20px;
  }
  .floating-bell-panel-v1192{
    right:14px;
    bottom:82px;
  }
}


/* ===== LOCO Ops V11.9.24: remove text toast behind notification bell ===== */
/* Chuông thông báo giữ góc phải dưới. Toast chữ được chuyển lên góc phải trên để không nằm sau chuông. */
.toast{
  right:22px!important;
  left:auto!important;
  bottom:auto!important;
  top:22px!important;
  max-width:min(420px,calc(100vw - 44px))!important;
  z-index:13000!important;
}

.floating-bell-v1192{
  z-index:12000!important;
}

.floating-bell-panel-v1192{
  z-index:12001!important;
}

@media(max-width:720px){
  .toast{
    top:14px!important;
    right:14px!important;
    left:14px!important;
    max-width:none!important;
  }
}


/* ===== LOCO Ops V11.9.24: Register account and hide demo accounts ===== */
.demo-accounts{display:none!important;}
.login-secondary-actions{display:flex;justify-content:center;margin-top:16px;}
.login-secondary-actions .btn{width:100%;min-height:44px;}
.register-modal-card{width:min(760px,96vw);overflow:hidden!important;border-radius:32px!important;}
.register-brand{margin-bottom:18px;}
.register-form{display:grid;gap:14px;}
.register-form .form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.register-form label{gap:8px;}
.register-form input{min-height:48px!important;}
@media(max-width:720px){.register-form .form-grid.two{grid-template-columns:1fr;}}


/* ===== LOCO Ops V11.9.24: Clean topbar + icon links ===== */
/* Ẩn "cục" menu trên desktop, chỉ giữ trên mobile */
.mobile-menu{
  display:none !important;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.top-icon-btn{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0 !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center;
  font-size:18px;
}

.top-icon-btn i{
  font-size:18px;
}

.top-icon-btn:hover{
  transform:translateY(-1px);
}

@media(max-width:980px){
  .top-actions{
    gap:10px;
  }
  .searchbox{
    min-width:220px;
    flex:1 1 240px;
  }
}

@media(max-width:820px){
  .mobile-menu{
    display:grid !important;
    place-items:center;
  }
  .topbar{
    grid-template-columns:auto 1fr;
    gap:12px;
  }
  .top-actions{
    grid-column:1 / -1;
    width:100%;
  }
}

@media(max-width:640px){
  .top-icon-btn{
    width:42px;
    min-width:42px;
    height:42px;
    border-radius:14px !important;
  }
}


/* ===== LOCO Ops V11.9.24: Remove small green topbar button ===== */
/* Bỏ nút + Việc nhỏ màu xanh ở góc phải topbar. Vẫn có thể tạo việc trong mục Công việc. */
.topbar #quickAddTaskBtn,
#quickAddTaskBtn{
  display:none!important;
}

/* Đảm bảo nút menu nhỏ không hiện trên desktop. */
.topbar #mobileMenuBtn,
.topbar .mobile-menu{
  display:none!important;
}

@media(max-width:820px){
  .topbar #mobileMenuBtn,
  .topbar .mobile-menu{
    display:grid!important;
    place-items:center!important;
  }
}


/* ===== LOCO Ops V11.9.24: Remove residual topbar green pill ===== */
/* Xóa triệt để nút/cục xanh còn sót trên góc phải topbar. */
#mobileMenuBtn,
.mobile-menu,
#quickAddTaskBtn,
.topbar > button:not(.logout-btn){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Không tạo pseudo-decoration ở mép phải topbar. */
.topbar::before,
.topbar::after{
  display:none!important;
  content:none!important;
}

.topbar{
  overflow:visible!important;
}

.topbar .current-user-chip{
  margin-left:0!important;
  flex:0 0 auto!important;
}


/* ===== LOCO Ops V11.9.24: Remove green pill above logout FINAL ===== */
/* Cục xanh còn lại thực chất là thumb/decoration bị overlay trong vùng topbar. Ẩn triệt để trong topbar. */
.topbar,
.topbar *,
.current-user-chip,
.current-user-chip *{
  scrollbar-width:none!important;
}

.topbar::-webkit-scrollbar,
.topbar *::-webkit-scrollbar,
.current-user-chip::-webkit-scrollbar,
.current-user-chip *::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

.topbar{
  overflow:hidden!important;
  padding-right:18px!important;
}

.topbar::before,
.topbar::after,
.top-actions::before,
.top-actions::after,
.current-user-chip::before,
.current-user-chip::after,
.logout-btn::before,
.logout-btn::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.topbar > button,
.topbar .mobile-menu,
.topbar #mobileMenuBtn,
.topbar #quickAddTaskBtn{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.top-actions{
  overflow:visible!important;
}

.top-actions .current-user-chip{
  margin-left:8px!important;
  position:relative!important;
  inset:auto!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}

/* Không dùng scrollbar xanh trong vùng chính để tránh nhìn giống nút nổi. */
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb{
  background:rgba(116,136,126,.28)!important;
  border-color:#f4efdc!important;
}

html,
body,
.main{
  scrollbar-color:rgba(116,136,126,.28) #f4efdc!important;
}


/* ===== LOCO Ops V11.9.24: TRUE FIX - remove the green capsule above logout ===== */
/* Cục xanh còn lại là icon <i> trong chip tài khoản bị CSS/global icon render sai khi FontAwesome lỗi.
   Ta không dùng <i> ở chip account nữa, và ép mọi icon rỗng trong current-user-chip biến mất. */
#currentUserChipV119 i,
.current-user-chip i,
#currentUserChipV119 .fa-solid,
.current-user-chip .fa-solid,
#currentUserChipV119 .fa-regular,
.current-user-chip .fa-regular,
#currentUserChipV119 .fa-brands,
.current-user-chip .fa-brands{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Nếu có pseudo/icon còn sót ngay trong chip thì bỏ luôn. */
#currentUserChipV119::before,
#currentUserChipV119::after,
.current-user-chip::before,
.current-user-chip::after{
  display:none!important;
  content:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Giữ chip tài khoản sạch, không có decoration nằm trên Đăng xuất. */
#currentUserChipV119,
.current-user-chip{
  overflow:hidden!important;
  position:relative!important;
  isolation:isolate!important;
  padding-left:14px!important;
}

/* Không cho bất kỳ button/icon rỗng nhỏ nào nổi tại góc phải topbar. */
.topbar > i,
.topbar > span:empty,
.topbar .top-actions > i:empty,
.topbar .top-actions > span:empty,
.topbar .top-actions > button:empty,
.topbar .top-actions > .btn:empty{
  display:none!important;
  width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Riêng icon link Facebook/Website vẫn giữ đúng. */
.top-actions a.top-icon-btn i{
  display:grid!important;
  width:auto!important;
  min-width:auto!important;
  max-width:none!important;
  height:auto!important;
  min-height:auto!important;
  max-height:none!important;
  opacity:1!important;
  visibility:visible!important;
  color:inherit!important;
}


/* ===== LOCO Ops V11.9.24: NUCLEAR FIX - remove all green scrollbar/pill artifacts ===== */
/* Cục xanh còn sót là scrollbar thumb/overlay của vùng app. Tắt toàn bộ scrollbar visual để không còn capsule xanh. */
html,
body,
.app,
.app-shell,
.main,
.sidebar,
.topbar,
.top-actions,
.card,
.modal,
.modal-card,
.page,
.page *,
*{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app::-webkit-scrollbar,
.app-shell::-webkit-scrollbar,
.main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.topbar::-webkit-scrollbar,
.top-actions::-webkit-scrollbar,
.card::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
.page::-webkit-scrollbar,
*::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
  background:transparent!important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.topbar::-webkit-scrollbar-track,
*::-webkit-scrollbar-track{
  display:none!important;
  background:transparent!important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.topbar::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb{
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Dẹp toàn bộ decoration xanh nhỏ không phải icon link. */
.topbar::before,
.topbar::after,
.top-actions::before,
.top-actions::after,
.current-user-chip::before,
.current-user-chip::after,
#currentUserChipV119::before,
#currentUserChipV119::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Chip tài khoản không có icon, không có decoration, không có phần tử rỗng. */
#currentUserChipV119,
.current-user-chip{
  overflow:hidden!important;
  position:relative!important;
  isolation:isolate!important;
  background:#f7fbf2!important;
  border:1px solid #dcead9!important;
}

#currentUserChipV119 i,
.current-user-chip i,
#currentUserChipV119 svg,
.current-user-chip svg,
#currentUserChipV119 span:empty,
.current-user-chip span:empty{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Xóa mọi button/pill trống trong topbar, nhưng giữ Facebook/Website và logout. */
.topbar > button,
.topbar button:empty,
.topbar .mobile-menu,
.topbar #mobileMenuBtn,
.topbar #quickAddTaskBtn,
.topbar .btn:empty,
.topbar .pill:empty,
.topbar .badge:empty{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

.topbar .logout-btn{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  height:auto!important;
  min-width:auto!important;
  min-height:auto!important;
  max-width:none!important;
  max-height:none!important;
  padding:7px 10px!important;
  margin:0!important;
  pointer-events:auto!important;
  background:#fff4f2!important;
  color:#c94b3f!important;
}

/* Giữ icon Facebook/Website hoạt động bình thường. */
.top-actions a.top-icon-btn,
.top-actions a.top-icon-btn i{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  height:auto!important;
  min-width:auto!important;
  min-height:auto!important;
  max-width:none!important;
  max-height:none!important;
  pointer-events:auto!important;
}


/* ===== LOCO Ops V11.9.24: Rebuild topbar cleanly ===== */
.topbar-v11911{
  display:grid!important;
  grid-template-columns:minmax(240px,1fr) minmax(320px,540px) auto!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px 22px!important;
  margin-bottom:18px!important;
  border-radius:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,233,.94))!important;
  border:1px solid rgba(220,234,217,.95)!important;
  box-shadow:0 12px 34px rgba(16,57,43,.08)!important;
  overflow:visible!important;
}

.topbar-brand-v11911{
  min-width:0;
}

.topbar-brand-v11911 .kicker{
  margin:0 0 6px!important;
  letter-spacing:.18em!important;
}

.topbar-brand-v11911 h1{
  margin:0!important;
  font-size:22px!important;
  line-height:1.15!important;
  color:#143628!important;
}

.topbar-tools-v11911{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  min-width:0!important;
}

.top-social-btn-v11911{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:#f7fbf2!important;
  border:1px solid #dcead9!important;
  color:#176b43!important;
  box-shadow:none!important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}

.top-social-btn-v11911:hover{
  transform:translateY(-1px)!important;
  border-color:#176b43!important;
  box-shadow:0 10px 22px rgba(23,107,67,.12)!important;
}

.top-social-btn-v11911 i{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
  color:#176b43!important;
  opacity:1!important;
  visibility:visible!important;
}

.searchbox-v11911{
  flex:1 1 auto!important;
  min-width:270px!important;
  max-width:420px!important;
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 14px!important;
  border-radius:18px!important;
  background:#fbfcf8!important;
  border:1px solid #dcead9!important;
  box-shadow:none!important;
}

.searchbox-v11911 i{
  color:#6d877a!important;
  font-size:15px!important;
  flex:0 0 auto!important;
}

.searchbox-v11911 input{
  flex:1 1 auto!important;
  width:100%!important;
  background:transparent!important;
  border:0!important;
  outline:none!important;
  color:#143628!important;
  font-weight:700!important;
  min-width:0!important;
}

.searchbox-v11911 input::placeholder{
  color:#7d9489!important;
  font-weight:700!important;
}

.top-account-slot-v11911{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  min-width:0!important;
}

#currentUserChipV119,
.current-user-chip{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:8px 10px 8px 14px!important;
  border-radius:999px!important;
  border:1px solid #dcead9!important;
  background:#f7fbf2!important;
  color:#176b43!important;
  font-weight:900!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}

#currentUserChipV119 > span,
.current-user-chip > span{
  display:block!important;
  color:#176b43!important;
  font-weight:900!important;
}

.logout-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  border:1px solid #f0d5d0!important;
  background:#fff4f2!important;
  color:#c94b3f!important;
  font-weight:900!important;
  cursor:pointer!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}

.logout-btn:hover{
  filter:brightness(.98)!important;
}

@media (max-width:1200px){
  .topbar-v11911{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .topbar-tools-v11911{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
  .top-account-slot-v11911{
    justify-content:flex-start!important;
  }
  .searchbox-v11911{
    max-width:none!important;
    min-width:240px!important;
  }
}

@media (max-width:680px){
  .topbar-v11911{
    padding:16px!important;
    gap:14px!important;
  }
  .topbar-brand-v11911 h1{
    font-size:20px!important;
  }
  .topbar-tools-v11911{
    gap:10px!important;
  }
  .top-social-btn-v11911{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    border-radius:14px!important;
  }
  .searchbox-v11911{
    min-width:100%!important;
    width:100%!important;
    height:44px!important;
  }
  #currentUserChipV119,
  .current-user-chip{
    width:100%!important;
    justify-content:space-between!important;
  }
}

/* kill legacy broken topbar pieces */
.topbar-v11911 .mobile-menu,
.topbar-v11911 #mobileMenuBtn,
.topbar-v11911 #quickAddTaskBtn,
.topbar-v11911 > button,
.topbar-v11911 > i,
.topbar-v11911 > span:empty{
  display:none!important;
}

.topbar-v11911 *{
  scrollbar-width:none!important;
}
.topbar-v11911 *::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* ===== LOCO Ops V11.9.24: TRUE clean topbar + toast fix ===== */
/* Cục xanh còn sót là toast rỗng. Ẩn toast khi không có nội dung. */
#toast:empty,
.toast:empty,
#toast:not(.show){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Làm lại topbar bằng layout 2 cụm rõ ràng: title trái, action phải. */
.topbar-v11912{
  position:sticky!important;
  top:12px!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:18px 22px!important;
  margin-bottom:18px!important;
  border-radius:28px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,233,.92))!important;
  border:1px solid rgba(220,234,217,.95)!important;
  box-shadow:0 14px 38px rgba(16,57,43,.09)!important;
  backdrop-filter:blur(16px)!important;
  overflow:visible!important;
}

.topbar-v11912::before,
.topbar-v11912::after{
  display:none!important;
  content:none!important;
}

.topbar-title-v11912{
  min-width:230px!important;
  flex:1 1 280px!important;
}

.topbar-title-v11912 .kicker{
  margin:0 0 6px!important;
  color:#176b43!important;
  font-size:12px!important;
  line-height:1.1!important;
  letter-spacing:.18em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}

.topbar-title-v11912 h1{
  margin:0!important;
  color:#143628!important;
  font-size:24px!important;
  line-height:1.12!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
}

.topbar-right-v11912{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  flex:0 1 auto!important;
  min-width:0!important;
}

.top-icon-btn-v11912{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  margin:0!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f7fbf2!important;
  border:1px solid #dcead9!important;
  color:#176b43!important;
  text-decoration:none!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:hidden!important;
}

.top-icon-btn-v11912 i{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  color:#176b43!important;
  font-size:18px!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
}

.top-icon-btn-v11912:hover{
  transform:translateY(-1px)!important;
  border-color:#176b43!important;
  box-shadow:0 10px 22px rgba(23,107,67,.12)!important;
}

.searchbox-v11912{
  width:420px!important;
  max-width:32vw!important;
  min-width:280px!important;
  height:46px!important;
  min-height:46px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:18px!important;
  background:#fbfcf8!important;
  border:1px solid #dcead9!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.searchbox-v11912 i{
  display:block!important;
  flex:0 0 auto!important;
  width:16px!important;
  min-width:16px!important;
  height:16px!important;
  line-height:16px!important;
  font-size:14px!important;
  color:#6d877a!important;
  opacity:1!important;
  visibility:visible!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
}

.searchbox-v11912 input{
  flex:1 1 auto!important;
  display:block!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  border:0!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:#143628!important;
  font-weight:800!important;
  font-size:14px!important;
  line-height:44px!important;
  box-shadow:none!important;
}

.searchbox-v11912 input::placeholder{
  color:#7d9489!important;
  font-weight:800!important;
}

.account-slot-v11912{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

#currentUserChipV119,
.current-user-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 10px 0 16px!important;
  margin:0!important;
  border-radius:999px!important;
  border:1px solid #dcead9!important;
  background:#f7fbf2!important;
  color:#176b43!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  position:relative!important;
}

#currentUserChipV119 > span,
.current-user-chip > span{
  display:block!important;
  color:#176b43!important;
  font-weight:900!important;
  font-size:14px!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
}

#currentUserChipV119 i,
.current-user-chip i,
#currentUserChipV119 svg,
.current-user-chip svg{
  display:none!important;
}

.logout-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  margin:0!important;
  border-radius:999px!important;
  border:1px solid #f0d5d0!important;
  background:#fff4f2!important;
  color:#c94b3f!important;
  font-weight:900!important;
  font-size:13px!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}

/* Dẹp hẳn legacy topbar elements gây lỗi. */
.topbar-v11912 .mobile-menu,
.topbar-v11912 #mobileMenuBtn,
.topbar-v11912 #quickAddTaskBtn,
.topbar-v11912 > button,
.topbar-v11912 > i,
.topbar-v11912 > span:empty,
.topbar-v11912 .top-actions,
.topbar-v11912 .topbar-tools-v11911,
.topbar-v11912 .top-account-slot-v11911{
  display:none!important;
}

/* Responsive */
@media(max-width:1180px){
  .topbar-v11912{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .topbar-right-v11912{
    width:100%!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }
  .searchbox-v11912{
    flex:1 1 320px!important;
    max-width:none!important;
  }
}

@media(max-width:680px){
  .topbar-v11912{
    padding:16px!important;
  }
  .topbar-title-v11912{
    min-width:0!important;
    width:100%!important;
  }
  .topbar-title-v11912 h1{
    font-size:21px!important;
  }
  .top-icon-btn-v11912{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:14px!important;
  }
  .searchbox-v11912{
    width:100%!important;
    min-width:100%!important;
    height:44px!important;
  }
  .account-slot-v11912,
  #currentUserChipV119{
    width:100%!important;
  }
  #currentUserChipV119{
    justify-content:space-between!important;
  }
}


/* ===== LOCO Ops V11.9.24: Mandatory login gate + department notifications ===== */
body.auth-locked{
  overflow:hidden!important;
}

body.auth-locked .sidebar,
body.auth-locked .main,
body.auth-locked .floating-bell-v1192,
body.auth-locked .floating-bell-panel-v1192,
body.auth-locked .notification-floating{
  pointer-events:none!important;
  user-select:none!important;
  filter:blur(3px) saturate(.85)!important;
  opacity:.34!important;
}

body.auth-locked #loginModalV119,
body.auth-locked #registerModalV1194{
  pointer-events:auto!important;
  filter:none!important;
  opacity:1!important;
}

#loginModalV119{
  z-index:25000!important;
}

#registerModalV1194{
  z-index:25001!important;
}

#loginModalV119 .modal-close,
#loginModalV119 [data-modal-close],
#loginModalV119 .icon-btn.modal-close{
  display:none!important;
}

.login-required-note-v11913{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  background:#fff9df;
  color:#7a5200;
  border:1px solid #ecd47f;
  font-weight:900;
  text-align:center;
  font-size:13px;
}

.alert-audience-badge-v11913{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef6f0;
  color:#176b43;
  border:1px solid #dcead9;
  font-size:11px;
  font-weight:900;
}

.notification-scope-note-v11913{
  padding:10px 12px;
  margin-bottom:10px;
  border-radius:16px;
  background:#f7fbf2;
  color:#486257;
  border:1px solid #dcead9;
  font-weight:900;
  font-size:13px;
}

.bell-panel-scope-v11913{
  padding:10px 12px;
  margin:0 14px 10px;
  border-radius:16px;
  background:#f7fbf2;
  color:#486257;
  border:1px solid #dcead9;
  font-weight:900;
  font-size:12px;
}


/* ===== LOCO Ops V11.9.24: Staff save/payment active feedback ===== */
.staff-active-success-note-v11914,
.payment-paid-note-v11914{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 11px;
  border-radius:999px;
  background:#f0fbf0;
  color:#176b43;
  border:1px solid #badfc0;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.payment-paid-note-v11914 i,
.staff-active-success-note-v11914 i{
  font-size:12px;
}

tr.payment-paid-row-v11914{
  background:linear-gradient(90deg,rgba(240,251,240,.78),rgba(255,255,255,.88));
}

tr.payment-paid-row-v11914 td{
  opacity:.92;
}

.payment-open-row .btn.success{
  box-shadow:0 10px 22px rgba(23,107,67,.12);
}


/* ===== LOCO Ops V11.9.24: Task complete feedback and auto-hide done jobs ===== */
.task-completed-note-v11915{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border-radius:999px;
  background:#f0fbf0;
  color:#176b43;
  border:1px solid #badfc0;
  font-size:12px;
  font-weight:900;
}

.task-complete-removing-v11915{
  animation:taskCompleteRemoveV11915 .28s ease forwards;
}

@keyframes taskCompleteRemoveV11915{
  from{opacity:1;transform:translateY(0) scale(1);max-height:260px}
  to{opacity:0;transform:translateY(-8px) scale(.98);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0}
}


/* ===== LOCO Ops V11.9.24: Stack fix + CRUD success popup ===== */
.ops-success-meta-v11916{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.ops-success-chip-v11916{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#f7fbf2;
  color:#176b43;
  border:1px solid #dcead9;
  font-size:12px;
  font-weight:900;
}

.ux-feedback-card.ops-v11916 .ux-feedback-copy p{
  font-weight:800;
}

.toast.stack-quiet-v11916{
  display:none!important;
}


/* ===== LOCO Ops V11.9.24: Payment notification auto-clear ===== */
.payment-alert-cleared-v11918{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:#f0fbf0;
  color:#176b43;
  border:1px solid #badfc0;
  font-size:12px;
  font-weight:900;
}

.bell-alert-item-v1192.is-clearing,
.alert-item.is-clearing{
  animation:paymentAlertClearV11918 .24s ease forwards;
}

@keyframes paymentAlertClearV11918{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-6px) scale(.98)}
}


/* ===== LOCO Ops V11.9.24: Restore notification bell / notification center ===== */
.floating-bell-v1192,
#floatingBellV1192{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.32)!important;
  background:linear-gradient(135deg,#176b43,#1e8c58)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  z-index:24000!important;
  box-shadow:0 18px 42px rgba(16,57,43,.26)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

.floating-bell-v1192[hidden],
#floatingBellV1192[hidden]{
  display:none!important;
}

#floatingBellV1192 i{
  color:#fff!important;
  font-size:22px!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}

.floating-bell-panel-v1192,
#floatingBellPanelV1192{
  position:fixed!important;
  right:22px!important;
  bottom:92px!important;
  width:min(390px,calc(100vw - 28px))!important;
  z-index:24001!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(220,234,217,.92)!important;
  box-shadow:0 28px 80px rgba(16,57,43,.24)!important;
  backdrop-filter:blur(20px)!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

.floating-bell-panel-v1192[hidden],
#floatingBellPanelV1192[hidden]{
  display:none!important;
}

body.auth-locked #floatingBellV1192,
body.auth-locked #floatingBellPanelV1192{
  display:none!important;
}

.notification-health-v11919{
  padding:10px 12px;
  margin-bottom:10px;
  border-radius:16px;
  background:#f7fbf2;
  color:#486257;
  border:1px solid #dcead9;
  font-weight:900;
  font-size:13px;
}

.notification-health-v11919 b{
  color:#176b43;
}


/* ===== LOCO Ops V11.9.24: Admin clear notification bell ===== */
#clearBellAlertsV11920{
  border-color:#f0d5d0!important;
  background:#fff4f2!important;
  color:#c94b3f!important;
}

#clearBellAlertsV11920:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(201,75,63,.12);
}

#clearBellAlertsV11920[hidden]{
  display:none!important;
}

.bell-clear-note-v11920{
  padding:10px 12px;
  margin:0 14px 10px;
  border-radius:16px;
  background:#fff9df;
  color:#7a5200;
  border:1px solid #ecd47f;
  font-weight:900;
  font-size:12px;
}

.notification-dismissed-note-v11920{
  padding:10px 12px;
  margin:0 0 10px;
  border-radius:16px;
  background:#fff9df;
  color:#7a5200;
  border:1px solid #ecd47f;
  font-weight:900;
  font-size:13px;
}


/* ===== LOCO Ops V11.9.24: Hard restore bell + staff delete fix ===== */
#floatingBellV1192,
.floating-bell-v1192{
  position:fixed!important;
  right:22px!important;
  bottom:22px!important;
  width:60px!important;
  height:60px!important;
  min-width:60px!important;
  min-height:60px!important;
  border-radius:22px!important;
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:30000!important;
  background:linear-gradient(135deg,#176b43,#1e8c58)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:0 20px 48px rgba(16,57,43,.3)!important;
  filter:none!important;
  cursor:pointer!important;
}

#floatingBellV1192[hidden]{
  display:none!important;
}

#floatingBellV1192 i{
  display:block!important;
  color:#fff!important;
  font-size:22px!important;
  opacity:1!important;
  visibility:visible!important;
}

#floatingBellPanelV1192,
.floating-bell-panel-v1192{
  position:fixed!important;
  right:22px!important;
  bottom:94px!important;
  width:min(410px,calc(100vw - 28px))!important;
  z-index:30001!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(220,234,217,.94)!important;
  box-shadow:0 30px 90px rgba(16,57,43,.24)!important;
  backdrop-filter:blur(20px)!important;
  overflow:hidden!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  filter:none!important;
}

#floatingBellPanelV1192[hidden]{
  display:none!important;
}

body.auth-locked #floatingBellV1192,
body.auth-locked #floatingBellPanelV1192{
  display:none!important;
}

#clearBellAlertsV11921{
  border-color:#f0d5d0!important;
  background:#fff4f2!important;
  color:#c94b3f!important;
}

.bell-system-note-v11921{
  padding:10px 12px;
  margin:0 14px 10px;
  border-radius:16px;
  background:#f7fbf2;
  color:#486257;
  border:1px solid #dcead9;
  font-weight:900;
  font-size:12px;
}

.staff-delete-fixing-v11921{
  animation:staffDeleteFadeV11921 .24s ease forwards;
}

@keyframes staffDeleteFadeV11921{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-8px) scale(.98)}
}


/* ===== LOCO Ops V11.9.24: Live account sync from Account Admin ===== */
.account-sync-note-v11922{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:18px;
  border:1px solid #dcead9;
  background:#f7fbf2;
  color:#486257;
  font-weight:900;
}

.account-sync-note-v11922 b{
  color:#176b43;
}

.account-sync-pulse-v11922{
  display:inline-flex;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#176b43;
  box-shadow:0 0 0 0 rgba(23,107,67,.32);
  animation:syncPulseV11922 1.4s ease infinite;
}

@keyframes syncPulseV11922{
  0%{box-shadow:0 0 0 0 rgba(23,107,67,.32)}
  100%{box-shadow:0 0 0 12px rgba(23,107,67,0)}
}


/* ===== LOCO Ops V11.9.24: Fix staff delete + instant sync status ===== */
.staff-delete-row-v11923{
  animation:staffDeleteOutV11923 .22s ease forwards;
}
@keyframes staffDeleteOutV11923{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-7px) scale(.98)}
}
.sync-live-badge-v11923{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:#f0fbf0;
  border:1px solid #badfc0;
  color:#176b43;
  font-size:12px;
  font-weight:900;
}
.sync-live-badge-v11923::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#176b43;
  box-shadow:0 0 0 0 rgba(23,107,67,.34);
  animation:syncLivePulseV11923 1.3s ease infinite;
}
@keyframes syncLivePulseV11923{
  from{box-shadow:0 0 0 0 rgba(23,107,67,.34)}
  to{box-shadow:0 0 0 10px rgba(23,107,67,0)}
}


/* ===== LOCO Ops V11.9.24: Register blur fix ===== */
body:not(.auth-locked) .sidebar,
body:not(.auth-locked) .main{
  filter:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}

body.register-just-done-v11924 .sidebar,
body.register-just-done-v11924 .main{
  filter:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  user-select:auto!important;
}


/* LOCO Web Mode FINAL */
.web-mode-badge{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:50000;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#176b43;
  color:#fff;
  font:800 12px Quicksand,Arial,sans-serif;
  box-shadow:0 14px 34px rgba(16,57,43,.22);
  pointer-events:none;
}



/* ===== LOCO OPS WEB FINAL: Browser print PDF helper ===== */
.loco-print-frame{
  position:fixed!important;
  width:0!important;
  height:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}