:root{--bg: #f7faf7;--text: #1f2a1f;--muted: #526052;--surface: #ffffff;--brand: #2e7d32;--brand-dark: #1b5e20;--brand-contrast: #ffffff}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:16px;line-height:1.6;color:#333;background:#f7f9fb;margin:0;padding:0;display:flex;justify-content:center;min-height:100vh}#root{width:100%;max-width:1400px}.app-container{max-width:1400px;margin:0 auto;padding:20px}h1,h2,h3{font-weight:600;color:#222;margin-bottom:.5em}p{margin-bottom:1em;color:#555}a{color:var(--brand);text-decoration:none;transition:color .2s}a:hover{color:var(--brand-dark);text-decoration:underline}.section{margin:16px 0 20px}.card{background:var(--surface);border-radius:10px;border:1px solid #eee;box-shadow:0 2px 8px #0000000f}.card--padded{padding:16px}.hero{text-align:center;margin-bottom:12px}.hero h1{margin:0 0 8px}.intro{max-width:900px;margin:8px auto 0;color:var(--muted)}.section-title{margin:0 0 12px;text-align:center}.controls{display:none}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;margin:16px auto 20px;max-width:1000px}.controls label{font-weight:500;margin-right:5px}.toolbar select,.toolbar button,.toolbar input[type=text]{padding:8px 14px;font-size:14px;border-radius:6px;border:1px solid #ccc;outline:none;transition:all .2s}.toolbar select:hover,.toolbar button:hover,.toolbar input[type=text]:hover{border-color:var(--brand);box-shadow:0 2px 6px #00000014}.toolbar button{background-color:var(--brand);color:var(--brand-contrast);cursor:pointer;font-weight:500;border:none}.toolbar button:hover{background-color:var(--brand-dark)}.toolbar .input{min-width:260px}.chip-group{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{padding:6px 10px;border-radius:9999px;border:1px solid #ddd;background:#fff;color:#000;cursor:pointer}.chip--active{border-color:var(--brand);background:#eaf6ea}.toggle-btn{margin:4px;padding:6px 12px;border:1px solid #888;border-radius:4px;background-color:var(--brand);cursor:pointer}.toggle-btn.active{background-color:var(--brand);color:#fff;border-color:var(--brand)}#pager{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:960px;margin:12px auto;font-size:14px;color:#444}#pager button{padding:6px 12px;font-size:14px;border-radius:5px}.pager-actions{display:flex;gap:8px;align-items:center}#table-wrapper{margin-bottom:20px;background:var(--surface);border-radius:8px;box-shadow:0 2px 8px #0000000f;overflow:hidden;transition:all .3s ease;max-width:1200px;margin-left:auto;margin-right:auto}#table-scroll{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;min-width:800px}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #e0e0e0;white-space:nowrap;transition:background .2s}.header-content{display:block;max-width:var(--table-cell-max, 320px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-content{display:block;max-width:var(--table-cell-max, 320px);overflow-x:auto;overflow-y:hidden;white-space:nowrap}.cell-content--multiline{max-width:var(--table-cell-max, 320px);white-space:normal;overflow-x:hidden;overflow-y:auto;max-height:140px}.uc-row{margin:2px 0;font-size:12px;line-height:1.4}.uc-label{font-weight:600;color:#374151;margin-right:4px}.uc-domains{color:#4b5563}.uc-more{color:#6b7280}th{background-color:#f2f6fa;position:sticky;top:0;z-index:1;font-weight:600;color:#333;text-align:left}td{color:#555}tr:hover{background-color:#f5faff;cursor:default}tbody tr:nth-child(2n){background:#fafcff}td.Reasons_Non_Compliant{color:#d9534f;font-weight:500}th.col-sticky,td.col-sticky{position:sticky;left:0}th.col-sticky{z-index:3;background:#f2f6fa;box-shadow:4px 0 6px #0000000f;border-right:1px solid #dfe6ec}td.col-sticky{z-index:2;background:var(--surface);box-shadow:4px 0 6px #0000000f;border-right:1px solid #dfe6ec}tbody tr:nth-child(2n) td.col-sticky{background:#fafcff}tbody tr:hover td.col-sticky{background:#f5faff!important}.compact-filters{background:var(--surface);border-radius:10px;border:1px solid #eee;box-shadow:0 2px 8px #0000000f;overflow:hidden;max-width:1200px;margin:16px auto 20px}.filter-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #e9ecef}.filter-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.toggle-filters-btn{padding:6px 12px;font-size:12px;border-radius:4px;border:1px solid var(--brand);background-color:var(--brand);color:var(--brand-contrast);cursor:pointer;font-weight:500;transition:all .2s}.toggle-filters-btn:hover{background-color:var(--brand-dark);border-color:var(--brand-dark)}.filter-content{padding:16px}.filter-controls{display:flex;gap:8px;margin-bottom:12px}.compact-btn{padding:4px 12px;font-size:12px;border-radius:4px;border:1px solid #ccc;background-color:#fff;color:#333;cursor:pointer;font-weight:500;transition:all .2s}.compact-btn:hover{border-color:var(--brand);background-color:#e8f3ea;color:var(--brand)}.compact-btn:disabled{opacity:.5;cursor:not-allowed}.reason-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}.reason-filter-btn{padding:6px 10px;font-size:11px;border-radius:4px;border:1px solid #ddd;background-color:#fff;color:#555;cursor:pointer;font-weight:400;transition:all .2s;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reason-filter-btn:hover{border-color:var(--brand);background-color:#f8f9fa;color:var(--brand)}.reason-filter-btn.active{background-color:var(--brand);border-color:var(--brand);color:var(--brand-contrast);font-weight:500}.chart-area{height:360px}.column-picker{max-width:1000px;margin:12px auto 20px}.column-picker-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.column-picker-actions{display:flex;gap:8px}.column-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.column-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #eee;border-radius:8px;background:var(--surface)}.column-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1000px;margin:12px auto 20px}.kpi{background:var(--surface);border:1px solid #eee;border-radius:10px;padding:12px 14px;text-align:center}.kpi-value{font-size:1.4rem;font-weight:700;color:var(--brand-dark)}.kpi-label{color:var(--muted);font-size:.9rem}@media screen and (max-width: 1000px){#table-wrapper{width:95%}table{min-width:600px}}@media screen and (max-width: 600px){.controls{flex-direction:column;align-items:stretch}.toolbar select,.toolbar button,.toolbar input[type=text]{width:100%}.kpis{grid-template-columns:1fr}}.header-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.header-wrapper .header-content{flex:1;margin-right:6px}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background-color:var(--brand);color:#fff;border-radius:50%;font-size:11px;font-weight:700;line-height:1;text-decoration:none;box-shadow:0 1px 3px #0003}.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex-shrink:0}.tooltip-portal-content{position:absolute;transform:translate(-50%);background-color:#333;color:#fff;text-align:left;border-radius:6px;padding:8px 12px;font-size:.85rem;font-weight:400;line-height:1.4;white-space:normal;width:max-content;max-width:250px;box-shadow:0 4px 12px #00000040;pointer-events:none;z-index:99999}.tooltip-portal-content:after{content:"";position:absolute;left:50%;transform:translate(-50%);border-width:5px;border-style:solid}.tooltip--top{transform:translate(-50%,-100%)}.tooltip--top:after{top:100%;border-color:#333 transparent transparent transparent}.tooltip--bottom:after{bottom:100%;border-color:transparent transparent #333 transparent}
