
/* CR Workdesk v3.1 — TIF × Telkomsel, cool-neutral operations workspace */
:root{--bg:#f3f7f9;--paper:#fff;--ink:#1e334a;--navy:#1e334a;--muted:#50667a;--line:#dfe8ee;--red:#b45452;--blue:#2a668c;--teal:#237868;--amber:#946429;--shadow:0 2px 16px rgba(26,54,76,.035);--radius:12px}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.5;font-synthesis:none;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}
button:focus-visible,a:focus-visible,input:focus-visible,.ux-trigger:focus-visible,[role=option]:focus-visible{outline:3px solid #7fb4d0;outline-offset:2px}
button,select{touch-action:manipulation}
.brand strong,.panel-head h2,.register-head h2,.hero h1,.metric-value,.drawer h2{font-family:Inter,system-ui,sans-serif}
.brand strong{font-size:17px;letter-spacing:-.035em}.brand small{font-size:11px;letter-spacing:.035em;color:var(--muted)}
.sidebar-label,.panel-kicker,.eyebrow{font-family:Inter,system-ui,sans-serif;font-size:11px;letter-spacing:.075em;color:#60758b}
.nav-item{min-height:44px;font-size:14px;color:#435a70;font-weight:600}.nav-item.active{background:#eaf1f6;color:#174d71}.nav-item.active .nav-indicator{background:var(--blue)}.nav-icon svg{width:19px;height:19px}
.source-card strong,.sidebar-foot strong{font-size:13px}.source-card small,.sidebar-foot span:not(.tiny-orb){font-size:12px}.sidebar-settings{min-height:44px;font-size:13px}
.topbar{height:64px;background:rgba(255,255,255,.94)}.breadcrumb{font:650 12px Inter,system-ui,sans-serif;letter-spacing:.025em}.sync-state{font-size:12px}.topbar-sync{min-height:42px;display:inline-flex;align-items:center;gap:8px;font-size:13px}.avatar{width:42px;height:42px;font-size:12px}
main{padding-top:26px}.hero{margin-bottom:18px}.hero h1{font:750 clamp(28px,2.6vw,36px)/1.15 Inter,system-ui,sans-serif;letter-spacing:-.045em;margin:13px 0 8px;color:var(--navy)}.hero h1 em{color:var(--blue)}.hero p{font-size:14px;color:var(--muted)}.eyebrow{color:#60758b}
.hero-actions{gap:8px}.btn-secondary,.btn-primary{min-height:44px;font-size:13px;font-weight:650;gap:8px}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-primary:hover{background:#205574}.btn-secondary:hover,.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary svg,.btn-primary svg,.topbar-sync svg,.ux-chevron svg{width:16px;height:16px}
.data-banner{min-height:64px;padding:12px 16px}.data-banner strong{font-size:13px}.data-banner p{font-size:12px;line-height:1.55;color:#536d81}.text-link{font-size:13px;color:var(--blue);min-height:40px;padding:0 8px}.data-banner.manual{background:#f6f9fa;border-color:#d9e3e9}
.scope-row{gap:11px}.scope-field{min-width:0;max-width:none;padding:9px 13px;gap:4px}.scope-field>label{font-size:11px;color:#50677b;font-weight:700;letter-spacing:.055em}.reset-btn{font-size:13px;color:var(--blue);min-height:44px}
.metric-grid{gap:12px}.metric{min-height:130px;padding:18px 18px 16px}.metric-top{font-size:12px;letter-spacing:.025em;color:#4d6478;text-transform:none}.metric-icon{width:32px;height:32px}.metric-icon svg{width:19px;height:19px}.metric-value{font-size:clamp(29px,2.8vw,36px);line-height:1.22;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.metric-foot{font-size:12px;font-weight:500;color:#536d81;margin-top:6px}
.panel-head h2,.register-head h2,.section-heading h2{font-family:Inter,system-ui,sans-serif;font-size:19px;letter-spacing:-.025em}.panel-desc,.section-heading p,.register-head p{font-size:13px;color:var(--muted)}.panel-kicker{font-weight:700}.legend-line .legend-label,.legend-line b{font-size:12px}.attention-item b{font-size:13px;line-height:1.45}.attention-item small{font-size:12px;color:var(--muted)}.attention-arrow{color:var(--blue)}
.overview-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.overview-layout .attention-panel{order:-1}.attention-panel,.progress-panel{min-height:270px}.pulse-mark{background:#2a668c;box-shadow:0 0 0 5px #e8f1f7}
.table-toolbar{gap:10px}.search-wrap input,.filter-wrap select{font-size:14px}.register-head .button-minimal,.table-actions button{min-height:40px;font-size:13px}
#crTable th{font-size:11px;letter-spacing:.04em;color:#536d81}#crTable td{font-size:13px;line-height:1.55}.cr-title{font-size:13px}.cr-sub,.recon-copy,.table-footer,.pagination{font-size:12px}.metric-value,.ops-number,.progress-meter,.table-footer{font-variant-numeric:tabular-nums}
.ux-select{position:relative;min-width:0;width:100%}.ux-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;top:0;left:0}
.ux-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:31px;padding:3px 4px 3px 0;border:0;background:transparent;color:var(--ink);font-weight:650;font-size:14px;text-align:left;gap:12px}
.ux-trigger:disabled{opacity:.5}.ux-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ux-chevron{flex:none;width:22px;height:22px;display:grid;place-items:center;color:#47647a;transition:transform .15s}.is-open .ux-chevron{transform:rotate(180deg)}
.ux-menu{position:absolute;z-index:75;top:calc(100% + 9px);left:-12px;min-width:max(100%,190px);max-width:min(320px,calc(100vw - 26px));max-height:310px;overflow:auto;padding:6px;background:#fff;border:1px solid #cbdbe5;border-radius:12px;box-shadow:0 16px 36px rgba(25,55,77,.15)}.ux-menu[hidden]{display:none!important}
.ux-option{display:flex;align-items:center;min-height:40px;padding:9px 11px;border-radius:8px;font-size:13px;line-height:1.35;cursor:pointer;color:#2a4055;outline-offset:-2px}
.ux-option:hover,.ux-option:focus-visible{background:#edf4f8}.ux-option[aria-selected=true]{color:#155374;background:#e9f3f9;font-weight:700}.ux-option[aria-selected=true]::after{content:'✓';margin-left:auto;padding-left:14px}.ux-option[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.filter-wrap{display:flex;align-items:center;gap:8px;min-height:42px;min-width:150px}.filter-wrap>label{font-size:12px;color:#567087;white-space:nowrap}.filter-wrap .ux-select{min-width:90px}.filter-wrap .ux-trigger{min-height:34px;padding-right:2px}.filter-wrap .ux-menu{left:-8px}
.scope-field:focus-within,.filter-wrap:focus-within{border-color:#8db6cf;box-shadow:0 0 0 3px rgba(42,102,140,.09)}
.operations-section{display:block;animation:uxAppear .18s ease-out}.operations-section[hidden],.overview-layout[hidden],.metric-grid[hidden],.table-panel[hidden]{display:none!important}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:6px 0 18px}.section-heading h2{margin:5px 0}.section-heading p{margin:0}.ops-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.ops-stat{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px;min-width:0}.ops-label{display:block;font-weight:650;color:#526b7f;font-size:12px}.ops-number{display:block;font-weight:760;color:var(--ink);font-size:31px;line-height:1.4}.ops-hint{display:block;color:#607487;font-size:12px}
.ops-groups{display:grid;gap:18px}.ops-group{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}.ops-group-head{padding:17px 20px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.ops-group-head h3{font-size:15px;margin:0;letter-spacing:-.01em}.ops-group-head span{color:#607487;font-size:12px}.ops-list{display:grid}.ops-item{width:100%;text-align:left;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(120px,.8fr) 90px;gap:18px;align-items:center;padding:16px 20px;border:0;border-bottom:1px solid #edf1f4;background:#fff;color:var(--ink)}.ops-item:last-child{border-bottom:0}.ops-item:hover{background:#f5f9fb}.ops-item:focus-visible{outline-offset:-4px}.ops-item h4{font-size:14px;margin:0 0 4px;font-weight:680}.ops-item p{font-size:12px;color:#4c6578;margin:0;line-height:1.5}.ops-item .ops-secondary{font-size:12px;color:#4c6578}.ops-item .ops-tag{justify-self:end;border-radius:8px;padding:6px 9px;background:#eaf2f7;color:#245e82;font-size:12px;font-weight:650}.ops-empty{padding:18px 20px;color:#566e80;font-size:13px}
.api-setup{padding:16px;border:1px solid #d8e4ec;border-radius:12px;background:#f6fafc;margin:12px 0}.api-setup>strong{font-size:14px}.api-setup p{font-size:13px;color:#51677c;line-height:1.6;margin:7px 0 13px}.api-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.api-links a:not(.btn-secondary){color:var(--blue);font-size:13px}.redirect-uri{display:grid;gap:8px;margin-top:15px}.redirect-uri span{color:#425c72;font-size:12px;font-weight:650}.redirect-uri code{overflow-wrap:anywhere;font-size:12px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px}.redirect-uri .btn-secondary{justify-self:start}
body[data-page] main>section:not([hidden]){animation:uxAppear .16s ease-out}
@keyframes uxAppear{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1240px){main{padding:26px 26px 30px}.ops-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:30px}}
@media(max-width:800px){.overview-layout{grid-template-columns:1fr}.overview-layout .attention-panel{order:-1}.ops-item{grid-template-columns:minmax(0,1fr) auto;gap:10px}.ops-item .ops-secondary{grid-column:1 / -1}.hero-actions{flex-wrap:wrap}}
@media(max-width:560px){body{font-size:16px}main{padding:20px 16px 28px}.hero h1{font-size:28px;letter-spacing:-.04em}.hero p{font-size:15px}.nav-item{font-size:15px}.scope-field>label,.panel-kicker{font-size:12px}.ux-trigger{min-height:34px;font-size:16px}.ux-option{font-size:15px;min-height:44px}.ops-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-stat{padding:13px}.ops-number{font-size:28px}.ops-item{padding:15px}.ops-item h4{font-size:15px}.ops-item p,.ops-item .ops-secondary{font-size:13px}.section-heading h2{font-size:20px}.section-heading p{font-size:14px}.data-banner p{font-size:13px}.table-actions .button-minimal,.btn-secondary,.btn-primary{min-height:44px}.metric-foot{font-size:12px}.filter-wrap{min-width:0}.topbar-sync{min-width:42px}.overview-layout .attention-panel{order:-1}}
@media(min-width:1024px){.density-compact #crTable td{padding-top:9px;padding-bottom:9px;font-size:12px}.density-compact .cr-title{font-size:12px}.density-compact .cr-sub{font-size:11px}.density-compact #crTable th{padding-top:10px;padding-bottom:10px}.density-compact .table-panel .register-head{padding-top:14px;padding-bottom:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
