:root{ --pu-navy:#223468;--pu-yellow:#fcb717;--text:#27364b;--strong:#15243b;--muted:#6d7888; --border:#dfe4ea;--panel:#fff;--bg:#eef2f6;--danger:#b42318;--success:#18794e; --sidebar-w:350px;--sidebar-collapsed:44px;--shadow-sm:0 4px 14px rgba(24,39,70,.10);--shadow-md:0 16px 40px rgba(20,33,62,.18); } *{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);overflow:hidden}button,input,select,textarea{font:inherit}button{touch-action:manipulation}svg{display:block}.hidden{display:none!important} .app-header{position:fixed;z-index:70;top:0;left:0;right:0;height:68px;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 4px 16px rgba(20,32,60,.08);transform:translateY(0);transition:transform .24s ease}.app-header.is-hidden{transform:translateY(-100%)}.header-inner{width:min(1500px,calc(100% - 28px));height:100%;margin:auto;display:grid;grid-template-columns:minmax(310px,1fr) auto minmax(190px,1fr);align-items:center;gap:18px}.official-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}.official-logo{width:37px;height:37px;flex:0 0 auto}.agency-copy{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}.agency-copy span{font-size:10px;font-weight:700;color:#6d7685}.agency-copy strong{font-size:10px;color:var(--pu-navy);letter-spacing:.015em}.header-nav{display:flex;align-items:center;gap:4px}.nav-link{height:38px;padding:0 13px;border:0;border-radius:8px;background:transparent;color:#5e6877;font-size:11px;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer}.nav-link svg{width:15px}.nav-link.active{background:#edf1fb;color:var(--pu-navy)}.nav-link:disabled{opacity:.45;cursor:not-allowed}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:7px}.icon-btn{width:34px;height:34px;border:1px solid var(--border);background:#fff;border-radius:8px;display:grid;place-items:center;color:var(--pu-navy);cursor:pointer}.icon-btn svg{width:16px}.header-handle{position:fixed;z-index:71;top:0;left:50%;transform:translateX(-50%);height:24px;border:0;border-radius:0 0 8px 8px;background:var(--pu-navy);color:#fff;padding:0 10px;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;box-shadow:var(--shadow-sm);cursor:pointer}.header-handle svg{width:12px;height:12px} .webgis-shell{position:relative;width:100%;height:100%;overflow:hidden}.map-wrap,#map{position:absolute;inset:0}.map-wrap{background:#dfe6ec}.sidebar{position:absolute;z-index:25;top:12px;bottom:12px;left:12px;width:var(--sidebar-w);background:rgba(255,255,255,.985);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow-md);transition:width .22s ease;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-scroll{height:100%;overflow:auto;padding:18px 16px 16px;scrollbar-width:thin}.sidebar.collapsed .sidebar-scroll{display:none}.sidebar-toggle{position:absolute;z-index:3;right:10px;top:12px;width:30px;height:30px;border:1px solid var(--border);background:#fff;color:var(--pu-navy);border-radius:8px;display:grid;place-items:center;cursor:pointer}.sidebar-toggle svg{width:16px}.sidebar.collapsed .sidebar-toggle{right:6px;top:10px}.sidebar-title{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding-right:36px}.section-icon{width:36px;height:36px;border-radius:10px;background:#e9eefb;color:var(--pu-navy);display:grid;place-items:center}.section-icon svg{width:18px}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#8791a0}.sidebar-title h1{font-size:17px;line-height:1.2;margin:2px 0 4px;color:var(--strong)}.sidebar-title p{margin:0;font-size:10px;line-height:1.5;color:var(--muted)} .panel-section{border-top:1px solid var(--border);margin-top:14px;padding-top:13px}.panel-section h2{font-size:11px;margin:0;color:var(--strong)}.section-heading,.section-heading-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}.step-badge{font-size:10px;padding:4px 7px;border-radius:999px;background:#edf1fb;color:var(--pu-navy);font-weight:800}.help{font-size:10px;line-height:1.55;color:var(--muted);margin:0 0 10px}.muted-inline{font-weight:500;color:var(--muted)}label{display:block;font-size:10px;font-weight:700;color:#536174;margin:8px 0}input[type=text],input[type=search],input[type=number],textarea,select{width:100%;border:1px solid #d8dee6;background:#fff;color:var(--strong);border-radius:8px;padding:8px 9px;outline:0;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;line-height:1.45;font-size:10px}input:focus,textarea:focus,select:focus{border-color:#8393bf;box-shadow:0 0 0 3px rgba(34,52,104,.09)}.input-note{font-size:10px;line-height:1.55;color:#7b8594;background:#f6f8fa;border-radius:7px;padding:7px 8px;margin:6px 0 9px}.btn{min-height:36px;border-radius:8px;border:1px solid var(--border);padding:8px 12px;font-size:10px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn svg{width:15px;height:15px}.btn-primary{background:var(--pu-navy);color:#fff;border-color:var(--pu-navy)}.btn-neutral{background:#fff;color:var(--pu-navy)}.btn-danger{background:#b42318;color:#fff;border-color:#b42318}.btn:disabled{opacity:.45;cursor:not-allowed}.full{width:100%}.advanced summary{font-size:10px;font-weight:800;color:#4c5a6d;cursor:pointer;display:flex;align-items:center;gap:6px;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary svg{width:14px}.field-help,.inline-info{border:0;background:transparent;color:#788499;padding:0;display:inline-grid;place-items:center;vertical-align:middle;cursor:pointer}.field-help svg,.inline-info svg{width:13px;height:13px}.status{margin-top:12px;border-radius:8px;padding:8px 9px;font-size:10px;line-height:1.5}.status.neutral{background:#f4f6f8;color:#657183}.status.busy{background:#edf1fb;color:var(--pu-navy)}.status.success{background:#edf8f2;color:#24704e}.status.error{background:#fff0ee;color:#9e2b24}.text-button{border:0;background:transparent;color:#7b4650;padding:4px 0;font-size:10px;font-weight:800;display:flex;align-items:center;gap:4px;cursor:pointer}.text-button svg{width:12px}.point-list{display:grid;gap:7px}.empty-state{border:1px dashed #d8dee6;border-radius:9px;padding:14px 9px;text-align:center;font-size:10px;color:#8b95a3}.add-point.active{background:var(--pu-navy);color:#fff;border-color:var(--pu-navy)} .point-card{border:1px solid var(--border);border-left:4px solid var(--point-color);border-radius:10px;background:#fff;overflow:hidden}.point-card>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px;cursor:pointer}.point-card>summary::-webkit-details-marker{display:none}.point-chip{width:28px;height:24px;border-radius:6px;background:var(--point-color);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:0 0 auto}.point-summary-main{min-width:0;flex:1}.point-summary-main strong{display:block;font-size:10px;color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point-summary-main span{font-size:10px;color:var(--muted)}.point-summary-area{font-size:10px;font-weight:800;color:var(--strong);white-space:nowrap}.point-chevron{color:#8b94a1}.point-chevron svg{width:14px;transition:transform .15s}.point-card[open] .point-chevron svg{transform:rotate(180deg)}.point-body{border-top:1px solid #edf0f3;padding:9px}.point-actions{display:flex;gap:5px;justify-content:flex-end}.small-icon-btn{width:28px;height:28px;border:1px solid var(--border);background:#fff;color:#596779;border-radius:7px;display:grid;place-items:center;cursor:pointer}.small-icon-btn svg{width:14px}.point-name-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.point-name-grid input{height:31px;padding:6px 8px;font-size:10px}.mini-button{border:1px solid var(--border);background:#f6f8fa;color:#45546a;border-radius:7px;padding:0 9px;font-size:10px;font-weight:800;cursor:pointer}.point-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.meta-box{padding:7px;background:#f6f8fa;border-radius:7px}.meta-box span{display:block;font-size:10px;color:#7b8594}.meta-box b{display:block;margin-top:2px;font-size:10px;color:#334258}.point-color-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid #edf0f3;font-size:10px;font-weight:700;color:#657183}.color-input{width:34px!important;height:25px!important;padding:0!important;border:0!important;background:transparent!important}.relationship-content{font-size:10px}.chain-box{padding:8px;background:#eef7f3;border:1px solid #d6e9df;border-radius:8px;color:#385d4d;line-height:1.5}.segment-list{display:grid;gap:4px;margin-top:6px}.segment-list>div{display:flex;justify-content:space-between;gap:8px;padding:5px 6px;background:#fff;border-radius:6px}.sidebar-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.sidebar-footer{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:grid;gap:5px}.definition-link{border:0;background:transparent;color:#536174;padding:4px 0;text-align:left;font-size:10px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer}.definition-link svg{width:13px} /* MapLibre native-control placement */ .maplibregl-ctrl-top-left,.maplibregl-ctrl-bottom-left{left:calc(var(--sidebar-w) + 18px);transition:left .22s ease}.sidebar-is-collapsed .maplibregl-ctrl-top-left,.sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:calc(var(--sidebar-collapsed) + 18px)}.maplibregl-ctrl-top-right{top:28px}.maplibregl-ctrl-group{border-radius:9px!important;overflow:hidden;box-shadow:var(--shadow-sm)!important}.maplibregl-ctrl-group button{width:36px;height:36px}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-size:18px}.maplibregl-ctrl-scale{font-family:"Plus Jakarta Sans",sans-serif;font-size:10px;background:rgba(255,255,255,.92);border-color:#687487}.maplibregl-ctrl-attrib{font-size:10px!important}.maplibregl-ctrl-bottom-right{bottom:0!important} .map-search{width:min(400px,calc(100vw - var(--sidebar-w) - 180px));min-width:260px;height:42px;display:grid;grid-template-columns:28px minmax(0,1fr) 36px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:10px!important;box-shadow:var(--shadow-sm);padding:3px;position:relative;margin:10px!important}.sidebar-is-collapsed .map-search{width:min(400px,calc(100vw - 180px))}.map-search>svg{width:16px;margin:auto;color:#7a8594}.map-search input{height:34px;border:0!important;box-shadow:none!important;padding:0 3px;margin:0}.search-submit{height:34px;border:0;border-radius:7px;background:var(--pu-navy);color:#fff;display:grid;place-items:center;cursor:pointer}.search-submit svg{width:15px}.map-search-results{position:absolute;left:0;right:0;top:46px;max-height:300px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow-md)}.search-result{display:block;width:100%;border:0;border-bottom:1px solid #edf0f3;background:#fff;text-align:left;padding:9px 10px;cursor:pointer}.search-result:hover{background:#f6f8fa}.search-result strong{display:block;font-size:10px}.search-result span{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:2px}.search-loading,.search-empty{padding:10px;font-size:10px;color:var(--muted)}.map-tools-control button{display:grid!important;place-items:center}.map-tools-control svg{width:17px;height:17px;color:#34455f}.map-tools-control button.active{background:var(--pu-navy)}.map-tools-control button.active svg{color:#fff}.coord-readout{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#435066;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:6px;padding:5px 7px!important;margin:0 0 10px 10px!important;box-shadow:none!important;pointer-events:none} .map-panel{position:absolute;z-index:35;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:12px}.layer-panel{right:58px;top:36px;width:290px;max-height:calc(100% - 70px);overflow:auto}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--strong)}.panel-close,.modal-close{width:29px;height:29px;border:0;border-radius:7px;background:#f1f3f6;color:#687486;display:grid;place-items:center;cursor:pointer}.panel-close svg,.modal-close svg{width:14px}.layer-group{border-top:1px solid var(--border);padding-top:8px;margin-top:9px}.layer-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.check-row{display:flex;align-items:center;gap:7px;font-weight:600;margin:5px 0;line-height:1.35}.check-row input[type=checkbox],.choice-card input,.check-card input{width:15px;height:15px;margin:0;accent-color:var(--pu-navy)}.child-row{padding-left:22px;color:var(--muted)}.river-orders{display:grid;grid-template-columns:1fr 1fr;padding-left:22px}.small-title{font-size:10px;font-weight:800;letter-spacing:.08em;color:#687486}.range-row{display:grid;grid-template-columns:auto 1fr 42px;align-items:center;gap:7px}.range-row input{margin:0;height:auto}.range-row span{text-align:right;font-size:10px;color:var(--muted)}.strong-range{font-weight:700}.measure-panel{left:calc(var(--sidebar-w) + 18px);bottom:64px;min-width:235px;font-size:10px;transition:left .22s ease}.sidebar-is-collapsed .measure-panel{left:calc(var(--sidebar-collapsed) + 18px)}.measure-panel strong{display:block;margin-bottom:6px}.measure-panel button{margin-top:7px;border:0;background:#f1f3f6;color:#536174;border-radius:6px;padding:6px 8px;font-size:10px;font-weight:700;display:flex;align-items:center;gap:5px;cursor:pointer}.measure-panel button svg{width:13px} .maplibregl-popup-content{font-family:"Plus Jakarta Sans",sans-serif;border-radius:11px;padding:12px;box-shadow:var(--shadow-md);min-width:245px}.point-popup{display:grid;gap:7px}.point-popup>strong{font-size:11px;color:var(--strong)}.point-coords{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#7a8494}.point-basin{padding:5px 7px;border-radius:6px;background:#f4f6f8;color:#566376;font-size:10px}.point-popup label{font-size:10px;margin:0}.point-popup input{height:32px;font-size:10px}.point-actions-popup{display:flex;gap:6px}.point-actions-popup button{flex:1;border:0;border-radius:7px;padding:7px;font-size:10px;font-weight:800;cursor:pointer}.point-confirm{background:var(--pu-navy);color:#fff}.point-cancel{background:#f0f2f5;color:#526071} .modal-backdrop{position:absolute;inset:0;z-index:80;background:rgba(13,22,42,.46);display:grid;place-items:center;padding:20px}.modal-card{width:min(510px,100%);max-height:calc(100% - 30px);overflow:auto;background:#fff;border-radius:16px;padding:18px;box-shadow:0 24px 70px rgba(12,21,43,.28)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.modal-head h2{font-size:15px;color:var(--strong);margin:2px 0 0}.warning-modal{text-align:center}.warning-icon{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#fff1d6;color:#8a5a00}.warning-icon svg{width:23px}.neutral-icon{background:#edf1fb;color:var(--pu-navy)}.warning-modal h2{font-size:15px;color:#684b08;margin:0}.warning-modal h3{font-size:10px;color:#936b16;margin:5px 0 10px}.warning-modal p,.confirm-modal p,.source-modal p{font-size:10px;line-height:1.65;color:#5e6877}.modal-meta{margin:10px 0;padding:8px;border-radius:8px;background:#fff6dc;color:#76570b;font-size:10px}.download-section{border-top:1px solid var(--border);padding-top:11px;margin-top:10px}.download-section>strong{font-size:10px;color:var(--strong)}.choice-card{display:flex;align-items:flex-start;gap:9px;padding:9px;border:1px solid var(--border);border-radius:9px;margin:7px 0;cursor:pointer}.choice-card span{display:flex;flex-direction:column;gap:2px}.choice-card b{font-size:10px}.choice-card small{font-size:10px;line-height:1.45;color:var(--muted)}.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.check-card{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--border);border-radius:8px;margin:0;font-size:10px}.modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}.download-status{min-height:18px;margin-top:8px;font-size:10px;color:var(--muted)}.definition-modal{width:min(740px,100%)}.definition-modal article{border-top:1px solid var(--border);padding:12px 0}.definition-modal article:first-of-type{border-top:0}.definition-modal h3{font-size:11px;color:var(--pu-navy);margin:0 0 6px}.definition-modal p,.definition-modal li{font-size:10px;line-height:1.7;color:#4f5d70}.definition-modal ol{padding-left:20px}.definition-modal cite{font-size:10px;line-height:1.45;color:#778192}.app-definition-note{margin-top:8px;padding:8px 9px;border-left:3px solid var(--pu-yellow);background:#fff9e7;border-radius:5px;font-size:10px;line-height:1.55;color:#66572b}.source-modal{width:min(470px,100%)} @media(max-width:900px){:root{--sidebar-w:320px}.agency-copy span{font-size:10px}.agency-copy strong{font-size:10px}.header-nav{display:none}.header-inner{grid-template-columns:1fr auto}.map-search{width:min(350px,calc(100vw - var(--sidebar-w) - 150px))}} @media(max-width:700px){.agency-copy span{display:none}.agency-copy strong{font-size:10px}.sidebar{top:8px;bottom:8px;left:8px;width:min(320px,calc(100% - 60px))}.sidebar.collapsed{width:44px}.maplibregl-ctrl-top-left,.maplibregl-ctrl-bottom-left{left:10px}.sidebar:not(.collapsed)~.map-wrap .maplibregl-ctrl-top-left{opacity:0;pointer-events:none}.map-search{width:min(360px,calc(100vw - 90px));min-width:220px}.layer-panel{right:52px;width:min(290px,calc(100% - 68px))}.measure-panel{left:12px}.header-inner{width:calc(100% - 18px)}.format-grid{grid-template-columns:1fr}.point-meta{grid-template-columns:1fr}} /* ============================================================ v7 shared-shell alignment + WebGIS stabilization ============================================================ */ :root{--sidebar-collapsed:0px} html,body{height:100%;overflow:hidden} body.spatial-page{background:var(--bg-main);color:var(--text-main);font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} /* Shared header from olah-data-hidrologi-bbwsso, kept as map overlay. */ .spatial-header{position:fixed;top:0;left:0;right:0;z-index:70;width:100%;height:auto;background:var(--card-bg);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);transform:translateY(0);transition:transform .24s ease} .spatial-header.is-hidden{transform:translateY(-100%)} .spatial-header .app-header-main{min-height:74px} .spatial-header-actions{justify-self:start;margin-left:0} .spatial-header [data-theme="dark"] .spatial-header .header-menu-handle{position:absolute;z-index:2;left:50%;bottom:-25px;transform:translateX(-50%);height:25px;padding:0 11px;border:1px solid var(--pu-navy);border-top:0;border-radius:0 0 8px 8px;background:#223468;color:#fff;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;box-shadow:var(--shadow-sm);cursor:pointer} .header-menu-handle svg{width:12px;height:12px}.header-reveal-zone{position:fixed;z-index:69;top:0;left:0;right:0;height:10px;pointer-events:none} [data-theme="dark"] .official-logo path:last-child{fill:#b7c8ee} .webgis-shell{position:relative;width:100%;height:100%;overflow:hidden}.map-wrap,#map{position:absolute;inset:0} .sidebar{background:color-mix(in srgb,var(--card-bg) 98%,transparent);border-color:var(--border-color);color:var(--text-main)} .sidebar.collapsed{width:0;opacity:0;visibility:hidden;pointer-events:none;border:0;box-shadow:none;transform:translateX(-20px)} .sidebar-toggle{background:var(--card-bg);border-color:var(--border-color);color:var(--component-icon)} .sidebar-expand-floating{position:absolute;z-index:30;top:12px;left:12px;width:42px;height:42px;border:1px solid var(--border-color);border-radius:11px;background:var(--card-bg);color:var(--component-icon);display:grid;place-items:center;box-shadow:var(--shadow-sm);cursor:pointer} .sidebar-expand-floating svg{width:19px;height:19px}.sidebar-expand-floating.hidden{display:none!important} .sidebar-scroll{background:transparent} .sidebar-title h1,.panel-section h2,.point-popup>strong,.panel-title-row,.modal-head h2{color:var(--text-strong)} .sidebar-title p,.help,.input-note,.empty-state,.point-summary-main span,.point-coords,.download-status{color:var(--text-muted)} .panel-section,.sidebar-actions,.sidebar-footer,.point-body,.download-section,.layer-group{border-color:var(--border-color)} input[type=text],input[type=search],input[type=number],textarea,select{background:var(--input-bg);color:var(--text-main);border-color:var(--border-strong)} #coordinateInput{height:38px;min-height:38px;line-height:38px;padding-top:0;padding-bottom:0;white-space:nowrap} .btn-primary,.search-submit,.point-confirm,.add-point.active{background:#223468;color:#fff;border-color:#223468} .btn-neutral,.icon-btn,.small-icon-btn,.mini-button{background:var(--card-bg);color:var(--text-main);border-color:var(--border-color)} .status.neutral,.meta-box,.point-basin,.input-note{background:var(--bg-soft)} .point-card,.search-result,.map-search-results,.map-panel,.maplibregl-popup-content,.modal-card{background:var(--card-bg);color:var(--text-main);border-color:var(--border-color)} .search-result{border-color:var(--border-color)}.search-result:hover{background:var(--bg-soft)} .point-body{background:var(--card-bg)}.point-card{background:var(--card-bg)}.meta-box b{color:var(--text-main)} /* One native MapLibre toolbar in the top-right. */ .map-toolbar-control{display:flex!important;flex-direction:column!important;margin:10px!important;border:1px solid var(--border-color)!important;background:var(--card-bg)!important} .map-toolbar-control button{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;background:var(--card-bg)!important;color:var(--text-main)!important;border:0!important;border-bottom:1px solid var(--border-color)!important} .map-toolbar-control button:last-child{border-bottom:0!important}.map-toolbar-control button.active{background:#223468!important;color:#fff!important}.map-toolbar-control svg{width:17px;height:17px} .maplibregl-ctrl-top-right{top:28px;right:0}.maplibregl-ctrl-group{background:var(--card-bg)!important} .maplibregl-ctrl-top-left,.maplibregl-ctrl-bottom-left{left:calc(var(--sidebar-w) + 18px);transition:left .22s ease} .sidebar-is-collapsed .maplibregl-ctrl-top-left,.sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:56px} .sidebar-is-collapsed .measure-panel{left:12px}.measure-panel{left:calc(var(--sidebar-w) + 18px)} .map-search{background:var(--card-bg);border-color:var(--border-color);width:min(400px,calc(100vw - var(--sidebar-w) - 160px))}.sidebar-is-collapsed .map-search{width:min(400px,calc(100vw - 125px))} .coord-readout,.maplibregl-ctrl-scale{background:color-mix(in srgb,var(--card-bg) 92%,transparent)!important;color:var(--text-main)!important;border-color:var(--border-strong)!important} .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--card-bg) 88%,transparent)!important;color:var(--text-muted)!important}.maplibregl-ctrl-attrib a{color:var(--primary)!important} .layer-panel{right:58px;top:38px}.panel-close,.modal-close,.measure-panel button{background:var(--bg-soft);color:var(--text-muted)} /* Dark mode for application chrome. The map itself changes to Esri Dark Gray Canvas in JS. */ [data-theme="dark"] body.spatial-page{--text:#edf1f8;--strong:#fff;--muted:#aab4c7;--border:#2b3850;--panel:#182236;--bg:#101625} [data-theme="dark"] .section-icon,[data-theme="dark"] .step-badge{background:var(--pu-blue-soft);color:var(--primary)} [data-theme="dark"] .status.neutral,[data-theme="dark"] .input-note,[data-theme="dark"] .meta-box,[data-theme="dark"] .point-basin{background:#151d2e;color:var(--text-muted)} [data-theme="dark"] .status.busy{background:#1b2945;color:#c8d6f3}[data-theme="dark"] .status.success{background:#1d3428;color:#8bd3a5}[data-theme="dark"] .status.error{background:#3a2328;color:#f2a0a0} [data-theme="dark"] .chain-box{background:#1d3428;border-color:#315844;color:#bde0c9}[data-theme="dark"] .segment-list>div{background:#182236} [data-theme="dark"] .warning-icon{background:#393118;color:#f1bb5a}[data-theme="dark"] .neutral-icon{background:#1b2945;color:#b7c8ee}[data-theme="dark"] .warning-modal h2{color:#f2cf6c}[data-theme="dark"] .warning-modal h3{color:#d9b45d}[data-theme="dark"] .modal-meta{background:#393118;color:#f2cf6c} [data-theme="dark"] .app-definition-note{background:#2d2b24;color:#e5d59c} [data-theme="dark"] .check-row input[type=checkbox],[data-theme="dark"] .choice-card input,[data-theme="dark"] .check-card input{accent-color:#9db5e8} /* Mobile: preserve functionality before density. */ @media(max-width:780px){ .spatial-header .app-header-main{width:calc(100% - 18px);min-height:62px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "nav nav";row-gap:4px;padding:7px 0} .spatial-header .official-brand{grid-area:brand}.spatial-header .header-actions{grid-area:actions}.spatial-header .app-nav{grid-area:nav;display:none} .agency-copy .agency-overline,.agency-copy .agency-subline{display:none}.agency-copy strong{font-size:10px}.official-logo{width:36px;height:36px;flex-basis:36px} .sidebar{top:8px;bottom:8px;left:8px;width:min(340px,calc(100% - 16px));max-width:calc(100% - 16px)}.sidebar-toggle{width:36px;height:36px} .sidebar-expand-floating{top:10px;left:10px;width:40px;height:40px} .maplibregl-ctrl-top-left{left:8px}.sidebar-is-collapsed .maplibregl-ctrl-top-left{left:52px}.map-search{width:min(330px,calc(100vw - 112px));min-width:0;margin:10px 6px!important} .sidebar:not(.collapsed)~.map-wrap .maplibregl-ctrl-top-left{opacity:0;pointer-events:none} .map-toolbar-control button{width:42px!important;height:42px!important}.maplibregl-ctrl-top-right{top:24px} .layer-panel{right:58px;top:34px;width:min(290px,calc(100% - 70px));max-height:calc(100% - 80px)} .coord-readout{display:none!important}.measure-panel{left:10px;right:58px;bottom:58px;min-width:0} .modal-backdrop{padding:12px}.modal-card{max-height:calc(100% - 20px);border-radius:13px}.point-meta{grid-template-columns:1fr}.format-grid{grid-template-columns:1fr} } @media(max-width:430px){ .spatial-header-actions .theme-toggle-btn{width:34px;height:34px}.spatial-header-actions .theme-toggle-btn:nth-of-type(1){display:none} .map-search{width:calc(100vw - 112px)}.map-toolbar-control button{width:40px!important;height:40px!important} .sidebar-title{grid-template-columns:32px 1fr}.section-icon{width:32px;height:32px}.sidebar-title h1{font-size:15px} } /* ============================================================ Visual stabilization - shared palette/typography with olah-data-hidrologi-bbwsso - native control offsets that collapse cleanly - visual Peta Dasar gallery ============================================================ */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Preserve the official PU logo exactly in light and dark modes. */ .official-logo{filter:none!important;opacity:1!important;mix-blend-mode:normal!important} .official-logo path:first-child{fill:#FCB717!important} .official-logo path:last-child{fill:#223468!important} [data-theme="dark"] .official-logo path:first-child{fill:#FCB717!important} [data-theme="dark"] .official-logo path:last-child{fill:#223468!important} /* Header typography mirrors the shared repo instead of the older compact WebGIS overrides. */ .spatial-header .agency-copy{line-height:1.22;gap:1px} .spatial-header .agency-copy span,.spatial-header .agency-copy strong{color:var(--pu-navy);font-size:.67rem;letter-spacing:.018em;font-weight:700} .spatial-header .agency-copy strong{font-weight:800} .spatial-header .app-nav-link{font-size:.78rem} .spatial-header .theme-toggle-btn{background:var(--card-bg);border-color:var(--border-color);color:var(--text-muted)} .header-menu-handle{background:#223468!important;color:#fff!important;border-color:#223468!important} /* WebGIS content uses the same semantic colors and text scale as the shared UI. */ body.spatial-page{--text:var(--text-main);--strong:var(--text-strong);--muted:var(--text-muted);--border:var(--border-color);--panel:var(--card-bg);--bg:var(--bg-main)} .sidebar{background:color-mix(in srgb,var(--card-bg) 98%,transparent);border-color:var(--border-color)} .sidebar-title .eyebrow{font-size:.63rem;color:var(--primary)} .sidebar-title h1{font-size:1.05rem;color:var(--text-strong)} .sidebar-title p{font-size:.68rem;color:var(--text-muted)} .panel-section h2,.panel-title-row{font-size:.76rem;color:var(--text-strong)} .help{font-size:.66rem;color:var(--text-muted);line-height:1.55} label{font-size:.67rem;color:var(--text-label);font-weight:750} input[type=text],input[type=search],input[type=number],textarea,select{font-size:.71rem;font-weight:600;background:var(--input-bg);color:var(--text-main);border-color:var(--border-strong)} #coordinateInput{height:38px!important;min-height:38px!important;padding:0 11px!important;line-height:38px!important} .btn{font-size:.7rem;min-height:38px} .status{font-size:.66rem} .step-badge{font-size:10px;background:var(--pu-blue-soft);color:var(--primary)} .point-summary-main strong{font-size:.68rem;color:var(--text-strong)} .point-summary-main span,.point-summary-area{font-size:10px} .point-summary-area{color:var(--text-strong)} .point-body,.point-card,.meta-box,.search-result,.map-search-results,.map-panel,.maplibregl-popup-content,.modal-card{background:var(--card-bg);color:var(--text-main);border-color:var(--border-color)} .meta-box span{font-size:10px;color:var(--text-muted)}.meta-box b{font-size:.66rem;color:var(--text-main)} .definition-link,.text-button,.small-title,.input-note,.download-status{font-size:10px} /* Yellow PU download action requested for this application. */ .btn-download{background:var(--secondary-action-bg)!important;color:var(--secondary-action-text)!important;border-color:var(--secondary-action-bg)!important} .btn-download svg{color:currentColor!important} /* Sidebar collapsed = no residual white rail; only the floating button remains. */ .sidebar.collapsed{width:0!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;border:0!important;box-shadow:none!important;transform:translateX(-24px)!important} .sidebar-expand-floating{background:var(--card-bg);border-color:var(--border-color);color:var(--component-icon)} /* Native MapLibre placement. Bottom-left returns to the true screen edge when collapsed. */ .maplibregl-ctrl-top-left{left:calc(var(--sidebar-w) + 18px)!important;transition:left .22s ease!important} .maplibregl-ctrl-bottom-left{left:calc(var(--sidebar-w) + 18px)!important;transition:left .22s ease!important} .sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:0!important} .sidebar-is-collapsed .maplibregl-ctrl-top-left{left:52px!important} .sidebar-is-collapsed .measure-panel{left:12px!important} .maplibregl-ctrl-bottom-left .maplibregl-ctrl{margin-left:10px!important} .maplibregl-ctrl-bottom-left .coord-readout{margin-left:10px!important} .maplibregl-ctrl-bottom-right{right:0!important;bottom:0!important} /* Single right-side toolbar. No MapLibre controls are stacked outside this group. */ .maplibregl-ctrl-top-right{top:0!important;right:0!important} .map-toolbar-control{display:flex!important;flex-direction:column!important;margin:10px!important;border:1px solid var(--border-color)!important;border-radius:10px!important;overflow:hidden!important;background:var(--card-bg)!important;box-shadow:var(--shadow-sm)!important} .map-toolbar-control button{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--border-color)!important;border-radius:0!important;background:var(--card-bg)!important;color:var(--text-main)!important} .map-toolbar-control button:last-child{border-bottom:0!important} .map-toolbar-control button.active{background:#223468!important;color:#fff!important} /* Basemap is a dedicated visual gallery, separate from Layer & Tampilan. */ .basemap-modal{width:min(760px,100%)} .basemap-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .basemap-card{position:relative;min-width:0;padding:0;overflow:hidden;border:1px solid var(--border-color);border-radius:11px;background:var(--card-bg);color:var(--text-main);cursor:pointer;text-align:left;box-shadow:var(--shadow-xs);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .basemap-card:hover{border-color:var(--control-hover-border);box-shadow:var(--shadow-sm);transform:translateY(-1px)} .basemap-card.active{border:2px solid #223468;box-shadow:0 0 0 3px rgba(34,52,104,.10)} [data-theme="dark"] .basemap-card.active{border-color:#b7c8ee;box-shadow:0 0 0 3px rgba(183,200,238,.12)} .basemap-thumb{display:block;width:100%;aspect-ratio:16/9;background-position:center;background-size:cover;background-color:var(--bg-soft)} .basemap-card-label{display:block;padding:9px 10px;border-top:1px solid var(--border-color);background:var(--card-bg);font-size:.67rem;font-weight:650;line-height:1.3;white-space:normal} .basemap-card.active .basemap-card-label{font-weight:800;color:var(--text-strong)} .basemap-thumb-world-topo{background-image:url('https://www.arcgis.com/sharing/rest/content/items/7dc6cea0b1764a1f9af2e679f642f0f5/info/thumbnail/thumbnail.png')} .basemap-thumb-esri-satellite{background-image:url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/8/133/206')} .basemap-thumb-osm{background-image:url('https://tile.openstreetmap.org/8/206/133.png')} .basemap-thumb-google-maps{background-image:url('https://mt1.google.com/vt/lyrs=m&x=206&y=133&z=8')} .basemap-thumb-google-satellite{background-image:url('https://mt1.google.com/vt/lyrs=s&x=206&y=133&z=8')} .basemap-thumb-rbi{background-image:url('https://geoservices.big.go.id/rbi/rest/services/BASEMAP/Rupabumi_Indonesia/MapServer/tile/8/133/206')} .basemap-thumb-esri-dark{background-image:url('https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/8/133/206')} /* Basemap/layer popups remain above the map but below the auto-hidden header. */ .layer-panel{top:10px!important;right:58px!important} .map-search{background:var(--card-bg);border-color:var(--border-color)} .coord-readout,.maplibregl-ctrl-scale{background:color-mix(in srgb,var(--card-bg) 94%,transparent)!important;color:var(--text-main)!important;border-color:var(--border-strong)!important} .maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--card-bg) 90%,transparent)!important;color:var(--text-muted)!important} /* Mobile is functional first: the sidebar becomes an overlay and galleries reflow. */ @media(max-width:780px){ .spatial-header .app-header-main{min-height:62px} .spatial-header .agency-copy span{display:none}.spatial-header .agency-copy strong{font-size:10px} .sidebar{top:8px!important;bottom:8px!important;left:8px!important;width:min(340px,calc(100% - 16px))!important;max-width:calc(100% - 16px)!important} .sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:0!important} .sidebar-is-collapsed .maplibregl-ctrl-top-left{left:50px!important} .map-search{width:min(330px,calc(100vw - 108px))!important;min-width:0!important} .map-toolbar-control button{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important} .basemap-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .modal-backdrop{padding:10px}.basemap-modal{max-height:calc(100% - 12px)} .layer-panel{top:8px!important;right:58px!important;width:min(290px,calc(100% - 70px))!important} } @media(max-width:430px){ .basemap-gallery{grid-template-columns:1fr 1fr;gap:8px} .basemap-card-label{font-size:10px;padding:8px} .map-search{width:calc(100vw - 108px)!important} .sidebar-title h1{font-size:.96rem} } /* ============================================================ Minor polish & persistence-ready controls ============================================================ */ /* Header identity: preserve PU logo and keep agency copy legible in both themes. */ .spatial-header .agency-copy span, .spatial-header .agency-copy strong{color:#223468!important} [data-theme="dark"] .spatial-header .agency-copy span, [data-theme="dark"] .spatial-header .agency-copy strong{color:#c8d6f3!important} [data-theme="dark"] .spatial-header .agency-copy strong{color:#e7eefc!important} /* Secondary information links are now placed before point selection. */ .sidebar-info-links{display:grid;grid-template-columns:1fr;gap:4px;margin:2px 0 10px;padding:0 0 10px;border-bottom:1px solid var(--border-color)} .sidebar-info-links .definition-link{min-height:30px;padding:6px 8px;border:1px solid transparent;border-radius:8px;color:var(--text-muted);background:transparent;font-size:.63rem;font-weight:700} .sidebar-info-links .definition-link svg{width:14px;height:14px;color:var(--component-icon)} [data-theme="dark"] .sidebar-info-links .definition-link{color:#cbd5e5} [data-theme="dark"] /* Improve advanced settings and technical content contrast. */ .advanced summary{color:var(--text-strong)!important;background:var(--surface-soft)!important;border-color:var(--border-color)!important} .advanced summary svg{color:var(--component-icon)!important} .advanced[open] summary{color:var(--component-heading)!important} .definition-modal h3{color:var(--component-heading)!important} .definition-modal p,.definition-modal li,.source-modal p,.confirm-modal p,.warning-modal p{color:var(--text-main)!important} .definition-modal cite{color:var(--text-muted)!important} .app-definition-note{background:var(--accent-soft)!important;color:var(--text-main)!important;border-left-color:var(--pu-yellow)!important} [data-theme="dark"] .app-definition-note{background:var(--accent-soft)!important;color:#f0e4b8!important} /* Point/DTA color controls remain readable on dark surfaces. */ .point-color-row{color:var(--text-label)!important;font-weight:750} [data-theme="dark"] .point-color-row{color:#d8e0ed!important} .point-chip{color:#fff!important} /* Destructive and add/cancel actions. */ .text-button#clearAllBtn,.small-icon-btn.remove-point{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important} .text-button#clearAllBtn{min-height:30px;padding:6px 9px;border:1px solid var(--danger);border-radius:8px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800} .text-button#clearAllBtn svg,.small-icon-btn.remove-point svg{color:#fff!important} .add-point{background:#223468!important;color:#fff!important;border-color:#223468!important} .add-point.active{background:var(--card-bg)!important;color:var(--primary)!important;border-color:var(--primary)!important} .add-point.active svg{color:currentColor!important} /* Reset color action. */ .layer-actions{padding-bottom:1px}.reset-colors-btn{justify-content:center} /* Basemap gallery: 12 maps, 3 columns desktop. */ .basemap-modal{width:min(820px,100%)} .basemap-gallery{grid-template-columns:repeat(3,minmax(0,1fr))} .basemap-thumb-world-topo{background-image:url('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/8/133/206')!important} .basemap-thumb-esri-light{background-image:url('https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/8/133/206')} .basemap-thumb-opentopo{background-image:url('https://a.tile.opentopomap.org/8/206/133.png')} /* Hillshade is an overlay above the selected base map. */ .layer-group:has(#showHillshade){background:var(--surface-soft);border:1px solid var(--border-color);border-radius:9px;padding:8px;margin-top:9px} /* More explicit point edit fields. */ .point-name-grid{align-items:end} .point-name-grid .rename-point{color:var(--text-main)!important;background:var(--input-bg)!important;border-color:var(--border-strong)!important} /* Mobile: preserve tap targets and avoid a too-tall sidebar. */ @media(max-width:780px){ .sidebar-info-links{grid-template-columns:1fr 1fr;gap:5px} .sidebar-info-links .definition-link{font-size:10px;line-height:1.35;align-items:flex-start} .basemap-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:390px){ .sidebar-info-links{grid-template-columns:1fr} .basemap-gallery{grid-template-columns:1fr 1fr!important} } .point-chip{width:auto!important;min-width:28px;max-width:92px;padding:0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .point-edit-label{display:block;color:var(--text-label)!important;font-size:10px!important;font-weight:750!important} .point-edit-label .point-name-grid{margin-top:5px} [data-theme="dark"] .meta-box{background:var(--surface-raised)!important}.meta-box span{color:var(--text-muted)!important}.meta-box b{color:var(--text-main)!important} /* ============================================================ Topology-safe + fluid UX ============================================================ */ .indicative-notice{display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;align-items:start;margin:2px 0 9px;padding:8px 9px;border:1px solid var(--warning-border,#ead9a5);border-radius:9px;background:var(--accent-soft);color:var(--text-main);font-size:10px;line-height:1.5} .indicative-notice svg{width:15px;height:15px;margin-top:1px;color:#9b7300}.indicative-notice b{color:var(--text-strong)} [data-theme="dark"] .indicative-notice{border-color:#6b5b2a;background:#2a261a;color:#e8edf6}[data-theme="dark"] .indicative-notice svg{color:#ffd65d} .point-limit-note{margin-top:2px;color:var(--text-muted);font-size:10px;font-weight:600;line-height:1.35}.section-heading-row>div>h2{display:flex;align-items:center;gap:5px}.section-heading-row #pointCount{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--pu-blue-soft);color:var(--primary);font-size:10px;font-weight:800} .spaced-add-point{margin-top:11px} .danger-text-button,.danger-icon-btn{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}.danger-icon-btn svg,.danger-text-button svg{color:#fff!important} .map-search{grid-template-columns:36px minmax(0,1fr) 36px!important}.search-sidebar-toggle{width:34px;height:34px;border:0;border-radius:7px;background:transparent;color:var(--pu-navy);display:grid;place-items:center;cursor:pointer}.search-sidebar-toggle svg{width:17px;height:17px}[data-theme="dark"] .search-sidebar-toggle{color:#d8e6ff} .modal-subtitle{margin:3px 0 0;max-width:560px;color:var(--text-muted);font-size:10px;line-height:1.45}.no-basemap-option{width:100%;display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--surface-soft);color:var(--text-main);text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.no-basemap-option>svg{width:18px;height:18px;color:var(--component-icon);flex:0 0 auto}.no-basemap-option span{display:grid;gap:2px}.no-basemap-option b{font-size:.67rem}.no-basemap-option small{font-size:10px;color:var(--text-muted);line-height:1.35}.no-basemap-option.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(34,52,104,.10);background:var(--pu-blue-soft)}[data-theme="dark"] .no-basemap-option.active{border-color:#b7c8ee;box-shadow:0 0 0 3px rgba(183,200,238,.12)} .point-summary-main{display:grid!important;gap:1px}.point-summary-main strong{font-size:.63rem!important;color:var(--text-strong)!important}.point-summary-main span{display:block;font-size:10px!important;color:var(--text-muted)!important}.point-chip{max-width:115px!important} .point-card>summary{transition:background .16s ease}.point-card>summary:hover{background:var(--surface-soft)}.point-card[open] .point-body{animation:pointBodyIn .18s ease both}@keyframes pointBodyIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}} .result-skeleton{display:block;border-radius:999px;background:linear-gradient(90deg,var(--surface-soft),var(--border-color),var(--surface-soft));background-size:220% 100%;animation:skeletonSweep 1.15s linear infinite}.skeleton-wide{width:90px;height:8px}.skeleton-short{width:64px;height:7px}.skeleton-area{width:42px;height:10px}@keyframes skeletonSweep{to{background-position:-220% 0}} .undo-toast{position:absolute;z-index:90;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(430px,calc(100% - 24px));padding:10px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);color:var(--text-main);box-shadow:var(--shadow-md);font-size:.64rem;font-weight:650;animation:toastIn .18s ease both}.undo-toast button{border:0;background:transparent;color:var(--primary);font-size:.63rem;font-weight:800;cursor:pointer;padding:3px 4px}.undo-toast.hidden{display:none}@keyframes toastIn{from{opacity:0;transform:translate(-50%,7px)}to{opacity:1;transform:translate(-50%,0)}} .usage-notice-modal{max-width:520px}.usage-notice-modal .eyebrow{display:block;text-align:center;margin-bottom:3px}.usage-notice-modal .btn{margin-top:4px;min-width:140px}.usage-notice-links{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:12px 0 4px}.usage-notice-links .btn{margin-top:0;min-width:0}.usage-notice-links .btn svg{width:14px;height:14px} /* Keep map controls and scale flush to the viewport when the sidebar is collapsed. */ .sidebar-is-collapsed .maplibregl-ctrl-bottom-left{margin-left:0!important}.sidebar-is-collapsed .coord-readout{margin-left:10px!important}.sidebar-is-collapsed .map-search{margin-left:10px!important} /* Context help follows the shared olah-data-hidrologi interaction pattern. */ .advanced label[data-help]{display:flex!important;flex-wrap:wrap;align-items:center;gap:5px;width:100%;max-width:none}.advanced label[data-help] select{flex:1 0 100%;margin-top:2px} /* Esri Hillshade uses the source raster styling directly; default opacity is 100%. */ .layer-group:has(#showHillshade) .range-row{margin-bottom:1px} /* Header navigation stays balanced with the standalone Spasial app. */ .spatial-header .app-nav{justify-content:center} /* Fluid interaction transitions without altering the established visual language. */ .sidebar,.map-panel,.modal-card,.basemap-card,.btn,.small-icon-btn,.definition-link{transition-property:transform,opacity,background-color,border-color,color,box-shadow;transition-duration:.16s;transition-timing-function:ease} @media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.maplibregl-canvas{transition:none!important}} @media(max-width:780px){.indicative-notice{font-size:10px}.undo-toast{bottom:18px}.point-chip{max-width:92px!important}.modal-subtitle{font-size:10px}} .advanced .field-help{position:static!important;flex:0 0 17px!important;width:17px!important;height:17px!important;display:inline-grid!important;place-items:center!important;border:0!important;border-radius:50%!important;color:var(--component-icon)!important;background:var(--icon-soft)!important;cursor:help!important;padding:0!important}.advanced .field-help svg{width:11px!important;height:11px!important;stroke-width:2.2!important} /* No legacy sidebar offset remains when the panel is collapsed. */ .sidebar-is-collapsed .maplibregl-ctrl-top-left, .sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:0!important} @media(max-width:700px){ .sidebar-is-collapsed .maplibregl-ctrl-top-left, .sidebar-is-collapsed .maplibregl-ctrl-bottom-left{left:0!important} } .point-chip{width:auto!important;min-width:28px;max-width:115px!important;padding:0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:780px){.point-chip{max-width:92px!important}} /* ============================================================ Local toponym + multi-point topology + compact result UI ============================================================ */ .coordinate-example{ margin:5px 0 8px; color:var(--text-muted); font-size:10px; font-weight:550; line-height:1.55; } .coordinate-example code{ color:var(--text-main); font-size:10px; background:var(--surface-soft); border-radius:4px; padding:1px 3px; } .field-label-line{ display:inline-flex; align-items:center; gap:4px; width:max-content; max-width:100%; } .advanced label[data-help]{ display:block!important; } .advanced label[data-help] select{ width:100%; margin-top:4px; } .advanced .field-label-line .field-help{ flex:0 0 17px!important; margin:0!important; } /* Result editor follows the rounded input language used by the point popup. */ .point-name-grid{ display:grid; grid-template-columns:minmax(0,1fr) 31px; gap:6px; align-items:center; } .point-name-grid .rename-point{ height:32px!important; border-radius:9px!important; padding:6px 9px!important; } .save-icon-button{ width:31px; height:31px; min-width:31px; padding:0!important; border-radius:8px!important; border-color:#223468!important; background:#223468!important; color:#fff!important; display:grid!important; place-items:center; } .save-icon-button svg{width:14px!important;height:14px!important;color:#fff!important} .point-style-row{ display:grid; grid-template-columns:minmax(0,1fr) 34px 28px 28px; align-items:center; gap:6px; margin-top:9px; padding-top:8px; border-top:1px solid var(--border-color); color:var(--text-label); font-size:10px; font-weight:750; } .point-style-row .color-input{justify-self:end} .point-style-row .small-icon-btn{width:28px;height:28px} .point-toponym-note{ margin-top:-2px; color:var(--text-muted); font-size:10px; line-height:1.4; } /* Search clearly distinguishes the local toponym database from OSM fallback. */ .search-result-head{ display:flex; align-items:center; gap:6px; min-width:0; } .search-result-head strong{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .search-source{ flex:0 0 auto; border-radius:999px; padding:2px 5px; font-size:10px; font-style:normal; font-weight:800; line-height:1.2; } .search-source.local-source{background:var(--pu-blue-soft);color:var(--primary)} .search-source.osm-source{background:var(--surface-soft);color:var(--text-muted)} [data-theme="dark"] .search-source.local-source{background:#253654;color:#dce8ff} /* Compact conceptual example in Istilah & Definisi. */ .definition-example{ margin-top:12px; padding:11px 12px; border:1px solid var(--border-color); border-radius:10px; background:var(--surface-soft); } .definition-example h3{margin-top:0!important} .definition-example p{margin-bottom:9px!important} .definition-flow{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 8px; align-items:center; font-size:10px; } .definition-flow span{ min-width:48px; padding:3px 6px; border-radius:999px; background:var(--pu-blue-soft); color:var(--primary); font-weight:800; text-align:center; } .definition-flow b{color:var(--text-main);font-weight:650} /* Small rendering hints only; no geometry simplification is introduced. */ .point-card,.map-panel{contain:layout paint} .maplibregl-canvas{outline:none} @media(max-width:420px){ .point-style-row{grid-template-columns:minmax(0,1fr) 32px 28px 28px} .search-source{font-size:10px} } /* Interaction feedback ----------------------------------------------------- */ .map-mode-indicator{ position:absolute;z-index:24;left:calc(var(--sidebar-w) + 20px);top:64px; display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:5px 9px; border:1px solid var(--border-color);border-radius:999px;background:rgba(255,255,255,.94); color:var(--text-muted);box-shadow:var(--shadow-sm);font-size:10px;font-weight:800; pointer-events:none;backdrop-filter:blur(8px);transition:left .22s ease,background-color .16s ease,color .16s ease,border-color .16s ease; } .sidebar-is-collapsed .map-mode-indicator{left:18px} .map-mode-indicator .mode-dot{width:7px;height:7px;border-radius:50%;background:#7d8795;box-shadow:0 0 0 3px rgba(125,135,149,.12)} .map-mode-indicator.multi{color:var(--primary);border-color:rgba(34,52,104,.22);background:rgba(239,243,252,.96)} .map-mode-indicator.multi .mode-dot{background:var(--primary);box-shadow:0 0 0 3px rgba(34,52,104,.12)} [data-theme="dark"] .map-mode-indicator{background:rgba(25,34,50,.95)} [data-theme="dark"] .map-mode-indicator.multi{background:rgba(37,54,84,.96);color:#dce8ff;border-color:#40587e} /* Point name is the primary identity; river and DAS are secondary metadata. */ .point-chip{ min-height:28px!important;height:auto!important;max-width:142px!important;padding:5px 8px!important; font-size:.70rem!important;line-height:1.1!important;font-weight:850!important;letter-spacing:.005em; } .point-summary-main strong{font-size:.63rem!important;font-weight:750!important} .point-summary-main span{font-size:10px!important} @media(max-width:780px){.point-chip{max-width:112px!important;font-size:.65rem!important}} .result-state-badge{display:inline-flex;width:max-content;align-items:center;margin-top:3px;padding:2px 5px;border-radius:999px;font-size:10px!important;font-style:normal;font-weight:800;line-height:1.25} .result-state-badge.success{background:#e9f6ef;color:#277052}.result-state-badge.processing{background:var(--pu-blue-soft);color:var(--primary)}.result-state-badge.pending{background:var(--surface-soft);color:var(--text-muted)}.result-state-badge.warning{background:#fff4d7;color:#87650a} [data-theme="dark"] .result-state-badge.success{background:#183d31;color:#a8e0c8}[data-theme="dark"] .result-state-badge.warning{background:#493d1d;color:#f7d979} .point-edit-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .unsaved-indicator{display:none;padding:2px 5px;border-radius:999px;background:#fff4d7;color:#87650a;font-size:10px;font-weight:800} .point-edit-label.is-dirty .unsaved-indicator{display:inline-flex} .point-edit-label.is-dirty .rename-point{border-color:#d7a928!important;box-shadow:0 0 0 3px rgba(215,169,40,.10)!important} .point-coordinate-row{display:flex;align-items:center;gap:6px}.point-coordinate-row .point-coords{flex:1;min-width:0} .copy-coordinate-btn{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--border-color);border-radius:7px;background:var(--card-bg);color:var(--component-icon);cursor:pointer;padding:0} .copy-coordinate-btn svg{width:13px;height:13px}.point-snapped-coord{font:8px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-muted)} .point-basin{display:grid!important;gap:1px}.point-basin b{font-size:10px;color:var(--text-strong)}.point-basin span{font-size:10px;color:var(--text-muted)} .snap-info-row,.point-inline-warning{display:flex;align-items:flex-start;gap:6px;padding:7px 8px;border-radius:8px;font-size:10px;line-height:1.45} .snap-info-row{background:var(--surface-soft);color:var(--text-muted)}.point-inline-warning{background:#fff7df;color:#775b13;border:1px solid #f0dda5} .snap-info-row svg,.point-inline-warning svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px}.point-confirm:disabled{opacity:.45;cursor:not-allowed} [data-theme="dark"] .point-inline-warning{background:#44391f;border-color:#62512a;color:#f0d681} .map-hover-popup .maplibregl-popup-content{min-width:0!important;padding:8px 10px!important;border-radius:9px!important;pointer-events:none} .dta-hover-tooltip{display:grid;gap:1px;min-width:120px}.dta-hover-tooltip strong{font-size:.66rem;color:var(--text-strong)}.dta-hover-tooltip span{font-size:10px;color:var(--text-muted)}.dta-hover-tooltip b{margin-top:3px;font-size:10px;color:var(--primary)} .download-summary{display:grid;gap:5px;margin-top:9px;padding:9px 10px;border:1px solid var(--border-color);border-radius:9px;background:var(--surface-soft)} .download-summary>div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:10px;line-height:1.4}.download-summary b{color:var(--text-strong);font-weight:800}.download-summary span{color:var(--text-muted);text-align:right} .app-toast{position:fixed;z-index:110;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:min(460px,calc(100vw - 28px));padding:9px 12px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);color:var(--text-main);box-shadow:var(--shadow-md);font-size:10px;font-weight:650} .app-toast svg{width:14px;height:14px;color:var(--primary);flex:0 0 auto}.app-toast.hidden{display:none} /* Interaction patch -------------------------------------------------------- */ /* Mode indicator is anchored to the search control so it always stays on the same row instead of overlapping the search field. */ .map-search{overflow:visible!important} .map-search .map-mode-indicator{ position:absolute!important; z-index:24!important; left:calc(100% + 8px)!important; top:50%!important; transform:translateY(-50%)!important; min-height:28px!important; margin:0!important; white-space:nowrap; pointer-events:none; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid var(--border-color); border-radius:999px; background:rgba(255,255,255,.94); color:var(--text-muted); box-shadow:var(--shadow-sm); font-size:10px; font-weight:800; backdrop-filter:blur(8px); } .sidebar-is-collapsed .map-search .map-mode-indicator{left:calc(100% + 8px)!important} .map-search .map-mode-indicator.multi{color:var(--primary);border-color:rgba(34,52,104,.22);background:rgba(239,243,252,.96)} [data-theme="dark"] .map-search .map-mode-indicator{background:rgba(25,34,50,.95)} [data-theme="dark"] .map-search .map-mode-indicator.multi{background:rgba(37,54,84,.96);color:#dce8ff;border-color:#40587e} .result-heading-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .focus-all-button{background:var(--pu-yellow)!important;border:1px solid #dfa313!important;border-radius:7px!important;color:#223468!important;padding:5px 8px!important} .focus-all-button:disabled{opacity:.38;cursor:not-allowed} .focus-all-button svg{width:12px;height:12px;color:#223468!important} /* River/DAS metadata are slightly more prominent, but still subordinate to the larger point name. */ .point-summary-main strong{font-size:.66rem!important;font-weight:760!important} .point-summary-main span{font-size:10px!important;line-height:1.25!important} .point-action-label{margin-top:9px;padding-top:8px;border-top:1px solid var(--border-color);font-size:10px;font-weight:800;color:var(--text-label)} .point-action-row{display:grid;grid-template-columns:repeat(6,28px);justify-content:end;align-items:center;gap:6px;margin-top:6px} .point-action-row .small-icon-btn{width:28px;height:28px} .point-action-row .point-action-color{width:28px!important;height:28px!important;border:1px solid var(--border-color)!important;border-radius:7px!important;overflow:hidden!important;cursor:pointer!important;background:var(--card-bg)!important} .point-action-row .point-action-color::-webkit-color-swatch-wrapper{padding:3px}.point-action-row .point-action-color::-webkit-color-swatch{border:0;border-radius:4px} .existing-point-popup .maplibregl-popup-content{padding:10px!important;border-radius:11px!important;min-width:235px!important} .existing-point-menu{display:grid;gap:9px} .existing-point-menu-head{display:flex;align-items:center;gap:8px;min-width:0;padding-right:16px} .existing-point-menu-head>div{display:grid;gap:1px;min-width:0} .existing-point-menu-head strong{font-size:.68rem;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .existing-point-menu-head span:not(.existing-point-swatch){font-size:10px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .existing-point-swatch{width:10px;height:28px;border-radius:999px;flex:0 0 auto} .existing-point-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px} .existing-point-menu-grid button{min-height:31px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--text-main);display:flex;align-items:center;gap:6px;padding:6px 7px;font-size:10px;font-weight:750;cursor:pointer;text-align:left} .existing-point-menu-grid button svg{width:13px;height:13px;color:var(--component-icon);flex:0 0 auto} .existing-point-menu-grid button.danger{color:#fff;background:var(--danger);border-color:var(--danger)} .existing-point-menu-grid button.danger svg{color:#fff} .popup-point-color{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none} /* Search has a single source (OSM), so results return to the simpler original presentation without a source badge. */ .search-result>strong{display:block;font-size:10px;color:var(--text-strong);font-weight:800;line-height:1.25} .search-result>span{display:block;margin-top:2px} @media(max-width:780px){ .map-search{width:min(280px,calc(100vw - 190px))!important;min-width:175px!important} .map-search .map-mode-indicator{font-size:10px!important;padding:5px 7px!important;gap:5px!important} .point-action-row{grid-template-columns:repeat(6,28px);gap:5px} .result-heading-actions{gap:5px}.result-heading-actions .text-button{font-size:10px} } @media(max-width:430px){ .map-search{width:max(150px,calc(100vw - 180px))!important} .map-search .map-mode-indicator{left:calc(100% + 5px)!important;font-size:10px!important;padding:5px 6px!important} .result-heading-actions .text-button{gap:2px} } .point-action-row{grid-template-columns:repeat(6,28px)!important} @media(max-width:780px){.point-action-row{grid-template-columns:repeat(6,28px)!important;gap:4px}} /* Inline point-name editor in outlet popup, matching result-card editor. */ .popup-point-name-editor{display:grid;gap:4px;color:var(--text-label);font-size:10px;font-weight:750} .popup-point-name-editor .point-name-grid{grid-template-columns:minmax(0,1fr) 31px} .popup-point-name-editor input{height:32px!important;border-radius:9px!important;padding:6px 9px!important;font-size:10px!important} /* ============================================================ Mobile search/sidebar stacking fix Search is the primary mobile map control because it also owns the sidebar show/hide button. It must stay visible above the sidebar/panels. ============================================================ */ @media (max-width:780px){ /* Never hide the top-left control when the sidebar is open. */ .sidebar:not(.collapsed)~.map-wrap .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-left{ left:8px!important; top:0!important; z-index:60!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } /* Search/control stays above both the analysis sidebar (z25) and map panels (z35), so its sidebar toggle remains reachable at all times. */ .maplibregl-ctrl-top-left .map-search{ position:relative!important; z-index:61!important; margin:8px 6px!important; } .map-search-results{z-index:62!important} /* Reserve the first row for Search. The sidebar starts underneath it rather than visually covering the search/toggle control. */ .sidebar{ top:60px!important; bottom:8px!important; z-index:25!important; max-height:calc(100% - 68px)!important; } /* Layer panel follows the same vertical hierarchy: Search first, then map-side panels. */ .layer-panel{ top:60px!important; z-index:35!important; max-height:calc(100% - 70px)!important; } } @media (max-width:430px){ .sidebar{top:58px!important;max-height:calc(100% - 66px)!important} .layer-panel{top:58px!important;max-height:calc(100% - 68px)!important} } /* ============================================================ Production UI + DTA card consistency patch (v1.0.0.0-p2) ============================================================ */ html,body{width:100%;height:100%;margin:0} body.spatial-page{height:100vh;height:100svh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none} .webgis-shell{position:relative;width:100%;height:100vh;height:100svh;height:100dvh;min-width:0;min-height:0;overflow:hidden} #spatialWorkspace:fullscreen{width:100vw;height:100vh;height:100dvh;background:var(--bg-main,#eef2f6)} #spatialWorkspace:fullscreen .sidebar{z-index:2000} #spatialWorkspace:fullscreen .maplibregl-ctrl-top-left{z-index:2100} #spatialWorkspace:fullscreen .maplibregl-ctrl-top-right{z-index:2050} #spatialWorkspace:fullscreen .map-panel{z-index:2200} #spatialWorkspace:fullscreen .modal-backdrop{z-index:5000} /* Header toggle is an icon-only tab on the right edge; it never occupies the search row. */ .header-menu-handle{left:auto!important;right:12px!important;transform:none!important;width:30px!important;height:26px!important;padding:0!important;justify-content:center!important;letter-spacing:0!important} .header-menu-handle svg{width:15px!important;height:15px!important} .sidebar-scroll{overflow-y:auto!important;overscroll-behavior:contain;padding-bottom:calc(20px + env(safe-area-inset-bottom))!important} .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:env(safe-area-inset-bottom)} /* One visual identity for a DTA across sidebar, map marker and popup. */ .point-summary-swatch{width:5px;height:32px;border-radius:999px;background:var(--point-color);flex:0 0 auto} .point-summary-main strong{font-size:.68rem!important;font-weight:800!important;color:var(--text-strong)!important} .point-summary-main>span{display:block;font-size:10px!important;color:var(--text-muted)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .point-summary-main .result-state-badge{display:inline-flex!important;width:max-content;margin-top:3px} .point-summary-area{font-size:10px!important;font-weight:800!important} .point-edit-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px} .unsaved-indicator,.point-name-state{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:#fff3cd;color:#8a6500;font-size:10px;font-weight:750;white-space:nowrap} .point-name-state.hidden,.unsaved-indicator.hidden{display:none!important} .point-name-editor input.is-dirty{border-color:#d49a00!important;box-shadow:0 0 0 3px rgba(212,154,0,.08)!important} .save-icon-button:disabled{opacity:.38;cursor:not-allowed} .spin-icon{animation:dta-spin .8s linear infinite} @keyframes dta-spin{to{transform:rotate(360deg)}} .hidden-color-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} .existing-point-menu-head{align-items:flex-start!important} .existing-point-identity{display:grid!important;gap:2px!important;min-width:0;flex:1} .existing-point-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .existing-point-title-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .existing-point-title-row b{font-size:10px;color:var(--text-strong);white-space:nowrap} .existing-point-menu-head .existing-point-identity>span{font-size:10px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .popup-point-name-editor .point-edit-label-row{margin-bottom:1px} /* Mobile drawer + dynamic viewport. Search/toggle remains accessible above it. */ @media(max-width:780px){ .header-menu-handle{right:8px!important} .sidebar{top:60px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;left:8px!important;width:min(340px,calc(100% - 16px))!important;max-width:calc(100% - 16px)!important;max-height:none!important;transform:translateX(0);transition:transform .22s ease,box-shadow .22s ease!important;overflow:hidden!important} .sidebar.collapsed{width:min(340px,calc(100% - 16px))!important;transform:translateX(calc(-100% - 20px));pointer-events:none} .sidebar.collapsed .sidebar-scroll{display:block!important} .maplibregl-ctrl-top-left{left:8px!important;top:0!important;z-index:2100!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important} .maplibregl-ctrl-top-left .map-search{z-index:2101!important;margin:8px 6px!important} .map-search-results{z-index:2102!important} .layer-panel{top:60px!important;bottom:calc(8px + env(safe-area-inset-bottom));max-height:none!important;overflow-y:auto;overscroll-behavior:contain} .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:calc(4px + env(safe-area-inset-bottom))} } @media(max-width:430px){ .sidebar{top:58px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important} .layer-panel{top:58px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important} } /* ============================================================ UI hotfix p3 — map click + always-reachable header toggle ============================================================ */ .header-menu-handle{ position:fixed!important; top:0; bottom:auto!important; left:auto!important; right:12px!important; transform:none!important; z-index:5200!important; width:32px!important; height:27px!important; padding:0!important; justify-content:center!important; border-radius:0 0 8px 8px!important; transition:top .24s ease,background-color .16s ease!important; } .header-menu-handle svg{width:15px!important;height:15px!important} @media(max-width:780px){ .header-menu-handle{right:8px!important} } /* ============================================================ UI refinement p5 ============================================================ */ /* Header toggle: same visual family as the sidebar/search toggle, fixed at the top-right and aligned vertically with the 42 px search box. */ .header-menu-handle{ position:fixed!important; top:10px!important; right:10px!important; bottom:auto!important; left:auto!important; transform:none!important; z-index:5200!important; width:42px!important; height:42px!important; padding:0!important; display:grid!important; place-items:center!important; border:1px solid var(--border-color)!important; border-radius:10px!important; background:var(--card-bg)!important; color:var(--pu-navy)!important; box-shadow:var(--shadow-sm)!important; transition:background-color .16s ease,border-color .16s ease!important; } .header-menu-handle svg{width:17px!important;height:17px!important} [data-theme="dark"] .header-menu-handle{color:#d8e6ff!important} /* Reserve the toggle footprint when the header itself is visible. */ .spatial-header .app-header-main{padding-right:54px} /* Result heading buttons: same height, compact two-line labels. */ .result-heading-actions{align-items:stretch!important;gap:6px!important} .result-heading-actions .result-stack-button{ width:55px!important; height:40px!important; min-height:40px!important; padding:4px 6px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; border-radius:7px!important; line-height:1.02!important; text-align:left!important; } .result-heading-actions .result-stack-button span{display:block;font-size:10px;font-weight:800;line-height:1.05} .result-heading-actions .result-stack-button svg{width:13px!important;height:13px!important;flex:0 0 auto} .danger-text-button.result-stack-button{border:1px solid var(--danger)!important} /* DTA identity hierarchy: colored location name -> bold river -> DAS. */ .point-card{border-left:1px solid var(--border-color)!important} .point-card>summary{gap:7px!important;align-items:center!important} .point-summary-main{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:1px!important} .point-name-chip{ display:inline-flex!important; align-items:center!important; width:max-content!important; max-width:100%!important; min-height:24px!important; padding:4px 8px!important; border-radius:6px!important; font-size:10px!important; font-weight:800!important; line-height:1.1!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .point-summary-river{display:block!important;margin-top:2px;font-size:10px!important;font-weight:800!important;color:var(--text-strong)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .point-summary-basin{display:block!important;font-size:10px!important;font-weight:500!important;color:var(--text-muted)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .point-summary-area{align-self:center!important} .point-summary-swatch{display:none!important} /* Result-card actions are explicit, short, and left aligned. */ .point-action-label{margin-top:9px!important;text-align:left!important} .point-action-row{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; justify-content:start!important; align-items:stretch!important; gap:5px!important; width:100%!important; margin-top:6px!important; } .point-action-row .dta-action-button{ width:100%!important; height:31px!important; min-width:0!important; padding:0 7px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:5px!important; font-size:10px!important; font-weight:750!important; white-space:nowrap!important; } .point-action-row .dta-action-button svg{width:12px!important;height:12px!important;flex:0 0 auto} .point-action-row .dta-action-button span{overflow:hidden;text-overflow:ellipsis} /* Popup uses the exact same information hierarchy. */ .existing-point-menu-head{padding-right:16px!important} .existing-point-title-row{align-items:center!important} .existing-point-name-chip{ display:inline-flex!important; align-items:center!important; width:max-content!important; max-width:150px!important; min-height:24px!important; padding:4px 8px!important; border-radius:6px!important; font-size:.64rem!important; font-weight:800!important; line-height:1.1!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .existing-point-river{display:block!important;margin-top:2px;font-size:10px!important;font-weight:800!important;color:var(--text-strong)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .existing-point-basin{display:block!important;font-size:10px!important;font-weight:500!important;color:var(--text-muted)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .existing-point-swatch{display:none!important} .existing-point-menu-grid button span{line-height:1.05} /* Map navigation toolbar at bottom-right, always above attribution and never overlapping it. */ .maplibregl-ctrl-bottom-right{ display:flex!important; flex-direction:column!important; align-items:flex-end!important; justify-content:flex-end!important; right:0!important; bottom:calc(0px + env(safe-area-inset-bottom))!important; } .maplibregl-ctrl-bottom-right .map-toolbar-control{ order:1!important; float:none!important; margin:0 10px 8px 0!important; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{ order:2!important; float:none!important; margin:0 10px 10px 0!important; } /* Shared Bootstrap Colorpicker. It is inline inside our own floating panel, so it does not depend on Bootstrap's popover component. */ .dta-colorpicker-panel{ position:fixed; z-index:6500; width:238px; padding:9px; border:1px solid var(--border-color); border-radius:11px; background:var(--card-bg); box-shadow:var(--shadow-md); } .dta-colorpicker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:var(--text-strong);font-size:10px} .dta-colorpicker-head button{width:27px;height:27px;border:0;border-radius:7px;background:var(--bg-soft);color:var(--text-muted);display:grid;place-items:center;cursor:pointer} .dta-colorpicker-head button svg{width:13px;height:13px} .dta-colorpicker-input{height:31px!important;margin:0 0 7px!important;padding:5px 8px!important;font-size:10px!important} .dta-colorpicker-panel>.colorpicker,.dta-colorpicker-panel .colorpicker-inline{position:relative!important;display:block!important;float:none!important;left:auto!important;top:auto!important;z-index:auto!important;margin:0 auto!important;box-shadow:none!important} .dta-colorpicker-panel .colorpicker:before,.dta-colorpicker-panel .colorpicker:after{display:none!important} /* Custom hover-tip features are removed. Native aria labels remain available. */ .map-hover-popup,.dta-hover-tooltip,.field-help-tooltip,.field-help{display:none!important} @media(max-width:780px){ .header-menu-handle{top:8px!important;right:8px!important;width:42px!important;height:42px!important} .spatial-header .app-header-main{padding-right:52px} .point-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important} .maplibregl-ctrl-bottom-right .map-toolbar-control{margin-right:8px!important;margin-bottom:7px!important} .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{margin-right:8px!important;margin-bottom:8px!important} } /* Header toggle shell mirrors the search control: 42 px frame with the same 34 px sidebar-toggle button inside it. */ .header-handle-shell{ position:fixed; top:10px; right:10px; z-index:5200; width:42px; height:42px; padding:3px; border:1px solid var(--border-color); border-radius:10px; background:var(--card-bg); box-shadow:var(--shadow-sm); } .header-handle-shell .header-menu-handle{ position:static!important; width:34px!important; height:34px!important; border:0!important; border-radius:7px!important; background:transparent!important; box-shadow:none!important; color:var(--pu-navy)!important; } .header-handle-shell [data-theme="dark"] .header-handle-shell .header-menu-handle{color:#d8e6ff!important} @media(max-width:780px){.header-handle-shell{top:8px;right:8px}} /* p5 identity alignment — match the reference card: colored point name at left, river/DAS immediately to its right, area and chevron at the far right. */ .point-card>summary{display:flex!important;align-items:center!important} .point-card>summary>.point-name-chip{flex:0 1 auto!important;max-width:105px!important} .point-card>summary>.point-summary-main{flex:1 1 auto!important;min-width:0!important} .point-card>summary>.point-summary-area{flex:0 0 auto!important} .existing-point-menu-head{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important} .existing-point-menu-head>.existing-point-name-chip{flex:0 1 auto!important;max-width:105px!important} .existing-point-menu-head>.existing-point-identity{flex:1 1 auto!important;min-width:0!important} .existing-point-area{flex:0 0 auto;font-size:10px;color:var(--text-strong);white-space:nowrap} /* ============================================================ UI hotfix p6 — antisipasi nama titik panjang pada kartu DTA ============================================================ */ /* Sidebar result cards: use a 2-row grid so long location names stay inside the colored chip, while river/DAS move below cleanly. */ .point-card > summary{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; grid-template-areas: "chip area chevron" "meta meta meta"!important; align-items:start!important; column-gap:8px!important; row-gap:4px!important; } .point-card > summary > .point-name-chip{ grid-area:chip!important; display:inline-flex!important; align-items:center!important; align-self:start!important; justify-self:start!important; max-width:100%!important; min-width:0!important; min-height:28px!important; padding:6px 10px!important; border-radius:8px!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:break-word!important; text-align:left!important; /* clamp visually to 2 lines so the chip never collides with area */ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .point-card > summary > .point-summary-main{ grid-area:meta!important; width:100%!important; min-width:0!important; margin-top:0!important; } .point-card > summary > .point-summary-area{ grid-area:area!important; align-self:start!important; justify-self:end!important; white-space:nowrap!important; text-align:right!important; padding-top:2px!important; } .point-card > summary > .point-chevron{ grid-area:chevron!important; align-self:start!important; justify-self:end!important; padding-top:1px!important; } .point-summary-river{ display:block!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .point-summary-basin{ display:block!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Popup header: same hierarchy, but resilient when the saved point name is long. */ .existing-point-popup .maplibregl-popup-content{ min-width:260px!important; width:min(320px, calc(100vw - 28px))!important; } .existing-point-menu-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas: "chip area" "meta meta"!important; align-items:start!important; column-gap:8px!important; row-gap:4px!important; min-width:0!important; padding-right:18px!important; /* keep distance from popup close button */ } .existing-point-menu-head > .existing-point-name-chip{ grid-area:chip!important; justify-self:start!important; align-self:start!important; max-width:100%!important; min-width:0!important; min-height:28px!important; padding:6px 10px!important; border-radius:8px!important; line-height:1.18!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:break-word!important; text-align:left!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .existing-point-menu-head > .existing-point-identity{ grid-area:meta!important; width:100%!important; min-width:0!important; } .existing-point-area{ grid-area:area!important; align-self:start!important; justify-self:end!important; white-space:nowrap!important; text-align:right!important; padding-top:2px!important; max-width:96px!important; } .existing-point-river, .existing-point-basin{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } /* Small screens: let the popup breathe slightly more and allow chip wrap. */ @media (max-width: 640px){ .existing-point-popup .maplibregl-popup-content{ width:min(340px, calc(100vw - 18px))!important; } .point-card > summary{ column-gap:6px!important; } } /* ============================================================ UI refinement p7 - long point names remain left of river/DAS and wrap downward - popup typography matches sidebar - compact result actions and ~10% narrower desktop sidebar - system palette + RGB + HEX DTA color editor ============================================================ */ /* Desktop sidebar is ~10% narrower than the previous 350 px baseline. */ @media (min-width: 901px){ :root{--sidebar-w:315px!important} } @media (min-width: 701px) and (max-width: 900px){ :root{--sidebar-w:288px!important} } /* Slightly reduce the two bulk buttons while keeping identical heights. */ .result-heading-actions .result-stack-button{ width:52px!important; height:36px!important; min-height:36px!important; padding:3px 5px!important; gap:4px!important; } .result-heading-actions .result-stack-button span{ font-size:10px!important; line-height:1!important; } .result-heading-actions .result-stack-button svg{ width:12px!important; height:12px!important; } /* Sidebar header: location chip stays on the left, river/DAS stay on the right. A long location name grows downward instead of moving metadata to a second row. */ .point-card > summary{ display:flex!important; align-items:flex-start!important; gap:7px!important; padding:9px!important; } .point-card > summary > .point-name-chip{ flex:0 1 42%!important; width:auto!important; min-width:0!important; max-width:42%!important; min-height:27px!important; padding:6px 8px!important; border-radius:7px!important; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; font-size:10px!important; font-weight:800!important; line-height:1.17!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; text-align:left!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .point-card > summary > .point-summary-main{ flex:1 1 72px!important; width:auto!important; min-width:0!important; margin-top:2px!important; display:block!important; } .point-summary-river, .point-summary-basin{ font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; } .point-summary-river{ display:block!important; font-size:10px!important; font-weight:800!important; line-height:1.18!important; color:var(--text-strong)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .point-summary-basin{ display:block!important; margin-top:2px!important; font-size:10px!important; font-weight:500!important; line-height:1.18!important; color:var(--text-muted)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .point-card > summary > .point-summary-area{ flex:0 0 auto!important; align-self:flex-start!important; padding-top:5px!important; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; font-size:10px!important; white-space:nowrap!important; } .point-card > summary > .point-chevron{ flex:0 0 auto!important; align-self:flex-start!important; padding-top:4px!important; } /* Popup uses the exact same font and the same horizontal hierarchy as sidebar. */ .existing-point-popup .maplibregl-popup-content, .existing-point-menu, .existing-point-menu button, .existing-point-menu input{ font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; } .existing-point-popup .maplibregl-popup-content{ min-width:270px!important; width:min(330px,calc(100vw - 28px))!important; } .existing-point-menu-head{ display:flex!important; align-items:flex-start!important; gap:7px!important; min-width:0!important; padding-right:22px!important; } .existing-point-menu-head > .existing-point-name-chip{ flex:0 1 42%!important; width:auto!important; min-width:0!important; max-width:42%!important; min-height:27px!important; padding:6px 8px!important; border-radius:7px!important; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; font-size:10px!important; font-weight:800!important; line-height:1.17!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; text-align:left!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .existing-point-menu-head > .existing-point-identity{ flex:1 1 72px!important; width:auto!important; min-width:0!important; padding-top:2px!important; display:block!important; } .existing-point-river{ display:block!important; font-size:10px!important; font-weight:800!important; line-height:1.18!important; color:var(--text-strong)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .existing-point-basin{ display:block!important; margin-top:2px!important; font-size:10px!important; font-weight:500!important; line-height:1.18!important; color:var(--text-muted)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .existing-point-area{ flex:0 0 auto!important; align-self:flex-start!important; padding-top:5px!important; max-width:none!important; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif!important; font-size:10px!important; font-weight:800!important; white-space:nowrap!important; } /* Name-length feedback. */ .point-name-limit-warning{ display:block; margin-top:4px; font-size:10px; font-weight:700; line-height:1.3; color:#9a6500; } .point-name-limit-warning.hidden{display:none!important} /* System DTA color palette. */ .dta-colorpicker-panel{ width:286px!important; max-height:min(520px,calc(100dvh - 20px)); overflow:auto; padding:10px!important; } .dta-colorpicker-head{ margin-bottom:9px!important; font-size:.64rem!important; } .dta-color-section{ display:grid; gap:6px; padding-top:8px; margin-top:8px; border-top:1px solid var(--border-color); } .dta-color-section:first-of-type{ padding-top:0; margin-top:0; border-top:0; } .dta-color-section-title{ font-size:10px; font-weight:800; color:var(--text-muted); letter-spacing:.02em; } .dta-system-color-palette{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .dta-system-color-token{ min-width:0; min-height:45px; padding:5px 4px; border:1px solid var(--border-color); border-radius:8px; background:var(--card-bg); color:var(--text-main); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; font-size:10px; font-weight:700; } .dta-system-color-token.active{ border-color:var(--pu-navy); box-shadow:0 0 0 2px color-mix(in srgb,var(--pu-navy) 14%,transparent); } .dta-system-swatch{ width:27px; height:17px; border-radius:5px; border:1px solid rgba(0,0,0,.12); } .dta-preset-color-palette{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; } .dta-preset-swatch{ aspect-ratio:1.45; min-width:0; border:2px solid transparent; border-radius:7px; background:var(--swatch); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .dta-preset-swatch.active{ border-color:var(--text-strong); box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--pu-navy); } .dta-hex-row{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:7px; align-items:end; } .dta-color-preview{ width:34px; height:31px; border:1px solid var(--border-color); border-radius:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); } .dta-hex-row label, .dta-rgb-grid label{ margin:0!important; font-size:10px!important; font-weight:800!important; color:var(--text-muted)!important; } .dta-hex-row input, .dta-rgb-grid input{ height:31px!important; margin-top:3px!important; padding:5px 7px!important; font-size:10px!important; } .dta-rgb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .dta-colorpicker-panel input.is-invalid{ border-color:#c33!important; box-shadow:0 0 0 2px rgba(195,51,51,.08)!important; } .dta-color-input-message{ font-size:10px; line-height:1.35; color:var(--text-muted); } .dta-color-input-message.error{color:#a42b24} /* The old Bootstrap Colorpicker nodes are no longer used. */ .dta-colorpicker-input, .dta-colorpicker-panel>.colorpicker, .dta-colorpicker-panel .colorpicker-inline{display:none!important} @media(max-width:700px){ /* Keep mobile drawer width usable even though desktop sidebar is narrower. */ .sidebar{width:min(340px,calc(100% - 16px))!important} .existing-point-popup .maplibregl-popup-content{ width:min(340px,calc(100vw - 18px))!important; } } /* ============================================================ UI refinement p8 ============================================================ */ .help, .input-note, .coordinate-example, .definition-modal p, .definition-modal li, .definition-meaning, .source-modal p, .confirm-modal p, .warning-modal p, .usage-notice-modal p, .app-definition-note, .modal-subtitle{ text-align:justify!important; text-justify:inter-word; hyphens:auto; } .sidebar-title{ grid-template-columns:38px minmax(0,1fr) 28px!important; gap:9px!important; padding-right:0!important; } .sidebar-title-copy{min-width:0} .sidebar-title-info{ width:26px;height:26px;margin-top:1px;padding:0; border:1px solid var(--border-color);border-radius:50%; background:var(--card-bg);color:var(--primary); display:grid;place-items:center;cursor:pointer; } .sidebar-title-info svg{width:13px;height:13px} .indicative-notice{display:none!important} .header-handle-shell{transition:opacity .14s ease,visibility .14s ease!important} .header-handle-shell.is-blocked{ opacity:0!important;visibility:hidden!important;pointer-events:none!important; } .header-handle-shell.is-blocked .header-menu-handle{pointer-events:none!important} html:fullscreen, html:-webkit-full-screen{ width:100vw;height:100vh;height:100dvh;overflow:hidden; background:var(--bg-main,#eef2f6); } html:fullscreen body, html:-webkit-full-screen body{width:100%;height:100%;overflow:hidden} html:fullscreen #spatialWorkspace, html:-webkit-full-screen #spatialWorkspace{ width:100vw!important;height:100vh!important;height:100dvh!important; } html:fullscreen .app-header, html:-webkit-full-screen .app-header{z-index:6200!important} html:fullscreen .header-handle-shell, html:-webkit-full-screen .header-handle-shell{z-index:6300!important} .definition-example{border-top:1px solid var(--border-color);padding-top:13px} .definition-example>h3{margin-bottom:7px} .definition-example-case{ margin-top:12px;padding:11px;border:1px solid var(--border-color); border-radius:10px;background:var(--surface-soft); } .definition-example-case h4{ margin:0 0 7px;color:var(--text-strong);font-size:.66rem; } .definition-relation-title{ display:block;margin:8px 0 5px;font-size:10px;color:var(--text-strong); } .definition-relation, .definition-ascii{ margin:5px 0 8px;padding:8px 9px;border:1px solid var(--border-color); border-radius:8px;background:var(--card-bg);color:var(--text-main); font:500 .53rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre;overflow:auto; } .definition-ascii{font-size:10px} .definition-meaning{ margin-top:7px;padding:7px 8px;border-left:3px solid var(--pu-yellow); border-radius:5px;background:var(--accent-soft);color:var(--text-main); font-size:10px;line-height:1.55; } .definition-concept{background:var(--card-bg)} .map-hover-popup{display:block!important;pointer-events:none!important} .map-hover-popup .maplibregl-popup-content{ min-width:0!important;max-width:220px!important;padding:8px 9px!important; border-radius:9px!important;pointer-events:none!important; } .map-hover-popup .maplibregl-popup-tip{pointer-events:none!important} .map-hover-card{ display:grid;grid-template-columns:auto auto; grid-template-areas:"chip value" "meta meta"; align-items:center;gap:4px 7px; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; } .dta-hover-chip{ grid-area:chip;min-width:0;max-width:130px;padding:4px 6px;border-radius:6px; font-size:10px;font-weight:800;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .map-hover-card>strong{ grid-area:value;justify-self:end;font-size:10px;color:var(--text-strong);white-space:nowrap; } .map-hover-card>span:last-child{ grid-area:meta;min-width:0;font-size:10px;color:var(--text-muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .point-hover-card>strong{font-size:10px} .field-help-tooltip{display:none!important} .point-card{touch-action:pan-y} .point-list.is-drag-arming .point-card{cursor:grab} .point-list.is-dragging{user-select:none} .point-card-drag-chosen{ box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 24%,transparent),var(--shadow-sm)!important; } .point-card-drag-ghost{opacity:.36!important} .point-card-dragging{ cursor:grabbing!important; box-shadow:0 12px 30px rgba(20,32,60,.18)!important; transform:scale(1.01); } @media(max-width:780px){ .sidebar-title{grid-template-columns:32px minmax(0,1fr) 27px!important} .definition-ascii{font-size:10px} } /* ============================================================ UI refinement p9 ============================================================ */ /* Search box label trimmed and sidebar title simplified. */ .sidebar-title-copy p{display:none!important} /* Compact and simpler example section with circular set visuals. */ .definition-example-case.compact{ padding:10px 11px; } .definition-example-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; margin-bottom:6px; } .definition-example-formula{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:var(--card-bg); border:1px solid var(--border-color); font-size:10px; line-height:1.25; color:var(--text-strong); } .definition-bullets{ margin:0; padding-left:16px; display:grid; gap:5px; } .set-visual{ margin-top:9px; display:flex; justify-content:center; align-items:center; } .set-circle{ position:relative; display:flex; align-items:center; justify-content:center; border-radius:50%; text-align:center; } .set-circle > span{ display:block; font-weight:800; line-height:1.2; } .set-visual-single .set-circle-outer, .set-visual-multi .set-circle-outer{ width:min(100%, 290px); aspect-ratio:1/1; border:2px solid color-mix(in srgb,var(--primary) 25%, var(--border-color)); background:color-mix(in srgb,var(--card-bg) 92%, var(--primary) 8%); } .set-circle-outer > span{ position:absolute; top:12px; left:50%; transform:translateX(-50%); font-size:10px; white-space:nowrap; } .set-circle-middle{ width:68%; aspect-ratio:1/1; border:2px solid color-mix(in srgb,var(--pu-yellow) 45%, var(--border-color)); background:color-mix(in srgb,var(--card-bg) 86%, var(--pu-yellow) 14%); } .set-circle-middle > span{ position:absolute; top:18px; left:50%; transform:translateX(-50%); font-size:10px; max-width:80%; } .set-circle-middle.large{ width:76%; } .set-circle-inner{ width:53%; aspect-ratio:1/1; border:2px solid color-mix(in srgb,var(--success) 34%, var(--border-color)); background:color-mix(in srgb,var(--card-bg) 84%, var(--success) 16%); } .set-circle-inner > span{ font-size:10px; max-width:78%; } .set-node-group{ position:absolute; inset:34% 12% 12%; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:end; } .set-circle-node{ width:100%; aspect-ratio:1/1; border:1.6px solid color-mix(in srgb,var(--primary) 22%, var(--border-color)); background:var(--card-bg); padding:4px; } .set-circle-node span{ font-size:10px; font-weight:700; } /* Sidebar/popup headers: chip autofit, river text adaptive, area fixed. */ .point-card > summary{ display:grid!important; grid-template-columns:fit-content(44%) minmax(0,1fr) auto auto!important; align-items:start!important; gap:7px!important; } .point-card > summary > .point-name-chip{ width:fit-content!important; max-width:min(44%, 175px)!important; justify-self:start!important; padding-inline:9px!important; } .point-card > summary > .point-summary-main{ min-width:0!important; } .point-summary-river{ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; white-space:normal!important; overflow:hidden!important; text-overflow:ellipsis!important; } .point-summary-basin{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .existing-point-menu-head{ display:grid!important; grid-template-columns:fit-content(44%) minmax(0,1fr) auto!important; align-items:start!important; gap:7px!important; padding-right:18px!important; } .existing-point-menu-head > .existing-point-name-chip{ width:fit-content!important; max-width:min(44%, 168px)!important; justify-self:start!important; padding-inline:9px!important; } .existing-point-menu-head > .existing-point-identity{ min-width:0!important; } .existing-point-river{ display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; white-space:normal!important; overflow:hidden!important; text-overflow:ellipsis!important; } .existing-point-basin{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } /* Existing DTA popup width follows the compact add/move popup scale. */ .existing-point-popup .maplibregl-popup-content{ min-width:246px!important; width:min(286px, calc(100vw - 24px))!important; } /* Hover tip remains, plus visible halo on hovered DTA / point. */ .map-hover-popup .maplibregl-popup-content{ box-shadow:0 14px 32px rgba(20,32,60,.16), 0 0 0 1px rgba(255,255,255,.68)!important; } /* Keep field-help tooltip disabled. */ .field-help-tooltip{display:none!important} @media(max-width:720px){ .set-visual-single .set-circle-outer, .set-visual-multi .set-circle-outer{ width:min(100%, 248px); } .point-card > summary{ grid-template-columns:minmax(0,1fr) auto auto!important; grid-template-areas: "chip area chevron" "meta meta meta"!important; } .point-card > summary > .point-name-chip{ grid-area:chip!important; max-width:100%!important; } .point-card > summary > .point-summary-main{ grid-area:meta!important; } .point-card > summary > .point-summary-area{ grid-area:area!important; } .point-card > summary > .point-chevron{ grid-area:chevron!important; } } /* ============================================================ UI refinement p10 ============================================================ */ .definition-example-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } .set-node-group-five{ inset:31% 10% 12%; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); align-items:center; } .set-node-group-five .set-circle-node:nth-child(4){grid-column:1 / span 1;justify-self:center} .set-node-group-five .set-circle-node:nth-child(5){grid-column:3 / span 1;justify-self:center} .set-node-group-five .set-circle-node span{font-size:10px} .point-card > summary{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; grid-template-areas: "point area chevron" "meta meta chevron"!important; align-items:start!important; column-gap:10px!important; row-gap:6px!important; } .point-card > summary > .point-name-chip{ grid-area:point!important; display:inline-flex!important; align-items:center!important; justify-self:start!important; width:auto!important; max-width:100%!important; min-width:0!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere!important; line-height:1.15!important; padding:6px 9px!important; } .point-card > summary > .point-summary-area{ grid-area:area!important; white-space:nowrap!important; align-self:center!important; } .point-card > summary > .point-chevron{grid-area:chevron!important;align-self:center!important} .point-card > summary > .point-summary-main{ grid-area:meta!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas:"river basin" "warning warning"!important; gap:2px 10px!important; min-width:0!important; } .point-summary-river{grid-area:river!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .point-summary-basin{grid-area:basin!important;justify-self:end!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .point-summary-main .result-state-badge{grid-area:warning!important;justify-self:start!important} .existing-point-menu-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas: "point area" "meta meta"!important; align-items:start!important; column-gap:10px!important; row-gap:6px!important; padding-right:18px!important; } .existing-point-menu-head > .existing-point-name-chip{ grid-area:point!important; display:inline-flex!important; align-items:center!important; justify-self:start!important; width:auto!important; max-width:100%!important; min-width:0!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere!important; line-height:1.15!important; padding:6px 9px!important; } .existing-point-menu-head > .existing-point-area{grid-area:area!important;white-space:nowrap!important;align-self:center!important} .existing-point-menu-head > .existing-point-identity{ grid-area:meta!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:2px 10px!important; min-width:0!important; } .existing-point-river{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .existing-point-basin{justify-self:end!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .existing-point-popup .maplibregl-popup-content{ min-width:240px!important; width:min(274px, calc(100vw - 24px))!important; } .map-hover-popup .maplibregl-popup-content{ box-shadow:0 14px 32px rgba(20,32,60,.16), 0 0 0 1px rgba(255,255,255,.68)!important; } /* Simplified native DTA color picker */ .dta-colorpicker-panel{width:min(248px,calc(100vw - 20px))!important} .dta-colorpicker-body{display:grid;gap:11px;padding:2px 0 0} .dta-color-inline-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .dta-color-inline-row>label{font-size:10px;font-weight:700;color:var(--text-strong)} .dta-color-hex-label{display:grid;gap:5px;font-size:10px;color:var(--text-muted)} .dta-color-hex-label input{ width:100%;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg); padding:9px 10px;font:600 .60rem/1.2 "Plus Jakarta Sans",system-ui,sans-serif;color:var(--text-strong) } @media (max-width: 980px){ .definition-example-grid{grid-template-columns:1fr} } @media (max-width: 720px){ .point-card > summary{ grid-template-columns:minmax(0,1fr) auto auto!important; grid-template-areas: "point area chevron" "meta meta chevron"!important; } } /* ============================================================ UI refinement p11 — finishing / responsive polish ============================================================ */ :root{ --ui-card-radius:10px; --ui-control-radius:8px; --ui-gap-xs:4px; --ui-gap-sm:6px; --ui-gap-md:9px; } /* Sidebar spacing: a little denser, but retain enough touch space. */ .sidebar-scroll{ padding:14px 13px calc(18px + env(safe-area-inset-bottom))!important; } .sidebar-title{ margin-bottom:10px!important; } .status{ margin-top:10px!important; margin-bottom:10px!important; } .result-section{ margin-top:12px!important; } .result-heading{ margin-bottom:7px!important; } .result-heading h2{ line-height:1.15!important; } .point-list{ display:grid!important; gap:7px!important; } /* Result cards: normalize radius, border and vertical rhythm. */ .point-card{ border-radius:var(--ui-card-radius)!important; } .point-card > summary{ padding:8px 9px!important; min-height:48px!important; column-gap:9px!important; row-gap:5px!important; } .point-card > summary > .point-name-chip{ min-height:25px!important; padding:5px 8px!important; border-radius:7px!important; font-size:10px!important; } .point-summary-river{ font-size:10px!important; line-height:1.18!important; } .point-summary-basin{ font-size:10px!important; line-height:1.18!important; } .point-summary-area{ font-size:10px!important; line-height:1.2!important; } .point-chevron{ width:16px!important; height:22px!important; display:grid!important; place-items:center!important; } .point-chevron svg{ width:13px!important; height:13px!important; } .point-body{ padding:9px!important; } .point-edit-label-row{ margin-bottom:4px!important; } .point-name-grid{ gap:6px!important; } .point-name-grid input{ height:32px!important; border-radius:8px!important; } .save-icon-button{ width:32px!important; height:32px!important; min-width:32px!important; border-radius:8px!important; } .point-action-label{ margin-top:10px!important; margin-bottom:5px!important; } .point-action-row{ gap:5px!important; margin-top:0!important; } .point-action-row .dta-action-button{ height:31px!important; min-height:31px!important; border-radius:8px!important; padding:0 7px!important; } /* Bulk actions: visually balanced with the denser result heading. */ .result-heading-actions{ gap:5px!important; } .result-heading-actions .result-stack-button{ width:50px!important; height:35px!important; min-height:35px!important; border-radius:8px!important; } .result-heading-actions .result-stack-button span{ font-size:10px!important; } /* Existing-result popup: same rhythm as sidebar and compact add/move popup. */ .existing-point-popup .maplibregl-popup-content{ padding:9px!important; border-radius:10px!important; } .existing-point-menu{ display:grid!important; gap:9px!important; } .existing-point-menu-head{ min-height:43px!important; column-gap:9px!important; row-gap:5px!important; } .existing-point-menu-head > .existing-point-name-chip{ min-height:25px!important; padding:5px 8px!important; border-radius:7px!important; font-size:10px!important; } .existing-point-river{ font-size:10px!important; line-height:1.18!important; } .existing-point-basin{ font-size:10px!important; line-height:1.18!important; } .existing-point-area{ font-size:10px!important; } .popup-point-name-editor{ padding-top:8px!important; border-top:1px solid var(--border-color)!important; } .popup-point-name-editor .point-name-grid{ margin-top:5px!important; } .existing-point-menu .point-action-label{ margin-top:1px!important; } .existing-point-menu-grid{ gap:5px!important; } .existing-point-menu-grid button{ min-height:30px!important; border-radius:8px!important; padding:6px 7px!important; } /* DTA color selector: compact, matching Batas DAS/Jaringan Sungai controls. */ .dta-colorpicker-panel{ padding:9px!important; border-radius:10px!important; } .dta-colorpicker-head{ min-height:25px!important; margin-bottom:8px!important; } .dta-colorpicker-head button{ width:26px!important; height:26px!important; } .dta-color-inline-row .color-input{ width:38px!important; height:27px!important; } .dta-color-input-message{ font-size:10px!important; line-height:1.4!important; } /* Definition examples remain 2 columns when room permits. */ .definition-example-grid{ gap:10px!important; } .definition-example-case.compact{ padding:10px!important; min-width:0!important; } .definition-example-head{ gap:5px 8px!important; } .definition-example-formula{ font-size:10px!important; } .set-visual-single .set-circle-outer, .set-visual-multi .set-circle-outer{ width:min(100%,260px)!important; } /* Map bottom-right controls: explicitly reserve space above attribution. */ .maplibregl-ctrl-bottom-right{ gap:0!important; } .maplibregl-ctrl-bottom-right .map-toolbar-control{ margin:0 8px 6px 0!important; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{ margin:0 8px 8px 0!important; max-width:min(62vw,460px)!important; } .map-toolbar-control{ border-radius:9px!important; } .map-toolbar-control button{ width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; } .map-toolbar-control svg{ width:16px!important; height:16px!important; } /* Search and header toggle maintain predictable stacking in normal/fullscreen. */ .maplibregl-ctrl-top-left .map-search{ margin-top:8px!important; } .header-handle-shell{ top:8px!important; right:8px!important; } .header-menu-handle{ width:34px!important; height:34px!important; border-radius:9px!important; } html:fullscreen .header-handle-shell, html:-webkit-full-screen .header-handle-shell{ top:8px!important; right:8px!important; } /* Visible keyboard focus without changing mouse appearance. */ .point-card button:focus-visible, .existing-point-menu button:focus-visible, .map-toolbar-control button:focus-visible, .sidebar-title-info:focus-visible, .header-menu-handle:focus-visible{ outline:2px solid color-mix(in srgb,var(--primary) 70%,white)!important; outline-offset:2px!important; } /* Tablet: keep two-column examples until space actually becomes tight. */ @media(max-width:860px){ .definition-example-grid{ grid-template-columns:1fr!important; } } /* Mobile finishing: drawer/search/control spacing and safe areas. */ @media(max-width:780px){ .sidebar{ top:56px!important; bottom:calc(7px + env(safe-area-inset-bottom))!important; left:7px!important; width:min(326px,calc(100% - 14px))!important; max-width:calc(100% - 14px)!important; border-radius:13px!important; } .sidebar.collapsed{ width:min(326px,calc(100% - 14px))!important; transform:translateX(calc(-100% - 18px))!important; } .sidebar-scroll{ padding:13px 12px calc(18px + env(safe-area-inset-bottom))!important; } .maplibregl-ctrl-top-left{ left:7px!important; } .maplibregl-ctrl-top-left .map-search{ margin:7px 5px!important; } .map-toolbar-control button{ width:37px!important; height:37px!important; min-width:37px!important; min-height:37px!important; } .maplibregl-ctrl-bottom-right .map-toolbar-control{ margin-right:7px!important; margin-bottom:5px!important; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{ margin-right:7px!important; margin-bottom:7px!important; max-width:calc(100vw - 14px)!important; } .existing-point-popup .maplibregl-popup-content{ width:min(274px,calc(100vw - 18px))!important; } } @media(max-width:430px){ .sidebar{ top:54px!important; } .point-card > summary{ min-height:46px!important; } .result-heading-actions .result-stack-button{ width:47px!important; } } /* ============================================================ UI refinement p12 — outlet-only hover popup ============================================================ */ /* Polygon DTA hover uses outline emphasis only; popup is reserved for outlet. */ .point-hover-card{ min-width:138px; } .point-hover-card > strong{ font-size:10px!important; font-weight:800!important; white-space:nowrap!important; } /* ============================================================ UI refinement p13 ============================================================ */ /* Sidebar cards: remove excess whitespace and keep compact two-line header. */ .point-card > summary{ padding:7px 9px!important; row-gap:4px!important; } .point-card > summary > .point-name-chip{ padding:5px 8px!important; } .point-card > summary > .point-summary-main{ margin-top:0!important; } .point-summary-river,.point-summary-basin,.point-summary-area{ line-height:1.12!important; } .point-body{ padding:6px 9px 8px!important; } .point-edit-label{ margin:0!important; } .point-edit-label-row{ margin-bottom:3px!important; } .point-name-grid input,.save-icon-button{ height:31px!important; } .point-action-label{ margin-top:7px!important; margin-bottom:3px!important; } .point-action-row{ gap:4px!important; } .point-action-row .dta-action-button{ height:30px!important; min-height:30px!important; } /* Popup card: slimmer width and tighter vertical rhythm. */ .existing-point-popup .maplibregl-popup-content{ min-width:232px!important; width:min(246px, calc(100vw - 18px))!important; padding:7px!important; border-radius:10px!important; } .existing-point-menu{ gap:6px!important; } .existing-point-menu-head{ min-height:38px!important; row-gap:3px!important; padding-right:16px!important; } .existing-point-menu-head > .existing-point-name-chip{ padding:5px 8px!important; } .existing-point-river,.existing-point-basin,.existing-point-area{ line-height:1.12!important; } .popup-point-name-editor{ padding-top:5px!important; margin-top:0!important; } .popup-point-name-editor .point-edit-label-row{ margin-bottom:3px!important; } .existing-point-menu .point-action-label{ margin-top:2px!important; margin-bottom:2px!important; } .existing-point-menu-grid{ gap:4px!important; } .existing-point-menu-grid button{ min-height:29px!important; padding:5px 7px!important; } /* Example cards: no numbering; 2-column stays but a bit tighter. */ .definition-example-head h4{margin:0!important} .definition-example-grid{gap:10px!important} .definition-example-case.compact{padding:9px 10px!important} /* ============================================================ UI refinement p14 — final visual cleanup ============================================================ */ /* ---------- Global visual rhythm ---------- */ .webgis-shell, .sidebar, .map-panel, .modal-card, .maplibregl-popup-content, .map-search, .point-card, .btn, .small-icon-btn, .mini-button, .save-icon-button, .result-stack-button{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .sidebar-scroll{ scrollbar-width:thin; scrollbar-color:rgba(100,115,135,.34) transparent; } .sidebar-scroll::-webkit-scrollbar{width:7px} .sidebar-scroll::-webkit-scrollbar-track{background:transparent} .sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(100,115,135,.28); border-radius:999px; border:2px solid transparent; background-clip:padding-box; } .sidebar-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(100,115,135,.42); border:2px solid transparent; background-clip:padding-box; } /* ---------- Sidebar heading ---------- */ .sidebar-title{ align-items:center!important; } .sidebar-title .section-icon{ width:34px!important; height:34px!important; border-radius:9px!important; } .sidebar-title .section-icon svg{ width:17px!important; height:17px!important; } .sidebar-title .eyebrow{ line-height:1.05!important; margin-bottom:2px!important; } .sidebar-title h1{ margin:0!important; line-height:1.08!important; } .sidebar-title-info{ margin-top:0!important; align-self:center!important; } /* ---------- Section headings ---------- */ .panel-section{ margin-top:12px!important; padding-top:11px!important; } .section-heading, .section-heading-row, .result-heading{ align-items:center!important; } .panel-section h2, .result-heading h2{ letter-spacing:-.01em!important; } .help{ margin-top:3px!important; margin-bottom:8px!important; } .result-heading .help{ margin-bottom:0!important; } /* ---------- Status ---------- */ .status{ border:1px solid transparent!important; font-weight:650!important; } .status.success{border-color:color-mix(in srgb,#24704e 14%,transparent)!important} .status.busy{border-color:color-mix(in srgb,var(--primary) 12%,transparent)!important} .status.error{border-color:color-mix(in srgb,#9e2b24 13%,transparent)!important} /* ---------- Result card header ---------- */ .point-card{ border-width:1px!important; border-left-width:1px!important; box-shadow:0 1px 0 rgba(24,36,55,.025)!important; } .point-card > summary{ transition:background-color .14s ease!important; } .point-card > summary:hover{ background:color-mix(in srgb,var(--surface-soft) 58%,transparent)!important; } .point-card[open] > summary{ background:color-mix(in srgb,var(--surface-soft) 38%,transparent)!important; } .point-name-chip{ font-weight:800!important; letter-spacing:-.015em!important; } .point-summary-river{ font-weight:800!important; letter-spacing:-.008em!important; } .point-summary-basin{ font-weight:520!important; } .point-summary-area{ font-variant-numeric:tabular-nums!important; letter-spacing:-.015em!important; } .point-chevron{ color:var(--text-muted)!important; } /* ---------- Card editor ---------- */ .point-body{ border-top-color:color-mix(in srgb,var(--border-color) 72%,transparent)!important; } .point-edit-label{ font-weight:750!important; line-height:1.15!important; } .point-name-grid input{ font-size:10px!important; } .point-name-grid input::placeholder{ color:var(--text-muted)!important; } .save-icon-button svg, .point-action-row .dta-action-button svg, .existing-point-menu-grid button svg{ width:12px!important; height:12px!important; } .point-action-row .dta-action-button, .existing-point-menu-grid button{ font-size:10px!important; font-weight:750!important; transition:background-color .13s ease,border-color .13s ease,transform .08s ease!important; } .point-action-row .dta-action-button:active, .existing-point-menu-grid button:active{ transform:translateY(1px)!important; } /* ---------- Bulk actions ---------- */ .result-heading-actions .result-stack-button{ box-shadow:none!important; transition:filter .13s ease,transform .08s ease!important; } .result-heading-actions .result-stack-button:active{ transform:translateY(1px)!important; } .result-heading-actions .result-stack-button svg{ margin:0!important; } /* ---------- Existing DTA popup ---------- */ .existing-point-popup .maplibregl-popup-content{ box-shadow:0 10px 28px rgba(24,36,55,.14)!important; } .existing-point-popup .maplibregl-popup-close-button{ width:22px!important; height:22px!important; top:3px!important; right:3px!important; display:grid!important; place-items:center!important; border-radius:6px!important; font-size:13px!important; line-height:1!important; color:var(--text-muted)!important; } .existing-point-menu-head{ padding-right:20px!important; } .existing-point-name-chip{ font-weight:800!important; letter-spacing:-.015em!important; } .existing-point-river{ font-weight:800!important; letter-spacing:-.008em!important; } .existing-point-basin{ font-weight:520!important; } .existing-point-area{ font-variant-numeric:tabular-nums!important; } .existing-point-menu-grid button{ justify-content:flex-start!important; } /* ---------- Outlet hover popup ---------- */ .map-hover-popup .maplibregl-popup-content{ padding:7px 8px!important; border-radius:8px!important; box-shadow:0 8px 22px rgba(24,36,55,.13)!important; } .map-hover-card{ gap:3px 6px!important; } .dta-hover-chip{ max-width:120px!important; padding:4px 6px!important; font-size:10px!important; } .map-hover-card>strong{ font-size:10px!important; font-variant-numeric:tabular-nums!important; } .map-hover-card>span:last-child{ font-size:10px!important; } /* ---------- Search ---------- */ .map-search{ height:40px!important; grid-template-columns:32px minmax(0,1fr) 34px!important; padding:2px!important; border-radius:9px!important; } .map-search input{ height:34px!important; font-size:10px!important; } .map-search>svg{ width:15px!important; height:15px!important; } .search-submit{ width:34px!important; height:34px!important; border-radius:7px!important; } .search-submit svg{ width:14px!important; height:14px!important; } .map-search-results{ top:43px!important; } /* ---------- Header toggle ---------- */ .header-handle-shell{ filter:drop-shadow(0 3px 9px rgba(24,36,55,.08)); } .header-menu-handle{ box-shadow:none!important; } .header-menu-handle svg{ width:15px!important; height:15px!important; } /* ---------- Map toolbar ---------- */ .map-toolbar-control{ overflow:hidden!important; box-shadow:0 3px 12px rgba(24,36,55,.10)!important; } .map-toolbar-control button{ border-color:color-mix(in srgb,var(--border-color) 88%,transparent)!important; } .map-toolbar-control button.active{ background:var(--primary)!important; color:#fff!important; } .map-toolbar-control button.active svg{ color:#fff!important; } /* ---------- Layer/color panels ---------- */ .map-panel, .dta-colorpicker-panel{ box-shadow:0 12px 30px rgba(24,36,55,.13)!important; } .panel-title-row, .dta-colorpicker-head{ font-weight:800!important; } .panel-close, .dta-colorpicker-head button{ transition:background-color .13s ease,color .13s ease!important; } /* ---------- Definition modal ---------- */ .definition-example-grid{ align-items:stretch!important; } .definition-example-case.compact{ display:flex!important; flex-direction:column!important; } .definition-example-case.compact .set-visual{ margin-top:auto!important; padding-top:7px!important; } .definition-example-formula{ font-weight:700!important; } .definition-concept{ margin-top:10px!important; } /* ---------- Modal cleanup ---------- */ .modal-card{ box-shadow:0 18px 52px rgba(18,29,46,.18)!important; } .modal-head{ align-items:flex-start!important; } .modal-head h2{ letter-spacing:-.015em!important; } .modal-close{ flex:0 0 auto!important; } /* ---------- Dark-mode cleanup ---------- */ [data-theme="dark"] .point-card > summary:hover, [data-theme="dark"] .point-card[open] > summary{ background:rgba(255,255,255,.035)!important; } [data-theme="dark"] .existing-point-popup .maplibregl-popup-content, [data-theme="dark"] .map-panel, [data-theme="dark"] .dta-colorpicker-panel{ box-shadow:0 12px 30px rgba(0,0,0,.30)!important; } /* ---------- Fullscreen ---------- */ html:fullscreen .sidebar, html:-webkit-full-screen .sidebar{ top:8px!important; bottom:8px!important; } html:fullscreen .maplibregl-ctrl-top-left .map-search, html:-webkit-full-screen .maplibregl-ctrl-top-left .map-search{ margin-top:8px!important; } /* ---------- Tablet ---------- */ @media(max-width:980px){ .map-search{ max-width:min(330px,calc(100vw - 150px))!important; } } /* ---------- Mobile ---------- */ @media(max-width:780px){ .sidebar{ box-shadow:0 12px 30px rgba(24,36,55,.16)!important; } .sidebar-title{ gap:7px!important; } .sidebar-title .section-icon{ width:31px!important; height:31px!important; } .sidebar-title .section-icon svg{ width:15px!important; height:15px!important; } .sidebar-title-info{ width:25px!important; height:25px!important; } .map-search{ height:40px!important; } .point-card > summary{ padding:7px 8px!important; } .point-body{ padding:6px 8px 8px!important; } .existing-point-popup .maplibregl-popup-content{ min-width:226px!important; width:min(244px,calc(100vw - 16px))!important; } .map-toolbar-control button{ width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; } } /* ---------- Very small phones ---------- */ @media(max-width:390px){ .sidebar{ width:calc(100% - 12px)!important; max-width:calc(100% - 12px)!important; left:6px!important; } .sidebar-scroll{ padding-left:10px!important; padding-right:10px!important; } .result-heading-actions .result-stack-button{ width:46px!important; } .point-action-row{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } /* ============================================================ UI refinement p15 — popup/hover/drag interaction hotfix ============================================================ */ /* Hover outline sits above every DTA outline but below the outlet point layer. No halo: only the outline thickness changes. */ .map-hover-popup{ z-index:430!important; } /* Existing popup — remove the remaining blank vertical space. */ .existing-point-popup .maplibregl-popup-content{ padding:6px 7px!important; } .existing-point-menu{ gap:0!important; } .existing-point-menu-head{ min-height:34px!important; row-gap:2px!important; margin:0!important; padding-bottom:4px!important; } .popup-point-name-editor{ display:block!important; margin:0!important; padding:4px 0 0!important; border-top:1px solid var(--border-color)!important; } .popup-point-name-editor .point-edit-label-row{ margin:0 0 2px!important; min-height:0!important; line-height:1.05!important; } .popup-point-name-editor .point-name-grid{ margin:0!important; gap:5px!important; } .popup-point-name-editor .point-name-grid input, .popup-point-name-editor .save-icon-button{ height:30px!important; min-height:30px!important; } .popup-point-name-editor .point-name-limit-warning.hidden{ display:none!important; } .existing-point-menu .point-action-label{ margin:4px 0 2px!important; padding:0!important; min-height:0!important; line-height:1.05!important; } .existing-point-menu-grid{ margin:0!important; gap:3px!important; } .existing-point-menu-grid button{ min-height:28px!important; padding:4px 6px!important; } /* Direct native color picker proxy: the container becomes renderable offscreen for showPicker(), but no custom color panel is shown to the user. */ .dta-colorpicker-panel.native-picker-proxy{ display:block!important; position:fixed!important; left:-9999px!important; top:-9999px!important; visibility:hidden!important; pointer-events:none!important; } /* 500 ms hold completed: clearly tell the user that the card can now move. */ .point-card-drag-ready, .point-card.sortable-chosen{ position:relative!important; border-color:var(--primary)!important; background:color-mix(in srgb,var(--primary) 7%,var(--card-bg))!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent),0 7px 18px rgba(24,36,55,.10)!important; cursor:grab!important; } .point-list.is-dragging .point-card-dragging{ cursor:grabbing!important; } @media(max-width:780px){ .existing-point-popup .maplibregl-popup-content{ padding:6px!important; } .point-card-drag-ready::after, .point-card.sortable-chosen::after{ right:6px; bottom:5px; } } /* ============================================================ UI refinement p16 — closed-card drag only ============================================================ */ /* Setelah hold 500 ms, indikator drag hanya berupa perubahan highlight kartu. */ .point-card-drag-ready, .point-card.sortable-chosen{ position:relative!important; border-color:var(--primary)!important; background:color-mix(in srgb,var(--primary) 7%,var(--card-bg))!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent),0 7px 18px rgba(24,36,55,.10)!important; cursor:grab!important; } /* Kartu terbuka harus ditutup terlebih dahulu sebelum dapat di-drag. */ .point-card[open]{ cursor:default!important; } .point-card[open] > summary{ cursor:pointer!important; } /* ============================================================ UI refinement p17 — drag bounds + stable color picker + slim popup ============================================================ */ /* Sortable fallback clone is painted only inside the Hasil DTA list. It cannot visually cross into the Tambah Titik / Mode Banyak Titik button. */ .outlet-section{ isolation:isolate!important; } .point-list{ position:relative!important; overflow:clip!important; contain:paint!important; transform:translateZ(0); z-index:1; } .point-list .sortable-fallback, .point-list .point-card-dragging{ max-width:100%!important; width:100%!important; box-sizing:border-box!important; } .spaced-add-point{ position:relative!important; z-index:2!important; background-clip:padding-box!important; } /* Native color input must remain a real rendered element while showPicker() owns the operating-system dialog. Keep it offscreen and transparent, not visibility:hidden, until the change event finishes. */ .dta-colorpicker-panel.native-picker-proxy{ display:block!important; position:fixed!important; left:-12px!important; top:-12px!important; width:2px!important; height:2px!important; min-width:0!important; padding:0!important; margin:0!important; opacity:.001!important; visibility:visible!important; overflow:hidden!important; pointer-events:none!important; box-shadow:none!important; border:0!important; } .dta-colorpicker-panel.native-picker-proxy #dtaColorNativeInput{ display:block!important; width:1px!important; height:1px!important; min-width:1px!important; min-height:1px!important; opacity:.001!important; pointer-events:none!important; } /* ~80% of the p16/p15 popup width (246 px -> ~198 px). */ .existing-point-popup .maplibregl-popup-content{ min-width:194px!important; width:min(198px,calc(100vw - 16px))!important; max-width:198px!important; } .existing-point-menu-head{ column-gap:6px!important; } .existing-point-name-chip{ max-width:112px!important; } .existing-point-river, .existing-point-basin{ max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .existing-point-menu-grid button{ min-width:0!important; padding-left:5px!important; padding-right:5px!important; } @media(max-width:780px){ .existing-point-popup .maplibregl-popup-content{ min-width:190px!important; width:min(198px,calc(100vw - 14px))!important; max-width:198px!important; } } /* ============================================================ UI refinement p18 — strict drag bounds + anchored color picker ============================================================ */ /* The fallback card itself is intentionally transparent. Reordering feedback stays inside Hasil DTA through the real cards/ghost, so no floating clone can overlap Tambah Titik / Mode Banyak Titik. */ .point-card-drag-fallback, .point-list .point-card-drag-fallback, .sortable-fallback.point-card-drag-fallback{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; box-shadow:none!important; } /* Point list is the only visible reorder canvas. */ .point-list{ position:relative!important; overflow:hidden!important; clip-path:inset(0 round 8px)!important; } .point-list.is-dragging{ isolation:isolate!important; } .point-list .point-card-drag-ghost{ position:relative!important; z-index:1!important; } /* Anchor the invisible native color input to the actual Warna button. This gives Chrome/Edge's system picker a nearby screen coordinate. */ .dta-colorpicker-panel.native-picker-proxy{ display:block!important; position:fixed!important; left:var(--native-picker-left,8px)!important; top:var(--native-picker-top,8px)!important; width:2px!important; height:2px!important; min-width:0!important; padding:0!important; margin:0!important; opacity:.001!important; visibility:visible!important; overflow:visible!important; pointer-events:none!important; box-shadow:none!important; border:0!important; transform:translate(-50%,-50%)!important; z-index:9999!important; } .dta-colorpicker-panel.native-picker-proxy #dtaColorNativeInput{ display:block!important; position:absolute!important; left:0!important; top:0!important; width:2px!important; height:2px!important; min-width:2px!important; min-height:2px!important; opacity:.001!important; pointer-events:auto!important; } /* ============================================================ UI refinement p19 — simple contained reorder mode ============================================================ */ /* Disable all legacy SortableJS visuals. */ .point-card-drag-ready, .point-card-drag-chosen, .point-card-drag-ghost, .point-card-dragging, .point-card-drag-fallback, .sortable-chosen, .sortable-ghost, .sortable-drag, .sortable-fallback{ all:unset; } /* Cards remain normal until the 5-second hold completes. */ .point-card{ position:relative; } .point-card:not([open]) > summary{ touch-action:pan-y; } /* 5 seconds reached: subtle highlight + move icon only. */ .point-card-reorder-ready{ border-color:var(--primary)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 13%,transparent)!important; background:color-mix(in srgb,var(--primary) 4%,var(--card-bg))!important; } .point-card-reorder-ready::after{ content:""; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:7px; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3 3-3 3'/%3E%3Cpath d='M9 5h6'/%3E%3Cpath d='m12 22-3-3 3-3'/%3E%3Cpath d='M15 19H9'/%3E%3Cpath d='m2 12 3-3 3 3'/%3E%3Cpath d='M5 15V9'/%3E%3Cpath d='m22 12-3 3-3-3'/%3E%3Cpath d='M19 9v6'/%3E%3C/svg%3E") center/14px 14px no-repeat; box-shadow:0 2px 6px rgba(24,36,55,.16); pointer-events:none; z-index:8; } /* During reorder the real card stays in-list; it never floats outside Hasil DTA. */ .point-card-reordering{ opacity:.88; background:color-mix(in srgb,var(--primary) 6%,var(--card-bg))!important; box-shadow:0 5px 14px rgba(24,36,55,.10)!important; } .point-list.is-reorder-mode{ position:relative!important; overflow:hidden!important; } .point-list.is-reorder-mode .point-card:not(.point-card-reorder-ready){ transition:transform .12s ease; } /* Open cards never enter reorder mode. */ .point-card[open]::after{ content:none!important; } /* ============================================================ UI refinement p21 — robust 500 ms reorder gesture ============================================================ */ /* Closed cards accept long-press reorder. No clone or floating element is used. */ .point-card:not([open]) > summary{ position:relative; -webkit-user-select:none; user-select:none; } .point-list.is-reorder-mode{ overflow:hidden!important; overscroll-behavior:contain; } .point-card-reorder-ready{ z-index:3; border-color:var(--primary)!important; background:color-mix(in srgb,var(--primary) 6%,var(--card-bg))!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent),0 5px 14px rgba(24,36,55,.10)!important; } .point-card-reorder-ready::after{ content:""; position:absolute; top:8px; right:8px; width:23px; height:23px; border-radius:7px; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M5 9l7-7 7 7M5 15l7 7 7-7'/%3E%3C/svg%3E") center/13px 13px no-repeat; pointer-events:none; z-index:10; } .point-card-reordering{ opacity:.90; cursor:grabbing!important; } .point-card-reordering > summary{ cursor:grabbing!important; } /* ============================================================ UI refinement p22 — minimal SortableJS reorder ============================================================ */ /* Neutralize legacy custom reorder visuals from p19-p21. */ .point-card-reorder-ready, .point-card-reordering{ box-shadow:inherit!important; background:inherit!important; opacity:1!important; } /* Sortable readiness indicator appears after the 500 ms hold. */ .point-card-sortable-ready{ position:relative!important; border-color:var(--primary)!important; background:color-mix(in srgb,var(--primary) 6%,var(--card-bg))!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent)!important; } .point-card-sortable-ready::after{ content:""; position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:7px; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M5 9l7-7 7 7M5 15l7 7 7-7'/%3E%3C/svg%3E") center/13px 13px no-repeat; pointer-events:none; z-index:12; } /* Placeholder stays inside #pointList; no custom floating clone logic. */ .point-card-sortable-ghost{ opacity:.28!important; background:color-mix(in srgb,var(--primary) 8%,var(--card-bg))!important; border:1px dashed color-mix(in srgb,var(--primary) 55%,var(--border-color))!important; } .point-card-sortable-drag{ cursor:grabbing!important; } .point-list{ position:relative!important; } .point-list.is-sortable-reordering{ isolation:isolate!important; } .point-card[open] > summary{ cursor:pointer!important; } /* ============================================================ UI refinement p24 — DTA card consistency + mobile header ============================================================ */ /* ---------- Sidebar/popup point-name editor consistency ---------- */ /* Use the same flat button treatment in both locations. Explicit border style removes the browser's default 3D/outset button edge. */ .save-icon-button, .popup-point-name-editor .save-icon-button{ -webkit-appearance:none!important; appearance:none!important; border:1px solid #223468!important; background:#223468!important; color:#fff!important; box-shadow:none!important; outline:none; } /* Sidebar and popup inputs use exactly the same flat border model. */ .point-name-grid input, .point-name-grid .rename-point, .popup-point-name-editor .point-name-grid input, .popup-point-name-editor .popup-rename-point{ -webkit-appearance:none!important; appearance:none!important; border:1px solid var(--border-strong)!important; background:var(--input-bg)!important; color:var(--text-main)!important; box-shadow:none!important; } /* Keep the unsaved state identical on both editors, without a heavy 3D ring. */ .point-name-editor.is-dirty .point-name-grid input, .point-name-editor .point-name-grid input.is-dirty, .point-edit-label.is-dirty .rename-point{ border:1px solid #d49a00!important; box-shadow:0 0 0 2px rgba(212,154,0,.10)!important; } /* Popup: a little breathing room above "Aksi". */ .existing-point-menu .point-action-label{ margin-top:7px!important; margin-bottom:2px!important; } /* Align river text with the TEXT inside the colored point-name chip. Chip horizontal padding is 8 px, so only the river text receives the same indent. */ .point-summary-river, .existing-point-river{ padding-left:8px!important; box-sizing:border-box!important; } /* ---------- Header agency name ---------- */ .mobile-brand-break{ display:none; } /* ---------- Mobile header/search stacking ---------- */ @media(max-width:780px){ /* Search previously used z-index ~2100 while the normal header was z-index 70, allowing Search + mode badge to paint over the header. */ #appHeader.spatial-header{ z-index:2300!important; } /* Mobile brand contains only these two visible lines. */ .spatial-header .agency-copy .agency-overline, .spatial-header .agency-copy .agency-subline{ display:none!important; } .spatial-header .agency-copy strong{ display:block!important; max-width:min(205px,calc(100vw - 150px))!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; font-size:10px!important; line-height:1.25!important; letter-spacing:.012em!important; } .spatial-header .agency-copy strong .mobile-brand-break, .mobile-brand-break{ display:block!important; } /* When the header is visible, reserve its vertical row. Search and its single/multi-point indicator move below it together. */ #appHeader:not(.is-hidden) ~ #spatialWorkspace .maplibregl-ctrl-top-left{ top:66px!important; } #appHeader:not(.is-hidden) ~ #spatialWorkspace .sidebar{ top:66px!important; } #appHeader:not(.is-hidden) ~ #spatialWorkspace .layer-panel{ top:66px!important; } .maplibregl-ctrl-top-left, .sidebar, .layer-panel{ transition:top .20s ease,left .22s ease,transform .22s ease!important; } } @media(max-width:430px){ .spatial-header .agency-copy strong{ max-width:min(185px,calc(100vw - 142px))!important; font-size:10px!important; } #appHeader:not(.is-hidden) ~ #spatialWorkspace .maplibregl-ctrl-top-left, #appHeader:not(.is-hidden) ~ #spatialWorkspace .sidebar, #appHeader:not(.is-hidden) ~ #spatialWorkspace .layer-panel{ top:64px!important; } } /* ============================================================ UI refinement p32 — explicit add-point session + point mode ============================================================ */ .point-input-control-row{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:7px; align-items:stretch; } .point-input-control-row .btn{ width:100%; min-width:0; padding-inline:8px; line-height:1.2; white-space:normal; } .add-point-session{ background:var(--primary-action-bg)!important; color:var(--primary-action-text)!important; border-color:var(--primary-action-bg)!important; } .add-point-session.active{ background:var(--success)!important; color:#fff!important; border-color:var(--success)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--success) 16%,transparent); } .point-mode-toggle{ background:var(--card-bg)!important; color:var(--text-main)!important; border-color:var(--border-color)!important; } .point-mode-toggle.active{ color:var(--primary)!important; border-color:color-mix(in srgb,var(--primary) 45%,var(--border-color))!important; background:color-mix(in srgb,var(--primary) 6%,var(--card-bg))!important; } .map-mode-indicator.adding .mode-dot{ box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent)!important; } .location-preview-popup .maplibregl-popup-content{ padding:8px 9px!important; } .location-preview-card{ display:grid; gap:4px; min-width:180px; max-width:245px; color:var(--text-main); } .location-preview-card>strong{font-size:10px;color:var(--text-strong)} .location-preview-card>span{font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums} .location-preview-card>p{margin:2px 0 0;font-size:10px;line-height:1.45;color:var(--text-muted)} @media(max-width:430px){ .point-input-control-row{grid-template-columns:1fr 1fr;gap:6px} .point-input-control-row .btn{font-size:10px;padding-inline:6px} } /* ============================================================ Physical–hydrologic DTA analysis ============================================================ */ .hydrologic-analysis-modal{ width:min(980px,calc(100vw - 28px))!important; max-width:980px!important; max-height:min(88vh,900px)!important; overflow:auto!important; padding:22px!important; } .hydrologic-analysis-content{display:grid;gap:18px;color:var(--text-main)} .analysis-executive{ display:grid;grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);gap:20px;align-items:center; padding:20px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border-color));border-radius:14px; background:var(--card-bg); } .analysis-executive>div{display:grid;gap:6px}.analysis-executive>div:first-child{position:relative;min-width:0;padding-left:14px;border-radius:10px;background:var(--analysis-status-tint,#F7F3E7);box-shadow:inset 4px 0 0 var(--analysis-status-primary,#A58A45)}.analysis-kicker{font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--text-muted)} .analysis-executive>div>strong{font-size:1.3rem;line-height:1.15;color:var(--analysis-status-stronger,var(--analysis-status-primary,var(--primary)))} .analysis-executive p{margin:0;font-size:.72rem;line-height:1.65;color:var(--text-main);text-align:justify;text-justify:inter-word} .analysis-section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:9px} .analysis-section-title>span{font-size:.77rem;font-weight:800;color:var(--text-strong)} .analysis-section-title>small{font-size:10px;color:var(--text-muted)} .analysis-indicator-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .cn-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .analysis-metric{min-height:68px;display:grid;align-content:space-between;gap:8px;padding:11px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg)}.analysis-metric--status{border-top:3px solid var(--analysis-status-primary,#A58A45);padding-top:9px}.analysis-metric--status>span::before{content:"";display:inline-block;width:5px;height:5px;margin:0 5px 1px 0;border-radius:50%;background:var(--analysis-status-primary,#A58A45)} .analysis-metric>span{font-size:10px;line-height:1.3;color:var(--text-muted)} .analysis-metric>strong{font-size:.76rem;color:var(--text-strong);font-variant-numeric:tabular-nums}.analysis-metric>small{font-size:10px;line-height:1.35;color:var(--text-muted);text-align:justify;text-justify:inter-word} .analysis-na{font-size:10px;font-weight:600;color:var(--text-muted)} .analysis-stage-note{margin:8px 2px 0;font-size:10px;line-height:1.45;color:var(--text-muted);text-align:justify;text-justify:inter-word} .analysis-data-note{display:flex;gap:9px;align-items:flex-start;margin-top:9px;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,#d99b25 10%,var(--card-bg));color:var(--text-muted);font-size:10px;line-height:1.5;text-align:justify;text-justify:inter-word} .analysis-data-note svg{width:15px;height:15px;flex:0 0 auto;color:#b47608}.analysis-data-note code{font-size:10px} .technical-analysis{border:1px solid var(--border-color);border-radius:12px;background:var(--card-bg);overflow:hidden} .technical-analysis>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;font-size:.7rem;font-weight:800;color:var(--primary)} .technical-analysis>summary::-webkit-details-marker{display:none}.technical-analysis>summary span{display:flex;align-items:center;gap:8px}.technical-analysis>summary svg{width:16px;height:16px} .technical-analysis[open]>summary>svg{transform:rotate(180deg)} .technical-analysis-body{display:grid;gap:18px;padding:0 16px 16px;border-top:1px solid var(--border-color)} .technical-group{padding-top:16px}.technical-group h3,.analysis-limitations h3{margin:0 0 9px;font-size:.68rem;color:var(--text-strong)} .technical-table-wrap{overflow-x:auto;border:1px solid var(--border-color);border-radius:9px} .technical-table-wrap table{width:100%;border-collapse:collapse;min-width:690px;font-size:10px;line-height:1.4} .technical-table-wrap th,.technical-table-wrap td{min-width:0;padding:8px 9px;border-bottom:1px solid var(--border-color);text-align:left;vertical-align:top;white-space:normal;overflow-wrap:anywhere} .technical-table-wrap thead th{background:color-mix(in srgb,var(--primary) 6%,var(--card-bg));color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.04em} .technical-table-wrap tbody th{width:22%;font-weight:700;color:var(--text-strong)} .technical-table-wrap tbody td:nth-child(2){width:18%;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.technical-table-wrap tr:last-child>*{border-bottom:0} .slope-class-list{display:grid;gap:8px}.slope-class-row{display:grid;grid-template-columns:145px minmax(90px,1fr) 52px;gap:9px;align-items:center;font-size:10px} .slope-class-row>div{height:8px;border-radius:99px;background:color-mix(in srgb,var(--primary) 10%,var(--card-bg));overflow:hidden}.slope-class-row i{display:block;height:100%;border-radius:inherit;background:var(--primary)} .slope-class-row strong{text-align:right;font-variant-numeric:tabular-nums} .analysis-limitations{padding:13px;border-radius:9px;background:color-mix(in srgb,var(--text-muted) 6%,var(--card-bg))}.analysis-limitations ul{margin:0;padding-left:18px;font-size:10px;line-height:1.55;color:var(--text-muted)}.analysis-limitations li{text-align:justify;text-justify:inter-word} .dta-action-button.open-hydrologic-analysis{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--border-color));background:color-mix(in srgb,var(--primary) 5%,var(--card-bg))} .morphometry-analysis-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:28px;margin-top:8px;border:1px solid var(--border);border-radius:7px;background:var(--card-bg);color:var(--text-main);font:inherit;font-size:10px;font-weight:700;cursor:pointer}.morphometry-analysis-button:hover{background:var(--surface-soft);border-color:var(--primary);color:var(--primary)}.morphometry-analysis-button svg{width:13px;height:13px} .analysis-preferences{display:grid;grid-template-columns:1fr;gap:7px;margin-top:12px;padding:12px 0 11px;border-top:1px solid var(--border-color)} .settings-field,.advanced .settings-field{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important;gap:4px!important;width:100%!important;max-width:none!important;margin:0!important;font-size:10px!important;font-weight:700!important;color:var(--text-muted)!important}.settings-field select,.advanced .settings-field select{display:block!important;justify-self:stretch!important;width:100%!important;min-width:100%!important;height:36px!important;min-height:36px!important;margin:0!important;padding:8px 9px!important;border:1px solid var(--border-strong)!important;border-radius:8px!important;background:var(--input-bg)!important;color:var(--text-main)!important;font-size:.71rem!important;font-weight:600!important}.settings-field select:hover{border-color:color-mix(in srgb,var(--primary) 42%,var(--border-strong))!important}.settings-field select:focus{border-color:#8393bf!important;box-shadow:0 0 0 3px rgba(34,52,104,.09)!important}.field-label-line{gap:5px!important} .advanced .settings-field+.settings-field{margin-top:10px!important} .territory-table,.territory-table table,.territory-table tbody,.territory-table tr,.territory-table td{width:100%!important;max-width:100%!important;min-width:0!important}.territory-table td{padding:11px 12px!important;background:var(--card-bg);color:var(--text-main);border-color:var(--border-color)}.territory-characteristics p{margin:0 0 .72rem;line-height:1.65;text-align:justify;text-justify:inter-word;color:var(--text-main);font-size:10px;font-weight:500;overflow-wrap:anywhere}.territory-characteristics p:last-child{margin-bottom:0} .analysis-distribution-title{margin:14px 0 8px;font-size:10px;color:var(--text-muted);font-weight:800}.method-reason{display:block;margin:0;font-size:10px;line-height:1.4;color:var(--text-muted);white-space:normal;text-align:justify;text-justify:inter-word}.recommendation-row>*{background:color-mix(in srgb,var(--primary) 5%,var(--card-bg))!important} /* Final rhythm pass for the analysis sidebar and responsive technical tables. */ .analysis-preferences{margin-top:0!important;padding:10px 0 14px!important;gap:0!important} .advanced.panel-section{margin-top:0!important;padding-top:0!important;border-top:0!important} .advanced summary{min-height:0!important;padding:7px 8px!important;font-size:10px!important;line-height:1.2!important} .advanced[open]>summary{margin-bottom:12px!important} .settings-field,.advanced .settings-field{gap:5px!important;font-size:10px!important;line-height:14px!important} .field-label-line{display:inline-flex!important;align-items:center!important;min-height:14px!important;line-height:14px!important;gap:5px!important} .settings-field select,.advanced .settings-field select{height:40px!important;min-height:40px!important;padding:9px 11px!important;border-radius:8px!important} .advanced .settings-field+.settings-field{margin-top:12px!important} .advanced:not([open])>.settings-field{display:none!important} #status{margin-top:12px!important} .technical-table-wrap{max-width:100%!important;overflow-x:auto!important} .technical-table-wrap table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important} .technical-table-wrap th,.technical-table-wrap td{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important} .technical-table-wrap .narrative-cell{text-align:justify!important;text-justify:inter-word} .technical-table-wrap tbody th{width:28%!important} .technical-table-wrap tbody td:nth-child(2){width:18%!important;white-space:normal!important} .result-heading-actions{gap:8px!important} .result-heading-actions .result-stack-button{width:62px!important;padding-inline:8px!important} .point-limit-note{line-height:1.28!important} @media(max-width:780px){ .hydrologic-analysis-modal{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:15px!important} .analysis-executive{grid-template-columns:1fr;gap:11px;padding:15px}.analysis-indicator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cn-summary-grid{grid-template-columns:1fr} .analysis-section-title{align-items:start;flex-direction:column;gap:2px}.technical-analysis-body{padding-inline:10px}.technical-analysis>summary{padding-inline:12px} .sidebar-scroll{padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}.panel-section{margin-bottom:10px!important}.point-body{padding-bottom:10px!important}.point-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.point-action-row .small-icon-btn{min-height:38px!important;font-size:10px!important}.morphometry-analysis-button{min-height:40px;font-size:.64rem} } @media(max-width:430px){.analysis-indicator-grid{grid-template-columns:1fr}.slope-class-row{grid-template-columns:128px minmax(70px,1fr) 48px;gap:6px}} /* Restore the subtle blue surface on Advanced settings. */ .advanced > summary{ background:var(--pu-blue-soft)!important; border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border-color))!important; border-radius:8px!important; } [data-theme="dark"] .advanced > summary{ background:color-mix(in srgb,var(--primary) 12%,var(--card-bg))!important; border-color:color-mix(in srgb,var(--primary) 22%,var(--border-color))!important; } /* Executive refinement — Karakteristik DTA. Keep the existing structure and 12 indicators. */ .hydrologic-analysis-modal{ width:min(950px,calc(100vw - 28px))!important; max-width:950px!important; max-height:min(90vh,900px)!important; padding:20px!important; } .hydrologic-analysis-modal .modal-head{margin-bottom:14px!important} .hydrologic-analysis-content{gap:14px} .analysis-executive{ grid-template-columns:minmax(190px,.34fr) minmax(0,1fr); gap:18px; padding:16px 18px; border-color:color-mix(in srgb,var(--border-color) 86%,var(--text-muted)); border-radius:12px; box-shadow:0 1px 0 color-mix(in srgb,var(--text-main) 3%,transparent); } .analysis-executive>div{gap:5px} .analysis-executive>div:first-child{ padding:10px 12px; border-radius:9px; background:color-mix(in srgb,var(--analysis-status-tint,#F7F3E7) 62%,var(--card-bg)); box-shadow:none; border:1px solid color-mix(in srgb,var(--analysis-status-primary,#A58A45) 18%,var(--border-color)); } .analysis-kicker{font-size:10px;letter-spacing:.085em} .analysis-executive>div>strong{font-size:1.16rem;line-height:1.08} .analysis-executive p{font-size:.68rem;line-height:1.62} .analysis-section-title{margin-bottom:7px;align-items:center} .analysis-section-title>span{font-size:.73rem} .analysis-indicator-grid{gap:7px} .analysis-metric{ min-height:64px; gap:5px; padding:9px 10px 8px; border-color:color-mix(in srgb,var(--border-color) 88%,var(--text-muted)); border-radius:9px; box-shadow:0 1px 0 color-mix(in srgb,var(--text-main) 2.5%,transparent); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background-color .14s ease; } .analysis-metric:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 18%,var(--border-color));box-shadow:0 5px 14px color-mix(in srgb,var(--text-main) 5%,transparent)} .analysis-metric-label{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;min-width:0} .analysis-metric-label>span{min-width:0;color:var(--text-muted);font-size:10px;line-height:1.25;font-weight:650} .analysis-metric-info{width:13px!important;height:13px!important;flex:0 0 13px!important;font-size:10px!important;color:color-mix(in srgb,var(--text-muted) 72%,var(--text-main))!important;opacity:.72;transition:opacity .14s ease,background-color .14s ease,color .14s ease!important} .analysis-metric:hover .analysis-metric-info,.analysis-metric-info:focus-visible{opacity:1} .analysis-metric>strong{font-size:.88rem;line-height:1.05;font-weight:800;letter-spacing:-.01em} .analysis-metric>small{font-size:10px;line-height:1.34} .analysis-na{font-size:10px} .technical-analysis{border-radius:10px;border-color:color-mix(in srgb,var(--border-color) 88%,var(--text-muted))} .technical-analysis>summary{ padding:12px 14px; font-size:.66rem; transition:background-color .14s ease,color .14s ease,border-color .14s ease!important; } .technical-analysis>summary:hover{background:color-mix(in srgb,var(--primary) 4%,var(--card-bg))} .technical-analysis>summary>svg{transition:transform .18s ease} .technical-analysis-body{gap:15px;padding:0 14px 14px} .technical-group{padding-top:14px} .technical-table-wrap{border-color:color-mix(in srgb,var(--border-color) 90%,var(--text-muted));border-radius:8px} @media(max-width:780px){ .hydrologic-analysis-modal{padding:14px!important} .analysis-executive{grid-template-columns:1fr;gap:9px;padding:13px} .analysis-executive>div:first-child{padding:9px 10px} .analysis-section-title{align-items:flex-start} .analysis-metric{min-height:62px;padding:8px 9px} } @media(max-width:430px){ } /* ============================================================ Hidrograf Satuan Sintetis (HSS) ============================================================ */ .sidebar-actions{display:grid;gap:7px} .hss-main-button{border-color:var(--primary)!important;color:#fff!important;background:var(--primary)!important} .hss-main-button svg{color:#fff!important} .hss-main-button:hover:not(:disabled){border-color:var(--primary)!important;color:#fff!important;background:color-mix(in srgb,var(--primary) 88%,#000)!important} .hss-main-button:disabled{color:color-mix(in srgb,#fff 72%,transparent)!important;background:color-mix(in srgb,var(--primary) 58%,var(--card-bg))!important;border-color:transparent!important} .download-option-hint{display:block;margin:6px 0 0 22px;font-size:10px;line-height:1.4;color:var(--text-muted)} .hss-analysis-modal{width:min(1080px,calc(100vw - 28px))!important;max-width:1080px!important;max-height:min(92vh,930px)!important;overflow:auto!important;padding:20px!important} .hss-analysis-modal .modal-head{margin-bottom:13px!important} .hss-toolbar{display:grid;grid-template-columns:minmax(210px,.34fr) minmax(0,1fr);gap:12px;align-items:end;padding:13px;border:1px solid var(--border-color);border-radius:11px;background:color-mix(in srgb,var(--primary) 3%,var(--card-bg))} .hss-dta-select{display:grid;gap:5px;font-size:10px;font-weight:800;color:var(--text-muted)} .hss-dta-select select{width:100%;height:38px;padding:7px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--input-bg);color:var(--text-main);font:inherit;font-size:.68rem;font-weight:700} .hss-dta-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} .hss-dta-summary>span{display:grid;gap:2px;min-width:0;padding:8px 9px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg)} .hss-dta-summary small{font-size:10px;line-height:1.2;color:var(--text-muted)} .hss-dta-summary b{font-size:.64rem;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap} .hss-method-controls{margin-top:14px} .hss-method-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:8px} .hss-method-heading>div{display:grid;gap:2px}.hss-method-heading strong{font-size:.7rem;color:var(--text-strong)}.hss-method-heading small{font-size:10px;color:var(--text-muted)} .hss-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .hss-method-card{position:relative;padding:10px 11px 11px;border:1px solid var(--border-color);border-left:3px solid var(--hss-color);border-radius:10px;background:var(--card-bg)} .hss-method-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .hss-method-toggle{display:flex;align-items:flex-start;gap:7px;min-width:0;cursor:pointer}.hss-method-toggle input{margin-top:2px}.hss-method-toggle span{display:grid;gap:2px}.hss-method-toggle b{font-size:10px;color:var(--text-strong)}.hss-method-toggle small{font-size:10px;line-height:1.3;color:var(--text-muted)} .hss-reset-method{flex:0 0 auto;border:0;background:transparent;color:var(--primary);font:inherit;font-size:10px;font-weight:800;cursor:pointer;padding:2px}.hss-reset-method:disabled{opacity:.35;cursor:default} .hss-param-grid{display:grid;grid-template-columns:repeat(5,minmax(58px,1fr));gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border-color)} .hss-param-grid label{display:grid;gap:3px;font-size:10px;color:var(--text-muted);font-weight:700}.hss-param-grid input{width:100%;min-width:0;height:31px;padding:5px 6px;border:1px solid var(--border-color);border-radius:7px;background:var(--input-bg);color:var(--text-main);font:inherit;font-size:10px;font-variant-numeric:tabular-nums} .hss-param-grid input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent)} .hss-auto-parameter{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--border-color);font-size:10px;line-height:1.45;color:var(--text-muted)} .hss-run-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:13px;padding:12px 13px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg)} .hss-run-row>div{display:grid;gap:3px}.hss-run-row strong{font-size:10px;color:var(--text-strong)}.hss-run-row small{font-size:10px;line-height:1.35;color:var(--text-muted)} .hss-run-row .btn{min-width:130px}.hss-run-row .btn.is-busy{opacity:.68;cursor:wait} .hss-status{min-height:18px;padding:7px 1px 0;font-size:10px;color:var(--text-muted)} .hss-results{display:grid;gap:10px;margin-top:4px} .hss-empty-result{display:flex;align-items:center;gap:10px;padding:15px;border:1px dashed var(--border-strong);border-radius:10px;background:color-mix(in srgb,var(--text-muted) 3%,var(--card-bg));color:var(--text-muted)}.hss-empty-result svg{width:19px}.hss-empty-result>div{display:grid;gap:2px}.hss-empty-result strong{font-size:10px;color:var(--text-strong)}.hss-empty-result span{font-size:10px} .hss-result-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.hss-result-head>div{display:grid;gap:2px}.hss-result-head strong{font-size:.7rem;color:var(--text-strong)}.hss-result-head small{font-size:10px;color:var(--text-muted)} .hss-normalized-toggle{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--text-muted);cursor:pointer;white-space:nowrap} .hss-summary-wrap{overflow:auto;border:1px solid var(--border-color);border-radius:9px}.hss-summary-table{width:100%;border-collapse:collapse;min-width:720px;font-size:10px}.hss-summary-table th,.hss-summary-table td{padding:8px 9px;border-bottom:1px solid var(--border-color);text-align:left;white-space:nowrap}.hss-summary-table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.035em;color:var(--text-muted);background:color-mix(in srgb,var(--primary) 5%,var(--card-bg))}.hss-summary-table tbody th{color:var(--text-strong)}.hss-summary-table tr:last-child>*{border-bottom:0}.hss-unavailable td{white-space:normal;color:var(--text-muted);line-height:1.4} .hss-volume-badge{display:inline-block;min-width:58px;padding:3px 6px;border-radius:99px;text-align:center;font-size:10px;font-weight:800}.hss-volume-badge.ok{background:color-mix(in srgb,#16836B 10%,var(--card-bg));color:#16745f}.hss-volume-badge.warn{background:color-mix(in srgb,#D97706 12%,var(--card-bg));color:#a65a00}.hss-volume-badge.alert{background:color-mix(in srgb,#B64E58 11%,var(--card-bg));color:#9f3944} .hss-chart-section{border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);overflow:hidden}.hss-chart-tabs{display:flex;gap:4px;overflow-x:auto;padding:8px;border-bottom:1px solid var(--border-color);background:color-mix(in srgb,var(--primary) 3%,var(--card-bg))}.hss-chart-tab{flex:0 0 auto;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted);padding:6px 8px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.hss-chart-tab:hover{background:var(--surface-soft);color:var(--primary)}.hss-chart-tab.active{background:var(--card-bg);border-color:color-mix(in srgb,var(--primary) 25%,var(--border-color));color:var(--primary);box-shadow:0 1px 3px color-mix(in srgb,var(--text-main) 6%,transparent)} .hss-chart-canvas{padding:10px 12px 4px;min-height:320px}.hss-chart-svg{display:block;width:100%;height:auto;max-height:390px}.hss-chart-bg{fill:color-mix(in srgb,var(--text-muted) 1.5%,var(--card-bg))}.hss-grid-line{stroke:color-mix(in srgb,var(--border-color) 86%,var(--text-muted));stroke-width:1}.hss-axis-line{stroke:color-mix(in srgb,var(--text-main) 35%,var(--border-color));stroke-width:1.2}.hss-axis-text,.hss-axis-title{fill:var(--text-muted);font-family:inherit;font-size:11px}.hss-axis-title{font-size:12px;font-weight:700}.hss-chart-legend{display:flex;flex-wrap:wrap;gap:6px 12px;padding:2px 10px 8px;font-size:10px;color:var(--text-muted)}.hss-chart-legend span{display:inline-flex;align-items:center;gap:5px}.hss-chart-legend i{width:14px;height:3px;border-radius:99px} .hss-chart-details{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:9px 12px;border-top:1px solid var(--border-color);font-size:10px;color:var(--text-muted)}.hss-chart-details>div{display:flex;gap:4px;align-items:center}.hss-chart-details b{color:var(--text-strong)}.hss-chart-details p{flex-basis:100%;margin:0;font-size:10px;line-height:1.4}.hss-empty-chart{display:grid;place-items:center;min-height:280px;color:var(--text-muted);font-size:10px} [data-theme="dark"] .hss-volume-badge.ok{color:#6fd4ba}[data-theme="dark"] .hss-volume-badge.warn{color:#f0b35d}[data-theme="dark"] .hss-volume-badge.alert{color:#ee8f98} @media(max-width:800px){ .hss-analysis-modal{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:14px!important} .hss-toolbar{grid-template-columns:1fr}.hss-dta-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .hss-method-grid{grid-template-columns:1fr}.hss-param-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .hss-run-row{align-items:stretch;flex-direction:column}.hss-run-row .btn{width:100%} .hss-result-head{align-items:flex-start;flex-direction:column}.hss-chart-canvas{padding-inline:4px} } @media(max-width:430px){.hss-dta-summary{grid-template-columns:1fr 1fr}.hss-param-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hss-analysis-modal{padding:11px!important}.hss-toolbar{padding:10px}.hss-method-card{padding:9px}.hss-chart-canvas{min-height:250px}} .hss-dirty-banner{display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border:1px solid color-mix(in srgb,#D97706 38%,var(--border-color));border-radius:9px;background:color-mix(in srgb,#D97706 7%,var(--card-bg));color:color-mix(in srgb,#D97706 70%,var(--text-main));font-size:10px;line-height:1.42;font-weight:650} .hss-dirty-banner svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px} .hss-dirty-banner.hidden{display:none!important} [data-theme="dark"] .hss-dirty-banner{background:color-mix(in srgb,#D97706 12%,var(--card-bg));color:#f0b35d} /* HSS v1.1 — editable morphometry, shared Tr, Chart.js */ .hss-calc-button{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important} .hss-calc-button svg{color:#fff!important;stroke:#fff!important} .hss-calc-button:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 88%,#000)!important;border-color:color-mix(in srgb,var(--primary) 88%,#000)!important;color:#fff!important} .hss-global-input-row{display:flex;align-items:end;gap:14px;margin-top:10px;padding:11px 13px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg)} .hss-global-input-row>label{display:grid;gap:4px;min-width:230px;font-size:10px;font-weight:800;color:var(--text-muted)} .hss-global-input-row>label>div{display:flex;align-items:center;gap:6px}.hss-global-input-row input{width:112px;height:34px;padding:5px 8px;border:1px solid var(--border-strong);border-radius:7px;background:var(--input-bg);color:var(--text-main);font:inherit;font-size:10px;font-weight:700}.hss-global-input-row b{font-size:10px;color:var(--text-muted)} .hss-global-input-row>small{font-size:10px;line-height:1.4;color:var(--text-muted);padding-bottom:7px} .hss-morphometry-controls{margin-top:13px;padding:11px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--primary) 1.5%,var(--card-bg))} .hss-morph-heading{margin-bottom:9px}.hss-reset-with-icon,.hss-reset-method{display:inline-flex;align-items:center;gap:4px}.hss-reset-with-icon svg,.hss-reset-method svg{width:12px;height:12px} .hss-morph-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.hss-morph-grid label{display:grid;gap:3px;min-width:0;font-size:10px;font-weight:700;color:var(--text-muted)}.hss-morph-grid label>div{display:flex;align-items:center;gap:4px}.hss-morph-grid input{min-width:0;width:100%;height:31px;padding:5px 6px;border:1px solid var(--border-color);border-radius:7px;background:var(--input-bg);color:var(--text-main);font:inherit;font-size:10px;font-variant-numeric:tabular-nums}.hss-morph-grid b{flex:0 0 auto;font-size:10px;color:var(--text-muted);font-weight:600} .hss-morph-grid input:focus,.hss-global-input-row input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent)} .hss-derived-grid{display:grid;grid-template-columns:1.7fr repeat(6,minmax(0,1fr));gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border-color);align-items:stretch}.hss-derived-title{display:grid;align-content:center;gap:2px}.hss-derived-title b{font-size:10px;color:var(--text-strong)}.hss-derived-title small{font-size:10px;line-height:1.3;color:var(--text-muted)}.hss-derived-grid>span{display:grid;gap:2px;padding:6px 7px;border:1px solid var(--border-color);border-radius:7px;background:var(--card-bg)}.hss-derived-grid>span small{font-size:10px;line-height:1.2;color:var(--text-muted)}.hss-derived-grid>span b{font-size:10px;color:var(--text-strong);font-variant-numeric:tabular-nums} .hss-reset-method{font-weight:800}.hss-reset-method:not(:disabled):hover{background:color-mix(in srgb,var(--primary) 7%,transparent);border-radius:5px} .hss-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border-color);font-size:10px;color:var(--text-muted)} .hss-chart-canvas{position:relative;height:390px;min-height:320px;padding:12px 14px}.hss-chart-canvas canvas{width:100%!important;height:100%!important} @media(max-width:800px){.hss-global-input-row{align-items:stretch;flex-direction:column}.hss-global-input-row>label{min-width:0}.hss-morph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hss-derived-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hss-derived-title{grid-column:1/-1}.hss-chart-toolbar{align-items:flex-start;flex-direction:column}.hss-chart-canvas{height:330px}} @media(max-width:430px){.hss-morph-grid{grid-template-columns:1fr 1fr}.hss-derived-grid{grid-template-columns:1fr 1fr}.hss-chart-canvas{height:285px;padding:8px}} /* HSS v1.2 — compact toolbar, per-field reset, shared analysis progress */ .analysis-loading{display:grid;gap:10px;width:100%;padding:16px 2px;color:var(--text-muted)} .analysis-loading-head{display:flex;align-items:center;gap:10px} .analysis-spinner{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--primary);animation:analysis-spin .9s linear infinite;transform-origin:center} .analysis-spinner>svg{width:20px;height:20px;display:block} .analysis-loading-head>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;flex:1} .analysis-loading-head strong{font-size:.72rem;color:var(--text-strong)} .analysis-progress-value{font-size:10px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums} .analysis-progress-track{height:7px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,var(--border-color))} .analysis-progress-track>i{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .14s ease} .hss-status .analysis-loading{padding:6px 0 4px} .hss-status .analysis-loading-head strong{font-size:10px} .hss-status .analysis-progress-track{height:5px} .hss-compact-toolbar{display:grid;grid-template-columns:minmax(320px,1fr) minmax(190px,240px);align-items:end;gap:12px;padding:11px 12px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--primary) 2.5%,var(--card-bg))} .hss-dta-select{display:grid;gap:4px;min-width:0;font-size:10px;font-weight:800;color:var(--text-muted)} .hss-dta-control-row{display:flex;align-items:center;gap:9px;min-width:0} .hss-dta-select select{height:35px;min-width:0;flex:1;font-size:10px} .hss-dta-status-badge{display:inline-flex;align-items:center;justify-content:center;height:35px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;flex:0 0 auto} .hss-dta-status-badge.ready{background:color-mix(in srgb,#16836B 11%,var(--card-bg));color:#16745f;border:1px solid color-mix(in srgb,#16836B 22%,var(--border-color))} .hss-dta-status-badge.warn{background:color-mix(in srgb,#D97706 10%,var(--card-bg));color:#a65a00;border:1px solid color-mix(in srgb,#D97706 24%,var(--border-color))} .hss-dta-status-badge.hidden{display:none!important} .hss-tr-compact{display:grid;gap:4px;font-size:10px;font-weight:800;color:var(--text-muted)} .hss-tr-compact>div{display:flex;align-items:center;gap:6px} .hss-tr-compact input{width:82px;height:35px;padding:5px 8px;border:1px solid var(--border-strong);border-radius:7px;background:var(--input-bg);color:var(--text-main);font:inherit;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums} .hss-tr-compact b{font-size:10px;font-weight:700;color:var(--text-muted)} .hss-tr-compact input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent)} .hss-morph-grid label>div.hss-field-row{display:flex;align-items:center;gap:5px} .hss-input-shell{position:relative;min-width:0;flex:1} .hss-morph-grid .hss-input-shell input{padding-right:29px} .hss-field-reset{position:absolute;right:3px;top:50%;translate:0 -50%;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--text-muted);cursor:pointer} .hss-field-reset:hover{background:color-mix(in srgb,var(--primary) 7%,transparent);color:var(--primary)} .hss-field-reset svg{width:12px;height:12px} .hss-morph-input[type=number]{appearance:textfield;-moz-appearance:textfield} .hss-morph-input[type=number]::-webkit-inner-spin-button,.hss-morph-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} @media(max-width:800px){ .hss-compact-toolbar{grid-template-columns:minmax(0,1fr);align-items:end} .hss-tr-compact>div{justify-content:flex-start} } @media(max-width:430px){ .hss-compact-toolbar{grid-template-columns:minmax(0,1fr);padding:9px} .hss-dta-control-row{align-items:stretch;flex-wrap:wrap} .hss-dta-select select{flex-basis:100%;width:100%} .hss-dta-status-badge{height:28px;padding-inline:8px;font-size:10px} } .hss-gama-derived{display:grid;gap:7px;margin-top:4px} .hss-gama-derived-note{font-size:10px;line-height:1.3;color:var(--text-muted)} .hss-gama-derived-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .hss-readonly-param{display:grid;gap:3px;min-width:0;padding:7px 8px;border:1px solid var(--border-color);border-radius:7px;background:var(--surface-soft)} .hss-readonly-param>span{font-size:10px;line-height:1.2;color:var(--text-muted)} .hss-readonly-param>strong{font-size:10px;color:var(--text-strong);font-variant-numeric:tabular-nums} .hss-readonly-param>strong b{font-size:10px;font-weight:650;color:var(--text-muted)} @media(max-width:800px){.hss-gama-derived-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:430px){.hss-gama-derived-grid{grid-template-columns:1fr 1fr}} [data-theme="dark"] .hss-dta-status-badge.ready{color:#6fd4ba} [data-theme="dark"] .hss-dta-status-badge.warn{color:#f0b35d} @keyframes analysis-spin{to{transform:rotate(360deg)}} /* v1.3.0 refinement — align DTA/status/Tr row and keep analysis spinner visibly rotating */ .hss-compact-toolbar{align-items:stretch} .hss-dta-select,.hss-tr-compact{grid-template-rows:auto 35px;align-content:end} .hss-dta-select>span,.hss-tr-compact>span{display:flex;align-items:flex-end;min-height:14px;line-height:1.15} .hss-dta-control-row,.hss-tr-compact>div{height:35px;min-height:35px} .hss-tr-compact{align-self:end} /* Animate the Lucide SVG itself. The explicit reduced-motion override is intentional: this is a process-state indicator rather than decorative motion. */ .analysis-spinner{animation:none!important} .analysis-spinner>svg{animation:analysis-spin .9s linear infinite!important;transform-origin:center!important;transform-box:fill-box} @media (prefers-reduced-motion:reduce){ .analysis-spinner>svg{animation-name:analysis-spin!important;animation-duration:.9s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important} } @media(max-width:430px){ .hss-dta-select{grid-template-rows:auto auto} .hss-dta-control-row{height:auto;min-height:35px} } /* ============================================================ v1.3.0 readability + map-panel placement patch - description/help text uses a readable 12–13 px baseline - loading spinner is a CSS ring with a visible rotating gap - Layer & Tampilan is anchored in the lower-right on desktop ============================================================ */ :root{ --ui-subtext-size:.75rem; /* 12 px at the 16 px root */ --ui-control-text-size:.8125rem; /* 13 px */ } /* Readability baseline for descriptions, hints, captions and secondary copy. */ .spatial-page .help, .spatial-page .input-note, .spatial-page .coordinate-example, .spatial-page .coordinate-example code, .spatial-page .processing-hint, .spatial-page .download-option-hint, .spatial-page .modal-subtitle, .spatial-page .choice-card small, .spatial-page .definition-modal p, .spatial-page .definition-modal li, .spatial-page .definition-modal cite, .spatial-page .source-modal p, .spatial-page .confirm-modal p, .spatial-page .warning-modal p, .spatial-page .usage-notice-modal p, .spatial-page .app-definition-note, .spatial-page .analysis-stage-note, .spatial-page .analysis-data-note, .spatial-page .analysis-limitations ul, .spatial-page .analysis-section-title small, .spatial-page .analysis-metric span, .spatial-page .analysis-metric small, .spatial-page .hss-gama-derived-note, .spatial-page .hss-readonly-param>span, .spatial-page .hss-derived-title small, .spatial-page .hss-derived-grid>span small, .spatial-page .hss-chart-toolbar, .spatial-page .hss-global-input-row>small, .spatial-page .point-limit-note{ font-size:var(--ui-subtext-size)!important; line-height:1.5!important; } /* Form/supporting labels are one step above descriptions. */ .spatial-page .panel-section>label, .spatial-page .settings-field, .spatial-page .status, .spatial-page .empty-state, .spatial-page .hss-dta-select, .spatial-page .hss-tr-compact, .spatial-page .hss-morph-grid label, .spatial-page .hss-global-input-row>label, .spatial-page .hss-derived-title b, .spatial-page .hss-readonly-param>strong, .spatial-page .download-section, .spatial-page .check-row, .spatial-page .check-card, .spatial-page .choice-card, .spatial-page .technical-table-wrap table, .spatial-page .slope-class-row{ font-size:var(--ui-control-text-size)!important; } .spatial-page .btn, .spatial-page .advanced summary, .spatial-page .definition-modal h3, .spatial-page .download-section>strong{ font-size:var(--ui-control-text-size)!important; } /* Keep compact units readable without competing with values. */ .spatial-page .hss-tr-compact b, .spatial-page .hss-morph-grid b, .spatial-page .hss-readonly-param>strong b, .spatial-page .hss-derived-grid>span b, .spatial-page .analysis-progress-value{ font-size:var(--ui-subtext-size)!important; } /* Guaranteed process spinner: the asymmetric ring visibly rotates in all themes. */ .analysis-spinner{ width:20px!important; height:20px!important; flex:0 0 20px!important; display:block!important; border:2px solid color-mix(in srgb,var(--primary) 24%,transparent)!important; border-top-color:var(--primary)!important; border-right-color:var(--primary)!important; border-radius:50%!important; animation:analysis-spin .72s linear infinite!important; transform-origin:50% 50%!important; will-change:transform; } .analysis-spinner>svg,.analysis-spinner>i{display:none!important} @media (prefers-reduced-motion:reduce){ .analysis-spinner{animation:analysis-spin .72s linear infinite!important} } /* Desktop: keep Layer & Tampilan near the lower map controls instead of the top. */ @media (min-width:781px){ .layer-panel{ top:auto!important; bottom:58px!important; right:54px!important; width:min(320px,calc(100% - 78px))!important; max-height:min(68vh,560px)!important; overflow-y:auto!important; overscroll-behavior:contain; } #appHeader:not(.is-hidden) ~ #spatialWorkspace .layer-panel{ top:auto!important; } } /* v1.3.0 final readability/alignment/spinner refinement */ :root{ --ui-min-meta:11px; --ui-subtext:12px; --ui-control:13px; } /* Raise the remaining undersized interface copy while retaining hierarchy. */ .spatial-page .agency-copy span, .spatial-page .eyebrow, .spatial-page .step-badge, .spatial-page .small-title, .spatial-page .point-chip, .spatial-page .meta-box span, .spatial-page .point-color-row, .spatial-page .definition-link, .spatial-page .search-result span, .spatial-page .range-row span, .spatial-page .point-basin, .spatial-page .point-coords, .spatial-page .modal-meta, .spatial-page .choice-card small, .spatial-page .definition-modal cite, .spatial-page .hss-reset-method, .spatial-page .hss-volume-badge, .spatial-page .hss-chart-tab, .spatial-page .hss-chart-legend, .spatial-page .hss-chart-details, .spatial-page .hss-chart-details p, .spatial-page .hss-readonly-param>span, .spatial-page .hss-readonly-param>strong b{ font-size:var(--ui-min-meta)!important; } .spatial-page .agency-copy strong, .spatial-page .nav-link, .spatial-page .sidebar-title p, .spatial-page .help, .spatial-page label, .spatial-page .input-note, .spatial-page .status, .spatial-page .text-button, .spatial-page .empty-state, .spatial-page .point-summary-main strong, .spatial-page .point-summary-main span, .spatial-page .relationship-content, .spatial-page .search-result strong, .spatial-page .search-loading, .spatial-page .search-empty, .spatial-page .measure-panel, .spatial-page .point-popup label, .spatial-page .point-popup input, .spatial-page .point-actions-popup button, .spatial-page .warning-modal p, .spatial-page .confirm-modal p, .spatial-page .source-modal p, .spatial-page .download-section>strong, .spatial-page .choice-card b, .spatial-page .check-card, .spatial-page .download-status, .spatial-page .definition-modal p, .spatial-page .definition-modal li, .spatial-page .app-definition-note, .spatial-page .analysis-kicker, .spatial-page .analysis-section-title small, .spatial-page .analysis-metric-label>span, .spatial-page .analysis-metric>small, .spatial-page .analysis-stage-note, .spatial-page .analysis-data-note, .spatial-page .analysis-limitations ul, .spatial-page .technical-table-wrap table, .spatial-page .hss-method-heading small, .spatial-page .hss-method-toggle small, .spatial-page .hss-param-grid label, .spatial-page .hss-auto-parameter, .spatial-page .hss-run-row small, .spatial-page .hss-status, .spatial-page .hss-empty-result span, .spatial-page .hss-result-head small, .spatial-page .hss-normalized-toggle, .spatial-page .hss-summary-table, .spatial-page .hss-summary-table thead th, .spatial-page .hss-empty-chart, .spatial-page .hss-gama-derived-note{ font-size:var(--ui-subtext)!important; line-height:1.45!important; } .spatial-page .panel-section h2, .spatial-page .btn, .spatial-page .advanced summary, .spatial-page input[type=text], .spatial-page input[type=search], .spatial-page input[type=number], .spatial-page textarea, .spatial-page select, .spatial-page .panel-title-row, .spatial-page .hss-dta-select, .spatial-page .hss-dta-select select, .spatial-page .hss-dta-status-badge, .spatial-page .hss-tr-compact, .spatial-page .hss-tr-compact input, .spatial-page .hss-tr-compact b, .spatial-page .hss-method-heading strong, .spatial-page .hss-method-toggle b, .spatial-page .hss-param-grid input, .spatial-page .hss-run-row strong, .spatial-page .hss-empty-result strong, .spatial-page .hss-result-head strong, .spatial-page .hss-readonly-param>strong{ font-size:var(--ui-control)!important; } /* DTA/status/Tr: identical label row and control row heights. */ .spatial-page .hss-compact-toolbar{ grid-template-columns:minmax(0,1fr) auto!important; align-items:start!important; column-gap:14px!important; } .spatial-page .hss-dta-select, .spatial-page label.hss-tr-compact{ display:grid!important; grid-template-rows:18px 40px!important; row-gap:6px!important; align-self:start!important; align-content:start!important; margin:0!important; padding:0!important; min-width:0!important; } .spatial-page .hss-dta-select>span, .spatial-page .hss-tr-compact>span{ display:flex!important; align-items:center!important; height:18px!important; min-height:18px!important; margin:0!important; padding:0!important; line-height:18px!important; } .spatial-page .hss-dta-control-row, .spatial-page .hss-tr-compact>div{ display:flex!important; align-items:center!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0!important; } .spatial-page .hss-dta-select select, .spatial-page .hss-dta-status-badge, .spatial-page .hss-tr-compact input{ height:40px!important; min-height:40px!important; margin:0!important; box-sizing:border-box!important; } .spatial-page .hss-dta-status-badge{padding-inline:11px!important} .spatial-page .hss-tr-compact>div{gap:7px!important} .spatial-page .hss-tr-compact input{width:84px!important} .spatial-page .hss-tr-compact b{line-height:40px!important;white-space:nowrap!important} /* JS requestAnimationFrame drives transform; CSS only defines a visibly asymmetric ring. */ .spatial-page .analysis-spinner{ width:20px!important; height:20px!important; flex:0 0 20px!important; display:block!important; box-sizing:border-box!important; border:2.5px solid color-mix(in srgb,var(--primary) 22%,transparent)!important; border-top-color:var(--primary)!important; border-right-color:var(--primary)!important; border-bottom-color:transparent!important; border-radius:50%!important; animation:none!important; transform-origin:50% 50%!important; will-change:transform!important; } .spatial-page .analysis-spinner>svg, .spatial-page .analysis-spinner>i{display:none!important} @media(max-width:800px){ .spatial-page .hss-compact-toolbar{grid-template-columns:1fr!important} .spatial-page .hss-dta-select, .spatial-page label.hss-tr-compact{grid-template-rows:18px 40px!important} } @media(max-width:430px){ .spatial-page .hss-dta-control-row{height:auto!important;min-height:40px!important;flex-wrap:wrap!important} .spatial-page .hss-dta-select{grid-template-rows:18px auto!important} .spatial-page .hss-dta-select select{flex-basis:100%!important} .spatial-page .hss-dta-status-badge{height:32px!important;min-height:32px!important} } /* ============================================================ v1.3.0 — readability + compact collapsible HSS controls ============================================================ */ /* Readability: no critical analysis/card copy below the 11–13 px hierarchy. */ .spatial-page .technical-group h3, .spatial-page .analysis-limitations h3{ font-size:13px!important; line-height:1.35!important; } .spatial-page .technical-table-wrap table{ font-size:13px!important; line-height:1.45!important; } .spatial-page .technical-table-wrap thead th{ font-size:12px!important; line-height:1.35!important; } .spatial-page .technical-table-wrap th, .spatial-page .technical-table-wrap td{ padding:9px 10px!important; } .spatial-page .method-reason, .spatial-page .territory-characteristics p{ font-size:12px!important; line-height:1.6!important; } .spatial-page .recommendation-row strong{ font-size:13px!important; } /* Result DTA card typography. */ .spatial-page .point-name-chip, .spatial-page .existing-point-name-chip{ font-size:11px!important; } .spatial-page .point-summary-river, .spatial-page .point-summary-area{ font-size:12px!important; } .spatial-page .point-summary-basin{ font-size:11px!important; } .spatial-page .point-edit-label, .spatial-page .point-edit-label-row, .spatial-page .point-action-label{ font-size:11px!important; } .spatial-page .point-name-grid input, .spatial-page .popup-point-name-editor input{ font-size:12px!important; } .spatial-page .point-action-row .dta-action-button, .spatial-page .morphometry-analysis-button, .spatial-page .point-actions-popup button{ font-size:11px!important; } .spatial-page .point-action-row .dta-action-button span, .spatial-page .morphometry-analysis-button span{ font-size:inherit!important; } /* Parameter morfometri: one compact disclosure, closed by default. */ .spatial-page .hss-morphometry-controls{ margin-top:13px!important; padding:0!important; border:0!important; background:transparent!important; } .spatial-page .hss-morph-details{ border:1px solid var(--border-color); border-radius:10px; background:color-mix(in srgb,var(--primary) 1.5%,var(--card-bg)); overflow:hidden; } .spatial-page .hss-morph-details>summary, .spatial-page .hss-method-card>summary{ list-style:none; cursor:pointer; user-select:none; } .spatial-page .hss-morph-details>summary::-webkit-details-marker, .spatial-page .hss-method-card>summary::-webkit-details-marker{ display:none; } .spatial-page .hss-morph-details>summary{ min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; color:var(--text-strong); font-size:13px; font-weight:800; } .spatial-page .hss-morph-details>summary>span{ display:inline-flex; align-items:center; gap:7px; } .spatial-page .hss-morph-details>summary svg{ width:15px; height:15px; } .spatial-page .hss-morph-details-body{ padding:0 12px 12px; border-top:1px solid var(--border-color); } .spatial-page .hss-morph-heading{ align-items:center!important; margin:0 0 10px!important; padding-top:10px; } .spatial-page .hss-morph-heading small{ font-size:12px!important; } .spatial-page .hss-details-chevron{ width:16px!important; height:16px!important; flex:0 0 auto; transition:transform .16s ease; color:var(--text-muted); } .spatial-page details[open]>.hss-method-card-head .hss-details-chevron, .spatial-page .hss-morph-details[open]>summary .hss-details-chevron{ transform:rotate(180deg); } /* Method cards behave like the DTA cards: title only until expanded. */ .spatial-page .hss-method-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; align-items:start; } .spatial-page .hss-method-card{ padding:0!important; border-left:3px solid var(--hss-color)!important; overflow:hidden; } .spatial-page .hss-method-card-head{ min-height:46px; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:9px; padding:10px 11px!important; } .spatial-page .hss-method-card-head:hover{ background:color-mix(in srgb,var(--primary) 3%,var(--card-bg)); } .spatial-page .hss-method-toggle{ display:flex!important; align-items:center!important; gap:8px!important; min-width:0; } .spatial-page .hss-method-toggle input{ margin:0!important; flex:0 0 auto; } .spatial-page .hss-method-toggle b{ font-size:13px!important; line-height:1.3; } .spatial-page .hss-method-card-body{ padding:0 11px 11px; border-top:1px solid var(--border-color); } .spatial-page .hss-method-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:9px; } .spatial-page .hss-method-meta small{ color:var(--text-muted); font-size:12px!important; line-height:1.4; } .spatial-page .hss-reset-method{ font-size:11px!important; white-space:nowrap; } .spatial-page .hss-param-grid label, .spatial-page .hss-auto-parameter, .spatial-page .hss-gama-derived-note, .spatial-page .hss-readonly-param>span{ font-size:12px!important; } .spatial-page .hss-param-grid input, .spatial-page .hss-morph-grid input, .spatial-page .hss-readonly-param>strong{ font-size:13px!important; } .spatial-page .hss-morph-grid label{ font-size:12px!important; } .spatial-page .hss-morph-grid b, .spatial-page .hss-readonly-param>strong b{ font-size:11px!important; } .spatial-page .hss-method-heading strong{ font-size:13px!important; } .spatial-page .hss-method-heading small, .spatial-page .hss-run-row small, .spatial-page .hss-result-head small, .spatial-page .hss-chart-toolbar, .spatial-page .hss-chart-details, .spatial-page .hss-summary-table, .spatial-page .hss-summary-table thead th{ font-size:12px!important; } .spatial-page .hss-chart-tab, .spatial-page .hss-volume-badge{ font-size:11px!important; } @media(max-width:800px){ .spatial-page .hss-method-grid{grid-template-columns:1fr!important} } /* v1.3.0 table hierarchy correction: parameter/method and value must dominate explanatory copy. */ .spatial-page .technical-table-wrap tbody th{ font-size:13px!important; line-height:1.4!important; font-weight:700!important; } .spatial-page .technical-table-wrap tbody td{ font-size:12px!important; line-height:1.5!important; } .spatial-page .technical-table-wrap tbody td:nth-child(2){ font-size:13px!important; line-height:1.4!important; font-weight:700!important; } .spatial-page .technical-table-wrap .method-reason{ font-size:12px!important; line-height:1.5!important; } /* Method name text acts like the checkbox; blank card space remains the disclosure trigger. */ .spatial-page .hss-method-toggle b{ cursor:pointer!important; user-select:none; } /* ============================================================ v1.7.4 responsiveness + readability - no visual startup shell: render the actual WebGIS immediately - larger result-name / bulk-action / outlet-hover typography - BBWS line follows the ministry line size on desktop ============================================================ */ /* Result card identity: make the selected point name as readable as the surrounding result metadata without enlarging secondary descriptions. */ .spatial-page .point-name-chip, .spatial-page .existing-point-name-chip{ font-size:12px!important; line-height:1.15!important; } /* Bulk actions were still visually smaller than the rest of the sidebar. */ .spatial-page .result-heading-actions .result-stack-button{ width:64px!important; min-width:64px!important; height:42px!important; min-height:42px!important; padding:4px 7px!important; gap:4px!important; } .spatial-page .result-heading-actions .result-stack-button span{ font-size:11px!important; line-height:1.05!important; font-weight:800!important; } .spatial-page .result-heading-actions .result-stack-button svg{ width:14px!important; height:14px!important; } /* Outlet hover popup: keep it compact, but no longer use sub-9px copy. */ .spatial-page .dta-hover-chip{ max-width:150px!important; font-size:11px!important; line-height:1.15!important; padding:4px 7px!important; } .spatial-page .map-hover-card>strong, .spatial-page .point-hover-card>strong{ font-size:11px!important; line-height:1.2!important; } .spatial-page .map-hover-card>span:last-child{ font-size:10px!important; line-height:1.25!important; } /* Desktop header only: "BALAI BESAR ..." uses the same type size as "KEMENTERIAN PEKERJAAN UMUM". Directorate and all other header styling stay. */ @media(min-width:781px){ .spatial-page .spatial-header .agency-copy strong{ font-size:11px!important; } } /* ============================================================ 1.3.0 consolidated refinement — Gama-I spatial + sidebar polish ============================================================ */ /* Only one divider between methodology links and point selection. */ .spatial-page .sidebar-info-links + .point-selection-section{ border-top:0!important; margin-top:0!important; padding-top:12px!important; } /* Keep the divider below "Tampilkan Titik" visible and centered between groups. */ .spatial-page .point-selection-section{ margin-bottom:0!important; padding-bottom:0!important; } .spatial-page .analysis-preferences.settings-group-divider{ margin-top:12px!important; padding-top:12px!important; padding-bottom:12px!important; border-top:1px solid var(--border-color)!important; } /* Advanced settings: shorter, square, flat header with the existing subtle blue tint. */ .spatial-page .advanced > summary{ min-height:34px!important; height:34px!important; padding:4px 8px!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; background:var(--pu-blue-soft)!important; } [data-theme="dark"] .spatial-page .advanced > summary{ border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; background:color-mix(in srgb,var(--primary) 12%,var(--card-bg))!important; } /* Result-card and popup actions: final override after older compact rules. */ .spatial-page .point-name-chip, .spatial-page .existing-point-name-chip{ font-size:12px!important; line-height:1.15!important; } .spatial-page .point-edit-label, .spatial-page .point-edit-label-row{ font-size:12px!important; line-height:1.25!important; } .spatial-page .point-name-grid input, .spatial-page .popup-point-name-editor input{ font-size:13px!important; line-height:1.25!important; } .spatial-page .point-action-row .dta-action-button, .spatial-page .existing-point-menu-grid button, .spatial-page .point-actions-popup button{ font-size:12px!important; line-height:1.1!important; font-weight:700!important; } /* AU/WL/WU controls only appear after a Gama-I result exists. */ .spatial-page #hssGamaLayerGroup .small-title{ font-size:12px!important; font-weight:800!important; color:var(--text-strong)!important; margin-bottom:7px!important; } .spatial-page #hssGamaLayerGroup .check-row{ margin:6px 0!important; } /* Override the older direct-child compact rule for the sidebar result chip. */ .spatial-page .point-card > summary > .point-name-chip{ font-size:12px!important; line-height:1.15!important; } /* Gama-I audit controls: keep numeric results separate from geometric QC construction. */ .spatial-page #hssGamaLayerGroup .gama-master-row{ font-weight:800!important; color:var(--text-strong)!important; margin-top:8px!important; } .spatial-page #hssGamaLayerGroup .gama-layer-children .child-row{ padding-left:22px!important; } .spatial-page #hssGamaLayerGroup .gama-construction-note{ padding-left:22px; margin:2px 0 5px; font-size:10px; line-height:1.35; color:var(--muted); } /* ============================================================ Per-DTA master layer visibility One eye switch in each card header controls the DTA, outlet, Characteristic geometry and Gama-I result/construction geometry for that DTA. ============================================================ */ .point-card > summary{ grid-template-columns:minmax(0,1fr) auto 25px auto!important; grid-template-areas: "point area visibility chevron" "meta meta meta chevron"!important; } .point-card > summary > .point-master-visibility-toggle{ grid-area:visibility!important; width:25px; height:25px; align-self:center; display:grid; place-items:center; border:0; border-radius:6px; color:var(--text-muted); cursor:pointer; transition:background-color .15s ease,color .15s ease,opacity .15s ease; } .point-card > summary > .point-master-visibility-toggle svg{width:15px;height:15px;stroke-width:2} .point-card > summary > .point-master-visibility-toggle:hover, .point-card > summary > .point-master-visibility-toggle:focus-visible{ background:var(--surface-soft); color:var(--text-strong); outline:none; } .point-card > summary > .point-master-visibility-toggle.is-hidden-state{color:var(--text-muted);opacity:.72} .point-card.is-layer-hidden>summary .point-name-chip, .point-card.is-layer-hidden>summary .point-summary-main, .point-card.is-layer-hidden>summary .point-summary-area{opacity:.58} [data-theme="dark"] .point-card > summary > .point-master-visibility-toggle:hover, [data-theme="dark"] .point-card > summary > .point-master-visibility-toggle:focus-visible{background:rgba(255,255,255,.06)} .hss-loading-placeholder{ min-height:44px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border-color); border-radius:8px; color:var(--text-muted); font-size:10px; font-weight:650; background:var(--surface-soft); } /* ============================================================ v1.3.0 final UI + spatial audit refinement ============================================================ */ /* Bulk result actions: master visibility + focus are icon-only neutral actions. */ .spatial-page .result-heading-actions .result-icon-button{ width:38px!important; min-width:38px!important; height:42px!important; min-height:42px!important; display:grid!important; place-items:center!important; padding:0!important; border:1px solid var(--border-color)!important; border-radius:7px!important; background:var(--card-bg)!important; color:#223468!important; box-shadow:none!important; } .spatial-page .result-heading-actions .result-icon-button svg{ width:16px!important;height:16px!important;color:currentColor!important;stroke:currentColor!important; } .spatial-page .result-heading-actions .result-icon-button:hover:not(:disabled), .spatial-page .result-heading-actions .result-icon-button:focus-visible:not(:disabled){ background:var(--surface-soft)!important; border-color:color-mix(in srgb,#223468 38%,var(--border-color))!important; color:#223468!important; outline:none!important; } .spatial-page .result-heading-actions .result-icon-button:disabled{opacity:.38!important;cursor:not-allowed!important} [data-theme="dark"] .spatial-page .result-heading-actions .result-icon-button{ background:var(--card-bg)!important; color:var(--primary)!important; border-color:var(--border-color)!important; } [data-theme="dark"] .spatial-page .result-heading-actions .result-icon-button:hover:not(:disabled), [data-theme="dark"] .spatial-page .result-heading-actions .result-icon-button:focus-visible:not(:disabled){ background:var(--surface-soft)!important; border-color:color-mix(in srgb,var(--primary) 42%,var(--border-color))!important; color:var(--primary-hover)!important; } /* Kill legacy yellow focus styling. */ .spatial-page .focus-all-button, .spatial-page .focus-all-button:hover:not(:disabled), .spatial-page .focus-all-button:focus-visible:not(:disabled){ background:var(--card-bg)!important; color:#223468!important; } [data-theme="dark"] .spatial-page .focus-all-button, [data-theme="dark"] .spatial-page .focus-all-button:hover:not(:disabled), [data-theme="dark"] .spatial-page .focus-all-button:focus-visible:not(:disabled){ background:var(--card-bg)!important; color:var(--primary)!important; } /* Eye is the left-most master switch in every DTA card header. */ .spatial-page .point-card > summary{ grid-template-columns:25px minmax(0,1fr) auto auto!important; grid-template-areas: "visibility point area chevron" "visibility meta meta chevron"!important; column-gap:7px!important; } .spatial-page .point-card > summary > .point-master-visibility-toggle{ grid-area:visibility!important; align-self:center!important; justify-self:start!important; margin:0!important; } /* Compact collapsible Layer & Tampilan groups. */ .spatial-page .layer-collapsible{ padding-top:0!important; overflow:visible; } .spatial-page .layer-collapsible > .layer-collapse-summary{ min-height:31px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:7px 0; list-style:none; cursor:pointer; color:var(--text-strong); font-size:var(--ui-control-text-size,13px)!important; font-weight:700!important; user-select:none; } .spatial-page .layer-collapsible > .layer-collapse-summary::-webkit-details-marker{display:none} .spatial-page .layer-collapsible > .layer-collapse-summary svg{ width:14px;height:14px;flex:0 0 auto;color:var(--text-muted);transition:transform .16s ease; } .spatial-page .layer-summary-actions{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;} .spatial-page .layer-eye-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-color);border-radius:999px;background:color-mix(in srgb,var(--card-bg) 92%,var(--primary) 8%);color:var(--text-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;} .spatial-page .layer-eye-toggle:hover,.spatial-page .layer-eye-toggle:focus-visible{background:color-mix(in srgb,var(--primary) 7%,var(--card-bg));border-color:color-mix(in srgb,var(--primary) 30%,var(--border-color));color:var(--primary);transform:translateY(-1px);} .spatial-page .layer-eye-toggle[data-visible='true']{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 34%,var(--border-color));background:color-mix(in srgb,var(--primary) 8%,var(--card-bg));} .spatial-page .layer-collapsible[open] > .layer-collapse-summary > .layer-summary-actions > svg:last-child{transform:rotate(180deg)} .spatial-page .layer-collapsible > .layer-collapsible-body{ padding:1px 0 3px; } .spatial-page .layer-collapsible:not([open]) > .layer-collapsible-body{display:none!important} /* Gama-I layer controls use the exact same typography as the other layer rows. */ .spatial-page #hssGamaLayerGroup .check-row, .spatial-page #hssGamaLayerGroup .child-row{ font-size:var(--ui-control-text-size,13px)!important; font-weight:600!important; color:var(--text-main)!important; letter-spacing:0!important; } .spatial-page #hssGamaLayerGroup .child-row{color:var(--text-muted)!important} .spatial-page .characteristic-river-orders{margin-top:2px;padding-left:22px;} /* HSS method card has two interaction halves: left = selection, right = disclosure. */ .spatial-page .hss-method-card-head{ padding:0!important; gap:0!important; align-items:stretch!important; } .spatial-page .hss-method-select-zone, .spatial-page .hss-method-collapse-zone{ min-width:0; min-height:46px; display:flex; align-items:center; } .spatial-page .hss-method-select-zone{ flex:0 0 33.3333%; padding:10px 11px; cursor:pointer; } .spatial-page .hss-method-collapse-zone{ flex:0 0 66.6667%; justify-content:flex-end; padding:10px 11px; cursor:pointer; } .spatial-page .hss-method-select-zone:hover, .spatial-page .hss-method-collapse-zone:hover{ background:color-mix(in srgb,var(--primary) 5%,var(--card-bg)); } .spatial-page .hss-method-collapse-zone .hss-details-chevron{pointer-events:none} /* Analisis HSS / Hitung HSS follows the same primary action palette as Mulai Tambah in both themes. */ .spatial-page .hss-main-button, .spatial-page .hss-calc-button{ background:var(--primary-action-bg)!important; border-color:var(--primary-action-bg)!important; color:var(--primary-action-text)!important; } .spatial-page .hss-main-button svg, .spatial-page .hss-calc-button svg{color:var(--primary-action-text)!important;stroke:var(--primary-action-text)!important} .spatial-page .hss-main-button:hover:not(:disabled), .spatial-page .hss-calc-button:hover:not(:disabled){ background:var(--primary-action-hover)!important; border-color:var(--primary-action-hover)!important; color:var(--primary-action-text)!important; } /* Hydrologic-response executive card: keep semantic tint but restore dark-mode contrast. */ [data-theme="dark"] .spatial-page .analysis-executive{ background:var(--card-bg)!important; border-color:color-mix(in srgb,var(--primary) 28%,var(--border-color))!important; } [data-theme="dark"] .spatial-page .analysis-executive > div:first-child{ background:color-mix(in srgb,var(--analysis-status-primary,var(--primary)) 18%,var(--card-bg))!important; box-shadow:inset 4px 0 0 var(--analysis-status-primary,var(--primary))!important; } [data-theme="dark"] .spatial-page .analysis-executive .analysis-kicker{ color:#dbe3f2!important; } [data-theme="dark"] .spatial-page .analysis-executive > div > strong{ color:color-mix(in srgb,var(--analysis-status-primary,var(--primary)) 55%,#ffffff)!important; text-shadow:0 1px 0 rgba(0,0,0,.22); } [data-theme="dark"] .spatial-page .analysis-executive p{color:var(--text-main)!important} /* Generic derived-layer hover card. */ .spatial-page .spatial-hover-card{ min-width:150px; display:grid; gap:3px; font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; } .spatial-page .spatial-hover-card > strong{ font-size:11px!important; line-height:1.25; color:var(--text-strong); } .spatial-page .spatial-hover-card > span{ font-size:11px!important; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; } .spatial-page .spatial-hover-card > small{ font-size:10px!important; line-height:1.3; color:var(--text-muted); } /* Force hover bubble above the feature, with its triangle below it. */ .spatial-page .map-hover-popup .maplibregl-popup-content{ background:var(--card-bg)!important; color:var(--text-main)!important; border:1px solid var(--border-color)!important; box-shadow:0 7px 18px rgba(24,36,55,.14)!important; } .spatial-page .map-hover-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{ left:50%!important; right:auto!important; margin:0!important; transform:translateX(-50%)!important; border-top-color:var(--card-bg)!important; border-bottom-color:transparent!important; } [data-theme="dark"] .spatial-page .map-hover-popup .maplibregl-popup-content{ background:var(--card-bg)!important; border-color:var(--border-color)!important; box-shadow:0 8px 22px rgba(0,0,0,.34)!important; } [data-theme="dark"] .spatial-page .map-hover-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{ left:50%!important; right:auto!important; margin:0!important; transform:translateX(-50%)!important; border-top-color:var(--card-bg)!important; } /* Anchored DTA color panel; native OS picker is opened only from its visible color input. */ .spatial-page .dta-colorpicker-panel:not(.native-picker-proxy){ z-index:6500!important; } /* ============================================================ v1.3.0 final polish — method zones, construction QC, hover tip ============================================================ */ /* HSS method interaction is 1/3 selection + 2/3 disclosure, without a visible split. */ .spatial-page .hss-method-select-zone{ flex:0 0 33.333%!important; width:33.333%!important; border-right:0!important; } .spatial-page .hss-method-collapse-zone{ flex:1 1 66.667%!important; width:66.667%!important; border-left:0!important; } .spatial-page .hss-method-card-head{ background:var(--card-bg)!important; } .spatial-page .hss-method-select-zone:hover, .spatial-page .hss-method-collapse-zone:hover{ background:color-mix(in srgb,var(--primary) 4%,var(--card-bg))!important; } /* The visible Gama-I construction consists only of X-A, X-B and X-C. Medium Teal remains readable on either basemap; text keeps a white halo. */ .spatial-page #map .maplibregl-canvas{outline:none} /* Layer-summary eye is compact and visually secondary to the group title. */ .spatial-page .layer-eye-toggle{ width:25px!important; height:25px!important; border:0!important; border-radius:6px!important; background:transparent!important; transform:none!important; } .spatial-page .layer-eye-toggle:hover, .spatial-page .layer-eye-toggle:focus-visible{ background:var(--surface-soft)!important; transform:none!important; } .spatial-page .layer-eye-toggle svg{width:14px!important;height:14px!important} /* MapLibre places bottom-anchor tips with flex alignment. Keep the triangle exactly centered under the hover card; do not translate it sideways. */ .spatial-page .map-hover-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{ position:static!important; align-self:center!important; left:auto!important; right:auto!important; margin:0!important; transform:none!important; border-top-color:var(--card-bg)!important; border-bottom-color:transparent!important; } [data-theme="dark"] .spatial-page .map-hover-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{ border-top-color:var(--card-bg)!important; border-bottom-color:transparent!important; } /* Exact centered pointer for DTA/derived hover cards. Native MapLibre tips can shift when popup content width changes, so draw one triangle from the card itself. */ .spatial-page .map-hover-popup .maplibregl-popup-tip{display:none!important} .spatial-page .map-hover-popup .maplibregl-popup-content{position:relative!important} .spatial-page .map-hover-popup .maplibregl-popup-content::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); width:0;height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid var(--card-bg); pointer-events:none; } /* Interaction zones are behavioral only; hovering must not reveal the 1/3–2/3 split. */ .spatial-page .hss-method-select-zone:hover, .spatial-page .hss-method-collapse-zone:hover{background:transparent!important} .spatial-page .hss-method-card-head:hover{background:color-mix(in srgb,var(--primary) 4%,var(--card-bg))!important} /* ============================================================ v1.3.0 layer hierarchy refinement ============================================================ */ .spatial-page .layer-summary-leading{ display:inline-flex; align-items:center; gap:7px; min-width:0; flex:1 1 auto; } .spatial-page .layer-summary-leading > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .spatial-page .layer-collapse-summary > .layer-summary-actions{ margin-left:auto; } .spatial-page .layer-summary-color, .spatial-page .derived-color-row > .color-input, .spatial-page .layer-subcollapse-summary .color-input{ width:24px!important; height:24px!important; min-width:24px!important; padding:1px!important; border-radius:5px!important; } .spatial-page .layer-summary-info{ width:24px!important; height:24px!important; min-width:24px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; border:0!important; background:transparent!important; } .spatial-page .layer-summary-info svg{width:14px!important;height:14px!important} .spatial-page .derived-color-row{ display:flex; align-items:center; gap:8px; } .spatial-page .derived-color-row > .check-row{flex:1 1 auto;min-width:0} .spatial-page .layer-subcollapsible{ margin:1px 0 0 12px; padding:0; border:0; } .spatial-page .layer-subcollapse-summary{ min-height:30px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; list-style:none; cursor:pointer; } .spatial-page .layer-subcollapse-summary::-webkit-details-marker{display:none} .spatial-page .layer-subcollapse-summary > .check-row{ flex:1 1 auto; min-width:0; margin:0!important; } .spatial-page .layer-subcollapse-summary > .layer-summary-actions > svg:last-child{ width:13px;height:13px;transition:transform .16s ease; } .spatial-page .layer-subcollapsible[open] > .layer-subcollapse-summary > .layer-summary-actions > svg:last-child{transform:rotate(180deg)} .spatial-page .layer-subcollapsible-body{ margin:1px 0 4px 20px!important; padding-left:8px; border-left:1px solid var(--border-color); } .spatial-page .characteristic-river-orders{ grid-template-columns:1fr 1fr!important; gap:4px 8px!important; } /* Eye is part of the layer title, not the disclosure/action edge. */ .spatial-page .layer-summary-leading .layer-eye-toggle{flex:0 0 25px} /* ============================================================ v1.3.0 R4 — layer alignment, derived hover, DTA-card identity ============================================================ */ /* All first-level rows use the same checkbox/text origin as "Tampilkan batas". */ .spatial-page .layer-collapsible > .layer-collapsible-body > .check-row, .spatial-page .layer-collapsible > .layer-collapsible-body > .derived-color-row > .check-row, .spatial-page #characteristicLayerGroup > .layer-collapsible-body > .check-row, .spatial-page #hssGamaLayerGroup > .layer-collapsible-body > .check-row, .spatial-page .layer-subcollapse-summary > .check-row{ padding-left:0!important; margin-left:0!important; } .spatial-page .derived-color-row{margin-left:0!important;padding-left:0!important} .spatial-page .layer-subcollapsible{ margin-left:0!important; } /* Official-river hierarchy is nested only beneath Tampilkan jaringan; Label sungai stays a sibling. */ .spatial-page .official-river-options{ margin:1px 0 3px 22px; padding-left:0; } .spatial-page .official-river-options > .check-row{margin-left:0!important;padding-left:0!important} .spatial-page .official-river-orders{ padding-left:0!important; grid-template-columns:1fr 1fr!important; gap:2px 8px!important; } .spatial-page .official-river-orders .check-row{margin:3px 0!important} /* Strahler hierarchy remains visually nested under Total jaringan sungai. */ .spatial-page .characteristic-river-orders{ margin-top:2px!important; padding-left:0!important; } /* Derived hover: parameter + metric share the first row, DTA identity on the second. */ .spatial-page .spatial-hover-card{ min-width:185px!important; gap:4px!important; } .spatial-page .spatial-hover-head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; } .spatial-page .spatial-hover-head > strong{ font-size:11.5px!important; line-height:1.2!important; font-weight:800!important; color:var(--text-strong)!important; white-space:nowrap; } .spatial-page .spatial-hover-head > span{ font-size:11.5px!important; line-height:1.2!important; font-weight:800!important; color:var(--text-strong)!important; font-variant-numeric:tabular-nums; white-space:nowrap; } .spatial-page .spatial-hover-card > small{ font-size:10px!important; color:var(--text-muted)!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Closed DTA card: eye + point name on row 1; river starts flush-left on row 2. */ .spatial-page .point-card > summary{ display:grid!important; grid-template-columns:25px auto minmax(0,1fr) auto 14px!important; grid-template-areas: "visibility point spacer area chevron" "meta meta meta meta chevron"!important; column-gap:7px!important; row-gap:4px!important; align-items:center!important; } .spatial-page .point-card > summary > .point-master-visibility-toggle{ grid-area:visibility!important; align-self:center!important; justify-self:start!important; } .spatial-page .point-card > summary > .point-name-chip{ grid-area:point!important; justify-self:start!important; margin:0!important; } .spatial-page .point-card > summary > .point-summary-area{ grid-area:area!important; justify-self:end!important; align-self:center!important; } .spatial-page .point-card > summary > .point-chevron{ grid-area:chevron!important; align-self:center!important; justify-self:end!important; } .spatial-page .point-card > summary > .point-summary-main{ grid-area:meta!important; width:100%!important; min-width:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas: "river basin" "warning warning"!important; column-gap:10px!important; align-items:center!important; margin:0!important; } .spatial-page .point-summary-river{ grid-area:river!important; justify-self:start!important; margin:0!important; text-align:left!important; } .spatial-page .point-summary-basin{ grid-area:basin!important; justify-self:end!important; margin:0!important; text-align:right!important; } .spatial-page .point-summary-main .result-state-badge{ grid-area:warning!important; justify-self:start!important; } /* ============================================================ v1.3.0 R5 — crisp MapLibre popup typography + equal hover size ============================================================ */ /* Spatial-derived hover and ordinary DTA hover use one footprint. This keeps AU/WL/WU/L/Lca/L10–85 from looking like a larger secondary component. */ .spatial-page .point-hover-card, .spatial-page .spatial-hover-card{ width:172px!important; min-width:172px!important; max-width:172px!important; min-height:37px!important; box-sizing:border-box!important; } .spatial-page .spatial-hover-card{ gap:3px!important; } .spatial-page .spatial-hover-head{ min-height:15px!important; } /* Popup content must remain a normal text layer. motion.css is loaded after spatial.css, therefore these !important guards also protect against future transform-based popup animations. */ .spatial-page .map-hover-popup .maplibregl-popup-content, .spatial-page .pending-point-popup .maplibregl-popup-content, .spatial-page .location-preview-popup .maplibregl-popup-content, .spatial-page .existing-point-popup .maplibregl-popup-content{ transform:none!important; will-change:auto!important; filter:none!important; backface-visibility:visible!important; -webkit-font-smoothing:antialiased!important; text-rendering:geometricPrecision!important; } /* ============================================================ v1.3.0 R6 — crisp coordinate/location preview popup Small 8–10 px text combined with forced grayscale antialiasing looked soft on Windows/Edge. Use normal UI text sizing and native browser smoothing. ============================================================ */ .spatial-page .maplibregl-popup-content{ -webkit-font-smoothing:auto!important; text-rendering:auto!important; } .spatial-page .location-preview-popup .maplibregl-popup-content{ padding:11px 12px!important; min-width:235px!important; max-width:270px!important; border-radius:10px!important; font-family:"Plus Jakarta Sans",Arial,sans-serif!important; transform:none!important; will-change:auto!important; filter:none!important; } .spatial-page .location-preview-card{ display:grid!important; gap:7px!important; min-width:211px!important; max-width:246px!important; color:var(--text-main)!important; } .spatial-page .location-preview-card>strong{ font-size:12px!important; line-height:1.3!important; font-weight:800!important; letter-spacing:0!important; color:var(--text-strong)!important; } .spatial-page .location-preview-card>span{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important; font-size:10.5px!important; line-height:1.45!important; font-weight:600!important; color:var(--text-muted)!important; font-variant-numeric:tabular-nums!important; } .spatial-page .location-preview-card>p{ margin:1px 0 0!important; font-size:11px!important; line-height:1.48!important; font-weight:500!important; color:var(--text-muted)!important; } .spatial-page .location-preview-card>p b{ font-weight:800!important; color:var(--text-main)!important; } .spatial-page .location-preview-popup .maplibregl-popup-close-button{ width:28px!important; height:28px!important; font-size:16px!important; line-height:28px!important; } /* Right-click coordinate context popup */ /* Flood-routing prototype --------------------------------------------------- Reference layers (official basin/river/toponym) stay cartographic-only. HEC-HMS layers are conditional overlays for the currently selected DTA. */ .hec-model-dot{width:9px;height:9px;border-radius:50%;background:#65558f;box-shadow:0 0 0 3px color-mix(in srgb,#65558f 14%,transparent);display:inline-block;flex:0 0 auto} .hec-layer-note{display:block;color:var(--muted,#677386);line-height:1.35;margin:6px 2px 0} .point-summary-area:empty{display:none} .flood-routing-panel{ position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:7; width:min(720px,calc(100% - 190px));padding:12px 14px 10px; border:1px solid color-mix(in srgb,var(--border,#cbd3df) 84%,transparent); border-radius:14px;background:color-mix(in srgb,var(--panel,#fff) 94%,transparent); box-shadow:0 10px 34px rgba(24,38,63,.16);backdrop-filter:blur(12px); } .flood-routing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px} .flood-routing-head>div{display:grid;gap:1px;min-width:0} .flood-routing-head strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flood-routing-kicker{font-size:10px;font-weight:800;letter-spacing:.11em;color:#65558f} .flood-routing-count{font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,#65558f 10%,transparent);color:#65558f;white-space:nowrap} .flood-routing-controls{display:grid;grid-template-columns:34px minmax(120px,1fr) minmax(84px,auto);align-items:center;gap:9px} .flood-play-btn{height:32px;width:32px;border-radius:50%;border:1px solid var(--border,#ccd3dd);background:var(--panel,#fff);color:var(--text,#203047);display:grid;place-items:center;cursor:pointer;padding:0} .flood-play-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(24,38,63,.12)} .flood-play-btn:disabled{opacity:.45;cursor:not-allowed} .flood-play-btn svg{width:15px;height:15px} .flood-routing-controls input[type="range"]{width:100%;accent-color:#d94841} #floodTimeLabel{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .flood-routing-status{margin-top:7px;font-size:11px;line-height:1.35;color:var(--muted,#667386)} .flood-routing-status[data-kind="warning"]{color:#a45813} .flood-routing-status[data-kind="ready"]{color:#28764b} .flood-routing-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;font-size:10px;color:var(--muted,#667386)} .flood-routing-legend span{display:inline-flex;align-items:center;gap:4px} .flood-legend-swatch{width:17px;height:4px;border-radius:999px;display:inline-block} .flood-legend-swatch.q-low{background:#2f8b57}.flood-legend-swatch.q-rising{background:#d6a51d}.flood-legend-swatch.q-high{background:#e47a22}.flood-legend-swatch.q-peak{background:#d94841} .flood-routing-note{display:block;margin-top:5px;font-size:10px;line-height:1.3;color:var(--muted,#667386)} .hec-reach-popup{display:grid;gap:2px;min-width:140px}.hec-reach-popup strong{font-size:12px}.hec-reach-popup span{font-size:11px;color:#566477} @media (max-width:820px){ .flood-routing-panel{left:10px;right:10px;bottom:12px;transform:none;width:auto;padding:10px 11px} .flood-routing-legend{display:none} .flood-routing-note{margin-top:6px} } .flood-observation-panel{margin-top:10px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--border,#cbd3df) 75%,transparent);display:grid;gap:8px} .flood-observation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .flood-observation-head>div{display:grid;gap:2px;min-width:0} .flood-observation-head strong{font-size:12.5px;color:var(--text,#203047)} #floodObservationHint{font-size:10px;line-height:1.35;color:var(--muted,#667386)} .flood-observation-summary{display:grid;gap:8px} .flood-observation-point-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} .flood-observation-card{border:1px solid color-mix(in srgb,var(--border,#cbd3df) 78%,transparent);border-radius:10px;padding:8px 9px;background:color-mix(in srgb,var(--panel,#fff) 82%,transparent)} .flood-observation-card strong{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;margin-bottom:5px} .flood-observation-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin:0;font-size:10.5px} .flood-observation-card dt{color:var(--muted,#667386)} .flood-observation-card dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--text,#203047)} .flood-observation-segments{display:grid;gap:6px} .flood-observation-segment{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,#65558f 7%,transparent);font-size:10.5px;color:var(--text,#203047)} .flood-observation-segment strong{font-size:11px} .flood-observation-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--border,#cbd3df) 60%,transparent);color:var(--muted,#667386);font-size:10px} .flood-observation-hydrograph{border:1px solid color-mix(in srgb,var(--border,#cbd3df) 78%,transparent);border-radius:12px;padding:8px;background:color-mix(in srgb,var(--panel,#fff) 82%,transparent)} .flood-observation-hydrograph svg{display:block;width:100%;height:auto} .flood-observation-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:6px;font-size:10px;color:var(--muted,#667386)} .flood-observation-legend span{display:inline-flex;align-items:center;gap:5px}.flood-observation-legend i{width:18px;height:3px;border-radius:999px;display:inline-block} @media (max-width:820px){.flood-observation-point-grid{grid-template-columns:1fr}.flood-observation-segment{font-size:10px}} /* Flood map is the primary workflow; DTA is intentionally secondary/hidden. */ .flood-primary-section{display:grid;gap:10px} .flood-primary-copy{margin:0;color:var(--muted,#667386);font-size:12px;line-height:1.45} .flood-point-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .flood-point-actions .btn{min-width:0} .flood-point-list{display:grid;gap:7px} .flood-point-row{display:grid;grid-template-columns:30px minmax(0,1fr) 34px 34px 34px;gap:7px;align-items:center;padding:7px;border:1px solid color-mix(in srgb,var(--border,#cbd3df) 82%,transparent);border-radius:11px;background:color-mix(in srgb,var(--panel,#fff) 86%,transparent)} .flood-point-letter{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--point-color,#1d70b8);color:#fff;font-size:12px;font-weight:800;box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--point-color,#1d70b8) 45%,transparent)} .flood-point-row-copy{display:grid;gap:2px;min-width:0} .flood-point-row-copy input{width:100%;min-width:0;border:0;border-bottom:1px solid transparent;background:transparent;padding:1px 0;font:inherit;font-weight:700;color:var(--text,#203047);outline:none} .flood-point-row-copy input:focus{border-bottom-color:var(--accent,#65558f)} .flood-point-row-copy span{font-size:10px;color:var(--muted,#667386);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flood-point-focus,.flood-point-dta,.flood-point-remove{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--muted,#667386);display:grid;place-items:center;cursor:pointer} .flood-point-focus:hover,.flood-point-dta:hover,.flood-point-remove:hover{background:color-mix(in srgb,var(--border,#cbd3df) 38%,transparent);color:var(--text,#203047)} .flood-point-focus svg,.flood-point-dta svg,.flood-point-remove svg{width:15px;height:15px} .dta-side-output-shell{margin-top:2px} .dta-side-output-note{margin:10px 2px 4px;padding:9px 10px;border-radius:10px;background:color-mix(in srgb,#65558f 7%,transparent);color:var(--muted,#667386);font-size:10.5px;line-height:1.45} .dta-side-output-shell>.panel-section{margin-left:0;margin-right:0} .flood-observation-chip.warning{color:#9b5a10;background:color-mix(in srgb,#e47a22 12%,transparent)} @media (max-width:520px){ .flood-point-actions{grid-template-columns:1fr} .flood-point-row{grid-template-columns:28px minmax(0,1fr) 32px 32px 32px} } /* v1.6 — Google Maps banjir: floating, movable windows + Chart.js ---------------- */ .legacy-dta-workspace{display:none!important} .flood-window-launchers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:2px} .flood-window-launchers .btn{min-width:0;padding-inline:6px;font-size:10px} .flood-window-launchers .btn svg{width:13px;height:13px} .flood-window-launcher.is-window-hidden{border-style:dashed;opacity:.72} .flood-window{ position:absolute!important; z-index:12; transform:none!important; width:min(370px,calc(100% - 28px)); max-width:calc(100% - 28px); padding:0!important; margin:0!important; border:1px solid color-mix(in srgb,var(--border-color,var(--border,#cbd3df)) 88%,transparent)!important; border-radius:13px!important; background:color-mix(in srgb,var(--card-bg,var(--panel,#fff)) 95%,transparent)!important; box-shadow:0 12px 34px rgba(24,38,63,.18)!important; backdrop-filter:blur(12px); overflow:hidden; user-select:none; } .flood-window[data-default-position="bottom-left"]{left:14px;bottom:16px;top:auto;right:auto} .flood-window[data-default-position="top-right"]{right:14px;top:76px;left:auto;bottom:auto} .flood-window[data-default-position="bottom-right"]{right:14px;bottom:16px;left:auto;top:auto} .flood-window.is-hidden{display:none!important} .flood-window.is-minimized .flood-window-body{display:none!important} .flood-window.is-minimized{width:min(300px,calc(100% - 28px))!important} .flood-window-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 9px 8px 11px;background:color-mix(in srgb,var(--surface-soft,#f4f6f9) 82%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border-color,var(--border,#cbd3df)) 76%,transparent);cursor:grab;touch-action:none} .flood-window.is-dragging .flood-window-header{cursor:grabbing} .flood-window.is-minimized .flood-window-header{border-bottom:0} .flood-window-title{display:grid;gap:1px;min-width:0;pointer-events:none} .flood-window-title strong{font-size:.74rem;color:var(--text-strong,var(--text,#203047));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flood-window-head-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto} .flood-window-head-actions button{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--text-muted,var(--muted,#667386));display:grid;place-items:center;cursor:pointer} .flood-window-head-actions button:hover,.flood-window-head-actions button:focus-visible{background:color-mix(in srgb,var(--border-color,var(--border,#cbd3df)) 42%,transparent);color:var(--text-main,var(--text,#203047));outline:none} .flood-window-head-actions button svg{width:14px;height:14px} .flood-window-body{padding:10px 11px 11px;user-select:text;touch-action:auto} .flood-routing-panel{width:min(410px,calc(100% - 28px))} .flood-comparison-window{width:min(390px,calc(100% - 28px));max-height:min(590px,calc(100% - 100px))} .flood-comparison-window>.flood-window-body{max-height:480px;overflow:auto} .flood-chart-window{width:min(640px,calc(100% - 28px))} .flood-chart-body{display:grid;gap:7px} .flood-chart-help{font-size:10px;line-height:1.35;color:var(--text-muted,var(--muted,#667386))} .flood-observation-hydrograph{position:relative;min-height:250px;height:280px;padding:8px!important;overflow:hidden} .flood-observation-hydrograph canvas{display:block;width:100%!important;height:100%!important} .flood-observation-hydrograph>.empty-state{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;background:color-mix(in srgb,var(--card-bg,var(--panel,#fff)) 86%,transparent)} .flood-observation-hydrograph.has-chart>.empty-state{display:none} .flood-comparison-section{border:1px solid color-mix(in srgb,var(--border-color,var(--border,#cbd3df)) 78%,transparent);border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--card-bg,var(--panel,#fff)) 82%,transparent);margin-top:8px} .flood-comparison-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;cursor:pointer;font-size:10.5px;font-weight:800;color:var(--text-strong,var(--text,#203047));background:color-mix(in srgb,var(--surface-soft,#f4f6f9) 72%,transparent)} .flood-comparison-section>summary::-webkit-details-marker{display:none} .flood-comparison-section>summary svg{width:14px;height:14px;transition:transform .15s ease} .flood-comparison-section[open]>summary svg{transform:rotate(180deg)} .flood-comparison-section>.flood-observation-summary{padding:8px} /* A–B–C cards reuse the visual grammar of the former DTA result cards. */ .flood-point-list{display:grid;gap:7px} .flood-point-card{border-left:1px solid var(--border-color)!important;--point-color:#1d70b8} .flood-point-card>summary{display:flex!important;align-items:center!important;gap:7px!important;padding:8px 9px!important} .flood-point-card>summary>.point-name-chip{flex:0 0 auto!important;min-width:27px!important;max-width:44px!important;text-align:center} .flood-point-card .point-summary-river{font-size:10px!important;font-weight:800!important} .flood-point-card .point-summary-basin{font-size:10px!important;font-weight:500!important} .flood-point-card .point-body{padding:8px 9px 9px!important} .flood-point-card .point-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:stretch!important;gap:5px!important} .flood-point-card .flood-point-action{width:auto!important;min-width:0!important;height:34px!important;padding:4px 5px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid var(--border-color,var(--border,#cbd3df));border-radius:8px;background:var(--card-bg,var(--panel,#fff));color:var(--text-muted,var(--muted,#667386));font-size:10px;font-weight:750;cursor:pointer} .flood-point-card .flood-point-action:hover,.flood-point-card .flood-point-action:focus-visible{background:var(--surface-soft,#f4f6f9);color:var(--text-main,var(--text,#203047));outline:none} .flood-point-card .flood-point-action svg{width:12px;height:12px} .flood-point-card .flood-point-action.danger{color:#a94242} .flood-point-card .flood-point-action.dta-ready{color:#28764b;border-color:color-mix(in srgb,#28764b 42%,var(--border-color,var(--border,#cbd3df)))} .flood-point-color-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .flood-point-name-editor .point-name-grid input{font-size:10px!important} .flood-point-name-editor .save-icon-button{min-width:31px} .flood-point-route-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px} .flood-point-route-meta .meta-box{min-width:0} .flood-point-route-meta .meta-box b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flood-observation-point-grid{grid-template-columns:1fr!important} .flood-observation-card{padding:8px 9px} .flood-observation-card-title{display:flex;align-items:center;gap:7px!important;justify-content:flex-start!important} .flood-observation-card-title .point-name-chip{flex:0 0 auto} .flood-observation-card-title>span:last-child{min-width:0;display:grid;gap:1px} .flood-observation-card-title b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flood-observation-card-title small{font-size:10px;color:var(--text-muted,var(--muted,#667386));font-weight:500} .flood-observation-segment{display:grid!important;grid-template-columns:auto 1fr;gap:4px 8px!important} .flood-observation-segment strong{grid-column:1/-1} .flood-observation-segment .segment-label{color:var(--text-muted,var(--muted,#667386))} .flood-observation-segment .segment-value{text-align:right;font-weight:750;color:var(--text-main,var(--text,#203047));font-variant-numeric:tabular-nums} @media(max-width:820px){ .flood-window{max-width:calc(100% - 20px);width:min(360px,calc(100% - 20px));left:10px!important;right:auto!important} .flood-window[data-flood-window="routing"]{top:78px!important;bottom:auto!important} .flood-window[data-flood-window="comparison"]{top:132px!important;bottom:auto!important} .flood-window[data-flood-window="chart"]{top:186px!important;bottom:auto!important;width:calc(100% - 20px)!important} .flood-window.is-user-positioned{right:auto!important;bottom:auto!important} .flood-observation-hydrograph{height:240px;min-height:220px} } @media(max-width:520px){ .flood-window-launchers{grid-template-columns:1fr} .flood-point-card .point-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important} .flood-chart-window{width:calc(100% - 20px)!important} } /* v1.7 — Titik Kontrol is the primary sidebar workflow ------------------------ */ .flood-control-coordinate-section{margin-top:0!important} .flood-control-section{display:grid;gap:8px} .flood-control-section .section-heading-row{margin-bottom:0} .flood-control-section .section-heading-row #floodPointCount{ display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px; background:var(--pu-blue-soft);color:var(--primary);font-size:10px;font-weight:800 } .flood-add-control-row{grid-template-columns:1fr!important} .flood-window-launchers{grid-template-columns:1fr!important;gap:7px!important;margin-top:4px!important} .flood-window-launchers .btn{ width:100%;min-height:36px!important;justify-content:flex-start!important;padding:8px 10px!important; font-size:10px!important;gap:8px!important } .flood-window-launchers .btn svg{width:15px!important;height:15px!important} /* Titik Kontrol cards deliberately reuse the former DTA card composition. */ .spatial-page .flood-point-card{border:1px solid var(--border-color)!important;border-left:1px solid var(--border-color)!important} .spatial-page .flood-point-card>summary{ display:grid!important; grid-template-columns:25px auto minmax(0,1fr) 14px!important; grid-template-areas: "visibility point spacer chevron" "meta meta meta chevron"!important; column-gap:7px!important;row-gap:4px!important;align-items:center!important;padding:9px!important } .spatial-page .flood-point-card>summary>.flood-point-visibility-toggle{grid-area:visibility!important} .spatial-page .flood-point-card>summary>.flood-control-point-chip{grid-area:point!important} .spatial-page .flood-point-card>summary>.point-summary-main{ grid-area:meta!important;width:100%!important;min-width:0!important;display:grid!important; grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"river basin"!important; column-gap:10px!important;align-items:center!important;margin:0!important } .spatial-page .flood-point-card>summary>.point-chevron{grid-area:chevron!important;align-self:center!important;justify-self:end!important} .spatial-page .flood-control-point-chip{ width:30px!important;min-width:30px!important;max-width:30px!important;height:26px!important; padding:0!important;border-radius:6px!important;display:inline-grid!important;place-items:center!important } .spatial-page .flood-control-point-chip svg{width:14px;height:14px;stroke-width:2.2} .spatial-page .flood-point-card .point-summary-river{font-size:.66rem!important;font-weight:800!important} .spatial-page .flood-point-card .point-summary-basin{font-size:10px!important;font-weight:600!important} .spatial-page .flood-point-card .point-body{padding:9px!important} .spatial-page .flood-point-card .point-meta{grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:8px!important} .spatial-page .flood-point-card .meta-box{padding:7px!important;background:var(--surface-soft)!important;border-radius:7px!important} .spatial-page .flood-point-card .meta-box span{font-size:10px!important;color:var(--text-muted)!important} .spatial-page .flood-point-card .meta-box b{font-size:10px!important;color:var(--text-main)!important} .spatial-page .flood-point-card.is-layer-hidden>summary .flood-control-point-chip, .spatial-page .flood-point-card.is-layer-hidden>summary .point-summary-main{opacity:.58} /* Floating analysis windows: move, minimize, hide, and resize independently. */ .flood-window{ min-width:280px;min-height:120px;max-height:calc(100% - 28px)!important; display:flex;flex-direction:column } .flood-window>.flood-window-header{flex:0 0 auto} .flood-window>.flood-window-body{flex:1 1 auto;min-height:0;overflow:auto} .flood-window.is-minimized{height:auto!important;min-height:0!important;resize:none!important} .flood-window.is-minimized .flood-window-resize-handle{display:none!important} .flood-chart-window{min-width:360px;min-height:280px} .flood-chart-window>.flood-window-body{overflow:hidden} .flood-chart-window .flood-observation-hydrograph{height:100%;min-height:190px} .flood-window-resize-handle{ position:absolute;right:2px;bottom:2px;width:17px;height:17px;z-index:3;cursor:nwse-resize; touch-action:none;border-radius:0 0 9px 0;opacity:.62 } .flood-window-resize-handle::before,.flood-window-resize-handle::after{ content:"";position:absolute;right:3px;bottom:3px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted) } .flood-window-resize-handle::before{width:11px;height:11px}.flood-window-resize-handle::after{width:6px;height:6px} .flood-window.is-resizing{box-shadow:0 14px 38px rgba(24,38,63,.24)!important} @media(max-width:520px){ .spatial-page .flood-point-card>summary{grid-template-columns:25px auto minmax(0,1fr) 14px!important} .spatial-page .flood-point-card .point-meta{grid-template-columns:1fr!important} .flood-window-resize-handle{display:none} } .flood-comparison-window>.flood-window-body{max-height:none!important} @media(max-width:520px){.flood-window-resize-handle{display:block}} /* Match the legacy DTA card action-row sizing instead of dashboard-style icon tiles. */ .spatial-page .flood-point-card .point-action-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important} .spatial-page .flood-point-card .flood-point-action{ width:100%!important;height:31px!important;min-width:0!important;padding:0 7px!important; display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important; gap:5px!important;border:1px solid var(--border-color)!important;border-radius:7px!important; background:var(--card-bg)!important;color:var(--text-muted)!important;font-size:11px!important;font-weight:750!important;white-space:nowrap!important } .spatial-page .flood-point-card .flood-point-action svg{width:12px!important;height:12px!important;flex:0 0 auto} .spatial-page .flood-point-card .flood-point-action span{font-size:inherit!important;overflow:hidden;text-overflow:ellipsis} .spatial-page .flood-point-card .flood-point-action:hover,.spatial-page .flood-point-card .flood-point-action:focus-visible{background:var(--surface-soft)!important;color:var(--text-main)!important;outline:none!important} .spatial-page .flood-point-card .flood-point-action.danger{color:var(--danger,#a94242)!important} /* v1.8 — Titik Kontrol mirrors the legacy DTA card and map-first windows. */ .flood-control-section .point-limit-note{line-height:1.25} .flood-window-launchers .btn{ justify-content:center!important;min-height:40px!important;border-radius:7px!important; background:#fff!important;color:var(--pu-navy)!important;border:1px solid var(--border-color,var(--border,#d9dfe8))!important; box-shadow:none!important;font-size:.66rem!important;font-weight:800!important } .flood-window-launchers .btn:hover,.flood-window-launchers .btn:focus-visible{ background:var(--pu-blue-soft,#edf1fb)!important;border-color:color-mix(in srgb,var(--pu-navy) 32%,var(--border-color,var(--border,#d9dfe8)))!important; color:var(--pu-navy)!important;outline:none!important } .flood-window-launchers .btn svg{color:currentColor!important;width:16px!important;height:16px!important} /* Same composition as the DTA result card, except the area column is deliberately empty. */ .spatial-page .flood-point-card>summary{ display:grid!important;grid-template-columns:25px auto minmax(0,1fr) 14px!important; grid-template-areas:"visibility point spacer chevron" "meta meta meta chevron"!important; column-gap:7px!important;row-gap:4px!important;align-items:center!important;padding:9px!important } .spatial-page .flood-point-card>summary>.flood-point-visibility-toggle{grid-area:visibility!important} .spatial-page .flood-point-card>summary>.flood-control-point-chip{ grid-area:point!important;width:auto!important;min-width:0!important;max-width:116px!important;height:auto!important; padding:5px 8px!important;border-radius:6px!important;display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:10px!important;font-weight:800!important;line-height:1.15!important } .spatial-page .flood-point-card>summary>.point-summary-main{ grid-area:meta!important;width:100%!important;min-width:0!important;display:grid!important; grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"river basin"!important; column-gap:10px!important;align-items:center!important;margin:0!important } .spatial-page .flood-point-card>summary>.point-summary-area{display:none!important} .spatial-page .flood-point-card>summary>.point-chevron{grid-area:chevron!important;align-self:center!important;justify-self:end!important} .spatial-page .flood-point-card .point-summary-river{grid-area:river!important;justify-self:start!important;font-size:.66rem!important;font-weight:800!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spatial-page .flood-point-card .point-summary-basin{grid-area:basin!important;justify-self:end!important;font-size:10px!important;font-weight:600!important;white-space:nowrap} .spatial-page .flood-point-card .point-body{padding:9px!important} .spatial-page .flood-point-card .point-meta.flood-control-meta{display:none!important} .spatial-page .flood-point-card .point-name-editor.is-dirty .point-name-state{display:inline-flex!important} .spatial-page .flood-point-card .point-name-editor:not(.is-dirty) .point-name-state{display:none!important} .spatial-page .flood-point-card .point-name-editor input.is-dirty{border-color:#d49a00!important;box-shadow:0 0 0 3px rgba(212,154,0,.08)!important} .spatial-page .flood-point-card .flood-point-save:disabled{opacity:.5;cursor:default} /* The entire border can be used to resize; corners get a larger hit target. */ .flood-window-resize-handle{position:absolute!important;z-index:5!important;touch-action:none!important;opacity:0!important;background:transparent!important;border:0!important} .flood-window-resize-handle::before,.flood-window-resize-handle::after{display:none!important} .flood-window-resize-handle.resize-n{left:12px;right:12px;top:-4px;height:9px;cursor:ns-resize} .flood-window-resize-handle.resize-s{left:12px;right:12px;bottom:-4px;height:9px;cursor:ns-resize} .flood-window-resize-handle.resize-e{top:12px;bottom:12px;right:-4px;width:9px;cursor:ew-resize} .flood-window-resize-handle.resize-w{top:12px;bottom:12px;left:-4px;width:9px;cursor:ew-resize} .flood-window-resize-handle.resize-ne{right:-5px;top:-5px;width:16px;height:16px;cursor:nesw-resize} .flood-window-resize-handle.resize-nw{left:-5px;top:-5px;width:16px;height:16px;cursor:nwse-resize} .flood-window-resize-handle.resize-se{right:-5px;bottom:-5px;width:16px;height:16px;cursor:nwse-resize} .flood-window-resize-handle.resize-sw{left:-5px;bottom:-5px;width:16px;height:16px;cursor:nesw-resize} .flood-window.is-minimized .flood-window-resize-handle{display:none!important} @media(max-width:520px){ .flood-window-resize-handle{display:block!important} .spatial-page .flood-point-card>summary{grid-template-columns:25px auto minmax(0,1fr) 14px!important} } /* ============================================================ v1.9 — map-first flood routing polish ============================================================ */ /* The legacy top header is no longer part of the flood-routing workspace. */ .spatial-page #appHeader, .spatial-page #headerHandleShell, .spatial-page #headerRevealZone{display:none!important} /* Theme switch now lives beside the Penelusuran Banjir title, before info. */ .spatial-page .sidebar-title{ grid-template-columns:34px minmax(0,1fr) 26px 26px!important; gap:7px!important; } .spatial-page .sidebar-title-theme, .spatial-page .sidebar-title-info{ width:26px!important;height:26px!important;margin:0!important;padding:0!important; border:1px solid var(--border-color)!important;border-radius:50%!important; background:var(--card-bg)!important;color:var(--primary)!important; display:grid!important;place-items:center!important;align-self:center!important; } .spatial-page .sidebar-title-theme svg, .spatial-page .sidebar-title-info svg{width:13px!important;height:13px!important} .spatial-page .sidebar-title-theme:hover, .spatial-page .sidebar-title-info:hover{background:var(--surface-soft)!important;border-color:var(--border-strong)!important} /* During add/move mode, the whole map canvas keeps the same crosshair state as DTA delineation. */ .spatial-page #map.flood-crosshair-mode .maplibregl-canvas, .spatial-page #map.flood-crosshair-mode .maplibregl-canvas-container, .spatial-page .maplibregl-map.flood-crosshair-mode .maplibregl-canvas, .spatial-page .maplibregl-map.flood-crosshair-mode .maplibregl-canvas-container{cursor:crosshair!important} .spatial-page #map.flood-crosshair-mode.flood-existing-point-hover .maplibregl-canvas, .spatial-page #map.flood-crosshair-mode.flood-existing-point-hover .maplibregl-canvas-container, .spatial-page .maplibregl-map.flood-crosshair-mode.flood-existing-point-hover .maplibregl-canvas, .spatial-page .maplibregl-map.flood-crosshair-mode.flood-existing-point-hover .maplibregl-canvas-container{cursor:pointer!important} /* Flood reach hover uses exactly the compact DTA-hover footprint. */ .spatial-page .flood-reach-hover-popup .maplibregl-popup-content{ min-width:0!important;padding:8px 10px!important;border-radius:9px!important;pointer-events:none!important; } .spatial-page .flood-reach-hover-card{ width:172px!important;min-width:172px!important;max-width:172px!important;min-height:37px!important; display:grid!important;grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas:"river peak" "label label"!important;gap:3px 8px!important;align-items:center!important; } .spatial-page .flood-reach-hover-card .flood-reach-hover-name{ grid-area:river!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important; font-size:11px!important;font-weight:800!important;color:var(--text-strong)!important; } .spatial-page .flood-reach-hover-card>strong{ grid-area:peak!important;font-size:11px!important;font-weight:800!important;color:var(--primary)!important; font-variant-numeric:tabular-nums!important;white-space:nowrap!important; } .spatial-page .flood-reach-hover-card>span:last-child{ grid-area:label!important;font-size:10px!important;color:var(--text-muted)!important;line-height:1.2!important; } /* Side resizing has a generous internal hit target; corners remain supported but are not required. */ .flood-window-resize-handle.resize-n{left:10px!important;right:10px!important;top:0!important;height:11px!important} .flood-window-resize-handle.resize-s{left:10px!important;right:10px!important;bottom:0!important;height:11px!important} .flood-window-resize-handle.resize-e{top:10px!important;bottom:10px!important;right:0!important;width:11px!important} .flood-window-resize-handle.resize-w{top:10px!important;bottom:10px!important;left:0!important;width:11px!important} .flood-window-resize-handle.resize-ne{right:0!important;top:0!important;width:15px!important;height:15px!important} .flood-window-resize-handle.resize-nw{left:0!important;top:0!important;width:15px!important;height:15px!important} .flood-window-resize-handle.resize-se{right:0!important;bottom:0!important;width:15px!important;height:15px!important} .flood-window-resize-handle.resize-sw{left:0!important;bottom:0!important;width:15px!important;height:15px!important} @media(max-width:520px){ .spatial-page .sidebar-title{grid-template-columns:31px minmax(0,1fr) 25px 25px!important;gap:6px!important} } /* ============================================================ v2.1 — docked analysis layout (no draggable/resizable windows) ============================================================ */ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-sidebar, .spatial-page .flood-side-panel{ color:var(--text-main); } .spatial-page .flood-bottom-bar{ position:absolute;z-index:24; left:calc(var(--sidebar-w) + 24px);right:12px;bottom:12px; max-height:min(270px,42%); display:flex;flex-direction:column;min-width:0; background:color-mix(in srgb,var(--card-bg) 98%,transparent); border:1px solid var(--border-color);border-radius:15px; box-shadow:var(--shadow-md);overflow:hidden; transition:left .22s ease,right .18s ease,opacity .15s ease,transform .15s ease; } .sidebar-is-collapsed .flood-bottom-bar{left:12px} .spatial-page .flood-right-open .flood-bottom-bar{right:min(406px,calc(100% - 24px))} .spatial-page .flood-right-sidebar{ position:absolute;z-index:24;top:12px;right:12px;bottom:12px; width:min(382px,calc(100% - var(--sidebar-w) - 48px));min-width:300px; display:flex;flex-direction:column;gap:10px;min-height:0; pointer-events:none; } .spatial-page .flood-right-sidebar>.flood-side-panel{pointer-events:auto} .spatial-page .flood-side-panel{ min-height:0;max-height:calc(50% - 5px); display:flex;flex-direction:column; background:color-mix(in srgb,var(--card-bg) 98%,transparent); border:1px solid var(--border-color);border-radius:15px; box-shadow:var(--shadow-md);overflow:hidden; } .spatial-page .flood-side-panel:only-child{max-height:100%;flex:1} .spatial-page .flood-chart-side-panel{flex:1;min-height:300px} .spatial-page .flood-docked-header{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 13px;border-bottom:1px solid var(--border-color);flex:0 0 auto; } .spatial-page .flood-window-title{min-width:0;display:flex;flex-direction:column;gap:2px} .spatial-page .flood-window-title strong{font-size:.76rem;color:var(--text-strong)} .spatial-page .flood-routing-kicker{font-size:10px;line-height:1.2;letter-spacing:.09em;font-weight:850;color:var(--primary)} .spatial-page .flood-window-head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto} .spatial-page .flood-docked-body{padding:11px 13px;overflow:auto;min-height:0;scrollbar-width:thin} .spatial-page .flood-bottom-body{display:grid;grid-template-columns:minmax(260px,1.35fr) minmax(220px,.9fr);gap:7px 16px;align-items:center} .spatial-page .flood-bottom-body .flood-routing-controls{grid-column:1/-1} .spatial-page .flood-bottom-body .flood-routing-status{min-width:0} .spatial-page .flood-bottom-body .flood-routing-legend{min-width:0} .spatial-page .flood-bottom-body .flood-routing-note{grid-column:1/-1} .spatial-page .flood-window-hide, .spatial-page .flood-chart-reset{ width:28px;height:28px;border:1px solid var(--border-color);border-radius:7px; background:var(--bg-soft);color:var(--text-muted);display:grid;place-items:center;cursor:pointer; } .spatial-page .flood-window-hide svg,.spatial-page .flood-chart-reset svg{width:13px;height:13px} .spatial-page .flood-bottom-bar.is-hidden, .spatial-page .flood-right-sidebar.is-hidden, .spatial-page .flood-side-panel.is-hidden{display:none!important} .spatial-page .flood-window-launcher[aria-pressed="true"]{border-color:var(--primary)!important;background:var(--pu-blue-soft)!important} /* Disable every legacy floating-window interaction affordance. */ .spatial-page .flood-window-resize-handle, .spatial-page .flood-window-drag, .spatial-page .flood-window-minimize{display:none!important} [data-theme="dark"] .spatial-page .flood-bottom-bar, [data-theme="dark"] .spatial-page .flood-side-panel{background:color-mix(in srgb,var(--card-bg) 98%,transparent);border-color:var(--border-color)} @media(max-width:900px){ .spatial-page .flood-right-sidebar{width:min(360px,calc(100% - 24px));min-width:0} .spatial-page .flood-right-open .flood-bottom-bar{right:12px;max-height:34%} .spatial-page .flood-bottom-body{grid-template-columns:1fr} .spatial-page .flood-bottom-body>*{grid-column:1!important} } @media(max-width:700px){ .spatial-page .flood-bottom-bar{left:8px!important;right:8px!important;bottom:8px;max-height:38%} .spatial-page .flood-right-sidebar{top:8px;right:8px;bottom:8px;width:calc(100% - 16px)} .spatial-page .flood-right-open .flood-bottom-bar{display:none} .spatial-page .flood-side-panel{max-height:calc(50% - 5px)} .spatial-page .flood-chart-side-panel{min-height:260px} } .spatial-page .flood-right-sidebar.is-single>.flood-side-panel:not(.is-hidden){max-height:100%;flex:1} /* Keep the docked right analysis sidebar clear of the native map toolbar. */ .spatial-page .flood-right-sidebar{right:58px} .spatial-page .flood-right-open .flood-bottom-bar{right:min(452px,calc(100% - 24px))} @media(max-width:900px){ .spatial-page .flood-right-sidebar{right:58px;width:min(360px,calc(100% - 74px))} .spatial-page .flood-right-open .flood-bottom-bar{right:12px} } @media(max-width:700px){ .spatial-page .flood-right-sidebar{right:52px;width:calc(100% - 60px)} } /* Flood routing Q/Qp legend + Strahler hierarchy (v2.1.7) */ .spatial-page .flood-routing-legend-qratio{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:8px; } .spatial-page .flood-routing-legend-qratio span{ display:grid; grid-template-columns:22px minmax(0,1fr); grid-template-areas:"swatch ratio" "swatch label"; align-items:center; column-gap:6px; min-width:0; padding:6px 7px; border:1px solid var(--border-color); border-radius:8px; background:color-mix(in srgb,var(--card-bg) 94%,var(--primary) 6%); } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch{ grid-area:swatch; width:22px; height:5px; border-radius:999px; box-shadow:0 0 0 1px color-mix(in srgb,var(--text-main) 9%,transparent); } .spatial-page .flood-routing-legend-qratio b{ grid-area:ratio; min-width:0; color:var(--text-main); font-size:10px; line-height:1.15; font-weight:850; white-space:nowrap; } .spatial-page .flood-routing-legend-qratio em{ grid-area:label; min-width:0; color:var(--text-muted); font-size:10px; line-height:1.15; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .spatial-page .flood-legend-swatch.q-baseflow{background:#0e7490} .spatial-page .flood-legend-swatch.q-rising{background:#0369a1} .spatial-page .flood-legend-swatch.q-near-peak{background:#1d4ed8} .spatial-page .flood-legend-swatch.q-peak{background:#dc2626} .spatial-page .flood-legend-swatch.q-falling{ background:repeating-linear-gradient(90deg,#7e22ce 0 7px,transparent 7px 11px); box-shadow:none; border-radius:0; } @media(max-width:900px){ .spatial-page .flood-routing-legend-qratio{grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media(max-width:520px){ .spatial-page .flood-routing-legend-qratio{grid-template-columns:1fr!important} } /* v2.1.7 — keep flood visualization clear of the MapLibre toolbar. */ .spatial-page .flood-bottom-bar{right:58px!important} .spatial-page .flood-right-open .flood-bottom-bar{right:min(452px,calc(100% - 24px))!important} @media(max-width:900px){ .spatial-page .flood-bottom-bar{right:58px!important} .spatial-page .flood-right-open .flood-bottom-bar{right:58px!important} } @media(max-width:700px){ .spatial-page .flood-bottom-bar{right:52px!important} } /* ============================================================ v2.1.8 — topology-aware routing + UI polish ============================================================ */ /* Launchers must inherit the active theme instead of forcing a white card. */ .spatial-page .flood-window-launchers .btn{ background:var(--card-bg)!important;color:var(--text-main)!important; border-color:var(--border-color)!important; } .spatial-page .flood-window-launchers .btn:hover, .spatial-page .flood-window-launchers .btn:focus-visible, .spatial-page .flood-window-launchers .btn[aria-pressed="true"]{ background:var(--surface-soft)!important;color:var(--primary)!important; border-color:color-mix(in srgb,var(--primary) 38%,var(--border-color))!important; } [data-theme="dark"] .spatial-page .flood-window-launchers .btn{ background:color-mix(in srgb,var(--card-bg) 94%,#fff 6%)!important; color:var(--text-main)!important; } /* Single-line panel titles. */ .spatial-page .flood-window-title{justify-content:center} .spatial-page .flood-routing-kicker{font-size:.64rem!important;letter-spacing:.085em!important} /* Empty ready-status rows should not reserve vertical space. */ .spatial-page .flood-routing-status:empty{display:none!important} /* High-contrast routing palette. */ .spatial-page .flood-legend-swatch.q-baseflow{background:#006b78!important} .spatial-page .flood-legend-swatch.q-rising{background:#0050b8!important} .spatial-page .flood-legend-swatch.q-near-peak{background:#3324b8!important} .spatial-page .flood-legend-swatch.q-peak{background:#e00000!important} .spatial-page .flood-legend-swatch.q-falling{ background:repeating-linear-gradient(90deg,#8b00c9 0 7px,transparent 7px 11px)!important; } /* Playback: compact transport controls + a full-width timeline. */ .spatial-page .flood-routing-controls{ display:grid!important;grid-template-columns:auto minmax(180px,1fr) auto!important; align-items:center!important;gap:8px!important; } .spatial-page .flood-playback-buttons{display:flex;align-items:center;gap:4px;min-width:0} .spatial-page .flood-playback-btn, .spatial-page .flood-play-btn{ width:29px!important;height:29px!important;min-width:29px!important;padding:0!important; display:grid!important;place-items:center!important;border:1px solid var(--border-color)!important; border-radius:7px!important;background:var(--card-bg)!important;color:var(--text-main)!important;cursor:pointer; } .spatial-page .flood-play-btn{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important} .spatial-page .flood-playback-btn svg,.spatial-page .flood-play-btn svg{width:13px!important;height:13px!important} .spatial-page .flood-playback-btn{position:relative} .spatial-page .flood-playback-btn>span{position:absolute;font-size:10px;font-weight:900;margin:13px 0 0 15px;line-height:1} .spatial-page .flood-playback-btn:disabled,.spatial-page .flood-play-btn:disabled{opacity:.4;cursor:not-allowed} .spatial-page .flood-speed-label{min-width:31px;text-align:center;font-size:10px;font-weight:850;color:var(--text-muted);font-variant-numeric:tabular-nums} .spatial-page #floodTimeSlider{min-width:120px;width:100%} .spatial-page #floodTimeLabel{min-width:42px;text-align:right;font-size:.64rem;font-variant-numeric:tabular-nums} @media(max-width:820px){ .spatial-page .flood-routing-controls{grid-template-columns:1fr auto!important} .spatial-page .flood-playback-buttons{grid-column:1/-1;justify-content:center;flex-wrap:wrap} } /* Penelusuran summary: location is the primary identity, river + DAS below. */ .spatial-page .flood-observation-card{border-left:3px solid var(--point-color,var(--primary))!important} .spatial-page .flood-observation-card-title{display:grid!important;gap:4px!important;align-items:stretch!important} .spatial-page .flood-observation-location{ display:block;font-size:.69rem;font-weight:850;color:var(--text-strong);line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .spatial-page .flood-observation-river-basin{ display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important; } .spatial-page .flood-observation-river-basin b{font-size:10px!important;font-weight:750!important;color:var(--text-main)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spatial-page .flood-observation-river-basin small{font-size:10px!important;color:var(--text-muted)!important;white-space:nowrap} .spatial-page .flood-segment-warning{grid-column:1/-1;padding:5px 7px;border-radius:6px;background:color-mix(in srgb,#f59e0b 13%,var(--card-bg));color:#9a6700;font-size:10px;line-height:1.35} [data-theme="dark"] .spatial-page .flood-segment-warning{color:#f6c453} /* Wide hover target is implemented in MapLibre; the popup itself can now hold Q-in/Q-out. */ .spatial-page .flood-reach-hover-popup .maplibregl-popup-content{padding:9px 10px!important;pointer-events:none!important} .spatial-page .flood-reach-hover-card{width:226px!important;min-width:226px!important;max-width:226px!important;display:block!important;min-height:0!important} .spatial-page .flood-reach-hover-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px} .spatial-page .flood-reach-hover-heading span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850;color:var(--text-strong)} .spatial-page .flood-reach-hover-heading small{font-size:10px;color:var(--text-muted);font-weight:700} .spatial-page .flood-reach-hover-card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 9px;margin:0} .spatial-page .flood-reach-hover-card dt{font-size:10px;color:var(--text-muted);font-weight:650} .spatial-page .flood-reach-hover-card dd{margin:0;font-size:10px;color:var(--text-strong);font-weight:800;text-align:right;font-variant-numeric:tabular-nums} /* Delineasi-style add-point confirmation. */ .spatial-page .flood-add-point-modal{width:min(430px,100%);padding:22px!important;border-radius:20px!important} .spatial-page .flood-add-modal-head{margin-bottom:12px!important;align-items:center!important} .spatial-page .flood-add-modal-head h2{font-size:19px!important;margin:0!important;color:var(--text-strong)!important} .spatial-page .flood-add-coord-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;margin:4px 0 12px} .spatial-page .flood-add-coord-row code,.spatial-page .flood-add-snapped code{font-size:15px;color:var(--text-muted);background:none;padding:0;font-variant-numeric:tabular-nums} .spatial-page .flood-copy-square{width:48px;height:48px;border-radius:12px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--primary);display:grid;place-items:center;cursor:pointer} .spatial-page .flood-copy-square svg{width:20px;height:20px} .spatial-page .flood-add-snapped{font-size:10px;color:var(--text-muted);margin:0 0 12px} .spatial-page .flood-add-snapped code{font-size:11px} .spatial-page .flood-add-identity{padding:15px;border-radius:11px;background:var(--surface-soft);display:grid;gap:5px;margin-bottom:12px} .spatial-page .flood-add-identity strong{font-size:14px;color:var(--text-strong)} .spatial-page .flood-add-identity span{font-size:10px;color:var(--text-muted)} .spatial-page .flood-add-info,.spatial-page .flood-add-warning{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:11px;margin:9px 0;font-size:11px;line-height:1.35} .spatial-page .flood-add-info{background:color-mix(in srgb,#3b82f6 10%,var(--card-bg));color:var(--text-muted)} .spatial-page .flood-add-warning{background:color-mix(in srgb,#f59e0b 13%,var(--card-bg));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--border-color));color:#8a6110} .spatial-page .flood-add-info svg,.spatial-page .flood-add-warning svg{width:18px;height:18px;flex:0 0 auto} [data-theme="dark"] .spatial-page .flood-add-warning{color:#f6c453} .spatial-page .flood-add-name-label{font-size:14px!important;font-weight:850!important;color:var(--text-strong)!important;margin-top:14px!important} .spatial-page .flood-add-name-label input{height:52px;margin-top:6px;font-size:16px;font-weight:750;border-radius:12px;background:var(--card-bg);color:var(--text-strong);border-color:var(--border-color)} .spatial-page .flood-add-name-hint{font-size:10px;color:var(--text-muted);margin-top:6px} .spatial-page .flood-add-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .spatial-page .flood-add-actions .btn{min-height:48px;border-radius:11px;font-size:14px} .spatial-page .flood-add-actions .btn-neutral{background:var(--surface-soft);color:var(--text-main);border-color:transparent} /* Idle click hydrograph summary. */ .spatial-page .flood-idle-summary{width:260px;color:var(--text-main)} .spatial-page .flood-idle-eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:.09em;color:var(--primary);margin-bottom:3px} .spatial-page .flood-idle-summary>strong{display:block;font-size:13px;color:var(--text-strong);margin-bottom:5px} .spatial-page .flood-idle-river{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--text-muted)} .spatial-page .flood-idle-summary dl{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin:0 0 7px} .spatial-page .flood-idle-summary dt{font-size:10px;color:var(--text-muted)} .spatial-page .flood-idle-summary dd{margin:0;font-size:10px;font-weight:800;color:var(--text-strong);font-variant-numeric:tabular-nums} .spatial-page .flood-idle-spark{display:block;width:100%;height:64px;color:var(--primary);background:var(--surface-soft);border-radius:8px;padding:3px} .spatial-page .flood-idle-spark-empty{padding:12px;text-align:center;background:var(--surface-soft);border-radius:8px;font-size:10px;color:var(--text-muted)} /* ============================================================ v2.1.9 — Delineasi-style map popup + calmer flood rendering ============================================================ */ /* Flow palette: high contrast, no outline/halo layer. */ .spatial-page .flood-legend-swatch.q-baseflow{background:#004b57!important} .spatial-page .flood-legend-swatch.q-rising{background:#0057d9!important} .spatial-page .flood-legend-swatch.q-near-peak{background:#3b28cc!important} .spatial-page .flood-legend-swatch.q-peak{background:#f00000!important} .spatial-page .flood-legend-swatch.q-falling{ background:repeating-linear-gradient(90deg,#9b00d4 0 9px,transparent 9px 16px)!important } /* Add point is a compact map-attached popup, not a screen-blocking modal. */ .spatial-page #floodAddPointModal.flood-add-map-popup{ position:absolute!important;inset:0!important;background:transparent!important; display:block;pointer-events:none!important;z-index:36!important; } .spatial-page #floodAddPointModal.flood-add-map-popup.hidden{display:none!important} .spatial-page #floodAddPointModal .flood-add-point-modal{ position:absolute!important;left:50%;top:50%;transform:translate(-50%,calc(-100% - 18px)); width:246px!important;max-width:calc(100% - 18px)!important;padding:11px 12px 12px!important; border-radius:12px!important;box-shadow:0 10px 28px rgba(15,23,42,.18)!important;pointer-events:auto!important; } .spatial-page #floodAddPointModal .flood-add-point-modal.is-below{transform:translate(-50%,18px)} .spatial-page #floodAddPointModal .flood-add-point-modal::after{ content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:16px;height:16px; background:var(--card-bg);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);rotate:45deg; } .spatial-page #floodAddPointModal .flood-add-point-modal.is-below::after{top:-8px;bottom:auto;border:0;border-left:1px solid var(--border-color);border-top:1px solid var(--border-color)} .spatial-page .flood-add-modal-head{margin-bottom:7px!important} .spatial-page .flood-add-modal-head h2{font-size:12px!important;font-weight:850!important} .spatial-page .flood-add-coord-row{grid-template-columns:minmax(0,1fr) 32px!important;gap:6px!important;margin:2px 0 6px!important} .spatial-page .flood-add-coord-row code{font-size:10px!important} .spatial-page .flood-copy-square{width:32px!important;height:32px!important;border-radius:8px!important} .spatial-page .flood-copy-square svg{width:14px!important;height:14px!important} .spatial-page .flood-add-snapped{font-size:10px!important;margin:0 0 6px!important} .spatial-page .flood-add-snapped code{font-size:10px!important} .spatial-page .flood-add-identity{padding:8px!important;border-radius:8px!important;gap:2px!important;margin-bottom:6px!important} .spatial-page .flood-add-identity strong{font-size:10px!important} .spatial-page .flood-add-identity span{font-size:10px!important} .spatial-page .flood-add-info,.spatial-page .flood-add-warning{gap:6px!important;padding:7px 8px!important;border-radius:8px!important;margin:6px 0!important;font-size:10px!important} .spatial-page .flood-add-info svg,.spatial-page .flood-add-warning svg{width:13px!important;height:13px!important} .spatial-page .flood-add-name-label{font-size:10px!important;margin-top:7px!important} .spatial-page .flood-add-name-label input{height:34px!important;margin-top:3px!important;font-size:10px!important;border-radius:8px!important;padding:0 9px!important} .spatial-page .flood-add-name-hint{font-size:10px!important;margin-top:3px!important} .spatial-page .flood-add-actions{gap:6px!important;margin-top:8px!important} .spatial-page .flood-add-actions .btn{min-height:32px!important;border-radius:8px!important;font-size:10px!important} .spatial-page #floodAddPointCommitBtn:disabled{opacity:.45;cursor:not-allowed} /* Penelusuran card mirrors the sidebar control-point identity. */ .spatial-page .flood-observation-card{border:1px solid var(--border-color)!important;border-left:1px solid var(--border-color)!important;padding:8px!important;border-radius:9px!important} .spatial-page .flood-observation-card-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;margin-bottom:7px} .spatial-page .flood-observation-name-chip{display:inline-flex;align-items:center;max-width:130px;min-height:25px;padding:5px 8px;border-radius:6px;color:#fff;font-size:10px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .spatial-page .flood-observation-river-basin{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;min-width:0} .spatial-page .flood-observation-river-basin b{font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spatial-page .flood-observation-river-basin small{font-size:10px!important} /* Compact idle summary: point summary + real Chart.js hydrograph. */ .spatial-page .flood-idle-summary{width:286px!important;max-width:100%;color:var(--text-main)} .spatial-page .flood-idle-card-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:7px;margin-bottom:7px} .spatial-page .flood-idle-name{display:inline-flex;align-items:center;max-width:120px;padding:5px 7px;border-radius:6px;background:var(--primary);color:#fff;font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spatial-page .flood-idle-card-head>span:last-child{display:grid;gap:1px;min-width:0} .spatial-page .flood-idle-card-head b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spatial-page .flood-idle-card-head small{font-size:10px;color:var(--text-muted)} .spatial-page .flood-idle-summary dl{margin-bottom:6px!important} .spatial-page .flood-idle-chart-wrap{height:112px;border:1px solid var(--border-color);border-radius:8px;padding:4px;background:var(--card-bg)} .spatial-page .flood-idle-chart-wrap canvas{width:100%!important;height:100%!important} /* Expanded hydrograph uses the same modal scale as Definitions/Methodology. */ .spatial-page #floodChartPanel.is-expanded{ position:fixed!important;z-index:70!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important; width:min(960px,calc(100vw - 36px))!important;height:min(78vh,720px)!important;max-height:calc(100vh - 36px)!important; transform:translate(-50%,-50%)!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(2,6,23,.28)!important; } .spatial-page #floodChartPanel.is-expanded .flood-chart-body{height:calc(100% - 42px)!important} .spatial-page #floodChartPanel.is-expanded .flood-observation-hydrograph{height:100%!important;min-height:0!important} /* Hover is deliberately small and contains only time-step metrics. */ .spatial-page .flood-reach-hover-card{width:188px!important;min-width:188px!important;max-width:188px!important} .spatial-page .flood-reach-hover-card dl{margin:0!important} /* Keep DAS labels readable over river lines. */ .spatial-page .maplibregl-map{--basin-label-halo:rgba(255,255,255,.98)} [data-theme="dark"] .spatial-page .flood-legend-swatch.q-baseflow{background:#22d3ee!important} [data-theme="dark"] .spatial-page .flood-legend-swatch.q-rising{background:#38bdf8!important} [data-theme="dark"] .spatial-page .flood-legend-swatch.q-near-peak{background:#818cf8!important} [data-theme="dark"] .spatial-page .flood-legend-swatch.q-peak{background:#ff4d4d!important} [data-theme="dark"] .spatial-page .flood-legend-swatch.q-falling{background:repeating-linear-gradient(90deg,#e879f9 0 9px,transparent 9px 16px)!important} /* ============================================================ v2.2.0 — stable analysis state, modeled-river cartography, pinned chart readouts, and compact map interactions ============================================================ */ /* Visualisasi Aliran keeps one stable footprint. Opening/closing the right analysis sidebar no longer recomputes its width. */ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar{ left:calc(var(--sidebar-w) + 24px)!important; right:auto!important; width:min(568px,calc(100% - var(--sidebar-w) - 94px))!important; max-height:min(286px,44%)!important; } .spatial-page .sidebar-is-collapsed .flood-bottom-bar, .sidebar-is-collapsed .flood-bottom-bar{ left:12px!important; width:min(568px,calc(100% - 82px))!important; } .spatial-page .flood-bottom-body{grid-template-columns:1fr!important;gap:7px!important} .spatial-page .flood-bottom-body>*{grid-column:1!important} .spatial-page .flood-routing-legend-qratio{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important} .spatial-page .flood-routing-legend-qratio span{padding:5px 6px!important;min-height:40px!important;align-content:center} .spatial-page .flood-routing-legend-qratio em{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.15!important} .spatial-page .flood-legend-swatch.q-falling{ background:repeating-linear-gradient(90deg,#9b00d4 0 11px,transparent 11px 20px)!important; } [data-theme="dark"] .spatial-page .flood-legend-swatch.q-falling{ background:repeating-linear-gradient(90deg,#e879f9 0 11px,transparent 11px 20px)!important; } @media(max-width:700px){ .spatial-page .flood-bottom-bar,.spatial-page .flood-right-open .flood-bottom-bar{left:8px!important;right:52px!important;width:auto!important;max-height:40%!important} .spatial-page .flood-routing-legend-qratio{grid-template-columns:repeat(2,minmax(0,1fr))!important} } /* Pinned hover information belongs below the chart help, never over the line. */ .spatial-page .flood-chart-hover-readout, .spatial-page .flood-idle-chart-readout{ min-height:28px;display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px; padding:6px 8px;border:1px solid var(--border-color);border-radius:7px; background:var(--surface-soft);color:var(--text-muted);font-size:10px;line-height:1.25; } .spatial-page .flood-chart-hover-readout strong, .spatial-page .flood-idle-chart-readout strong{color:var(--text-strong);font-weight:850} .spatial-page .flood-chart-hover-readout span, .spatial-page .flood-idle-chart-readout span{display:inline-flex;align-items:center;gap:4px;min-width:0} .spatial-page .flood-chart-hover-readout i, .spatial-page .flood-idle-chart-readout i{width:8px;height:8px;border-radius:50%;background:#1d70b8;flex:0 0 auto} .spatial-page .flood-idle-chart-help{font-size:10px;line-height:1.3;color:var(--text-muted);margin:2px 0 4px} .spatial-page .flood-idle-chart-readout{font-size:10px;min-height:25px;margin-bottom:5px;padding:5px 6px} .spatial-page .flood-idle-chart-wrap{height:145px!important} /* Expanded hydrograph owns a true modal stacking context and gray backdrop. */ .spatial-page .flood-chart-backdrop{ position:fixed;inset:0;z-index:78;background:rgba(15,23,42,.42);backdrop-filter:blur(1px); } .spatial-page .flood-chart-backdrop.hidden{display:none!important} .spatial-page .flood-right-sidebar.has-expanded-chart{ position:fixed!important;inset:0!important;width:auto!important;min-width:0!important;z-index:79!important; pointer-events:none!important; } .spatial-page .flood-right-sidebar.has-expanded-chart #floodChartPanel.is-expanded{pointer-events:auto!important;z-index:80!important} /* Compact point popup remains inside the map viewport. Inline JS sets its top and left after measuring the actual card height. */ .spatial-page #floodAddPointModal .flood-add-point-modal{ transform:none!important; max-height:calc(100% - 16px)!important; overflow-y:auto!important; overscroll-behavior:contain; } .spatial-page #floodAddPointModal .flood-add-point-modal.is-below{transform:none!important} .spatial-page #floodAddPointModal .flood-add-point-modal::after{left:var(--popup-arrow-x,50%)!important} .spatial-page .flood-add-name-warning{font-size:10px;color:#b42318;font-weight:750;margin-top:3px} [data-theme="dark"] .spatial-page .flood-add-name-warning{color:#fda29b} /* Existing control-point popup mirrors the sidebar card and exposes the same practical actions without allowing a map-inspection popup to overlap it. */ .spatial-page .flood-control-point-popup .maplibregl-popup-content{padding:9px!important;width:270px!important;max-width:calc(100vw - 28px)!important} .spatial-page .flood-control-map-card{display:grid;gap:7px;color:var(--text-main)} .spatial-page .flood-control-map-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:center;padding-bottom:6px;border-bottom:1px solid var(--border-color)} .spatial-page .flood-control-map-head .flood-observation-name-chip{background:var(--point-color)!important;color:#fff!important;max-width:115px!important} .spatial-page .flood-control-map-head>span:last-child{display:grid;gap:1px;min-width:0} .spatial-page .flood-control-map-head b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-strong)} .spatial-page .flood-control-map-head small{font-size:10px;color:var(--text-muted)} .spatial-page .flood-control-map-card dl{display:grid;grid-template-columns:1fr auto;gap:3px 8px;margin:0} .spatial-page .flood-control-map-card dt{font-size:10px;color:var(--text-muted)} .spatial-page .flood-control-map-card dd{margin:0;font-size:10px;font-weight:850;color:var(--text-strong);font-variant-numeric:tabular-nums} .spatial-page .flood-control-popup-name{display:grid;gap:3px;font-size:10px;font-weight:800;color:var(--text-muted)} .spatial-page .flood-control-popup-name>div{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:5px} .spatial-page .flood-control-popup-name input{height:31px;border:1px solid var(--border-strong);border-radius:7px;background:var(--input-bg);color:var(--text-main);padding:0 8px;font-size:10px;min-width:0} .spatial-page .flood-control-popup-save{height:31px;border:1px solid var(--border-color);border-radius:7px;background:var(--primary);color:#fff;display:grid;place-items:center} .spatial-page .flood-control-popup-save:disabled{opacity:.38} .spatial-page .flood-control-popup-save svg{width:13px;height:13px} .spatial-page .flood-control-popup-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative} .spatial-page .flood-control-popup-actions button{min-width:0;min-height:38px;padding:4px 2px;border:1px solid var(--border-color);border-radius:7px;background:var(--surface-soft);color:var(--text-main);display:grid;place-items:center;gap:2px;font-size:10px;font-weight:750;cursor:pointer} .spatial-page .flood-control-popup-actions button svg{width:12px;height:12px} .spatial-page .flood-control-popup-actions button.danger{color:#b42318} .spatial-page .flood-control-popup-color{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* Preferences need a real vertical gap between the two selects. */ .spatial-page .analysis-preferences.settings-group-divider{gap:10px!important} /* Dark-mode contrast fixes for controls/cards that previously inherited light foregrounds or overly translucent surfaces. */ [data-theme="dark"] .spatial-page .flood-observation-card, [data-theme="dark"] .spatial-page .flood-idle-chart-wrap, [data-theme="dark"] .spatial-page .flood-control-map-card{ color:var(--text-main)!important; } [data-theme="dark"] .spatial-page .flood-chart-hover-readout, [data-theme="dark"] .spatial-page .flood-idle-chart-readout, [data-theme="dark"] .spatial-page .flood-control-popup-actions button{ background:color-mix(in srgb,var(--card-bg) 88%,#fff 12%)!important; border-color:color-mix(in srgb,var(--border-color) 80%,#fff 20%)!important; color:var(--text-main)!important; } [data-theme="dark"] .spatial-page .flood-window-hide, [data-theme="dark"] .spatial-page .flood-chart-reset, [data-theme="dark"] .spatial-page .flood-playback-btn, [data-theme="dark"] .spatial-page .flood-play-btn{ color:var(--text-main)!important; border-color:color-mix(in srgb,var(--border-color) 76%,#fff 24%)!important; } /* ============================================================ v2.2.1 — stable hover/popup, fixed flood bar and DTA-like point card ============================================================ */ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar{ width:min(568px,calc(100% - var(--sidebar-w) - 94px))!important; max-height:320px!important; min-width:0!important; overflow:hidden!important; } .spatial-page .flood-bottom-bar .flood-docked-body{overflow-y:auto!important;overflow-x:hidden!important;min-height:0} .spatial-page .flood-routing-legend-qratio{ grid-template-columns:repeat(3,minmax(0,1fr))!important; align-items:stretch!important; } .spatial-page .flood-routing-legend-qratio span{min-width:0!important;overflow:visible!important} .spatial-page .flood-routing-legend-qratio b, .spatial-page .flood-routing-legend-qratio em{display:block!important;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .spatial-page .flood-chart-hover-readout, .spatial-page .flood-idle-chart-readout{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:3px!important} .spatial-page .flood-chart-hover-readout>strong, .spatial-page .flood-idle-chart-readout>strong{display:block!important;width:100%!important} .spatial-page .flood-chart-hover-readout>span, .spatial-page .flood-idle-chart-readout>span{display:flex!important;width:100%!important;align-items:center!important;gap:5px!important} .spatial-page .flood-chart-hover-readout>span>span, .spatial-page .flood-idle-chart-readout>span>span{display:inline!important;min-width:0!important} /* The add-point card is map-attached, deliberately small, and has no custom diamond/pseudo-arrow artifact. JS keeps it inside the current map viewport. */ .spatial-page #floodAddPointModal{pointer-events:none!important} .spatial-page #floodAddPointModal .flood-add-point-modal{ width:246px!important;max-width:calc(100% - 16px)!important; max-height:calc(100% - 16px)!important;overflow-y:auto!important; padding:10px!important;border-radius:12px!important;pointer-events:auto!important; } .spatial-page #floodAddPointModal .flood-add-point-modal::after{display:none!important;content:none!important} .spatial-page #floodAddPointModal .flood-add-modal-head{margin-bottom:5px!important} .spatial-page #floodAddPointModal .flood-add-modal-head h2{font-size:11px!important} .spatial-page #floodAddPointModal .flood-add-name-warning{display:none!important} /* Hover card itself is reused while the cursor crosses routing reaches. */ .spatial-page .flood-reach-hover-popup .maplibregl-popup-content{min-width:190px!important} @media(max-width:700px){ .spatial-page .flood-routing-legend-qratio{grid-template-columns:repeat(2,minmax(0,1fr))!important} .spatial-page #floodAddPointModal .flood-add-point-modal{width:min(246px,calc(100% - 16px))!important} } /* ============================================================ v2.2.1-r3 — formatting, stable chart modal, hover + typography fixes ============================================================ */ /* Name length remains visible even though maxlength=25 prevents overflow. */ .spatial-page .point-name-feedback{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0} .spatial-page .point-name-limit-hint{font-size:10px!important;font-weight:700;line-height:1.2;color:var(--text-muted);white-space:nowrap} .spatial-page #floodAddPointModal .flood-add-name-warning{display:block!important;font-size:10px!important;line-height:1.25;color:var(--text-muted);margin-top:3px} .spatial-page .flood-control-popup-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .spatial-page .flood-control-popup-name-row .point-name-limit-hint{margin-left:auto} /* The hit layer is interaction-only; it must never create a visible shadow. */ .spatial-page .flood-reach-hover-popup{transition:opacity 120ms ease-out!important;opacity:1} .spatial-page .flood-reach-hover-popup.is-leaving{opacity:0!important} /* The chart panel is portaled to the workspace while expanded. The right-side Penelusuran Aliran panel therefore keeps exactly the same docked geometry. */ .spatial-page #floodChartPanel.is-expanded{z-index:80!important} /* Final flood UI typography guard for selectors appended after older compact rules. */ .spatial-page .flood-reach-hover-heading small, .spatial-page .flood-reach-hover-card dt, .spatial-page .flood-reach-hover-card dd, .spatial-page .flood-add-name-warning, .spatial-page .flood-control-map-head small, .spatial-page .flood-control-map-card dt, .spatial-page .flood-control-map-card dd, .spatial-page .flood-control-popup-name, .spatial-page .flood-control-popup-name input, .spatial-page .flood-control-popup-actions button, .spatial-page .flood-idle-card-head small, .spatial-page .flood-idle-chart-help, .spatial-page .flood-idle-chart-readout, .spatial-page .flood-chart-hover-readout{font-size:10px!important} /* ============================================================ v2.2.1-r4 — responsive flood bar, adaptive chart space, conditional name-state feedback, and DTA-like control cards ============================================================ */ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar{ left:calc(var(--sidebar-w) + 1.25vw)!important; right:auto!important; width:min(44vw,calc(100% - var(--sidebar-w) - 5.5vw))!important; min-height:22vh!important; max-height:34vh!important; } .sidebar-is-collapsed .flood-bottom-bar, .spatial-page .sidebar-is-collapsed .flood-bottom-bar{ left:1vw!important; width:min(48vw,calc(100% - 7vw))!important; } @media(max-width:900px){ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar{ width:min(52vw,calc(100% - var(--sidebar-w) - 7vw))!important; min-height:24vh!important; max-height:37vh!important; } } @media(max-width:700px){ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar{ left:1vw!important; right:4rem!important; width:auto!important; min-height:25vh!important; max-height:42vh!important; } } .spatial-page #floodChartPanel .flood-docked-body{overflow:hidden!important} .spatial-page .flood-chart-body{ display:flex!important; flex-direction:column!important; gap:.5rem!important; height:100%!important; min-height:0!important; } .spatial-page .flood-chart-help, .spatial-page .flood-chart-hover-readout{flex:0 0 auto!important} .spatial-page .flood-chart-hover-readout{ max-height:34%!important; overflow:auto!important; overscroll-behavior:contain; } .spatial-page .flood-observation-hydrograph{ flex:1 1 auto!important; height:auto!important; min-height:15rem!important; } .spatial-page .flood-right-sidebar.is-chart-priority #floodObservationPanel .flood-docked-body{overflow:auto!important} .spatial-page .flood-right-sidebar.is-chart-priority #floodChartPanel .flood-docked-body{overflow:hidden!important} .spatial-page .point-name-feedback{display:inline-flex;align-items:center;justify-content:flex-end;gap:.35rem;min-width:0} .spatial-page .point-name-limit-hint.hidden, .spatial-page .point-name-state.hidden, .spatial-page #floodAddPointNameWarning.hidden{display:none!important} .spatial-page .point-name-state{font-size:.625rem!important;font-weight:750;color:#b26a00;white-space:nowrap} .spatial-page .point-name-limit-hint{font-size:.625rem!important;color:var(--text-muted);white-space:nowrap} .spatial-page #floodAddPointNameWarning{color:#9a6500!important;font-size:.625rem!important} .spatial-page #floodAddPointNameWarning.hidden{display:none!important} .spatial-page #floodAddPointModal .flood-add-name-warning{margin-top:.25rem!important} .spatial-page .flood-control-popup-name .point-name-state:not(.hidden){ display:inline-flex!important; align-items:center!important; padding:2px 7px!important; border-radius:999px!important; background:#fff3cd!important; color:#8a6500!important; font-size:.625rem!important; font-weight:750!important; white-space:nowrap!important; } .spatial-page .flood-point-card, .spatial-page .flood-control-point-popup .maplibregl-popup-content{ border-radius:12px!important; } .spatial-page .flood-point-card{ border:1px solid var(--border-color)!important; box-shadow:none!important; overflow:hidden!important; } .spatial-page .flood-point-card>summary{ background:color-mix(in srgb,var(--card-bg) 92%,var(--surface-soft) 8%)!important; padding:.7rem .75rem!important; } .spatial-page .flood-point-card[open]>summary, .spatial-page .flood-point-card>summary:hover{ background:color-mix(in srgb,var(--card-bg) 88%,var(--surface-soft) 12%)!important; } .spatial-page .flood-point-card .point-body{ border-top:1px solid var(--border-color)!important; padding:.75rem!important; } .spatial-page .flood-point-card .point-edit-label-row, .spatial-page .flood-control-popup-name-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:.5rem!important; font-size:.72rem!important; font-weight:800!important; color:var(--text-main)!important; } .spatial-page .flood-point-card .point-name-grid input, .spatial-page .flood-control-popup-name input{ height:2.2rem!important; border-radius:.55rem!important; font-size:.82rem!important; } .spatial-page .flood-point-card .flood-point-save, .spatial-page .flood-control-popup-save{ border-radius:.55rem!important; } .spatial-page .flood-point-card .point-action-label{ margin-top:.2rem!important; margin-bottom:.45rem!important; font-size:.72rem!important; font-weight:800!important; color:var(--text-main)!important; } .spatial-page .flood-point-card .flood-point-action, .spatial-page .flood-control-popup-actions button{ min-height:2.2rem!important; border-radius:.55rem!important; background:var(--card-bg)!important; color:var(--text-main)!important; } .spatial-page .flood-point-card .flood-point-action.danger, .spatial-page .flood-control-popup-actions button.danger{color:#c0392b!important} .spatial-page .flood-control-point-chip{ min-width:max-content!important; max-width:7.5rem!important; padding:.35rem .55rem!important; height:auto!important; line-height:1.15!important; } .spatial-page .flood-control-map-card, .spatial-page .flood-control-map-head b, .spatial-page .flood-control-map-head small, .spatial-page .flood-control-map-card dt, .spatial-page .flood-control-map-card dd, .spatial-page .flood-control-popup-name, .spatial-page .flood-control-popup-actions button{ font-size:.72rem!important; } /* ============================================================ v2.2.1-r5 — static 10-class flow, hydrograph export, observation-card alignment, and hydrology definitions ============================================================ */ .spatial-page .flood-routing-legend-qratio{ grid-template-columns:repeat(5,minmax(0,1fr))!important; } .spatial-page .flood-routing-legend-qratio span{ min-height:34px!important; padding:4px 6px!important; } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch{ width:22px!important; border-radius:999px!important; background:#1d70b8!important; box-shadow:none!important; align-self:center!important; } .spatial-page .flood-legend-swatch.q-width-0{height:1.5px!important} .spatial-page .flood-legend-swatch.q-width-1{height:1.8px!important} .spatial-page .flood-legend-swatch.q-width-2{height:2.1px!important} .spatial-page .flood-legend-swatch.q-width-3{height:2.4px!important} .spatial-page .flood-legend-swatch.q-width-4{height:2.7px!important} .spatial-page .flood-legend-swatch.q-width-5{height:3.0px!important} .spatial-page .flood-legend-swatch.q-width-6{height:3.4px!important} .spatial-page .flood-legend-swatch.q-width-7{height:3.8px!important} .spatial-page .flood-legend-swatch.q-width-8{height:4.3px!important} .spatial-page .flood-legend-swatch.q-width-9{height:4.9px!important} [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch{background:#38bdf8!important} @media(max-width:900px){.spatial-page .flood-routing-legend-qratio{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:520px){.spatial-page .flood-routing-legend-qratio{grid-template-columns:1fr!important}} /* Titik Kontrol in Penelusuran Aliran: name, river, and DAS on one row. */ .spatial-page .flood-observation-card-head{ display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; gap:8px!important; align-items:center!important; margin-bottom:7px!important; } .spatial-page .flood-observation-name-chip{ min-width:0!important; max-width:110px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .spatial-page .flood-observation-river{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:10px!important; font-weight:800!important; color:var(--text-strong)!important; } .spatial-page .flood-observation-basin{ justify-self:end!important; white-space:nowrap!important; font-size:10px!important; font-weight:600!important; color:var(--text-muted)!important; } .spatial-page .flood-observation-card dd{ font-weight:850!important; color:var(--text-strong)!important; } /* Hydrograph Excel export action. */ .spatial-page .flood-chart-download{ min-height:28px!important; height:28px!important; padding:0 8px!important; border:1px solid var(--border-color)!important; border-radius:7px!important; background:var(--bg-soft)!important; color:var(--text-muted)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; font:inherit!important; font-size:10px!important; font-weight:800!important; cursor:pointer!important; white-space:nowrap!important; } .spatial-page .flood-chart-download svg{width:13px!important;height:13px!important} .spatial-page .flood-chart-download:hover,.spatial-page .flood-chart-download:focus-visible{ background:var(--surface-soft)!important; color:var(--text-main)!important; outline:none!important; } .spatial-page .flood-chart-download:disabled{opacity:.55!important;cursor:wait!important} @media(max-width:420px){.spatial-page .flood-chart-download span{display:none!important}} /* Expanded hydrology glossary + conceptual hydrograph. */ .spatial-page .hydrology-definition-modal{ width:min(940px,calc(100vw - 36px))!important; max-width:940px!important; max-height:calc(100vh - 36px)!important; overflow:auto!important; } .spatial-page .hydrograph-definition-figure{ margin:4px 0 14px!important; padding:12px!important; border:1px solid var(--border-color)!important; border-radius:12px!important; background:var(--surface-soft)!important; } .spatial-page .hydrograph-definition-figure figcaption{display:grid;gap:2px;margin-bottom:8px} .spatial-page .hydrograph-definition-figure figcaption b{font-size:12px;color:var(--text-strong)} .spatial-page .hydrograph-definition-figure figcaption span{font-size:10px;color:var(--text-muted)} .spatial-page .hydrograph-definition-figure svg{display:block;width:100%;height:auto;max-height:330px} .spatial-page .hydro-axis{stroke:var(--text-muted);stroke-width:1.4} .spatial-page .hydro-base-line{stroke:#0e7490;stroke-width:1.5;stroke-dasharray:5 4} .spatial-page .hydro-curve{fill:none;stroke:#1d70b8;stroke-width:4;stroke-linecap:round} .spatial-page .hydro-guide{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:4 4} .spatial-page .hydro-peak{fill:#dc2626} .spatial-page .hydro-arrow-line{stroke:var(--text-muted);stroke-width:1.2} .spatial-page .hydro-label{fill:var(--text-main);font-size:12px;font-weight:700} .spatial-page .hydro-label.small{font-size:10px;font-weight:600;fill:var(--text-muted)} .spatial-page .hydro-axis-label{fill:var(--text-muted);font-size:10px;font-weight:700} .spatial-page .hydro-axis-label.rotate{transform:rotate(-90deg);transform-origin:20px 188px} .spatial-page .hydrology-term-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .spatial-page .hydrology-term-grid article{ margin:0!important; padding:10px!important; border:1px solid var(--border-color)!important; border-radius:9px!important; background:var(--card-bg)!important; } .spatial-page .hydrology-term-grid h3{margin:0 0 4px!important;font-size:11px!important;color:var(--text-strong)!important} .spatial-page .hydrology-term-grid h3 span{font-weight:650!important;color:var(--text-muted)!important} .spatial-page .hydrology-term-grid p{margin:0!important;font-size:10px!important;line-height:1.55!important;color:var(--text-main)!important} @media(max-width:650px){.spatial-page .hydrology-term-grid{grid-template-columns:1fr}.spatial-page .hydro-label{font-size:10px}} /* ============================================================ v2.2.1-r5.1 — restore previous five-class flow classification while keeping all river strokes solid and animation-free. ============================================================ */ .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-baseflow{ height:2px!important;background:#004b57!important; } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-rising{ height:2.5px!important;background:#0057d9!important; } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-near-peak{ height:3px!important;background:#3b28cc!important; } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-peak{ height:3.8px!important;background:#f00000!important; } .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-falling{ height:3px!important;background:#9b00d4!important; } [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-baseflow{background:#22d3ee!important} [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-rising{background:#38bdf8!important} [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-near-peak{background:#818cf8!important} [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-peak{background:#ff4d4d!important} [data-theme="dark"] .spatial-page .flood-routing-legend-qratio .flood-legend-swatch.q-falling{background:#e879f9!important} /* ============================================================ v2.2.1-r5.2 — hydrograph button polish, stable expand overlay, glossary figures, and richer flow hover card ============================================================ */ .spatial-page .flood-window-head-actions{gap:4px!important;flex-wrap:nowrap!important;min-width:0!important} .spatial-page .flood-chart-download{ min-height:30px!important; height:30px!important; padding:0 10px!important; border:1px solid var(--pu-yellow)!important; border-radius:8px!important; background:var(--pu-yellow)!important; color:var(--pu-navy)!important; flex:0 0 auto!important; box-shadow:none!important; } .spatial-page .flood-chart-download svg{width:14px!important;height:14px!important;color:#223468!important;stroke:#223468!important} .spatial-page .flood-chart-download:hover, .spatial-page .flood-chart-download:focus-visible{ background:var(--secondary-action-hover)!important; color:var(--pu-navy)!important; border-color:var(--secondary-action-hover)!important; } .spatial-page .flood-chart-download:disabled, .spatial-page .flood-chart-download:disabled:hover{ background:var(--bg-soft)!important; color:var(--text-muted)!important; border-color:var(--border-color)!important; cursor:not-allowed!important; opacity:.7!important; } .spatial-page .flood-chart-download:disabled svg{color:var(--text-muted)!important;stroke:var(--text-muted)!important} @media(max-width:520px){.spatial-page .flood-chart-download{padding:0 8px!important;font-size:10px!important}} @media(max-width:460px){.spatial-page .flood-chart-download span{display:none!important}} .spatial-page .flood-reach-hover-card{width:214px!important;min-width:214px!important;max-width:214px!important} .spatial-page .flood-reach-hover-title{display:block!important;margin:0 0 6px!important;font-size:11px!important;line-height:1.3!important;font-weight:850!important;color:var(--text-strong)!important} .spatial-page .flood-reach-hover-card dt{white-space:normal!important} .spatial-page .hydrology-concept-figure svg{max-height:360px!important} .spatial-page .hydro-curve.upstream{stroke:#1d70b8!important;stroke-width:4!important;fill:none!important} .spatial-page .hydro-curve.downstream{stroke:#d94841!important;stroke-width:4!important;fill:none!important} .spatial-page .hydro-curve.runoff{stroke:#0057d9!important;stroke-width:4!important;fill:none!important} .spatial-page .hydro-guide.upstream, .spatial-page .hydro-peak.upstream{stroke:#1d70b8!important;fill:#1d70b8!important} .spatial-page .hydro-guide.downstream, .spatial-page .hydro-peak.downstream{stroke:#d94841!important;fill:#d94841!important} .spatial-page .hydro-peak.runoff{stroke:#0057d9!important;fill:#0057d9!important} .spatial-page .hyeto-bar{fill:#7a5c00!important;opacity:.76!important} .spatial-page .hydrology-definition-modal .modal-head{margin-bottom:6px!important} /* v2.2.1-r5.3 — hover river naming, peak-difference wording, and chart header layout */ .spatial-page .flood-chart-head-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;min-width:0} .spatial-page .flood-chart-head-tools>.flood-window-head-actions{flex:0 0 auto} .spatial-page .flood-docked-header{gap:10px} .spatial-page .flood-docked-header>.flood-window-title{flex:1 1 auto;min-width:0} .spatial-page .flood-chart-download{width:auto!important;max-width:none!important;flex:0 0 auto!important} .spatial-page .flood-idle-card-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important} .spatial-page .flood-idle-name{min-width:0!important;max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} .spatial-page .flood-idle-river{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;color:var(--text-strong)!important} .spatial-page .flood-idle-basin{justify-self:end!important;white-space:nowrap!important;font-size:10px!important;color:var(--text-muted)!important} .spatial-page .flood-idle-chart-readout{margin-top:2px!important} @media(max-width:560px){ .spatial-page .flood-chart-head-tools{gap:4px!important} .spatial-page .flood-chart-download{padding:0 9px!important} } /* v2.2.1-r5.4 — popup header alignment, stable hover card, divisible chart axis */ .spatial-page .flood-control-point-popup .maplibregl-popup-content{width:300px!important;max-width:min(300px,calc(100vw - 28px))!important} .spatial-page .flood-control-map-head{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;padding-bottom:0!important;margin-bottom:2px!important;border-bottom:0!important} .spatial-page .flood-control-map-head .flood-observation-name-chip{max-width:132px!important} .spatial-page .flood-control-map-river{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;color:var(--text-strong)!important;text-align:left!important} .spatial-page .flood-control-map-basin{justify-self:end!important;white-space:nowrap!important;font-size:10px!important;color:var(--text-muted)!important;text-align:right!important} .spatial-page .flood-reach-hover-card{width:214px!important;min-width:214px!important;max-width:214px!important} .spatial-page .flood-reach-hover-title{display:block!important;margin:0 0 7px!important;font-size:11px!important;line-height:1.2!important;font-weight:850!important;color:var(--text-strong)!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .spatial-page .flood-reach-hover-card dl{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px 10px!important;margin:0!important;align-items:start!important} .spatial-page .flood-reach-hover-card dt{text-align:left!important;line-height:1.25!important} .spatial-page .flood-reach-hover-card dd{text-align:right!important;line-height:1.25!important} /* Keep only the river name left-aligned; metric values remain right-aligned. */ .spatial-page .flood-reach-hover-card .flood-reach-hover-title{ width:100%!important; text-align:left!important; justify-self:start!important; } .spatial-page .flood-reach-hover-card dl{ padding-right:16px!important; } /* Keep hover text crisp at fractional zoom levels: no composited animation, transform, or forced antialiasing on the popup content. */ .spatial-page .flood-reach-hover-popup .maplibregl-popup-content{ animation:none!important; transform:none!important; filter:none!important; will-change:auto!important; -webkit-font-smoothing:auto!important; text-rendering:auto!important; } /* Metodologi: alur model dibuat mudah dipindai oleh pengguna pemula. */ .methodology-modal pre{margin:10px 0 14px;padding:14px 16px;background:#f4f7fa;border-radius:5px;overflow:auto;white-space:pre-wrap}.methodology-modal pre code{font:inherit;color:#17283f} /* v2.2.3 — keep routing tools mutually usable across desktop, tablet, and phone. */ @media (min-width:1101px){ .spatial-page .flood-right-open .flood-bottom-bar{ width:min(44vw,calc(100% - var(--sidebar-w) - 29rem))!important; } } @media (max-width:1100px){ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar, .sidebar-is-collapsed .flood-bottom-bar, .spatial-page .sidebar-is-collapsed .flood-bottom-bar{ left:12px!important; right:58px!important; width:auto!important; max-width:none!important; z-index:30!important; } .spatial-page .flood-right-sidebar{ left:12px!important; right:58px!important; width:auto!important; max-width:none!important; z-index:30!important; } } @media (max-width:700px){ .spatial-page .flood-bottom-bar, .spatial-page .flood-right-open .flood-bottom-bar, .sidebar-is-collapsed .flood-bottom-bar, .spatial-page .sidebar-is-collapsed .flood-bottom-bar{ left:8px!important; right:52px!important; } .spatial-page .flood-right-sidebar{ left:8px!important; right:52px!important; } }