@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
:root{--navy:#151f38;--navy2:#202c48;--ink:#17233d;--muted:#79859b;--line:#e7ebf2;--main:#f5f7fb;--purple:#7359e9;--blue:#3868e8;--green:#137d55;--white:#fff;--shadow:0 10px 38px rgba(21,31,56,.035)}
*{box-sizing:border-box}body{margin:0;background:var(--main);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;flex-shrink:0;background:var(--navy);color:#fff;padding:31px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;margin:0 12px 52px}.brand-mark{display:flex;align-items:center;justify-content:center;background:#7c64ec;color:white;font-weight:800;font-size:16px;border-radius:12px;width:43px;height:43px;letter-spacing:-1.2px}.brand strong{display:block;font:800 17px 'Plus Jakarta Sans';letter-spacing:-.5px}.brand small{display:block;color:#94a2bf;font-size:11px;margin-top:2px}.sidebar-label{font-size:10px;letter-spacing:1.6px;color:#8490aa;font-weight:800;margin:0 14px 13px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:10px;color:#aeb9d0;font-weight:600;font-size:13px}.nav-item:hover{background:var(--navy2);color:#fff}.nav-item.active{background:#3b3965;color:#fff}.nav-icon{width:19px;font-weight:800;color:#adb4ed;text-align:center}.sidebar-bottom{margin-top:auto;color:#93a0ba;display:flex;align-items:center;gap:10px;padding:12px;font-size:11px}.tiny-dot{height:7px;width:7px;background:#43d6ac;border-radius:50%}.content-wrap{flex:1;min-width:0}.topbar{height:81px;border-bottom:1px solid #e8edf5;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 36px}.topbar-crumb{font-size:13px;color:#5c6a86;font-weight:700}.topbar-crumb span{color:#c7cedd;padding:0 9px}.topbar-right{display:flex;align-items:center;gap:12px}.user-initial{border-radius:12px;width:35px;height:35px;background:#f0ebff;color:#6850cc;display:inline-flex;justify-content:center;align-items:center;font-weight:800}.top-name{font-weight:700}.logout-form{display:inline}.link-button{border:0;background:transparent;color:#6b7490;cursor:pointer;font-size:12px;font-weight:700}.menu-toggle{display:none;border:0;background:transparent;font-size:22px;color:var(--ink);cursor:pointer}.main-content{max-width:1500px;margin:auto;padding:35px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:27px}.page-heading h1{font:800 clamp(23px,2.4vw,30px) 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;margin:7px 0 7px}.page-heading p{color:var(--muted);margin:0;line-height:1.5}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#755ee8}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.stat-card{background:#fff;border:1px solid var(--line);padding:22px;border-radius:15px;box-shadow:var(--shadow)}.stat-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:17px;font-weight:800;margin-bottom:16px}.stat-icon.blue{color:#3561e8;background:#eaf0ff}.stat-icon.purple{color:#7657da;background:#f1edff}.stat-icon.green{color:#159468;background:#dff7ee}.stat-icon.amber{color:#bd7b15;background:#fff3d9}.stat-number{font:800 27px 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px}.stat-label{margin-top:5px;color:var(--muted);font-size:12px;font-weight:600}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden}.panel-header{padding:23px 25px;border-bottom:1px solid var(--line)}.panel h2{margin:0;font:800 16px 'Plus Jakarta Sans',sans-serif}.panel-header p{margin:6px 0 0;color:var(--muted);font-size:12px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;min-width:550px}th{padding:16px 22px;background:#fbfcff;border-bottom:1px solid var(--line);color:#8691a4;font-size:10px;letter-spacing:.6px;text-transform:uppercase}td{padding:17px 22px;border-bottom:1px solid #eff2f7;font-size:12px;color:#53617a}tbody tr:last-child td{border:0}.strong{color:var(--ink);font-weight:800}.subline{display:block;font-weight:400;font-size:11px;color:#939bb0;margin-top:5px}.badge{display:inline-flex;align-items:center;border-radius:7px;padding:6px 9px;font-weight:700;font-size:10px;white-space:nowrap}.badge.good{background:#e1f5eb;color:#14794c}.badge.bad{background:#ffebea;color:#b83e3b}.badge.neutral{background:#f1f3f8;color:#647189}.empty{text-align:center;padding:59px 20px 66px;color:#7b879c}.empty-icon{display:grid;place-items:center;margin:0 auto 17px;background:#f2f3fc;color:#8e7fe4;border-radius:15px;width:54px;height:54px;font-size:29px}.empty strong{display:block;color:#39475f;font-size:14px;margin-bottom:7px}.empty p{max-width:405px;line-height:1.7;margin:auto;font-size:12px}.btn{border:1px solid transparent;border-radius:9px;display:inline-flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;cursor:pointer;font-weight:800;font-size:12px;white-space:nowrap}.btn.primary{background:var(--purple);color:white}.btn.primary:hover{background:#5d47ca}.btn.outline{border-color:#dfe3ec;background:white;color:#4e5b73}.btn.outline:hover{background:#f7f7fd}.callout{border:1px solid #ded9f8;background:#f5f2ff;border-radius:12px;padding:20px 23px;margin-top:20px;color:#453a79}.callout strong{font-size:13px}.callout p{font-size:12px;line-height:1.65;margin:8px 0}.callout a{font-weight:800;font-size:12px}.footer{padding:24px 0;color:#a1aabd;font-size:11px}.two-col{display:grid;grid-template-columns:minmax(290px,.86fr) minmax(400px,1.4fr);gap:20px;align-items:start}.panel.padded{padding:25px}.panel.padded h2{margin-bottom:24px}.stack-form{display:grid;gap:16px}.stack-form label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#4b5970}.stack-form label small{font-size:11px;color:var(--muted);font-weight:400}.stack-form input,.stack-form select{outline:none;width:100%;background:#fff;border:1px solid #dce2ec;border-radius:9px;padding:12px 12px;color:#25314d;min-height:44px}.stack-form input:focus,.stack-form select:focus{border-color:#8e77e8;box-shadow:0 0 0 3px #eeeaff}.hint{margin-top:16px;font-size:11px;color:var(--muted);line-height:1.6}.alert{border-radius:10px;padding:14px 16px;font-weight:700;font-size:12px;background:#e7f7ef;border:1px solid #c1e8d3;color:#27744d;margin-bottom:18px}.alert.error{background:#fff0ed;border-color:#ffcfc5;color:#a43c31}.inline-form{display:flex;gap:5px;align-items:center}.inline-form input{width:65px;border:1px solid #e0e3ec;border-radius:6px;padding:7px}.tiny-btn{font-size:10px;border:0;border-radius:6px;background:#eae6ff;color:#5d45bb;font-weight:700;padding:8px;cursor:pointer}.store-list,.plan-list{padding:4px 24px}.store-item,.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}.store-item:last-child,.plan-row:last-child{border-bottom:0}.store-avatar{width:40px;height:40px;border-radius:11px;background:#e8e9ff;color:#564cca;display:grid;place-items:center;font-weight:800}.store-copy{flex:1;min-width:0;display:grid;gap:2px}.store-copy strong,.plan-row strong{font-size:13px}.store-copy small{color:#73819c;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.small-light{font-size:11px;font-weight:400;color:var(--muted)}.wide{grid-column:1/-1}.settings-panel{max-width:620px}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter-chip{font-weight:700;font-size:11px;border:1px solid #e0e5ee;padding:9px 14px;border-radius:9px;background:white;color:#61708a}.filter-chip.selected{background:#6f59e7;border-color:#6f59e7;color:white}
/* Sign-in */
.auth-page{background:#f7f8fb}.auth-layout{display:grid;grid-template-columns:1.02fr .98fr;min-height:100vh}.auth-hero{background:linear-gradient(135deg,#151e38 5%,#252457 100%);color:white;padding:clamp(40px,8vw,118px);display:flex;flex-direction:column;justify-content:center}.auth-hero .eyebrow{color:#ab9dff}.auth-hero h1{font:800 clamp(30px,4vw,56px)/1.16 'Plus Jakarta Sans',sans-serif;letter-spacing:-2px;margin:22px 0}.auth-hero p{font-size:16px;color:#bbc6e3;max-width:460px;line-height:1.8}.hero-features{display:grid;gap:16px;margin-top:55px;color:#d3dcf2;font-weight:600;font-size:13px}.auth-card{width:min(440px,85%);margin:auto}.auth-card h2{font:800 28px 'Plus Jakarta Sans',sans-serif;letter-spacing:-1px;margin:0}.auth-card .muted{color:#7d899c;margin:11px 0 35px}.auth-card .btn{width:100%;padding:14px 17px}.auth-note{font-size:11px;color:#98a2b4;line-height:1.8;margin-top:25px}.mobile-auth-brand{display:none}
@media(max-width:980px){.sidebar{width:214px}.main-content{padding:26px}.stats-grid{grid-template-columns:repeat(2,1fr)}.topbar{padding:0 25px}.two-col{grid-template-columns:1fr}.auth-hero{padding:50px}}
@media(max-width:670px){.sidebar{position:fixed;z-index:20;left:-270px;width:248px;box-shadow:0 15px 45px rgba(0,0,0,.12);transition:left .2s}.sidebar.open{left:0}.menu-toggle{display:block}.topbar{height:70px;padding:0 17px;gap:12px}.topbar-crumb{flex:1;font-size:11px}.top-name{display:none}.topbar-right{gap:6px}.logout-form button{font-size:11px}.main-content{padding:22px 15px}.page-heading{align-items:start}.page-heading .btn{display:none}.page-heading h1{font-size:23px}.stats-grid{gap:10px}.stat-card{padding:16px}.stat-number{font-size:24px}.stat-label{font-size:11px}.panel-header{padding:19px}.empty{padding:45px 15px}.auth-layout{display:block}.auth-hero{display:none}.auth-card{width:min(430px,90%);padding:70px 0}.mobile-auth-brand{display:block;font:800 19px 'Plus Jakarta Sans';margin-bottom:47px;color:#17233d}.mobile-auth-brand span{color:#7359e9}.auth-page{background:#fff}.auth-card h2{font-size:25px}.plan-row{align-items:flex-start;flex-direction:column}}
/* Task 4 WhatsApp + responsive merchant dashboards */
.wa-store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:16px}.wa-store-card{background:#f8fafc;border:1px solid #e4e9f3;padding:20px;border-radius:14px;min-width:0}.wa-store-card h3{margin:0}.wa-toggle{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e7ebf2;border-radius:9px;padding:12px;font-size:14px}.wa-toggle input{width:18px;height:18px;accent-color:#304dbb}.wa-preview{margin:14px auto 18px;max-width:335px;background:#e5f6ee;border:1px solid #c8e6d6;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(21,70,50,.08)}.wa-preview-head{background:#075e54;color:#fff;font-weight:700;padding:14px}.wa-image{height:126px;background:linear-gradient(135deg,#d8e7f6,#c2d5e9);display:grid;place-items:center;color:#47637d;font-weight:600;font-size:12px;letter-spacing:.08em}.wa-preview-text{padding:17px;color:#19443c;line-height:1.7;font-size:13px}.wa-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}.wa-buttons span{background:#fff;color:#087b69;text-align:center;border-radius:7px;padding:10px;font-weight:700}.order-filters{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px}.order-filters input,.order-filters select{min-width:0;max-width:220px;padding:10px;border:1px solid #dbe1ec;border-radius:8px}.order-details{padding:16px 20px;border-top:1px solid #e6ebf3;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px}.order-details .detail-label{font-size:11px;color:#66748e;text-transform:uppercase;letter-spacing:.05em}.order-details .detail-value{font-size:13px;line-height:1.5;overflow-wrap:anywhere}.order-search-card{margin-bottom:16px}@media(max-width:650px){.wa-store-grid{grid-template-columns:1fr}.order-filters>*{flex:1;max-width:none!important}.order-details{grid-template-columns:1fr 1fr}.wa-store-card{padding:14px}}

/* Task 4: merchants can filter orders and view a secure responsive order detail. */
.order-search-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.order-search-form label{flex:1;min-width:185px;display:grid;gap:6px;font-weight:600;font-size:13px}.order-search-form input,.order-search-form select{width:100%;padding:11px 12px;border:1px solid #dce3ef;border-radius:10px;background:#fff;color:#22314e}.pagination-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 0;font-size:13px;color:#66728b}.detail-list{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:14px 10px;font-size:14px;line-height:1.6}.detail-list dt{color:#718096;font-weight:600}.detail-list dd{margin:0;overflow-wrap:anywhere}.line-thumb{display:inline-block;width:45px;height:45px;object-fit:cover;vertical-align:middle;border-radius:8px;margin-right:10px}.wa-preview{background:#e6f5ec;border-radius:14px;padding:14px;max-width:375px;margin:15px auto}.wa-preview-head{color:#35614c;font-weight:bold;font-size:13px;margin-bottom:12px}.wa-image{background:#d5e7d9;border:1px dashed #aacbb9;padding:42px 10px;text-align:center;border-radius:10px;font-size:12px}.wa-preview-text{background:white;padding:14px;border-radius:11px;font-size:13px;line-height:1.6;margin:8px 0}.wa-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wa-buttons span{background:white;padding:10px;border-radius:8px;color:#07824d;text-align:center;font-weight:600}.wa-store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.wa-store-card{padding:20px;border:1px solid #e1e8f1;border-radius:14px}.wa-toggle{display:flex!important;align-items:center;gap:10px}.wa-toggle input{width:auto!important}.stat-number .badge{font-size:14px;vertical-align:middle}@media(max-width:580px){.order-search-form{display:grid}.order-search-form label{min-width:0}.pagination-row{align-items:flex-start}.detail-list{grid-template-columns:1fr}.detail-list dt{margin-bottom:-12px}}
/* TASK 5 – touch-friendly agent call workspace */
.agent-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;margin:18px 0 22px}.agent-order-card{background:white;border:1px solid #e1e6f0;border-radius:14px;padding:18px;box-shadow:0 5px 18px rgba(15,32,72,.035);min-width:0}.agent-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.agent-store-label{font-size:12px;font-weight:700;color:#566683}.agent-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:18px;font-size:16px}.agent-card-heading a{font-size:18px;font-weight:800;overflow-wrap:anywhere}.agent-card-heading strong{white-space:nowrap}.agent-block-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:15px;text-align:center}.agent-dial-btn{display:flex;align-items:center;justify-content:center;text-align:center;margin-top:20px;width:100%;min-height:62px;background:#07884d;color:#fff!important;border-radius:11px;font-size:19px;font-weight:800;letter-spacing:.2px}.agent-dial-btn:hover{background:#056b3d}.agent-callback-hint{background:#eef3ff;padding:10px;border-radius:8px;color:#29427c;font-size:12px;font-weight:700;margin-top:12px}.agent-items{display:grid;gap:10px;margin-top:10px}.agent-items>div{display:flex;flex-direction:column;gap:5px;padding:12px 0;border-bottom:1px solid #edf0f5}.agent-items span{font-size:12px;color:#66748e}.agent-callback-list{display:grid;gap:8px}.agent-callback-list>a{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border:1px solid #e5e8f1;border-radius:9px}.agent-callback-list time{margin-left:auto;font-weight:700;color:#596987}.agent-assign-form{display:flex;gap:8px;align-items:center}.agent-assign-form select{min-width:160px;max-width:230px;padding:10px;border:1px solid #d6ddeb;border-radius:9px}.agent-assign-form button{white-space:nowrap}@media(max-width:680px){.agent-card-grid{grid-template-columns:1fr}.agent-dial-btn{min-height:58px}.agent-card-heading{align-items:baseline}.agent-assign-form{flex-direction:column;align-items:stretch}.agent-assign-form select{max-width:none}.agent-customer-panel dl.detail-list{grid-template-columns:90px 1fr}.agent-callback-list>a{align-items:flex-start;flex-direction:column}.agent-callback-list time{margin-left:0}}

/* Task 6 responsive assignment & reminder controls */
.reminder-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e8eef5;padding:10px 0}
.reminder-row>a{display:flex;flex-wrap:wrap;align-items:center;gap:10px;text-decoration:none;flex:1}
.reminder-row form{flex-shrink:0}
@media(max-width:760px){.reminder-row{align-items:stretch;flex-direction:column}.reminder-row form button{width:100%}.agent-assign-form{flex-wrap:wrap}}