/* Derrils Company Agent Portal — Premium UI v2 — 2026-09-07 */
:root{--ap-ink:#101828;--ap-muted:#667085;--ap-line:#e4e8ef;--ap-bg:#f4f6f9;--ap-panel:#fff;--ap-navy:#101827;--ap-teal:#0f766e;--ap-teal-2:#14967f;--ap-soft:#edf7f4;--ap-red:#b42335;--ap-amber:#a45b08;--ap-green:#18753a;--ap-radius:18px;--ap-shadow:0 14px 40px rgba(16,24,39,.07);font-family:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{background:var(--ap-bg);overflow-x:hidden}body{margin:0;min-width:0;overflow-x:hidden;background:radial-gradient(circle at 90% 0%,rgba(15,118,110,.055),transparent 26rem),linear-gradient(180deg,#f9fbfc,var(--ap-bg));color:var(--ap-ink);font-family:inherit}button,input,select{font:inherit}button{min-height:42px;border-radius:11px!important;border:1px solid var(--ap-line);background:#fff;color:#344054;padding:0 12px;font-weight:750;cursor:pointer;max-width:100%;transition:.16s ease}button.primary,.primary{background:linear-gradient(135deg,var(--ap-teal),var(--ap-teal-2))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 22px rgba(15,118,110,.18)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(15,118,110,.16);outline-offset:2px}input,select{width:100%;min-height:45px!important;border:1px solid #d8dee8!important;border-radius:11px!important;padding:0 12px!important;background:#fff!important}input:focus,select:focus{border-color:#5fa99c!important;box-shadow:0 0 0 4px rgba(15,118,110,.08)!important}.muted{color:var(--ap-muted)!important;font-size:10px!important;line-height:1.6!important}.pill{display:inline-flex!important;align-items:center!important;padding:5px 9px!important;border-radius:999px!important;background:var(--ap-soft)!important;color:#2b7669!important;border:1px solid #d8ebe6!important;font-size:8px!important;font-weight:800!important;white-space:nowrap!important}
.login-shell{min-height:100dvh!important;padding:16px!important;background:radial-gradient(circle at 20% 0%,rgba(20,150,127,.13),transparent 24rem),linear-gradient(145deg,#eef4f7,#f9fbfc 48%,#eef7f4)!important}.login-card{width:min(470px,100%)!important;padding:22px!important;border-radius:22px!important;border:1px solid rgba(220,226,235,.94)!important;box-shadow:0 30px 90px rgba(16,24,40,.13)!important}.brand{margin-bottom:24px!important}.brand img{width:50px!important;height:50px!important;border-radius:14px!important}.brand strong{font-size:16px!important;letter-spacing:-.02em}.brand span{font-size:9px!important}.login-card h1{font-size:26px!important;letter-spacing:-.045em!important}.login-card label{font-size:10px!important;margin-top:14px!important}.login-card .primary{min-height:47px!important}
.portal{min-height:100dvh}.topbar{position:sticky!important;top:0!important;z-index:30!important;padding:10px 12px!important;background:rgba(16,24,39,.96)!important;backdrop-filter:blur(15px)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 7px 22px rgba(16,24,39,.11)!important}.topbar-brand img{width:38px!important;height:38px!important;border-radius:11px!important}.topbar-brand strong{font-size:11px!important}.topbar-brand span{font-size:7px!important;color:#9eabc0!important}.topbar button{min-height:36px!important;padding:0 10px!important;font-size:8px!important;background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}.content{max-width:1320px!important;padding:12px!important;margin:0 auto!important}.hero{grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;padding:16px!important;border-radius:19px!important;background:linear-gradient(135deg,#101827,#19364a 63%,#0f766e)!important;color:#fff!important;border:1px solid rgba(255,255,255,.05)!important;box-shadow:0 18px 48px rgba(16,24,39,.14)!important;position:relative!important;overflow:hidden!important}.hero:after{content:"";position:absolute;right:-45px;top:-58px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.06)}.hero h1{font-size:22px!important;letter-spacing:-.045em!important;margin:2px 0 4px!important;color:#fff!important}.hero .muted{color:#c5d0de!important}.hero .id{position:relative;z-index:1;padding:7px 9px!important;background:rgba(255,255,255,.10)!important;color:#aef5e7!important;border:1px solid rgba(174,245,231,.16)!important;font-size:8px!important}
.filters{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:8px!important;margin:14px 0!important}.filters label{min-width:0!important;font-size:9px!important;margin:0!important}.filters button{min-height:45px!important}.tabs{display:flex!important;flex-wrap:nowrap!important;gap:7px!important;overflow-x:auto!important;padding:2px 0 7px!important;margin-bottom:14px!important;scrollbar-width:none!important}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:0 0 auto!important;min-height:38px!important;padding:0 11px!important;font-size:8px!important;white-space:nowrap!important;border-radius:999px!important;background:#fff!important}.tabs button.active{background:#122338!important;color:#fff!important;border-color:#122338!important;box-shadow:0 6px 16px rgba(16,24,39,.10)!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-bottom:14px!important}.metric,.panel{border:1px solid var(--ap-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--ap-shadow)!important}.metric{padding:13px!important;border-left:0!important;position:relative!important;overflow:hidden!important}.metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ap-teal)}.metric span{font-size:7px!important;text-transform:uppercase!important;letter-spacing:.04em!important;color:#7a8699!important;font-weight:800!important}.metric strong{font-size:17px!important;letter-spacing:-.04em!important;margin-top:6px!important;overflow-wrap:anywhere}.panel{padding:14px!important;min-width:0!important}.panel-head{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important;margin-bottom:12px!important}.panel h2{font-size:14px!important;letter-spacing:-.025em!important}.portal-stack{gap:12px!important}.grid.two{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}.table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;border:1px solid var(--ap-line)!important;border-radius:12px!important;background:#fff!important;-webkit-overflow-scrolling:touch!important}table{min-width:680px!important;border-collapse:separate!important;border-spacing:0!important}th,td{padding:9px 10px!important;border-bottom:1px solid #edf0f4!important;border-left:0!important;border-right:0!important;border-top:0!important;font-size:9px!important;vertical-align:middle!important}th{position:sticky!important;top:0!important;z-index:2!important;background:#f8fafc!important;color:#667085!important;font-size:7px!important;letter-spacing:.055em!important}.row-actions,.slip-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}.row-actions button{min-height:32px!important;padding:0 8px!important;font-size:7px!important}.slip-actions button{flex:1 1 160px!important;min-height:40px!important}.empty{padding:24px!important;border-radius:14px!important;background:#f9fbfc!important;border:1px dashed #d8dee8!important;font-size:9px!important}.status{font-size:7px!important;padding:5px 7px!important}.pay-slip{border-radius:13px!important}.toast{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;border-radius:12px!important;z-index:100!important}

/* Goals */
.agent-goal-overview{display:grid;gap:10px;margin:12px 0 14px;padding:14px;border:1px solid var(--ap-line);border-radius:18px;background:#fff;box-shadow:var(--ap-shadow)}.agent-goal-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.agent-goal-overview-head>div>span{display:block;font-size:7px;color:var(--ap-teal);text-transform:uppercase;letter-spacing:.08em;font-weight:800}.agent-goal-overview-head>div>strong{display:block;font-size:15px;letter-spacing:-.03em;margin-top:3px}.agent-goal-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.agent-goal-card{padding:12px;border:1px solid #e5e9ef;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfcfd)}.agent-goal-card>div:first-child>span{display:block;font-size:7px;color:#7a8699;text-transform:uppercase;font-weight:800;letter-spacing:.04em}.agent-goal-card>div:first-child>strong{display:block;font-size:11px;line-height:1.35;margin-top:3px}.agent-goal-card>div:first-child>small{display:block;color:#98a2b3;font-size:7px;margin-top:2px}.agent-goal-numbers{display:flex;align-items:baseline;gap:4px;margin-top:10px}.agent-goal-numbers strong{font-size:16px;letter-spacing:-.04em}.agent-goal-numbers span{font-size:7px;color:#98a2b3}.agent-goal-track{height:7px;background:#edf1f4;border-radius:999px;overflow:hidden;margin:7px 0}.agent-goal-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ap-teal),#66cdbb)}.agent-goal-card footer{display:flex;justify-content:space-between;gap:8px;font-size:7px;color:#7a8699}.agent-goal-card footer strong{color:#344054}.agent-goals-register{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}.agent-goal-detail{padding:13px;border:1px solid var(--ap-line);border-radius:14px;background:#fbfcfd}.agent-goal-detail.current{background:#fff;border-color:#d6ebe5}.agent-goal-detail header{display:flex;justify-content:space-between;align-items:flex-start;gap:9px}.agent-goal-detail header span{display:block;font-size:7px;color:var(--ap-teal);text-transform:uppercase;font-weight:800}.agent-goal-detail h3{font-size:12px;margin:3px 0;line-height:1.3}.agent-goal-detail header p{font-size:7px;color:#98a2b3;margin:0}.agent-goal-detail header>strong{font-size:16px;letter-spacing:-.04em}.agent-goal-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}.agent-goal-detail-grid>span{padding:8px;border-radius:10px;background:#f7f9fb}.agent-goal-detail-grid>span:last-child{grid-column:1/-1}.agent-goal-detail-grid small{display:block;font-size:6px;text-transform:uppercase;color:#98a2b3;font-weight:800}.agent-goal-detail-grid strong{display:block;margin-top:3px;font-size:8px;color:#344054;overflow-wrap:anywhere}

@media(max-width:620px){.table-wrap td:has(.row-actions),.table-wrap td:has(button){position:sticky!important;right:0!important;z-index:3!important;background:#fff!important;box-shadow:-8px 0 14px rgba(16,24,40,.04)!important}.pay-grid{grid-template-columns:1fr!important}.pay-grid>div{grid-template-columns:110px minmax(0,1fr)!important}.pay-grid b,.pay-grid span{font-size:8px!important;overflow-wrap:anywhere}.slip-actions button{width:auto!important}.content{padding-bottom:22px!important}}
@media(min-width:700px){.content{padding:18px!important}.hero{padding:20px!important}.hero h1{font-size:26px!important}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}.agent-goal-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.agent-goals-register{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{display:flex!important}.filters label{min-width:220px!important}.toast{left:auto!important;right:18px!important;width:min(430px,calc(100vw - 36px))!important}}
@media(min-width:1100px){.content{padding:24px 28px 34px!important}.topbar{padding:12px 28px!important}.hero{padding:24px!important}.hero h1{font-size:30px!important}.panel{padding:18px!important}.metric strong{font-size:20px!important}.agent-goal-overview{padding:18px}.agent-goal-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.agent-goal-detail-grid>span:last-child{grid-column:auto}.agent-goals-register{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media print{.agent-goal-overview{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Agent Portal Premium V2.1 ? Polish lisibilit? ===== */
:root{
  --ap-muted:#475467;
  --ap-line:#dbe3ea;
}

body{line-height:1.45!important}

.content{
  padding-top:10px!important;
}

.panel,
.metric,
.agent-goal-overview,
.agent-goal-card,
.agent-goal-detail,
.empty{
  overflow:hidden!important;
}

.muted,
.empty,
.empty p,
.agent-goal-card>div:first-child>small,
.agent-goal-numbers span,
.agent-goal-card footer,
.agent-goal-detail header p,
.agent-goal-detail-grid small{
  color:#475467!important;
}

.topbar-brand span,
.hero .muted{
  color:#d0d8e4!important;
}

.topbar button,
.filters label,
.tabs button,
th,
td,
button,
input,
select{
  font-size:12px!important;
}

.panel h2,
.metric strong,
.agent-goal-overview-head>div>strong,
.agent-goal-card>div:first-child>strong,
.agent-goal-card footer strong,
.agent-goal-detail h3,
.agent-goal-detail-grid strong{
  color:#101828!important;
}

.metric span,
th{
  color:#475467!important;
}

.agent-goal-overview,
.panel,
.metric{
  padding:16px!important;
}

.agent-goal-card,
.agent-goal-detail{
  background:linear-gradient(180deg,#fff,#fbfcfd)!important;
  border-color:#e4e7ec!important;
}

@media(max-width:620px){
  .content{padding:10px 12px 24px!important}
  .panel,
  .metric,
  .agent-goal-overview{padding:14px!important}
  .agent-goal-card,
  .agent-goal-detail{padding:12px!important}
}
/* ===== Fin Agent Portal Premium V2.1 ===== */

/* ===== Agent Portal V2.2 — cadence hebdomadaire issue du mensuel ===== */
.agent-goal-weekly-cadence{display:grid;gap:6px;margin-top:11px;padding:10px;border:1px solid #d9e8e4;border-radius:11px;background:#f7fbfa}
.agent-goal-weekly-cadence>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.agent-goal-weekly-cadence span{font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#667085}.agent-goal-weekly-cadence strong{font-size:8px;color:#0f5f56;text-align:right}.agent-goal-weekly-cadence small{font-size:6px;line-height:1.4;color:#667085}.agent-goal-weekly-cadence.compact{padding:8px;margin-top:9px}@media(min-width:700px){.agent-goal-weekly-cadence strong{font-size:9px}.agent-goal-weekly-cadence small{font-size:7px}}
/* ===== Fin Agent Portal V2.2 ===== */