/* hanken-grotesk-cyrillic-ext-400-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(data:font/woff2;base64,d09GMgABAAAAAAQgABAAAAAAB+wAAAPGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEgAXBEICoJ8gkMLFAABNgIkAyIEIAWFCgdiDAcbhQbIPg1vjKH/SZAjGKk6g0Cz4ZDoqIq9ujYKvX+56LMpeKqx39u9+yKCiGazJpasMYQkFiKJSmhkKiQRqyQSleGnud+7DTG5L6jJGPdNJriH5JbwBBG6JVISgmK/170QegCQmWgmlyggSYrYRiVCU8mVdSoUqdZWfpsHE7m10AI7gL2xGtH/pVj0d/045f9hYeqMUicC2WdxoPzP5fhug8y4jw3gwAJO/G57a1i0nm8KMKFeYGdNPGoNsbVxiQSWuba48mH8gQtyCg5ZGAvDD5agO4oAPwBQQhhCgFe5RFRvaXUzOG0xggGcWMA/AWSTcAawAQKEpdyEm4qzANWCIApAGEIZSsgghakUSrjFgCREbxu/cRzQGwWAUWtGFiE8qqmDC6iWQ71FdfCqquouvdcYFiOuCtAtgPxPewaK0aS0ggxDgXLUnlIlIIClbUaH7BBxFsMkfAAIGOGXWNkB/QSAAgPiaALiLAwBgtyUU7EC+w6DKv6QgJ+R/PPNsuFpiK5bSEIxAA+AKMALZgHrgCwgDgCl77kplpAM67LJDJl10GcCuuhI+33L9mq73u62NvsWZu3rMWb3cgvn12x/P8lffyqb/HglnFmEf+rjy4X7/ql37b5+6vY78+HB0UP1UoRu7ouL/fbFUbnaWt23vt79XKns2uzimnswMDd4/sV5T+tRyfifEJTXp0rO6M72e3+7lt5c7R9a9l9j3tdUtXfNZMugZxqkJWfd0l8q27px4E9LcXRh+Fpfy289JTldsUkNKfimSnyrbqPraoPjv2PDRXk54d4RkT5h2QXVBUA1QMDF5ccP6u/k3oV4ABGgm/SiDaYEBEz6xGt/Ouacs1M038DXTWWO5d+ncE1S92PgXGCNBfLTfYd+nQZUqml3/MkRYQsLL6dd3AEtEiDg0c5CBh22pgT47TIkwwMcReIOIh9JUMFwg9HlDax62+CQNQdOtdrtQZ2kDgJ+SbAEww1e/LyL8uEFY4z0GAYVBAwdNVYbQk1JRcB/FpjwMsWJw2Nx1EwEvFg8NZ1YRhylOHVKVSvHMNAiDMpwjAQETytGI0JJpMPgtCI4PDUjAyxJrHgJkuK1sHjCUuBqyVKuWJE6WQVKqfrUwiJGJqO4dr4JliheogRYMxUC19bqGdFobDRUQGxZM7ZQHwtvPKSkdvNFA2KxD6bEIcTgSNEBUTYW8eKokr1jKFMRKOrzf9Xm4AHl3oPChBErDnE6uwc4MkSsRYM6Pr4g3g5MjC9Mtl1gRYF8TUNxOCXjk+JT/6qR+4TujRUA) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAY8AA8AAAAAB9AAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAE0AAABgVhGVxlNUQVQAAAI0AAAAPAAAAEjnb8weY21hcAAAAnAAAABCAAAAXEHQ4ltnYXNwAAACtAAAAAgAAAAIAAAAEGdseWYAAAK8AAABXQAAAXztscPjaGVhZAAABBwAAAA2AAAANiKfW4FoaGVhAAAEVAAAAB8AAAAkCEwBamhtdHgAAAR0AAAAIQAAACIN3QCpbG9jYQAABJgAAAAUAAAAFAFhAextYXhwAAAErAAAABoAAAAgABwA5W5hbWUAAATIAAABIQAAAoo6Dl9McG9zdAAABewAAABOAAAAYvVu8ckAAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2BhUmGcwMDKwMDUxRTBwMDgDaEZ4xg0GDUYUAE7EDPBOB4uzv4MBxgUFLYwv/h3kYGB+QWjvgID42SQHONbpp1ASoGBGQDyIQy4AAAAeNoNx7ENQFAYBsD7fgqhfSNYTIVE+RJrGMhwXHciJoWmsKp7P3pw9u3KLEbNgMqYh3oxyP8FhA/Q2QU+eNpjYGBgAmJmIBYBkoxgmoXBA0jzMXAA5dgYFBgcGRYwHGRkUtjy/z9QHIX//8n/A/9T/zv+Z7wfBNSNAgBlvxJCAAAAAQAB//8AD3jaPMsh0AFBGAbg99ubf79/ru1wJwisG6vfut2gCehV0QSZXuiVTK/0kejBjN4UI9pjhlGfmQcCOUAnuiACA1Zp1dZK57QOKxqHHV2CadIGAgoQM3EAIwYsWco6mttRpCgeUDzphWuP+vOFODyH2+2dRmGPsvysaCkMCACDccP559OvS/wv3oBK+RAVcUQdHvhrGVN0vfNZoRMtWSbVNLW58zUpqdDOu6JrTNaS3HHO5mmaVFmyTajxmkumFTsLmxkTw79pnGzcqg4a9sF8QRJ1/2YzRnBzCMsZK+g4S7oppLraxpjwsrI5cZvG2kiJ8vKYm/PwikurWcg5mCv5hTHOtuDkElOQ1ZPW1Na2sdYPMlUQ5+CwALrXkEmH4ScwJJgZGITNjdkNc6M7mXR6e8EyTxgTmdMZeIEySmqmxiIg9wIptpO+3rZGmlpGNr5MT1zsNTQ01R2dANfkSg4AAAAAAQAAAAMDVJ3QuIhfDzz1AAMD6AAAAADfih8IAAAAAN+a9WL/Uf7/BRAD4QAAAAYAAgAAAAAAAHjaY2BkYGB+8e8iAwOr8//Av76sAkARVMABAJYoBbwAeNpj/MtgxFTLIAjDjCwMDCDMZMAgzMDAYMhgCABUZAOSAAAAAAAAFAAvADsARgBGAEYAmQCmAL542mNgZGBg4GRoAOJkBlYwDwFYGBgBFx0BAgAAeNqMkQVKRWEQRo/dknZL2N3d3S1tv+6mcRFSrkbKZflxfd38zJ0zPcwF6vmijJLyGuCnZDrKJXSWNEe5lMaS6iiXsclvlMsZ5TvKFbTzGeVKhnmMciPz9P9zCZrVHOXyRM+SWvlro1wngmtcOHjGyRF+aTsWXnngXdqEWT6Jnhsfy0zo+RT3KurGLx7HJ7ZLu+Q1KX7BPqccGj1tvOt7gFdRv9gnzxjXIhMBVT0rci/La3RxKbeXGfWaZEo6uUdvWpfetC6JqhXV7bLDhajoLdKsfJN3xG4ieOMX6mWaScmU6Faed+n8u18atlX2q1G/pcm6tHFDn+zBjKubsBgZAV4Y59X4axMSbWtYdolJElDFhPIS08fk/xuy7ZoAB/xhkwAAAHjaY2BiAIP/7QwaDNgAJxCrMJxkZGJgZmRmZGFkZWRjc0wqSi1LZS/NyzQwcDQA0UYGTiacicmlJanJ+blJPCAZYwMzveTE4lQAH2ARFAAA) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* hanken-grotesk-vietnamese-400-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/hanken-grotesk-vietnamese-400-normal-BLrFBAHj.woff2) format('woff2'), url(/assets/hanken-grotesk-vietnamese-400-normal-C-iWyKLC.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* hanken-grotesk-latin-ext-400-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/hanken-grotesk-latin-ext-400-normal-DR7lHpW4.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-ext-400-normal-DI-aIsWt.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hanken-grotesk-latin-400-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/assets/hanken-grotesk-latin-400-normal-BG6hkEXj.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-400-normal-CjyVwvJV.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hanken-grotesk-cyrillic-ext-500-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(data:font/woff2;base64,d09GMgABAAAAAAQIABAAAAAACAQAAAOvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEQAXBEICoJ8gkILFAABNgIkAyIEIAWFKAdiDAcbngYoLgpsW7F2EW5iaDHUuE4MfK2EiuDJv6h63X9mQfCkiMhBhsvo5EiaqbW2d/+I+KtIQl7tBEmQGRKRRIOu1qgM08UaQyggDm7nRPJEQ8yt/i+kPxzR/3NNvjVI8z4uSAc88SqLKssyHUVb097RKkT3pocLQBwwzNwaPrRPwsDGVWMcQ0JC6POwBxWoCUhCyEKguo4k4ImTfTHQv3MdVgf9CqgQiB2bkDroRCAUkqpCVUlDRHQ1D5JAyEKSJYGU4qidMYjDVkQilhfxV/yqRLoxLQXMUK3Eaqx0JRxVkEydutYguNe2j/N3/7OjjD5tAXQrxM/pRbRFEP1vS0MwOoKPbCliELZdqgpVFxoiFnfUoG4WEKX4FSRkNEQQ+IJTAbUDsClry2zfm5HaPlMBxKLylTdsMk58Oh9E7h2iQh1QDdQHVMcywAlAc0BDAEn61CcqhCiKKkXjYjt17Rq5VlpfK9essaPGtuqrVyaTPYvWbV+4EFc82GLJ4SPOvvlhjZsudlj0cm5z1LE76xb/63f4H3up+o2f9Fx8dDH2/HlnH2m6xk1ZuMYWNc6+eiJ9/fBDzvW/fNflgx0iu/P1135hTq0X9rzb8b2OffZaL/9ttxws1OTtcs2ifurg4aN54vRp2vBVpxF+zfPqLpPezVhxxNg+pnTtuPK4cx07sOdmLi627vZzbK74f/MIh3FRKIso5sp/ek5tZ9stN3vviznTbUYH/aNT55eOkyw+M4A7g1BFFb/4BK0uq3qaCKA26Xi+Rm22BYScFx5lvr6+ps7I36rm/B18emObqir5nt/W66/caaU8xXJTpJNusFD+f6j0OwWqxr/6J1HDioKXS30NAnrhg1DNQETNEDjokkBtj8miqIa3YiiA0D21IakdIBvtsbEwQklzh1DW1RbUNpgH6polYNfTq702JGLjxtIlUp1Y/T+ooTrma6hJqXPDpFSVZCTllBQUYfxyskpwNS4pdRU5dSROiAZMDqqiCINpQmkICaEyECVNGJQAqqRKoAFRIBTk4OOWKs38+GBCDkKSN2p7KQERManm13KxsQrWho5E+l+Aq0pBHtlMcudbNTRtQIb1TUgkRCTESGKKckhUeQgiZXmGgr0ZDlPUgECRsAZrLCjZ1sGlCWQ01AjVpCBIWm2QQhscSqioB0G+gpMNJkIr0xXKaujoKZIcOYooRbk8bv3K/ikdh3aXRCKzSD0pEVlkXes24Fju9xrSXuwQSUWKdTYSz6PSE8Ut) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAY8AA8AAAAAB7QAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAE0AAABgVnWVylNUQVQAAAI0AAAAOQAAAETlE8wbY21hcAAAAnAAAABCAAAAXEHQ4ltnYXNwAAACtAAAAAgAAAAIAAAAEGdseWYAAAK8AAABXgAAAXwE1rnAaGVhZAAABBwAAAA1AAAANiKkW4FoaGVhAAAEVAAAAB8AAAAkCFEBaWhtdHgAAAR0AAAAIQAAACIN/ACZbG9jYQAABJgAAAAUAAAAFAFhAextYXhwAAAErAAAABoAAAAgABwA5W5hbWUAAATIAAABIQAAAnQ1/F4xcG9zdAAABewAAABOAAAAYvVu8ckAAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2Bh0mD8wsDKwMDUxRTBwMDgDaEZ4xg0GDUYUAE7EDPBOB4uzv4MBxgUFLYwv/h3kYGB+QWjvgID42SQHONbpp1ASoGBGQAXMA0gAAAAeNodxIEFgFAYBsD7/ooUhEZosUBFgEeLN0B0OBGjwvq/qec4W3C1/c4keotAhrzoRGUG4QO3sgTdAAAAeNpjYGBgAmJmIBYBkoxgmoXBA0jzMXAA5dgYFBgcGRYwHGRkUtjy/z9QHIX//8n/A/9T/zv+Z7wfBNSNAgBlvxJCAAAAAQAB//8AD3jaPIszeGxRGEX3f+7MOflebGOM58tnG7FdxahjN7HZt+mn/2KXqdM3URer3HutBQYZoHXahwQBKKGWUIcl1CLT7PkAZZ4v0v65y07jYAgCWDPzQeARoJBCNpdFOCQpiILTKKjx1fnBK1LrG5jv7OfCwik9P9/DxcVtJfUxJwiAgMARNh/+yrufw6/96kDIxTGLYsuIhwGYrU6nphq6YdMskRYueGREVJQi60Y056RZdEPXVKfTZuXCpeuKHBUVGSG4UCIp5UftWy6ZXjJ+vuBn9re+c7xNDSqL7TyfoQLBQxOeJXk+xmSkVP74WKr5S6a3AXrp+9gIf/+PH/39o+LsSsJbxf0vhxY+cxGZGO+NcXvlD+9eZOmJkdz8GYSn7AmZmA8SEG4o4mlD9TB7MjR0Qw6oXKpE4BWxOi9naiwCci+QYjvu7+2mr6qm5+rL9NjVXlVFVcXJCQCvfEkeAAB42mNgZGBgYGYOqfY4HxbPb/MVyH7BAAT3u+Q5wPSsr0n/A//9YxVlfgTksjEwgUQBcMANhAAAAHjaY2BkYGB+8e8iAwOry//Av96sokARVMABAJZ2BcAAeNpj/MNgxNTJwAfDjCwMDCDMZMAgwMDAoMugCwBW0wOhAAAAAAAAFAAvADsARgBGAEYAmQCmAL542mNgZGBg4GRoAOJkBlYwDwFYGBgBFx0BAgAAeNpiYGDgYZjGwMzAyMIJZB9ilIGyGRm0GD5B2UwMfAxPIGwgacewDMpmQVLDyiDF0ANohKy1KgiCKFi45aRIgrtDgrtrCs/d9e8p3OXs6b3VPjPP3MogoSe2c57xJ25wF/3P3CJ3P3On3PnMXRKckyXNHRn2KKkp4gQ5IkxIKpu7ISxFiZnX/HIUWWaCCTVIwWyOkjxOUU6pWaNR8ydsc8guzidJ2P8OBbMluWhk7MOma7mAM6zI0MsM40wypb7RCrtsssGJ9N+553JUSllf+NDV+6mv90PfhpkcdQqv9+9lmkltSro0ElZ/n3eKPgn9IPazRlmNGfOm+oNf3jTqNiusCzBO0Mo0E5pnR4+UFtXKdkxY97Z9jOiH7UP3TuVfYwAAAHjaY2BiAIP/7QwaDNgAJxCrMJxkZGJgZmRmZGFkZWRjc0wqSi1LZS/NyzQwcDQA0UYGTiacicmlJanJ+blJPCAZYwMzveTE4lQAH2ARFAAA) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* hanken-grotesk-vietnamese-500-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/hanken-grotesk-vietnamese-500-normal-DxwlvJEc.woff2) format('woff2'), url(/assets/hanken-grotesk-vietnamese-500-normal-DkDHNoXI.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* hanken-grotesk-latin-ext-500-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/hanken-grotesk-latin-ext-500-normal-DLb9JDK8.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-ext-500-normal-BNvrJ0Ju.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hanken-grotesk-latin-500-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 500;
src: url(/assets/hanken-grotesk-latin-500-normal-DrDcrrxK.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-500-normal-Bo-NxEKf.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hanken-grotesk-cyrillic-ext-700-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(data:font/woff2;base64,d09GMgABAAAAAAQQABAAAAAAB9AAAAO1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbahwoBmA/U1RBVEQAXBEICoJ8gkULFAABNgIkAyIEIAWEcgdiDAcbawYAPgzYZKiDVf9AJG6cDDnBomS69KOW+n5qazEGz//bVff9qmloNUKNvSCjbbmmtQCzjTfck4MRlMqpcpgH+HHY+xMVmtIalHYAo5yoTKXFQ5zayVEoGWY92TdNoFQlCEmzUTTRuv4/nC9cFvmd4kJ9rcssgaOlihjv/5yLtwZp3scF6YAnvj6vsqOyCjrDgZ013RsdtWiVn8GJ6+k26YjeXEM1TLo9UgS4AIAihEYIcGgyQPUsXL4ez3JfPo2HDvhPALIslE1jAwKETrERNkoxHbSpJRQAoRGKRhEmQjSmRQsxMQNERMzXIzR1WzTUvohRYBkOImO0BbPJrED5ayzumbeKi8rKLke+/zfa+9BahhwC5EvEfTBohLBRoJgCTdSmSDQvgNh6X1IYUUynESo4ARAgAIlVtwEU0EAxjYBiusXAw0axMMxx0XiIMG79B/eJ/68FncKzfmIcWsh/UgHYAUwEDrAF7AHVoBiAor70keiEROlWvTRqrVucmlv53eRyJpznmM2bNjnbd2pqKmw9Vzhy6ZItlx8l7p8uHXrWwqCkZ3Tjw6sK2isPEvY9bRp+eenkpC2ns2bZ0rU1GxIP3Kedh3DcRMfM0ZllDXMOdbLl3psjjvjg/Z9X7bonrMNIitTwdN+skvyB49E9Cyvq3lSX9c/v+bq5o3rxwb7V7py4ZsKZ/oy1n0y/l5ftW1veeGxo4UxjdmLW4jm+/pENk8vun1XdYJ7deeKg8Rd9vfNnb647U1iSrtk8b+UcVA0BVlb/ZBbbnKcPYIM6EbkTr7YIAVrk+r+anJXqX+MitU/Ax32lcbj65NfY/t8uE1jK2KOMotRFDfrfhd4PVbSFXwxTikGHKtXGiVL/gAC7IboKGi/hFAEuF0SSKDtwJxScQVT7B4rNN9BMdRt0LS5AkUp7wKLJZsljRINMwKUUrNh8Awcujm05cYC1TCk+aUvk+STFBGwSEhMRlZe/Nm9MzlS9euUEZMWMycvpkROT1MOUFdFrlYWWW8wnLSEkbZEsU15ITkK3uUxJQRuFZOXEmNIMg3r06TfoYZixKMOyuWvTLDbfPKtMi27iwWO1z2Mas1M2G9/EMKDPgH6G9aJCjNt6qzkk7gV8VM9RkBfNV8AcQ5sMJyJiWssU+PUIMKX0SvHJMq8mmSJMBTm9ojfQd4sU2imb4f/UCWkHTR6HCLSgiS5FYrHM8XffX2P9dKyvb04fPnOgb+6QfQOFfKgRDcfF5vsG+0Y606i8Hv7vWtRBAAA=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAYoAA8AAAAAB7AAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABWAAAABYAAAAWABEABEdQT1MAAAFwAAAASwAAAGYrviSMR1NVQgAAAbwAAAAnAAAAKLj8uOpPUy8yAAAB5AAAAE0AAABgVz2VsVNUQVQAAAI0AAAAOQAAAETl28wdY21hcAAAAnAAAABCAAAAXEHQ4ltnYXNwAAACtAAAAAgAAAAIAAAAEGdseWYAAAK8AAABUQAAAXa5Z4vvaGVhZAAABBAAAAA2AAAANiKuW4NoaGVhAAAESAAAAB8AAAAkCFoBaWhtdHgAAARoAAAAIQAAACIOPgB7bG9jYQAABIwAAAAUAAAAFAFdAeVtYXhwAAAEoAAAABoAAAAgABwA5W5hbWUAAAS8AAABGQAAAnI2iF0HcG9zdAAABdgAAABOAAAAYvVu8ckAAQAAAAwAAAAAAAAAAgABAAEAAwABAAB42j3HpQECQAAAwHvBNZOZgBWQRGQAtOA2Py7XTkBVV08cjMYTze3suteU4X4XEDar816Zz2RRWVAWtUFXRxAFSRAlUfjPAyrAB5UAeNpjYGRgYOBiUANCJhc3nxAGoZzEkjwGPgYQYAER//+DSABaSQVVAHjaY2Bh0mfaw8DKwMDUxRTBwMDgDaEZ4xg0GDUYUAE7EDPBOB4uzv4MCxgUFLYwv/h3kYGB+QWjvgID42SQHONbpp1ASoGBGQACDwzQAAAAeNodxIEFgFAYBsD7/qIUhEZosUBFgEfLNVx0OBGjwvq/qec4W3C1/c4keotAhnrRicoMwgezyASoAAAAeNpjYGBgAmJmIBYBkoxgmoXBA0jzMXAA5dgYFBgcGRYwHGRkUtjy/z9QHIX//8n/A/9T/zv+Z7wfBNSNAgBlvxJCAAAAAQAB//8AD3jaPU41cNxAFH1/lWgvDAIz7N14FQatIMzMzMyctCnDMTOX7vu5xtQY+3Ht3tzaxzP+zP+BwQVomCaggQNqk9hUITYJl9oSLXQ80UcTiS3b6ScYIgDrZHFwrAYUKYo5glc4PEL5zym/1k1MKyp8/JTFl87+/7+YSCCZzO1of5gEAeBpTmB8uf52uR5BPdIlrEkusBI2giL4wMqolL4XBmHMF5bQuW6Ztq3cIMzTdfJFEAa+J2UsqnMnCJRr25bJlUXiwpfDKxjbyjYnenRtTakq33t6w/eSn4l6uke0Pk/mx/bbb8Wnc8dfhPrudcGLo5bBI9evc24WlG23d+9Q529Q9w2izflW1HDk0ePH3Dv7bOMGCJJtpyIWhwYYoeLy258utr2uLtuZpKfaW6wDjKj0lZlBmnb64PWL97YWlTr3rrLJ08fKSspKTp5IAffUSWUAAAAAAQAAAAMDVA1NLcxfDzz1AAMD6AAAAADfih8IAAAAAN+a9WL/Uf79BR4D5QABAAYAAgAAAAAAAHjaY2BkYGB+8e8iAwOr+//Avx6sckARVMABAJctBckAeNpj/MVgxLSIgQOGGVkYGECYyYCBm4GBQY1BDQBcBwPFAAAAAAAAFAAuADoARgBGAEYAlgCjALt42mNgZGBg4GRoAOJkBlYwDwFYGBgBFx0BAgAAeNqNkYNuRkEYRE/thrVtuw1q23H12+Zz9Gka9aEaFpN0a+bmu3Nm1rtAMddkkZFdANxmVBvOoJYHw5nkc2c4i2luDGfT/jo2h2rShnNp5dRwKeM0P3MGWqvccN7bnBmFygsNF4lgHx8ezvGyRljqxsElJ1ikNuzKVPr8hJhmgAHpJUEcSsLifkJit9Sn1MYAOyyzySqaExcW/VcI4iMsDinpY17OzRXHSoJovLyXRkboZ5Ah6fvRjZ/GN76Of+s/wyqLLLAj+s/KRn9dZ0HsJ0Hw9SYaGWZQNSQ6VGKR/r7TXeRxyl8Slp8jIrUr07nlO7/crk2rqQcRLujnEr0OA6pzgsjhVtlUEULK7e9W71P+fvWuJ3pCXsUAAAB42mNgYgCD/+0MGgzYACcQqzCcZGRiYGZkZmRhZGVkY3NMKkotS2Uvzcs0MHA0ANFGBk4mnInJpSWpyfm5STwgGWMDM73kxOJUAB9gERQAAA==) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* hanken-grotesk-vietnamese-700-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/hanken-grotesk-vietnamese-700-normal-C4RNfQp6.woff2) format('woff2'), url(/assets/hanken-grotesk-vietnamese-700-normal-CslVg6dq.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* hanken-grotesk-latin-ext-700-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/hanken-grotesk-latin-ext-700-normal-CK2OfQqO.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-ext-700-normal-BXHnjv6S.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hanken-grotesk-latin-700-normal */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/assets/hanken-grotesk-latin-700-normal-CeQ8H3UY.woff2) format('woff2'), url(/assets/hanken-grotesk-latin-700-normal-6IGCzoPh.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
font-family: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light;
--ui-scale: 1;
/* Neutral scale */
--color-white: #ffffff;
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1f2937;
--color-neutral-900: #0f172a;
/* Accent (Brand Blue centered on #3099CC) */
--color-accent-50: #F0F7FB;
--color-accent-100: #D9ECF7;
--color-accent-200: #B9DDF0;
--color-accent-300: #8FC8E6;
--color-accent-400: #5EB0DA;
--color-accent-500: #3099CC; /* brand anchor */
--color-accent-600: #257AA3;
--color-accent-700: #1C5C7A;
--color-accent-800: #133F54;
--color-accent-900: #0C2938;
--color-info-100: #e0f2fe;
--color-info-300: #7dd3fc;
--color-info-400: #38bdf8;
--color-info-500: #22d3ee;
--color-info-600: #0ea5e9;
/* Semantic ramps */
--color-success-100: #dcfce7;
--color-success-300: #86efac;
--color-success-400: #4ade80;
--color-success-600: #16a34a;
--color-warning-100: #fef3c7;
--color-warning-300: #facc15;
--color-warning-400: #f59e0b;
--color-warning-600: #d97706;
--color-error-100: #fee2e2;
--color-error-300: #fca5a5;
--color-error-400: #f87171;
--color-error-600: #dc2626;
--color-error-700: #b91c1c;
/* Application aliases */
--bg-color: var(--color-white);
--text-color: var(--color-neutral-900);
--sidebar-bg: var(--color-white);
--sidebar-border: var(--color-neutral-200);
--menu-item-hover: var(--color-neutral-100);
--menu-item-active: var(--color-accent-50);
--panel-bg: var(--color-white);
--content-bg: var(--color-neutral-50);
--muted-text: var(--color-neutral-600);
--border-color: var(--color-neutral-200);
--accent-color: var(--color-accent-600);
--workspace-brand-color: #133F54;
--menu-icon-color: var(--color-neutral-800);
--badge-bg: var(--color-neutral-100);
--badge-color: var(--color-neutral-800);
--map-control-bg: rgba(255, 255, 255, 0.95);
--map-control-border: rgba(15, 23, 42, 0.12);
--map-control-hover-bg: rgba(15, 23, 42, 0.08);
--map-control-active-bg: rgba(15, 23, 42, 0.12);
--map-control-icon-color: var(--color-neutral-700);
--map-control-icon-filter: none;
--map-control-shadow: 0 18px 32px -18px rgba(15, 23, 42, 0.45);
--surface-1: color-mix(in srgb, var(--panel-bg) 88%, var(--color-neutral-100) 12%);
--surface-2: color-mix(in srgb, var(--panel-bg) 94%, var(--color-neutral-200) 6%);
--surface-3: color-mix(in srgb, var(--accent-color) 18%, var(--panel-bg) 82%);
--surface-bg: var(--surface-1);
--text-1: var(--text-color);
--text-2: color-mix(in srgb, var(--text-color) 85%, transparent);
--text-3: color-mix(in srgb, var(--text-color) 70%, transparent);
--border: color-mix(in srgb, var(--border-color) 70%, transparent);
--border-strong: color-mix(in srgb, var(--accent-color) 45%, transparent);
--accent-1: var(--accent-color);
--sidebar-expanded-width: calc(180px * var(--ui-scale));
--sidebar-collapsed-width: calc(60px * var(--ui-scale));
}
[data-theme='dark'] {
color-scheme: dark;
--ui-scale: var(--ui-scale);
--bg-color: #202020;
--text-color: var(--color-neutral-50);
--sidebar-bg: #292a2a;
--sidebar-border: #1f2937;
--menu-item-hover: #1f2937;
--menu-item-active: #1e3a8a33;
--panel-bg: #292a2a;
--content-bg: #2b2c2d;
--muted-text: var(--color-neutral-300);
--border-color: #353638;
--accent-color: var(--color-accent-500);
--workspace-brand-color: #133F54;
--menu-icon-color: #C3C3C3;
--badge-bg: #1f2937;
--badge-color: var(--color-neutral-100);
--map-control-bg: rgba(15, 23, 42, 0.92);
--map-control-border: rgba(148, 163, 184, 0.28);
--map-control-hover-bg: rgba(148, 163, 184, 0.16);
--map-control-active-bg: rgba(148, 163, 184, 0.22);
--map-control-icon-color: var(--color-neutral-100);
--map-control-icon-filter: invert(0.94) hue-rotate(180deg);
--map-control-shadow: 0 22px 36px -18px rgba(0, 0, 0, 0.6);
--surface-1: color-mix(in srgb, var(--panel-bg) 92%, var(--color-neutral-900) 8%);
--surface-2: color-mix(in srgb, var(--panel-bg) 88%, var(--color-neutral-800) 12%);
--surface-3: color-mix(in srgb, var(--accent-color) 40%, transparent);
--surface-bg: var(--surface-1);
--text-2: color-mix(in srgb, var(--text-color) 75%, transparent);
--text-3: color-mix(in srgb, var(--text-color) 55%, transparent);
--border: color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
--border-strong: color-mix(in srgb, var(--accent-color) 55%, transparent);
--accent-1: color-mix(in srgb, var(--accent-color) 82%, var(--color-neutral-100) 18%);
}
* {
box-sizing: border-box;
}
html {
font-size: calc(13px * var(--ui-scale));
}
html, body, #root {
height: 100%;
margin: 0;
min-width: 320px;
min-height: 100vh;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
}
select {
background-color: var(--panel-bg);
color: var(--text-color);
}
[data-theme='dark'] select,
[data-theme='dark'] select option {
background-color: color-mix(in srgb, var(--panel-bg) 92%, var(--color-neutral-900) 8%);
color: var(--color-neutral-50);
}
a {
color: inherit;
text-decoration: none;
}
code, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.app-container {
display: flex;
height: 100vh;
min-height: 0;
overflow: hidden;
}
.content {
flex: 1;
background-color: var(--content-bg);
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
.content-status {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex: 1;
padding: 2rem;
text-align: center;
color: var(--muted-text);
font-size: 1rem;
}
.content-status--error {
color: var(--color-error-600);
}
.content-notice {
margin: 1.5rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background-color: var(--panel-bg);
color: var(--text-color);
font-size: 0.95rem;
line-height: 1.4;
}
.content-notice--error {
border-color: color-mix(in srgb, var(--color-error-600) 40%, transparent);
background-color: color-mix(in srgb, var(--color-error-600) 12%, transparent);
color: var(--color-error-600);
}
[data-theme='dark'] .content-notice--error {
background-color: color-mix(in srgb, var(--color-error-400) 22%, transparent);
border-color: color-mix(in srgb, var(--color-error-400) 45%, transparent);
color: var(--color-error-300);
}
.app {
display: flex;
height: 100%;
}
.main-panel {
flex: 1;
background: var(--panel-bg);
padding: 1rem;
}
.map-geofence-popup {
padding: 4px 8px;
background: white;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 12px;
font-weight: 600;
pointer-events: none;
color: #333;
}
.map-geofence-popup-container .mapboxgl-popup-content {
padding: 0;
background: transparent;
box-shadow: none;
}
.map-geofence-popup-container .mapboxgl-popup-tip {
display: none;
}
.sidebar {
--sidebar-main-width: var(--sidebar-collapsed-width, 60px);
--sidebar-panel-width: calc(260px * var(--ui-scale));
--sidebar-total-width: var(--sidebar-main-width);
--sidebar-button-height: calc(2.5rem * var(--ui-scale));
--sidebar-button-padding-block: calc(0.5rem * var(--ui-scale));
--sidebar-button-padding-inline: calc(0.75rem * var(--ui-scale));
--sidebar-button-gap: calc(0.5rem * var(--ui-scale));
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: row;
min-height: 100vh;
width: var(--sidebar-total-width);
transition: width var(--sidebar-transition-duration, 0.3s) ease-in-out;
position: relative;
z-index: 10;
overflow: visible;
}
.sidebar.expanded {
--sidebar-main-width: var(--sidebar-expanded-width, 180px);
}
.sidebar.sidebar--compact {
--sidebar-panel-width: var(--sidebar-collapsed-width, 60px);
}
.sidebar.sidebar--with-panel {
--sidebar-total-width: var(--sidebar-main-width);
}
.sidebar svg {
color: var(--menu-icon-color);
}
.sidebar__main {
width: var(--sidebar-main-width);
display: flex;
flex-direction: column;
align-items: stretch;
padding: 1.25rem 0.5rem 0.75rem;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 12px;
}
.top {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
width: 100%;
}
.logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.logo {
display: block;
height: auto;
max-width: 100%;
}
.logo--default {
width: calc(28px * var(--ui-scale));
}
.logo--custom {
width: calc(29px * var(--ui-scale));
}
.logo--wide {
width: 62%;
max-width: calc(140px * var(--ui-scale));
}
.logo--wide-custom {
width: 51%;
max-width: calc(180px * var(--ui-scale));
}
.menu {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sidebar-button-gap);
}
.menu__separator {
width: 100%;
height: var(--sidebar-button-height);
display: flex;
align-items: center;
margin: 5px;
}
.menu__separator::before {
content: "";
display: block;
width: 100%;
height: 1px;
background: color-mix(in srgb, var(--sidebar-border) 60%, transparent);
}
.menu-item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
border: none;
background: transparent;
color: inherit;
text-decoration: none;
font: inherit;
border-radius: 0.75rem;
padding: var(--sidebar-button-padding-block)
var(--sidebar-button-padding-inline);
min-height: var(--sidebar-button-height);
cursor: pointer;
width: 100%;
box-sizing: border-box;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.menu-item--animate-in {
opacity: 0;
transform: translateY(-8px);
animation: sidebar-menu-item-enter 0.45s cubic-bezier(0.22, 0.65, 0.25, 1) forwards;
animation-delay: var(--menu-item-animation-delay, 0s);
will-change: opacity, transform;
}
.menu-item--disabled {
color: color-mix(in srgb, var(--muted-text) 70%, transparent);
cursor: not-allowed;
}
.menu-item--disabled .badge {
background: color-mix(in srgb, var(--muted-text) 30%, transparent);
color: color-mix(in srgb, var(--muted-text) 70%, transparent);
}
.menu-item--disabled svg {
color: color-mix(in srgb, var(--muted-text)70%, transparent);
}
.menu-item--disabled:hover,
.menu-item--disabled:focus-visible {
background: transparent;
color: var(--muted-text);
}
.menu-item:hover,
.menu-item:focus-visible {
background: var(--menu-item-hover);
outline: none;
color: var(--accent-color, var(--color-accent-600));
}
.menu-item.active {
background: var(--menu-item-active);
color: var(--accent-color, var(--color-accent-600));
}
.menu-item .badge {
background: color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 16%,
transparent
);
color: var(--accent-color, var(--color-accent-600));
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
margin-left: auto;
}
.menu-item svg {
flex-shrink: 0;
}
.menu-item__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.menu-item__icon--drawn svg path {
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
[data-theme='light'] .sidebar .menu-item .menu-item__svg-icon--device path,
[data-theme='light'] .sidebar .menu-item .menu-item__svg-icon--device rect {
stroke: #555;
}
[data-theme='dark'] .sidebar .menu-item .menu-item__svg-icon--device path,
[data-theme='dark'] .sidebar .menu-item .menu-item__svg-icon--device rect {
stroke: #fff;
}
[data-theme='light'] .sidebar .menu-item .menu-item__svg-icon--device .device-fill {
fill: #555;
}
[data-theme='dark'] .sidebar .menu-item .menu-item__svg-icon--device .device-fill {
fill: #fff;
}
.sidebar .menu-item:hover .menu-item__svg-icon--device path,
.sidebar .menu-item:hover .menu-item__svg-icon--device rect,
.sidebar .menu-item:focus-visible .menu-item__svg-icon--device path,
.sidebar .menu-item:focus-visible .menu-item__svg-icon--device rect,
.sidebar .menu-item.active .menu-item__svg-icon--device path,
.sidebar .menu-item.active .menu-item__svg-icon--device rect {
stroke: var(--accent-color, var(--color-accent-600));
}
.sidebar .menu-item:hover .menu-item__svg-icon--device .device-fill,
.sidebar .menu-item:focus-visible .menu-item__svg-icon--device .device-fill,
.sidebar .menu-item.active .menu-item__svg-icon--device .device-fill {
fill: var(--accent-color, var(--color-accent-600));
}
.sidebar .menu-item.menu-item--disabled .menu-item__svg-icon--device path,
.sidebar .menu-item.menu-item--disabled .menu-item__svg-icon--device rect {
stroke: var(--muted-text);
}
.sidebar .menu-item.menu-item--disabled .menu-item__svg-icon--device .device-fill {
fill: var(--muted-text);
}
.sidebar.expanded .menu-item svg {
animation: sidebar-menu-icon-in 0.24s ease forwards;
animation-fill-mode: both;
}
.sidebar.expanded .menu-item .label {
animation: sidebar-menu-text-in 0.28s ease forwards;
animation-delay: 0.08s;
animation-fill-mode: both;
text-align:left;
}
@keyframes sidebar-menu-item-enter {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sidebar.expanded .menu-item .badge {
animation: sidebar-menu-text-in 0.28s ease forwards;
animation-delay: 0.12s;
animation-fill-mode: both;
}
.sidebar.collapsed .menu-item {
justify-content: center;
padding: 0.75rem 0.5rem;
}
.sidebar__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0;
border-top: 1px solid var(--sidebar-border);
}
.sidebar.expanded .sidebar__footer {
flex-direction: row;
justify-content: space-between;
padding: 0.75rem;
}
.sidebar__footer-button {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
border: none;
background: transparent;
color: inherit;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.sidebar__footer-button:hover,
.sidebar__footer-button:focus-visible {
background: var(--menu-item-hover);
outline: none;
}
.sidebar__panel {
position: absolute;
left: calc(100% + 1rem);
width: var(--sidebar-panel-width);
max-width: calc(100vw - var(--sidebar-main-width) - 2.5rem);
min-width: min(var(--sidebar-panel-width), 220px);
display: flex;
flex-direction: column;
border: 1px solid var(--sidebar-border);
border-radius: 1rem;
background: var(--panel-bg);
padding: 1.25rem 1.25rem 1rem;
box-sizing: border-box;
gap: 1.25rem;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.096);
opacity: 0;
transition: opacity var(--sidebar-transition-duration, 0.3s) ease;
pointer-events: none;
z-index: 5;
max-height: min(80vh, calc(100vh - 3rem));
overflow: hidden;
will-change: opacity;
}
.sidebar__panel.sidebar__panel--visible {
opacity: 1;
pointer-events: auto;
}
.sidebar.sidebar--compact .sidebar__panel {
padding: 0.75rem 0.5rem 1rem;
}
.sidebar.sidebar--compact .sidebar-panel__header {
justify-content: center;
}
.sidebar.sidebar--compact .sidebar-panel__content {
gap: 0.75rem;
}
.sidebar.sidebar--compact .sidebar-panel__items {
align-items: center;
gap: 0.5rem;
}
.sidebar.sidebar--compact .sidebar-panel__item {
justify-content: center;
padding: 0.75rem 0.5rem;
width: 100%;
}
.sidebar.sidebar--compact .sidebar-panel__item--child {
margin-inline-start: 0;
width: 100%;
padding-inline-start: 0.5rem;
}
.sidebar.sidebar--compact .sidebar-panel__header-text,
.sidebar.sidebar--compact .sidebar-panel__section-header,
.sidebar.sidebar--compact .sidebar-panel__item-label,
.sidebar.sidebar--compact .sidebar-panel__item-badge {
display: none;
}
.sidebar-panel__header {
display: flex;
align-items: center;
gap: var(--sidebar-button-gap);
padding-inline: var(--sidebar-button-padding-inline);
}
.sidebar.sidebar--compact .sidebar-panel__header {
padding-inline: 0;
}
.sidebar-panel__header-icon {
color: var(--accent-color, var(--menu-icon-color));
}
.sidebar-panel__header-text h2 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
.sidebar-panel__content {
display: flex;
flex-direction: column;
gap: var(--sidebar-button-gap);
flex: 1;
overflow-y: auto;
padding-right: 0.25rem;
}
.sidebar-panel__section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sidebar-panel__close-section {
margin-top: calc(2 * var(--sidebar-button-gap));
padding-top: calc(0.5rem * var(--ui-scale));
}
.sidebar-panel__section-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--muted-text);
margin-left: 8px;
margin-top: 20px;
}
.sidebar-panel__section-header--custom-solutions {
color: color-mix(in srgb, var(--muted-text) 50%, #ffffff 28%);
}
.sidebar-panel__section-header-wrapper {
position: relative;
}
.sidebar-panel__section-header-wrapper.expanded .sidebar-panel__section-header-toggle,
.sidebar-panel__section-header-link.active + .sidebar-panel__section-header-toggle,
.sidebar-panel__section-header-link:hover + .sidebar-panel__section-header-toggle,
.sidebar-panel__section-header-link:focus-visible + .sidebar-panel__section-header-toggle {
color: var(--accent-color, var(--color-accent-600));
}
.sidebar-panel__section-header-link {
color: inherit;
text-decoration: none;
width: 100%;
padding-inline-end: calc(
var(--sidebar-button-padding-inline) + 2.25rem * var(--ui-scale)
);
box-sizing: border-box;
}
.sidebar-panel__section-header-link:hover,
.sidebar-panel__section-header-link:focus-visible {
text-decoration: none;
}
.sidebar-panel__section-header-toggle {
position: absolute;
top: 50%;
right: calc(var(--sidebar-button-padding-inline) - 0.25rem * var(--ui-scale));
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: calc(2.25rem * var(--ui-scale));
height: calc(2.25rem * var(--ui-scale));
border: none;
background: transparent;
color: inherit;
cursor: pointer;
border-radius: 0.5rem;
transition: color 0.2s ease, background 0.2s ease;
}
.sidebar-panel__section-header-toggle:hover,
.sidebar-panel__section-header-toggle:focus-visible {
background: var(--menu-item-hover);
color: var(--accent-color, var(--color-accent-600));
}
.sidebar-panel__section-header-toggle:focus-visible {
outline: 2px solid
color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 60%,
transparent
);
outline-offset: 2px;
}
.sidebar-panel__section-header-caret {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-panel__items {
--sidebar-panel-items-transition-duration: 0.2s;
display: flex;
flex-direction: column;
gap: var(--sidebar-button-gap);
overflow: hidden;
max-height: var(--sidebar-panel-items-max-height, 100rem);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: max-height var(--sidebar-panel-items-transition-duration) ease,
opacity var(--sidebar-panel-items-transition-duration) ease,
visibility 0s linear 0s;
}
.sidebar-panel__items--collapsed {
max-height: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: max-height var(--sidebar-panel-items-transition-duration) ease,
opacity var(--sidebar-panel-items-transition-duration) ease,
visibility 0s linear var(--sidebar-panel-items-transition-duration);
}
.sidebar-panel__item {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.75rem;
padding: var(--sidebar-button-padding-block)
var(--sidebar-button-padding-inline);
min-height: var(--sidebar-button-height);
width: 100%;
text-decoration: none;
color: inherit;
border: none;
background: transparent;
cursor: pointer;
font: inherit;
justify-content: flex-start;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
overflow: hidden;
text-align: left;
}
.sidebar-panel__item--disabled {
color: color-mix(in srgb, var(--muted-text)70%, transparent);
cursor: not-allowed;
}
.sidebar-panel__item--disabled .sidebar-panel__item-badge {
background: color-mix(in srgb, var(--muted-text)30%, transparent);
color: color-mix(in srgb, var(--muted-text)70%, transparent);
}
.sidebar-panel__item--disabled svg {
color: color-mix(in srgb, var(--muted-text)70%, transparent);
}
.sidebar-panel__item--disabled:hover,
.sidebar-panel__item--disabled:focus-visible {
background: transparent;
color: var(--muted-text);
}
.sidebar-panel__item--child {
margin-inline-start: calc(0.5rem * var(--ui-scale));
width: calc(100% - 0.5rem * var(--ui-scale));
padding-inline-start: calc(
var(--sidebar-button-padding-inline) + 1.5rem * var(--ui-scale)
);
}
.sidebar-panel__item--close {
color: var(--muted-text);
justify-content: center;
font-weight: 500;
}
.sidebar-panel__item--close:hover,
.sidebar-panel__item--close:focus-visible {
background: color-mix(in srgb, var(--menu-item-hover) 60%, transparent);
color: var(--muted-text);
}
.sidebar-panel__item:hover,
.sidebar-panel__item:focus-visible {
background: var(--menu-item-hover);
outline: none;
color: var(--accent-color, var(--color-accent-600));
}
.sidebar-panel__item.active {
background: var(--menu-item-active);
color: var(--accent-color, var(--color-accent-600));
}
.sidebar-panel__item-label {
flex: 1;
min-width: 0;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-panel__item-badge {
background: color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 18%,
transparent
);
color: var(--accent-color, var(--color-accent-600));
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
}
.sidebar-panel__item svg {
flex-shrink: 0;
}
.sidebar__panel--visible .sidebar-panel__item svg {
animation: sidebar-menu-icon-in 0.24s ease forwards;
animation-fill-mode: both;
}
.sidebar__panel--visible .sidebar-panel__item-label {
animation: sidebar-menu-text-in 0.28s ease forwards;
animation-delay: 0.08s;
animation-fill-mode: both;
}
.sidebar__panel--visible .sidebar-panel__item-badge {
animation: sidebar-menu-text-in 0.28s ease forwards;
animation-delay: 0.12s;
animation-fill-mode: both;
}
.sidebar.collapsed .tooltip-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
@keyframes sidebar-menu-icon-in {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes sidebar-menu-text-in {
from {
opacity: 0;
transform: translateX(-6px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.menu-item svg,
.menu-item .label,
.menu-item .badge,
.sidebar-panel__item svg,
.sidebar-panel__item-label,
.sidebar-panel__item-badge {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip {
position: fixed;
background: var(--color-neutral-900);
color: var(--color-white);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
white-space: nowrap;
/* Ensure tooltips sit on top of other UI elements */
z-index: 9999;
font-size: 0.875rem;
opacity: 0;
animation: tooltip-fade 0.3s ease forwards;
display: flex;
align-items: center;
gap: 0.25rem;
}
.tooltip-right,
.tooltip-left,
.tooltip-top,
.tooltip-bottom {
transform: none;
}
.tooltip .tooltip-badge {
background: var(--color-neutral-900);
color: var(--color-neutral-400);
border-radius: 0.25rem;
padding: 0 0.5rem;
padding-top:4px;
font-size: 0.75rem;
line-height: 1.25rem;
min-width: 1.25rem;
text-align: center;
}
@keyframes tooltip-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.home-page {
min-height: 100%;
width: 100%;
display: flex;
justify-content: center;
padding: clamp(56px, 12vh, 128px) 16px 96px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 70%, white 30%), var(--surface-1));
}
.home-actions {
position: fixed;
top: clamp(16px, 3vw, 32px);
right: clamp(16px, 4vw, 48px);
z-index: 20;
}
@media (max-width: 640px) {
.home-actions {
top: 16px;
right: 16px;
}
}
.home-shell {
width: min(640px, 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
.home-intro {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.home-eyebrow {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text-2) 60%, var(--text-3) 40%);
}
.home-heading {
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 650;
color: var(--text-1);
letter-spacing: -1px;
margin-block-end:0;
}
.home-description {
margin: 0;
max-width: 440px;
font-size: 0.95rem;
color: var(--text-2);
}
.home-search {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
margin-bottom:24px;
}
.home-search__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.home-search__field {
width: min(420px, 100%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 70%, rgb(57, 57, 57) 30%);
background: color-mix(in srgb, white 78%, var(--panel-bg) 22%);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.048);
transition: border 0.2s ease, box-shadow 0.2s ease;
}
.home-search__field:focus-within {
border-color: var(--accent-1);
}
.home-search__field input {
flex: 1;
border: none;
background: transparent;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-1);
outline: none;
padding: 4px 0;
}
.home-search__field input::placeholder {
color: var(--text-3);
}
.home-results {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.home-results__group {
background: color-mix(in srgb, white 88%, var(--panel-bg) 12%);
border-radius: 20px;
border: 1px solid color-mix(in srgb, var(--border) 65%, white 35%);
padding: 20px 24px;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.036);
}
.home-results__group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
color: var(--text-2);
}
.home-results__group-meta {
display: flex;
align-items: center;
gap: 12px;
}
.home-results__group-header h2 {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.home-results__group-header span {
font-size: 0.8rem;
}
.home-results__view-more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent-1) 35%, transparent 65%);
background: color-mix(in srgb, var(--accent-1) 8%, white 92%);
color: var(--accent-1);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}
.home-results__view-more:hover,
.home-results__view-more:focus-visible {
background: color-mix(in srgb, var(--accent-1) 14%, white 86%);
border-color: color-mix(in srgb, var(--accent-1) 45%, transparent 55%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 10.8%, transparent 82%);
outline: none;
}
.home-results__view-more svg {
flex-shrink: 0;
}
.home-results__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.home-results__item {
display: flex;
flex-direction: column;
gap: 6px;
}
.home-result {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
color: inherit;
cursor: pointer;
text-align: left;
transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.home-result:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.home-result:not(:disabled):hover,
.home-result:not(:disabled):focus-visible {
border-color: var(--accent-1);
background: color-mix(in srgb, var(--accent-1) 8%, white 92%);
transform: translateY(-1px);
}
.home-result__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.home-result__title {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-1);
}
.home-result__subtitle {
font-size: 0.85rem;
color: var(--text-2);
}
.home-result__description {
font-size: 0.8rem;
color: var(--text-3);
}
.home-result__related {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-left: 2px;
}
.home-result__chip {
padding: 4px 10px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 70%, white 30%);
background: color-mix(in srgb, white 84%, var(--badge-bg) 16%);
color: color-mix(in srgb, var(--text-2) 80%, var(--text-3) 20%);
font-size: 0.7rem;
cursor: pointer;
transition: border 0.2s ease, transform 0.2s ease;
}
.home-result__chip:hover,
.home-result__chip:focus-visible {
border-color: var(--accent-1);
transform: translateY(-1px);
}
.home-results__empty {
background: color-mix(in srgb, white 90%, var(--panel-bg) 10%);
border: 1px dashed color-mix(in srgb, var(--border) 65%, white 35%);
border-radius: 20px;
padding: 48px 32px;
color: var(--text-2);
}
.home-results__empty h2 {
margin: 0 0 10px;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-1);
}
.home-results__empty p {
margin: 0;
max-width: 420px;
margin-inline: auto;
font-size: 0.9rem;
}
@media (max-width: 720px) {
.home-page {
padding: 48px 16px 72px;
}
.home-shell {
gap: 24px;
}
.home-results__group {
padding: 18px 20px;
}
}
[data-theme='dark'] .home-page {
background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 55%),
var(--content-bg);
}
[data-theme='dark'] .home-search__field {
background: color-mix(in srgb, var(--panel-bg) 75%, rgba(148, 163, 184, 0.1) 25%);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.27);
}
[data-theme='dark'] .home-results__group {
background: color-mix(in srgb, var(--panel-bg) 82%, rgba(148, 163, 184, 0.16) 18%);
border: 1px solid color-mix(in srgb, rgba(148, 163, 184, 0.65) 55%, transparent 45%);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.252);
}
[data-theme='dark'] .home-result {
border-color: color-mix(in srgb, rgba(148, 163, 184, 0.5) 40%, transparent 60%);
background: color-mix(in srgb, var(--panel-bg) 88%, rgba(148, 163, 184, 0.12) 12%);
color: var(--text-1);
}
[data-theme='dark'] .home-result svg {
color: color-mix(in srgb, var(--text-2) 80%, transparent);
}
[data-theme='dark'] .home-result:not(:disabled):hover,
[data-theme='dark'] .home-result:not(:disabled):focus-visible {
border-color: color-mix(in srgb, var(--accent-1) 65%, transparent 35%);
background: color-mix(in srgb, var(--accent-1) 22%, rgba(15, 23, 42, 0.78) 78%);
}
[data-theme='dark'] .home-result:not(:disabled):hover svg,
[data-theme='dark'] .home-result:not(:disabled):focus-visible svg {
color: var(--accent-1);
}
[data-theme='dark'] .home-result__subtitle {
color: color-mix(in srgb, var(--text-2) 88%, transparent);
}
[data-theme='dark'] .home-result__description {
color: color-mix(in srgb, var(--text-3) 90%, transparent);
}
[data-theme='dark'] .home-result__chip {
border-color: color-mix(in srgb, rgba(148, 163, 184, 0.55) 50%, transparent 50%);
background: color-mix(in srgb, var(--panel-bg) 78%, rgba(148, 163, 184, 0.22) 22%);
color: color-mix(in srgb, var(--text-2) 92%, transparent);
}
[data-theme='dark'] .home-result__chip:hover,
[data-theme='dark'] .home-result__chip:focus-visible {
border-color: color-mix(in srgb, var(--accent-1) 70%, transparent 30%);
}
.top-bar {
--top-bar-control-height: 2.25rem;
--top-bar-animation-base-delay: 0.15s;
--top-bar-animation-interval: 0.12s;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
width: 100%;
min-height: 3.625rem;
box-sizing: border-box;
background-color: var(--content-bg);
background-color: color-mix(in srgb, var(--content-bg) 90%, transparent);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 5;
min-height: 60px;
}
.top-bar__animated {
opacity: 0;
transform: translateY(0.4rem);
animation-name: var(--top-bar-animation-name, top-bar-title-in);
animation-duration: var(--top-bar-animation-duration, 0.45s);
animation-timing-function: var(
--top-bar-animation-timing-function,
ease-out
);
animation-fill-mode: forwards;
animation-delay: var(
--top-bar-animation-delay,
calc(
var(--top-bar-animation-base-delay, 0.15s) +
var(--top-bar-item-order, 0) * var(--top-bar-animation-interval, 0.12s) +
var(--top-bar-animation-delay-offset, 0s)
)
);
will-change: opacity, transform;
}
.top-bar--search-stacked {
align-items: flex-start;
}
.top-bar--inline {
position: static;
top: auto;
z-index: auto;
background: none;
border: none;
border-bottom: none;
padding: 0;
box-shadow: none;
}
.top-bar--with-filters {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}
.top-bar--with-actions {
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}
.top-bar--with-filters.top-bar--with-actions {
grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
}
.top-bar__main {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
min-width: 0;
}
.top-bar--search-stacked .top-bar__main {
align-items: flex-start;
}
.top-bar__identity {
display: flex;
align-items: flex-start;
gap: 0.75rem;
min-width: 0;
}
.top-bar--search-stacked .top-bar__identity {
align-items: center;
}
.top-bar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-color);
flex-shrink: 0;
align-self: center;
margin-top: 0;
}
.top-bar__text {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.top-bar__heading {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.top-bar__title {
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
min-width: 0;
}
.top-bar__title-main,
.top-bar__title-secondary,
.top-bar__title-tertiary {
color: var(--muted-text);
transition: color 0.2s ease;
min-width: 0;
flex-shrink: 1;
}
.top-bar__title > .top-bar__title-tertiary,
.top-bar__title > .top-bar__title-secondary:last-child,
.top-bar__title > .top-bar__title-main:last-child {
color: var(--text-primary);
}
.top-bar__title > .top-bar__title-main:hover,
.top-bar__title > .top-bar__title-secondary:hover {
color: var(--accent-color);
}
.top-bar__title > .top-bar__title-tertiary:hover,
.top-bar__title > .top-bar__title-secondary:last-child:hover,
.top-bar__title > .top-bar__title-main:last-child:hover {
color: var(--text-primary);
}
.top-bar__title-main {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
.top-bar__title-secondary,
.top-bar__title-tertiary {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
[data-theme='dark'] .top-bar__title-secondary {
color: var(--top-bar-title-secondary-dark, #b0b8c1);
}
.top-bar__title-line {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.top-bar__title-link {
display: inline-flex;
align-items: baseline;
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.top-bar__title-link:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
}
.top-bar__title-text {
display: inline-flex;
align-items: baseline;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.top-bar__title-segment {
display: inline-flex;
align-items: center;
gap: 0.25rem;
position: relative;
min-width: 0;
flex-shrink: 1;
}
.top-bar__title-segment--main {
font-weight: 700;
}
.top-bar__title-label {
display: inline-flex;
align-items: baseline;
gap: 0.25rem;
white-space: nowrap;
min-width: 0;
flex-shrink: 1;
}
.top-bar__title-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.top-bar__title-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0.125rem;
margin: -0.125rem 0 0;
color: var(--muted-text);
cursor: pointer;
border-radius: 0.25rem;
transition: color 0.2s ease, background-color 0.2s ease;
}
.top-bar__title-toggle:hover {
color: var(--accent-color);
background-color: rgba(48, 153, 204, 0.08);
}
.top-bar__title-toggle:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.25rem;
}
.top-bar__title-menu {
position: fixed;
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 10rem;
padding: 0.25rem 0;
background-color: var(--content-bg);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.072);
z-index: 20;
opacity: 0;
transform: translateY(-0.25rem);
animation: top-bar-title-menu-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1)
forwards;
}
.top-bar__title-option {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.375rem 0.75rem;
border: none;
background: none;
font: inherit;
font-size: 0.875rem;
color: var(--text-primary);
text-align: left;
cursor: pointer;
border-radius: 0.375rem;
}
.top-bar__title-option:hover,
.top-bar__title-option:focus-visible {
background-color: rgba(48, 153, 204, 0.1);
outline: none;
}
.top-bar__title-option--active {
color: var(--accent-color);
font-weight: 600;
}
.top-bar__title-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
color: currentColor;
}
.top-bar__title-option-label {
flex: 1;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.top-bar__title-separator {
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
transform: translateY(0);
}
.top-bar__title-separator-icon {
display: inline-block;
width: 0.6875rem;
height: 1rem;
flex-shrink: 0;
background-color: var(--accent-color, var(--muted-text));
mask: url("data:image/svg+xml,%3csvg%20width='11'%20height='16'%20viewBox='0%200%2011%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.58606%208.09212C3.88985%204.3121%205.02825%200.945115%205.11564%200.60968C5.27476%200%205.27476%200%208.13726%200C9.71186%200%2011%200.0913414%2011%200.202857C11%200.314595%2010.2528%202.58416%209.3397%205.24658C8.42637%207.90899%207.23019%2011.4094%206.68133%2013.025C5.48195%2016.5553%206.43658%2015.9625%202.78876%2015.9625C-0.100222%2015.9625%20-0.105518%2015.9616%200.0548067%2015.4637C0.143154%2015.1895%201.28228%2011.8721%202.58606%208.09212Z'%20fill='%23FF5900'/%3e%3c/svg%3e") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3csvg%20width='11'%20height='16'%20viewBox='0%200%2011%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.58606%208.09212C3.88985%204.3121%205.02825%200.945115%205.11564%200.60968C5.27476%200%205.27476%200%208.13726%200C9.71186%200%2011%200.0913414%2011%200.202857C11%200.314595%2010.2528%202.58416%209.3397%205.24658C8.42637%207.90899%207.23019%2011.4094%206.68133%2013.025C5.48195%2016.5553%206.43658%2015.9625%202.78876%2015.9625C-0.100222%2015.9625%20-0.105518%2015.9616%200.0548067%2015.4637C0.143154%2015.1895%201.28228%2011.8721%202.58606%208.09212Z'%20fill='%23FF5900'/%3e%3c/svg%3e") center / contain no-repeat;
}
.top-bar__title-separator.top-bar__animated {
opacity: 0;
transform: translateY(0.4rem);
}
.top-bar__title-separator--hierarchy {
opacity: 1;
transform: translateY(0);
}
.top-bar__title-separator--initial {
opacity: 0;
transform: translateY(0.3rem);
--top-bar-animation-name: top-bar-separator-in;
--top-bar-animation-duration: 0.35s;
--top-bar-animation-timing-function: ease-out;
--top-bar-animation-delay: 0.3s;
}
.top-bar__title-separator--leaving {
--top-bar-animation-name: top-bar-separator-out;
--top-bar-animation-duration: 0.18s;
--top-bar-animation-timing-function: ease;
}
.top-bar__title-separator--entering {
--top-bar-animation-name: top-bar-separator-switch-in;
--top-bar-animation-duration: 0.26s;
--top-bar-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.top-bar__subtitle {
color: var(--text-primary);
font-weight: 600;
opacity: 1;
transform: translateY(0);
display: inline-block;
transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
[data-theme='dark'] .top-bar__subtitle {
color: var(--top-bar-subtitle-dark, #e5e7eb);
}
.top-bar__subtitle:where(.top-bar__animated) {
opacity: 0;
transform: translateY(0.4rem);
}
.top-bar__subtitle--initial {
opacity: 0;
transform: translateY(-0.4rem);
--top-bar-animation-name: top-bar-subtitle-in;
--top-bar-animation-duration: 0.5s;
--top-bar-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.top-bar__subtitle--leaving {
--top-bar-animation-name: top-bar-subtitle-out;
--top-bar-animation-duration: 0.18s;
--top-bar-animation-timing-function: ease;
}
.top-bar__subtitle--entering {
--top-bar-animation-name: top-bar-subtitle-switch-in;
--top-bar-animation-duration: 0.26s;
--top-bar-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.top-bar__tags {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.top-bar__tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background-color: rgba(48, 153, 204, 0.1);
color: var(--accent-color);
}
.top-bar__tag--info {
background-color: rgba(48, 153, 204, 0.1);
color: var(--accent-color);
}
.top-bar__tag--success {
background-color: rgba(24, 179, 124, 0.15);
color: var(--color-success-600);
}
.top-bar__tag--warning {
background-color: rgba(240, 165, 0, 0.15);
color: color-mix(in srgb, var(--color-warning-600) 90%, var(--color-neutral-900) 10%);
}
.top-bar__tag--danger {
background-color: rgba(215, 58, 73, 0.15);
color: color-mix(in srgb, var(--color-error-700) 90%, var(--color-neutral-900) 10%);
}
.top-bar__filters,
.top-bar__actions {
display: flex;
align-items: stretch;
gap: 0.75rem;
flex-wrap: nowrap;
overflow-x: auto;
padding-block: 0.125rem;
scrollbar-width: none;
}
.top-bar__actions-more {
display: flex;
align-items: center;
}
.top-bar__more-actions-button {
white-space: nowrap;
}
.top-bar__more-actions-button--active {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.top-bar__more-actions-button--condensed {
min-width: auto;
}
.top-bar__meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
min-height: var(--top-bar-control-height);
}
.top-bar__meta-divider {
width: 1px;
align-self: stretch;
background-color: var(--border-color);
border-radius: 999px;
opacity: 0.6;
}
.top-bar__user-controls {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.top-bar__icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--top-bar-control-height);
height: var(--top-bar-control-height);
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
background-color: color-mix(in srgb, var(--content-bg) 80%, transparent);
color: var(--muted-text);
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
box-shadow 0.2s ease;
}
.top-bar__icon-button:hover {
color: var(--accent-color);
border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-color) 65%);
background-color: color-mix(in srgb, var(--accent-color) 12%, var(--content-bg) 88%);
}
.top-bar__icon-button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.top-bar__icon-button--active {
color: var(--accent-color);
border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color) 60%);
background-color: color-mix(in srgb, var(--accent-color) 18%, var(--content-bg) 82%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.top-bar__filters::-webkit-scrollbar,
.top-bar__actions::-webkit-scrollbar {
display: none;
}
.top-bar-overlay {
position: fixed;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 18rem;
padding: 1rem;
background-color: var(--content-bg);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.096);
z-index: 30;
opacity: 0;
transform: translateY(-0.5rem);
animation: top-bar-overlay-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
[data-theme='dark'] .top-bar-overlay {
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.288);
}
.top-bar-overlay--notifications {
min-width: 22rem;
}
.top-bar-overlay--actions {
min-width: 15rem;
gap: 0.75rem;
}
.top-bar-overlay__actions-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.top-bar-overlay__actions-group + .top-bar-overlay__actions-group {
border-top: 1px solid var(--border-color);
padding-top: 0.75rem;
margin-top: 0.25rem;
}
.top-bar-overlay__menu-group-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted-text);
}
.top-bar-overlay__account-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: none;
text-decoration: none;
color: inherit;
transition: background-color 0.2s ease, color 0.2s ease;
}
.top-bar-overlay__account-link:hover,
.top-bar-overlay__account-link:focus-visible {
background-color: color-mix(in srgb, var(--accent-color) 12%, var(--content-bg) 88%);
outline: none;
}
.top-bar-overlay__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
background-color: color-mix(in srgb, var(--accent-color) 15%, var(--content-bg) 85%);
color: var(--accent-color);
flex-shrink: 0;
}
.top-bar-overlay__account-details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.top-bar-overlay__account-name {
font-weight: 600;
color: var(--text-primary);
}
[data-theme='dark'] .top-bar-overlay__account-name {
color: #cbd5e1;
}
.theme-dark .top-bar-overlay__account-name {
color: var(--text-primary-dark, #fff);
}
.top-bar-overlay__account-email {
font-size: 0.875rem;
color: var(--muted-text);
overflow: hidden;
text-overflow: ellipsis;
}
.top-bar-overlay__account-indicator {
margin-left: auto;
display: inline-flex;
align-items: center;
opacity: 0;
transform: translateX(-0.25rem);
transition: opacity 0.2s ease, transform 0.2s ease;
color: var(--accent-color);
}
.top-bar-overlay__account-link:hover .top-bar-overlay__account-indicator,
.top-bar-overlay__account-link:focus-visible .top-bar-overlay__account-indicator {
opacity: 1;
transform: translateX(0);
}
.top-bar-overlay__separator {
height: 1px;
background-color: var(--border-color);
margin: 0.25rem 0;
opacity: 0.6;
}
.top-bar-overlay__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.top-bar-overlay__menu .tooltip-wrapper {
display: block;
}
.top-bar-overlay__menu .tooltip-wrapper > * {
width: 100%;
}
.top-bar-overlay__menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
border: none;
background: none;
color: inherit;
text-decoration: none;
font: inherit;
font-size: 0.9375rem;
padding: 0.5rem 0.75rem;
border-radius: 0.6rem;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.top-bar-overlay__menu-item:hover,
.top-bar-overlay__menu-item:focus-visible {
background-color: color-mix(in srgb, var(--accent-color) 12%, var(--content-bg) 88%);
color: var(--accent-color);
outline: none;
}
.top-bar-overlay__menu-item:disabled,
.top-bar-overlay__menu-item[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.6;
background: none;
color: var(--muted-text);
}
.top-bar-overlay__menu-item:disabled:hover,
.top-bar-overlay__menu-item:disabled:focus-visible,
.top-bar-overlay__menu-item[aria-disabled='true']:hover,
.top-bar-overlay__menu-item[aria-disabled='true']:focus-visible {
background: none;
color: var(--muted-text);
}
.top-bar-overlay__menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.top-bar-overlay__menu-label {
flex: 1;
display: inline-flex;
align-items: center;
}
.top-bar-overlay__menu-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
color: var(--accent-color);
}
.top-bar-overlay__search {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: 0.75rem;
background-color: color-mix(in srgb, var(--content-bg) 90%, transparent);
}
.top-bar-overlay__search-input {
flex: 1;
border: none;
background: none;
font: inherit;
color: inherit;
outline: none;
}
.top-bar-overlay__tabs {
display: flex;
align-items: center;
gap: 0.25rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.25rem;
}
.top-bar-overlay__tab {
flex: 1;
border: none;
background: none;
font: inherit;
font-size: 0.875rem;
padding: 0.5rem 0;
color: var(--muted-text);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.top-bar-overlay__tab[aria-selected='true'] {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
font-weight: 600;
}
.top-bar-overlay__footer {
display: flex;
justify-content: flex-end;
margin-top: 0.25rem;
}
.top-bar-overlay__link-button {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--accent-color);
text-decoration: none;
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
transition: background-color 0.2s ease;
}
.top-bar-overlay__link-button:hover,
.top-bar-overlay__link-button:focus-visible {
background-color: color-mix(in srgb, var(--accent-color) 12%, var(--content-bg) 88%);
outline: none;
}
@keyframes top-bar-overlay-in {
from {
opacity: 0;
transform: translateY(-0.5rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-title-in {
from {
opacity: 0;
transform: translateY(0.4rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-separator-in {
from {
opacity: 0;
transform: translateY(0.3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-title-menu-in {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-separator-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(0.3rem);
}
}
@keyframes top-bar-separator-switch-in {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-subtitle-in {
from {
opacity: 0;
transform: translateY(-0.4rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes top-bar-subtitle-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(0.35rem);
}
}
@keyframes top-bar-subtitle-switch-in {
from {
opacity: 0;
transform: translateY(-0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.top-bar__animated,
.top-bar__icon,
.top-bar__title-main,
.top-bar__title-secondary,
.top-bar__title-tertiary,
.top-bar__title-separator,
.top-bar__subtitle,
.top-bar__tags,
.top-bar__tag,
.top-bar__search-filter,
.top-bar__search-filter-chip,
.top-bar__inline-item,
.top-bar .view-toggle,
.top-bar__actions .wmw-button {
animation: none !important;
opacity: 1;
transform: none;
}
}
.top-bar__filters {
justify-self: stretch;
justify-content: flex-start;
width: 100%;
max-width: 100%;
}
.top-bar__filters label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--muted-text);
}
.top-bar__filters label > span {
white-space: nowrap;
}
.top-bar__actions {
justify-self: end;
justify-content: flex-end;
}
.top-bar__filters > *,
.top-bar__actions > * {
flex-shrink: 0;
}
.top-bar__search-group {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
flex-wrap: wrap;
}
.top-bar--search-stacked .top-bar__search-group {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--border-color);
width: 100vw;
margin-left: -20px;
padding-left: 20px;
}
.top-bar--search-stacked .top-bar__meta {
align-self: flex-start;
}
.top-bar__search-filters {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
max-width: none;
}
.top-bar__search-filter-chip {
border-radius: 999px;
padding-inline: 0.75rem;
white-space: nowrap;
}
.top-bar__search-filter-chip .wmw-button__content {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.top-bar__search {
padding: 0.375rem 1rem;
color: var(--text-primary);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
height: var(--top-bar-control-height);
min-height: var(--top-bar-control-height);
box-sizing: border-box;
flex-shrink: 0;
font-size: 0.9375rem;
}
.top-bar__search input {
border: none;
background: transparent;
color: inherit;
font: inherit;
outline: none;
min-width: 0;
width: 8rem;
height: 100%;
transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
will-change: width;
}
.top-bar__search:focus-within input,
.top-bar__search[data-expanded='true'] input,
.top-bar__search input:not(:placeholder-shown) {
width: clamp(12rem, 24vw, 18rem);
}
.top-bar__search input::placeholder {
color: var(--muted-text);
}
.top-bar__search-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted-text);
}
.top-bar__search-filter {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--top-bar-control-height);
height: var(--top-bar-control-height);
border-radius: 999px;
border: 1px solid var(--border-color);
background-color: var(--surface-bg, var(--content-bg));
color: var(--muted-text);
line-height: 0;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease,
background-color 0.2s ease, color 0.2s ease;
animation-delay: 0.2s;
}
.top-bar__search-filter svg {
width: 1rem;
height: 1rem;
}
.top-bar__search-filter:hover,
.top-bar__search-filter:focus-visible {
border-color: var(--accent-color);
color: var(--accent-color);
background-color: var(--color-white);
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.048);
}
.top-bar__search-filter--active {
border-color: var(--accent-color);
color: var(--accent-color);
background-color: var(--color-white);
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.072);
}
.top-bar__search-filter:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.top-bar__search-filter:active {
background-color: var(--menu-item-active);
}
.top-bar__search-filter:disabled {
cursor: not-allowed;
opacity: 0.6;
box-shadow: none;
color: var(--muted-text);
}
.top-bar-search-filter-panel {
position: absolute;
z-index: 24;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
width: clamp(18rem, 90vw, 48rem);
background-color: var(--surface-bg, var(--content-bg));
border: 1px solid var(--border-color);
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.108);
}
[data-theme='dark'] .top-bar-search-filter-panel {
background-color: var(--surface-02, var(--content-bg));
border-color: var(--border-color-strong, var(--border-color));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}
.top-bar__inline-item {
display: inline-flex;
align-items: center;
}
.top-bar__actions-group {
display: inline-flex;
align-items: stretch;
gap: 0.5rem;
flex-wrap: nowrap;
}
.top-bar__actions-group--primary {
justify-content: flex-end;
}
.top-bar__actions-group--secondary {
color: var(--muted-text);
}
.top-bar__actions-group--tertiary {
opacity: 0.85;
}
.top-bar__actions-group-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text);
}
.top-bar__filters .wmw-button,
.top-bar__actions .wmw-button {
border-radius: 999px;
height: var(--top-bar-control-height);
min-height: var(--top-bar-control-height);
}
.top-bar__filters .wmw-button:not(.view-toggle__button),
.top-bar__actions .wmw-button:not(.view-toggle__button) {
padding-inline: 1rem;
}
.top-bar .wmw-button {
font-size: 0.875rem;
}
.top-bar__filters .wmw-button.wmw-button--icon-only,
.top-bar__actions .wmw-button.wmw-button--icon-only {
width: var(--top-bar-control-height);
min-width: var(--top-bar-control-height);
}
.top-bar__button {
overflow: hidden;
transition: gap 0.28s cubic-bezier(0.4, 0, 0.2, 1),
padding-inline 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.top-bar__button--condensed {
gap: 0;
}
.top-bar__button-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: 0.9rem !important;
max-width: 100%;
opacity: 1;
transform: translateX(0);
transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.18s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.top-bar__button--condensed .top-bar__button-label {
max-width: 0;
opacity: 0;
transform: translateX(-0.35rem);
}
.top-bar__button--expanded .top-bar__button-label {
max-width: 100%;
opacity: 1;
transform: translateX(0);
}
.top-bar .view-toggle {
height: var(--top-bar-control-height);
min-height: var(--top-bar-control-height);
box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
.top-bar__filters,
.top-bar__search,
.top-bar__search-filter,
.top-bar__search-filter-chip,
.top-bar__inline-item,
.top-bar .view-toggle,
.top-bar__actions .wmw-button {
opacity: 1;
animation: none;
transform: none;
}
.top-bar__search input {
transition: none;
}
}
@media (max-width: 768px) {
.top-bar__heading {
flex-wrap: nowrap;
}
.top-bar__title {
flex-wrap: nowrap;
}
.top-bar__title-main,
.top-bar__title-secondary,
.top-bar__title-tertiary,
.top-bar__title-segment,
.top-bar__title-label,
.top-bar__title-link,
.top-bar__title-text {
max-width: 100%;
}
.top-bar__title-label,
.top-bar__title-link,
.top-bar__title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-bar__title-separator {
flex-shrink: 0;
}
}
[data-theme='dark'] .top-bar {
background-color: var(--content-bg);
}
[data-theme='dark'] .top-bar__search-filter:hover,
[data-theme='dark'] .top-bar__search-filter:focus-visible,
[data-theme='dark'] .top-bar__search-filter:active {
background-color: var(--surface-bg, var(--content-bg));
box-shadow: none;
}
.wmw-button {
--button-bg: var(--sidebar-bg);
--button-color: var(--text-color);
--button-border: var(--sidebar-border);
--button-hover-bg: var(--menu-item-hover);
--button-hover-border: var(--accent-color);
--button-active-bg: var(--menu-item-active);
--button-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 0.75rem;
border: 1px solid var(--button-border);
background: var(--button-bg);
color: var(--button-color);
font-family: inherit;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
box-shadow 0.2s ease, transform 0.2s ease;
user-select: none;
position: relative;
}
.wmw-button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.wmw-button:disabled,
.wmw-button[aria-disabled='true'] {
cursor: not-allowed;
opacity: 0.65;
box-shadow: none;
}
.wmw-button--sm {
font-size: 0.8125rem;
padding: 0.35rem 0.75rem;
min-height: 2.25rem;
}
.wmw-button--md {
font-size: 0.875rem;
padding: 0.5rem 1rem;
min-height: 2.5rem;
}
.wmw-button--lg {
font-size: 0.9375rem;
padding: 0.65rem 1.25rem;
min-height: 2.85rem;
}
.wmw-button__content {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.wmw-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.wmw-button__icon svg {
display: block;
}
.wmw-button--loading {
pointer-events: none;
}
.wmw-button__spinner {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 999px;
border: 2px solid currentColor;
border-right-color: transparent;
border-bottom-color: transparent;
animation: wmw-button-spin 0.75s linear infinite;
}
.wmw-button__spinner span {
display: none;
}
@keyframes wmw-button-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wmw-button--icon-only {
padding: 0;
width: 2.5rem;
min-width: 2.5rem;
height: 2.5rem;
}
.wmw-button--sm.wmw-button--icon-only {
width: 2.25rem;
min-width: 2.25rem;
height: 2.25rem;
}
.wmw-button--lg.wmw-button--icon-only {
width: 3rem;
min-width: 3rem;
height: 3rem;
}
.wmw-button--primary {
--button-bg: var(--accent-color);
--button-border: var(--accent-color);
--button-color: var(--color-white);
--button-hover-bg: color-mix(
in srgb,
var(--accent-color) 80%,
var(--color-info-600) 20%
);
--button-hover-border: var(--button-hover-bg);
--button-active-bg: color-mix(
in srgb,
var(--accent-color) 85%,
var(--color-neutral-900) 15%
);
color: var(--color-white);
box-shadow: var(--button-shadow);
}
.wmw-button--primary:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--button-hover-bg);
border-color: var(--button-hover-border);
}
.wmw-button--primary:active:not(:disabled):not([aria-disabled='true']) {
background: var(--button-active-bg);
border-color: var(--button-active-bg);
}
.wmw-button--secondary {
--button-bg: var(--panel-bg);
--button-border: var(--sidebar-border);
--button-color: var(--text-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
}
.wmw-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--button-hover-bg);
border-color: var(--accent-color);
box-shadow: var(--button-shadow);
}
.wmw-button--secondary:active:not(:disabled):not([aria-disabled='true']) {
background: var(--button-active-bg);
}
.wmw-button--icon {
--button-bg: transparent;
--button-border: var(--border-color);
--button-color: var(--text-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
padding: 0.5rem;
min-height: 0;
min-width: 0;
}
.wmw-button--icon:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--button-hover-bg);
border-color: var(--accent-color);
box-shadow: var(--button-shadow);
}
.wmw-button--icon:active:not(:disabled):not([aria-disabled='true']) {
background: var(--button-active-bg);
}
.wmw-button--link,
.wmw-button--link:visited {
--button-bg: transparent;
--button-border: transparent;
--button-color: var(--accent-color);
color: var(--accent-color);
padding-left: 0;
padding-right: 0;
min-height: auto;
font-weight: 600;
}
.wmw-button--link::after {
content: '';
position: absolute;
left: 0;
bottom: 0.35rem;
width: 100%;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
.wmw-button--link:hover::after,
.wmw-button--link:focus-visible::after {
transform: scaleX(1);
}
.wmw-button--link:hover:not(:disabled):not([aria-disabled='true']) {
color: color-mix(in srgb, var(--accent-color) 85%, var(--color-neutral-900) 15%);
}
[data-theme='dark'] .wmw-button--primary {
--button-hover-bg: color-mix(
in srgb,
var(--accent-color) 70%,
var(--color-info-400) 30%
);
--button-hover-border: var(--button-hover-bg);
--button-active-bg: color-mix(
in srgb,
var(--accent-color) 80%,
var(--color-neutral-900) 20%
);
box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color) 27%, transparent);
}
[data-theme='dark'] .wmw-button--secondary {
--button-bg: rgba(255, 255, 255, 0.04);
--button-border: rgba(255, 255, 255, 0.08);
--button-hover-bg: rgba(255, 255, 255, 0.08);
--button-active-bg: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
[data-theme='dark'] .wmw-button--icon {
--button-border: rgba(255, 255, 255, 0.08);
--button-hover-bg: rgba(255, 255, 255, 0.08);
--button-active-bg: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .wmw-button--link {
--button-color: var(--color-info-400);
}
.tutorial-overlay {
position: fixed;
inset: 0;
z-index: 1300;
pointer-events: none;
font-family: inherit;
}
.tutorial-overlay__shield {
position: fixed;
inset: 0;
pointer-events: auto;
background: transparent;
}
.tutorial-overlay__highlight {
position: fixed;
border-radius: 12px;
border: 2px solid var(--accent-1);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent-1) 30%, transparent),
0 0 0 9999px rgba(9, 13, 24, 0.408),
0 18px 48px -12px rgba(15, 23, 42, 0.33);
transition:
top 0.18s ease,
left 0.18s ease,
width 0.18s ease,
height 0.18s ease;
pointer-events: none;
background: color-mix(in srgb, var(--accent-1) 20%, transparent);
isolation: isolate;
}
.tutorial-overlay__highlight::after {
content: '';
position: absolute;
inset: -8px;
border-radius: inherit;
border: 2px solid color-mix(in srgb, var(--accent-1) 65%, transparent);
opacity: 0;
pointer-events: none;
animation: tutorial-overlay__highlight-pulse 2.4s ease-in-out infinite;
}
@keyframes tutorial-overlay__highlight-pulse {
0% {
opacity: 0;
transform: scale(0.92);
}
35% {
opacity: 0.7;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.05);
}
}
.tutorial-overlay__highlight--fallback {
border-style: dashed;
}
.tutorial-overlay__panel {
position: fixed;
max-width: min(360px, calc(100% - 2 * 16px));
min-width: min(320px, calc(100% - 2 * 16px));
background: var(--panel-bg);
color: var(--text-1);
border-radius: 12px;
padding: 20px 24px 24px;
box-shadow: 0 20px 48px -24px rgba(15, 23, 42, 0.39);
border: 1px solid var(--border);
pointer-events: auto;
}
.tutorial-overlay__step-count {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 8px;
}
.tutorial-overlay__title {
font-size: 1.1rem;
margin: 0 0 8px;
}
.tutorial-overlay__description {
margin: 0 0 12px;
color: var(--text-2);
}
.tutorial-overlay__actions-list {
margin: 0 0 16px 16px;
padding: 0;
color: var(--text-1);
list-style: disc;
}
.tutorial-overlay__actions-list li + li {
margin-top: 6px;
}
.tutorial-overlay__warning {
margin: 0 0 16px;
font-size: 0.85rem;
color: var(--color-warning-400);
}
.tutorial-overlay__buttons {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.tutorial-overlay__button {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tutorial-overlay__button--primary {
margin-left: auto;
}
.tutorial-overlay__buttons-spacer {
flex: 1 1 auto;
}
.tutorial-overlay__key-hint {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 0.75rem;
color: var(--text-3);
}
.tutorial-overlay__key-hint kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
font-size: 0.75rem;
line-height: 1;
border-radius: 4px;
padding: 2px 6px;
background: color-mix(in srgb, var(--border-strong) 35%, transparent);
color: inherit;
border: 1px solid color-mix(in srgb, var(--border-strong) 65%, transparent);
box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.09);
}
@media (max-width: 640px) {
.tutorial-overlay__panel {
min-width: calc(100% - 2 * 16px);
max-width: calc(100% - 2 * 16px);
padding: 16px;
}
.tutorial-overlay__buttons {
flex-direction: column;
align-items: stretch;
}
.tutorial-overlay__button--primary {
margin-left: 0;
}
.tutorial-overlay__buttons-spacer {
display: none;
}
}
.toast-viewport {
position: fixed;
top: 1.5rem;
right: 1.5rem;
left: auto;
bottom: auto;
transform: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.75rem;
z-index: 9999;
pointer-events: none;
}
.toast {
pointer-events: auto;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 0.75rem;
border-radius: 1rem;
padding: 0.85rem 1rem;
min-width: 280px;
max-width: 360px;
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.12),
0 4px 12px rgba(15, 23, 42, 0.072);
border: 1px solid rgba(148, 163, 184, 0.3);
transform: translateX(0);
opacity: 1;
animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
will-change: transform, opacity;
}
.toast--exiting {
animation: toast-fade-out 0.2s ease forwards;
pointer-events: none;
}
.toast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
.toast__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.toast__title {
font-size: 0.95rem;
font-weight: 600;
margin: 0;
}
.toast__description {
font-size: 0.85rem;
margin: 0;
line-height: 1.3;
}
.toast__close {
appearance: none;
border: none;
background: transparent;
color: inherit;
border-radius: 999px;
padding: 0.35rem;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.toast__close:hover,
.toast__close:focus-visible {
background-color: rgba(148, 163, 184, 0.2);
}
.toast__close-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.toast__progress {
display: inline-flex;
width: 16px;
height: 16px;
}
.toast__progress svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.toast__progress-track {
fill: none;
stroke: currentColor;
opacity: 0.2;
stroke-width: 2;
}
.toast__progress-indicator {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
transition: stroke-dashoffset 120ms linear;
}
.toast--success .toast__icon {
color: #12b76a;
}
.toast--error .toast__icon {
color: #f04438;
}
.toast--info .toast__icon {
color: #2e90fa;
}
.toast--loading .toast__icon {
color: #6366f1;
animation: toast-spin 900ms linear infinite;
}
.toast--loading .toast__icon svg {
animation: toast-spin 900ms linear infinite;
}
[data-theme='light'] .toast {
background: #0f172a;
color: #f8fafc;
border-color: rgba(15, 23, 42, 0.4);
}
[data-theme='dark'] .toast {
background: #ffffff;
color: #0b1120;
border-color: rgba(15, 23, 42, 0.08);
box-shadow:
0 10px 30px rgba(15, 23, 42, 0.108),
0 4px 12px rgba(15, 23, 42, 0.06);
}
[data-theme='dark'] .toast__close:hover,
[data-theme='dark'] .toast__close:focus-visible {
background-color: rgba(15, 23, 42, 0.08);
}
@keyframes toast-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.toast-viewport {
right: 0.75rem;
left: 0.75rem;
width: auto;
align-items: stretch;
}
.toast {
width: 100%;
max-width: none;
}
}
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateX(2rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toast-fade-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(1rem);
}
}
.info-message-card {
--info-message-card-accent: var(--color-info-500);
--info-message-card-surface: color-mix(in srgb, var(--color-info-100) 80%, transparent 20%);
--info-message-card-border: color-mix(
in srgb,
var(--border-color) 45%,
var(--info-message-card-accent) 55%
);
background: color-mix(in srgb, var(--panel-bg) 75%, var(--info-message-card-surface) 25%);
border: 1px dashed color-mix(in srgb, var(--border-color) 70%, var(--color-white) 30%);
border-radius: 1.5rem;
padding: 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
color: var(--text-color);
line-height: 1.45;
}
.info-message-card--with-icon {
align-items: center;
}
[data-theme='dark'] .info-message-card {
background: color-mix(in srgb, var(--panel-bg) 82%, var(--info-message-card-surface) 18%);
border-color: color-mix(in srgb, var(--border-color) 55%, var(--color-neutral-400) 45%);
}
.info-message-card--tone-positive {
--info-message-card-accent: var(--color-success-500);
--info-message-card-surface: color-mix(in srgb, var(--color-success-100) 80%, transparent 20%);
}
.info-message-card--tone-warning {
--info-message-card-accent: var(--color-warning-500);
--info-message-card-surface: color-mix(in srgb, var(--color-warning-100) 80%, transparent 20%);
}
.info-message-card--tone-negative {
--info-message-card-accent: var(--color-error-500);
--info-message-card-surface: color-mix(in srgb, var(--color-error-100) 78%, transparent 22%);
}
[data-theme='dark'] .info-message-card--tone-negative {
--info-message-card-accent: var(--color-error-400);
--info-message-card-surface: color-mix(in srgb, var(--color-error-200) 42%, transparent 58%);
}
.info-message-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 1rem;
background: color-mix(in srgb, var(--info-message-card-surface) 45%, transparent 55%);
color: var(--info-message-card-accent);
flex-shrink: 0;
}
.info-message-card__content {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.info-message-card__title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.01em;
color: color-mix(in srgb, var(--text-color) 92%, var(--muted-text) 8%);
}
.info-message-card__body {
display: flex;
flex-direction: column;
gap: 0.75rem;
font-size: 0.97rem;
font-weight: 500;
color: color-mix(in srgb, var(--text-color) 78%, var(--muted-text) 22%);
line-height: 1.4;
}
.info-message-card__body p {
margin: 0;
}
.info-message-card__body ul,
.info-message-card__body ol {
margin: 0;
padding-left: 1.25rem;
}
.info-message-card__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
}
.info-message-card__actions > * {
flex-shrink: 0;
}
.info-message-card__content,
.info-message-card__body {
width: 100%;
}
.list-container {
border: 1px solid var(--border-color);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.list-search {
padding: 0.5rem;
border: 1px solid var(--border-color);
border-radius: 0.375rem;
flex: 1;
}
.list-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 720px;
table-layout: fixed;
--list-row-padding-block: 0.5rem;
--list-row-padding-inline: 0.5rem;
--list-row-hover-bg: color-mix(
in srgb,
var(--accent-color) 14%,
var(--panel-bg, #ffffff) 86%
);
--list-row-selected-bg: color-mix(
in srgb,
var(--accent-color) 20%,
var(--panel-bg, #ffffff) 80%
);
--list-row-selected-hover-bg: color-mix(
in srgb,
var(--accent-color) 26%,
var(--panel-bg, #ffffff) 74%
);
--list-row-accent-icon: color-mix(
in srgb,
var(--accent-color) 92%,
var(--text-color, #0f172a) 8%
);
}
.list-table-container {
width: 100%;
overflow-x: auto;
overflow-y: auto;
position: relative;
max-height: var(--list-table-max-height, 79vh);
scrollbar-width: none;
}
.list-table-container::-webkit-scrollbar {
display: none;
}
.list-table th,
.list-table td {
padding: var(--list-row-padding-block) var(--list-row-padding-inline);
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.list-table th {
user-select: none;
}
.list-table thead th {
position: sticky;
top: var(--list-table-sticky-offset, 0);
background: var(--panel-bg, var(--background-color, #ffffff));
z-index: 4;
box-shadow: inset 0 -1px 0 var(--border-color);
}
.list-table__selection-header {
width: 2.75rem;
padding:
var(--list-row-padding-block) 0.25rem var(--list-row-padding-block)
1rem;
cursor: default;
}
.list-table__selection-header-inner {
display: flex;
align-items: center;
justify-content: center;
}
.list-table__selection-placeholder {
display: inline-flex;
width: 1.125rem;
height: 1.125rem;
border-radius: 0.25rem;
background: transparent;
}
.list-table__header-checkbox {
width: 1.125rem;
height: 1.125rem;
accent-color: var(--accent-color);
cursor: pointer;
}
.list-table__selection-cell {
width: 2.75rem;
padding:
var(--list-row-padding-block) 0.25rem var(--list-row-padding-block)
1rem;
}
.list-table__selection-cell-inner {
display: flex;
align-items: center;
justify-content: center;
}
.list-table__row-checkbox {
width: 1.125rem;
height: 1.125rem;
accent-color: var(--accent-color);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease;
cursor: pointer;
}
.list-table tbody tr:hover .list-table__row-checkbox,
.list-table tbody tr:focus-within .list-table__row-checkbox,
.list-table tbody tr[data-selected='true'] .list-table__row-checkbox {
opacity: 1;
pointer-events: auto;
}
.list-table tbody tr[data-selected='true'] {
background-color: var(--list-row-selected-bg);
}
.list-table tbody tr[data-selected='true']:hover,
.list-table tbody tr[data-selected='true']:focus-within {
background-color: var(--list-row-selected-hover-bg);
}
.list-table tbody tr {
background-color: transparent;
}
.list-table tbody tr:hover,
.list-table tbody tr:focus-within {
background-color: var(--list-row-hover-bg);
}
.list-table tbody tr:hover svg,
.list-table tbody tr:focus-within svg,
.list-table tbody tr[data-selected='true'] svg {
color: var(--list-row-accent-icon);
}
.list-table tbody tr[data-clickable='true'] {
cursor: pointer;
}
.list-table tbody tr[data-clickable='true']:hover,
.list-table tbody tr[data-clickable='true']:focus-within {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: no-preference) {
.list-table__row {
opacity: 0;
transform: translateY(4px);
animation: list-row-fade-in 200ms ease forwards;
animation-delay: var(--list-row-animation-delay, 0ms);
}
.list-table tbody tr {
transition: background-color 150ms ease, box-shadow 200ms ease,
transform 200ms ease;
}
}
@media (prefers-reduced-motion: reduce) {
.list-table tbody tr[data-clickable='true']:hover,
.list-table tbody tr[data-clickable='true']:focus-within {
transform: none;
}
}
@keyframes list-row-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.list-table__header-cell {
position: relative;
padding: 0;
}
.list-table__header-cell > .list-table__header-label {
padding: var(--list-row-padding-block) var(--list-row-padding-inline);
display: flex;
align-items: center;
}
.list-table__header-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
width: 100%;
box-sizing: border-box;
padding: var(--list-row-padding-block) var(--list-row-padding-inline);
cursor: pointer;
}
.list-table__header-button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: -2px;
}
.list-table__header-label {
flex: 1;
min-width: 0;
}
.list-table__header-sort {
font-size: 0.75rem;
line-height: 1;
}
.list-table__resize-handle {
position: absolute;
top: 0;
right: -0.375rem;
width: 0.75rem;
height: 100%;
display: none;
align-items: center;
justify-content: center;
cursor: col-resize;
touch-action: none;
}
.list-table__resize-handle::before {
content: '';
width: 2px;
height: 60%;
border-radius: 999px;
background: var(--border-color);
transition: background-color 120ms ease;
}
.list-table__resize-handle:hover::before,
.list-table__resize-handle:active::before {
background: var(--accent-color);
}
.list-table--column-width-editing .list-table__resize-handle {
display: flex;
}
.list-table--column-width-editing thead th {
cursor: default;
}
.list-container--column-width-editing .list-table__header-button {
cursor: pointer;
}
.list-container--resizing {
cursor: col-resize;
}
.list-container--resizing * {
cursor: col-resize !important;
user-select: none !important;
}
.list-pagination {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
padding-left: 20px;
margin-bottom:16px;
}
.list-pagination__summary {
color: var(--text-secondary);
font-size: 0.875rem;
}
.list-pagination__items-per-page {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.875rem;
}
.list-pagination__items-per-page select {
border: 1px solid var(--border-color);
border-radius: 0.375rem;
padding: 0.25rem 0.5rem;
background-color: var(--panel-bg, var(--background-color, #fff));
color: inherit;
font-size: inherit;
}
.list-pagination__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
margin-left: auto;
margin-right: 16px;
}
.list-pagination__navigation {
display: flex;
align-items: center;
gap: 0.25rem;
}
.list-pagination__navigation:empty {
display: none;
}
.list-pagination__page-info {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.875rem;
}
.list-pagination__page-info label {
color: inherit;
}
.list-pagination__page-count {
white-space: nowrap;
}
.list-pagination__page-input {
width: 3rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
background: var(--panel-bg, var(--background-color, #fff));
color: var(--text-primary, inherit);
font-size: inherit;
padding: 0.25rem 0.5rem;
text-align: center;
}
.list-pagination__page-input:focus-visible {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10.8%, transparent);
}
[data-theme='dark'] .list-pagination__page-input {
color: var(--color-white, #ffffff);
}
.list-pagination .wmw-button:not(.wmw-button--icon-only) {
min-width: 4.5rem;
}
.list-table__cell {
vertical-align: middle;
}
.list-table__cell-content {
display: block;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
margin-left: 7px;
}
.list-empty-state {
margin: 2.5rem auto;
align-self: center;
text-align: center;
width: min(100%, 36rem);
}
.list-empty-state__content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.list-empty-state__message {
margin: 0;
font-size: 1rem;
color: color-mix(in srgb, var(--text-color) 82%, var(--muted-text) 18%);
}
.list-empty-state__quote {
margin: 0;
font-size: 0.95rem;
font-style: italic;
color: color-mix(in srgb, var(--text-color) 70%, var(--muted-text) 30%);
}
.list-empty-state__quote-mark {
font-size: 1.2rem;
color: color-mix(in srgb, var(--text-color) 65%, transparent 35%);
padding-inline: 0.1em;
}
.list-table--overflow-wrap .list-table__cell-content {
white-space: normal;
overflow-wrap: anywhere;
}
.list-table--overflow-ellipsis .list-table__cell-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-table--density-compact {
--list-row-padding-block: 0.375rem;
}
.list-table--density-airy {
--list-row-padding-block: 0.75rem;
}
.list-table tbody tr.list-table__row--expanded,
.list-table tbody tr.list-table__row--expanded ~ tr.list-table__row--nested {
background: var(--panel-bg, var(--background-color, #fff)) !important;
}
.list-table__header-cell {
position: relative;
padding: 0;
}
.list-table__header-cell > .list-table__header-label {
padding: var(--list-row-padding-block) var(--list-row-padding-inline);
display: flex;
align-items: center;
}
.list-table__header-button {
all: unset;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
width: 100%;
box-sizing: border-box;
padding: var(--list-row-padding-block) var(--list-row-padding-inline);
cursor: pointer;
}
.list-table__header-sort {
font-size: 0.75rem;
line-height: 1;
opacity: 0;
transition: opacity 120ms ease;
}
.list-table__header-cell:hover .list-table__header-sort,
.list-table__header-cell:focus-within .list-table__header-sort,
.list-table__header-sort[data-visible='true'] {
opacity: 1;
}
.list-table--has-active-sort thead th.list-table__header-cell[aria-sort='none'] {
opacity: 0.82;
transition: opacity 120ms ease;
}
.list-table--has-active-sort thead th.list-table__header-cell[aria-sort='ascending'],
.list-table--has-active-sort thead th.list-table__header-cell[aria-sort='descending'] {
opacity: 1;
}
.list-table--has-active-sort thead th.list-table__header-cell[aria-sort='none']:hover,
.list-table--has-active-sort thead th.list-table__header-cell[aria-sort='none']:focus-within {
opacity: 1;
}
.assets-list__tag-wrapper {
position: relative;
display: inline-block;
max-width: 100%;
width: 100%;
min-width: 0;
}
.assets-list__tag-list {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
margin: 0;
padding: 0;
list-style: none;
max-width: 100%;
}
.assets-list__tag-list--ellipsis {
flex-wrap: nowrap;
overflow: hidden;
}
.assets-list__tag-list--measure {
position: absolute;
top: 0;
left: 0;
flex-wrap: nowrap;
visibility: hidden;
pointer-events: none;
max-width: none;
overflow: visible;
}
.assets-list__tag {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: 999px;
background-color: color-mix(
in srgb,
var(--color-neutral-200, #e5e7eb) 70%,
transparent 30%
);
color: var(--text-color);
font-size: 0.75rem;
line-height: 1.25rem;
font-weight: 600;
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
max-width: 100%;
}
.assets-list__tag--wrap {
max-width: min(120px, 100%);
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.assets-list__tag--overflow {
cursor: default;
}
.assets-list__tag-overflow-label {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.assets-list__tag-tooltip-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.25rem;
max-width: 20rem;
}
.assets-list__tag-tooltip-list li {
white-space: nowrap;
}
.assets-list__tag-list--measure .assets-list__tag {
max-width: none;
flex-shrink: 0;
}
.assets-list__tag-list--measure .assets-list__tag--wrap {
max-width: none;
}
[data-theme='dark'] .assets-list__tag {
background-color: color-mix(
in srgb,
var(--color-neutral-700, #374151) 70%,
transparent 30%
);
color: var(--color-neutral-100, #f3f4f6);
}
.assets-list__tag.users__status-badge {
display: inline-block;
padding: 0 10px;
height: 22px;
line-height: 22px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
}
.assets-list__tag.users__status-badge.asset-motion-badge {
background: #e5e7eb;
color: #111111;
}
[data-theme='dark'] .assets-list__tag.users__status-badge.asset-motion-badge {
background: #d1d5db;
color: #111111;
}
.view-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.125rem;
padding: 0.125rem;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--sidebar-bg);
overflow: hidden;
flex-shrink: 0;
box-sizing: border-box;
}
.view-toggle__indicator {
position: absolute;
top: 0;
left: 0;
border-radius: 999px;
background: var(--accent-color);
opacity: 0;
transition:
transform 0.25s ease,
width 0.25s ease,
height 0.25s ease,
opacity 0.15s ease;
will-change: transform, width, height;
pointer-events: none;
z-index: 0;
}
.view-toggle__indicator.is-visible {
opacity: 1;
}
.view-toggle__button {
position: relative;
z-index: 1;
--button-bg: transparent;
--button-color: var(--text-color);
--button-border: transparent;
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
border-radius: 999px;
font-weight: 600;
}
.view-toggle__button:focus-visible {
outline-offset: -2px;
}
.view-toggle__button[aria-pressed='true'] {
--button-color: var(--color-white);
}
[data-theme='dark'] .view-toggle {
background: var(--panel-bg);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .view-toggle__button[aria-pressed='true'] {
--button-color: var(--color-neutral-900);
}
.search-input {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--border-color);
background-color: var(--surface-bg, var(--content-bg));
color: inherit;
transition: background-color 0.2s ease, border-color 0.2s ease,
box-shadow 0.2s ease;
}
.search-input input {
border: none;
background: transparent;
color: inherit;
font: inherit;
outline: none;
min-width: 0;
width: 100%;
}
.search-input input::placeholder {
color: inherit;
opacity: 0.7;
}
.search-input input::-webkit-search-cancel-button {
filter: grayscale(1);
opacity: 0.6;
}
.search-input__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted-text);
}
.search-input:focus-within,
.search-input[data-expanded='true'] {
border-color: var(--accent-color);
}
.search-input:focus-within,
.search-input[data-expanded='true'],
.search-input[data-has-value='true'] {
background-color: var(--content-bg);
}
[data-theme='dark'] .search-input:focus-within,
[data-theme='dark'] .search-input[data-expanded='true'],
[data-theme='dark'] .search-input[data-has-value='true'] {
background-color: var(--surface-bg, var(--content-bg));
}
.side-panel {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
justify-content: flex-end;
align-items: stretch;
pointer-events: none;
}
.side-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.25);
transition: background 0.3s ease;
pointer-events: auto;
}
.side-panel__backdrop--transparent {
background: transparent;
}
.side-panel__backdrop--noninteractive {
pointer-events: none;
}
.side-panel__container {
position: absolute;
width: min(532px, 100%);
max-width: 100%;
background: var(
--panel-bg,
var(--color-white, var(--bg-color, #fff))
);
padding: 2rem 2.25rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
pointer-events: auto;
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), width 0.35s ease;
overflow: hidden;
box-sizing: border-box;
}
.side-panel__container--right {
right: 0;
border-left: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: -20px 0 36px rgba(15, 23, 42, 0.108);
transform: translateX(100%);
}
.side-panel__container--left {
left: 0;
border-right: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 20px 0 36px rgba(15, 23, 42, 0.108);
transform: translateX(-100%);
}
.side-panel--open .side-panel__container--right,
.side-panel--open .side-panel__container--left {
transform: translateX(0);
}
.side-panel__container--expanded {
width: min(950px, 100%);
}
.side-panel__header {
display: flex;
justify-content: space-between;
gap: 1.5rem;
align-items: flex-start;
}
.side-panel__headline {
flex: 1;
min-width: 0;
}
.side-panel__title-group {
display: flex;
flex-direction: column;
min-width: 0;
}
.side-panel__title-group h2 {
margin: 0;
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary, var(--color-neutral-900));
}
.side-panel__subactions {
display: inline-flex;
gap: 0.5rem;
margin-top: 0.25rem;
}
.side-panel__header-content {
margin-top: 0.75rem;
}
.side-panel__header-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.side-panel__subaction-button {
border-radius: 0.75rem;
min-width: 2.5rem;
min-height: 2.5rem;
--button-border: var(--border-color);
--button-bg: transparent;
--button-color: var(--text-color);
--button-hover-bg: var(--menu-item-hover);
--button-hover-border: var(--accent-color, var(--color-accent-600));
--button-active-bg: var(--menu-item-active);
}
.side-panel__subaction-button[aria-pressed='true'] {
--button-bg: color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 18%,
transparent 82%
);
--button-border: var(--accent-color, var(--color-accent-600));
--button-color: var(--accent-color, var(--color-accent-600));
}
.side-panel__subaction-button:hover:not(:disabled),
.side-panel__subaction-button:focus-visible {
--button-color: var(--accent-color, var(--color-accent-600));
--button-hover-border: var(--accent-color, var(--color-accent-600));
--button-hover-bg: color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 12%,
transparent 88%
);
}
.side-panel__subaction-button:disabled {
opacity: 0.65;
}
.side-panel__subaction-button--delete {
--button-color: var(--text-color);
}
.side-panel__subaction-button--delete:hover:not(:disabled),
.side-panel__subaction-button--delete:focus-visible {
--button-color: var(--color-error-600);
--button-hover-border: color-mix(
in srgb,
var(--color-error-600) 70%,
transparent 30%
);
--button-hover-bg: color-mix(
in srgb,
var(--color-error-100, #fee2e2) 65%,
transparent 35%
);
}
.side-panel__subaction-button--delete-confirm {
--button-bg: color-mix(
in srgb,
var(--color-error-200, #fecaca) 40%,
transparent 60%
);
--button-color: var(--color-error-700);
--button-border: color-mix(
in srgb,
var(--color-error-200, #fecaca) 70%,
transparent 30%
);
}
.side-panel__subaction-button--delete-confirm:hover:not(:disabled),
.side-panel__subaction-button--delete-confirm:focus-visible {
--button-bg: color-mix(
in srgb,
var(--color-error-200, #fecaca) 50%,
transparent 50%
);
--button-border: color-mix(
in srgb,
var(--color-error-300, #fca5a5) 70%,
transparent 30%
);
}
.side-panel__close {
border: none;
background: none;
color: var(--muted-text, var(--color-neutral-600));
border-radius: 0.75rem;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.side-panel__close:hover,
.side-panel__close:focus-visible {
color: var(--accent-color, var(--color-accent-600));
background-color: color-mix(in srgb, var(--accent-color, var(--color-accent-600)) 12%, transparent);
outline: none;
}
.side-panel__body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin-right: -2rem;
padding-right: 2rem;
}
.side-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.side-panel__section-title {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text, var(--color-neutral-600));
}
.side-panel__details-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.side-panel__details-row {
display: grid;
grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.side-panel__details-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text, var(--color-neutral-600));
margin: 0;
}
.side-panel__details-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary, var(--color-neutral-900));
word-break: break-word;
margin: 0;
}
.side-panel__details-value--stacked {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.side-panel__details-value--stacked .battery-indicator {
align-self: flex-start;
}
.side-panel__details-meta {
font-size: 0.75rem;
font-weight: 500;
color: var(--muted-text, var(--color-neutral-600));
}
.side-panel__tags-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.side-panel__tags-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-text, var(--color-neutral-600));
}
.side-panel__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-content: flex-start;
}
.side-panel__tags-empty {
font-size: 0.95rem;
font-weight: 600;
color: var(--muted-text, var(--color-neutral-600));
}
.side-panel__tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--menu-item-hover, rgba(148, 163, 184, 0.14));
border: 1px solid var(--sidebar-border, rgba(148, 163, 184, 0.28));
color: var(--text-primary, var(--color-neutral-900));
font-family: inherit;
font-weight: 600;
gap: 0.25rem;
cursor: default;
pointer-events: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.side-panel__tag--interactive {
cursor: pointer;
pointer-events: auto;
}
.side-panel__tag--interactive:hover,
.side-panel__tag--interactive:focus-visible {
background: var(--menu-item-active, rgba(59, 130, 246, 0.08));
border-color: var(--accent-color, var(--color-accent-600));
color: var(--accent-color, var(--color-accent-600));
outline: none;
box-shadow: 0 0 0 2px
color-mix(in srgb, var(--accent-color, var(--color-accent-600)) 24%, transparent);
}
.side-panel__container--overlay {
overflow: visible;
}
.side-panel__footer {
margin-top: auto;
display: flex;
justify-content: flex-end;
gap: 1rem;
align-items: center;
}
@media (max-width: 640px) {
.side-panel__details-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.side-panel__container {
transition: none;
transform: none;
}
}
[data-theme='dark'] .side-panel__backdrop {
background: rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .side-panel__container {
background: rgba(20, 22, 26, 0.95);
border-left: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: -18px 0 42px rgba(0, 0, 0, 0.33);
}
[data-theme='dark'] .side-panel__title-group h2 {
color: var(--color-neutral-200);
}
[data-theme='dark'] .side-panel__title-group p {
color: rgba(226, 232, 240, 0.68);
}
[data-theme='dark'] .side-panel__close {
color: rgba(203, 213, 225, 0.75);
}
[data-theme='dark'] .side-panel__subaction-button {
--button-color: rgba(203, 213, 225, 0.75);
--button-border: rgba(255, 255, 255, 0.12);
--button-hover-bg: rgba(255, 255, 255, 0.08);
--button-hover-border: var(--accent-color, var(--color-accent-400));
}
[data-theme='dark'] .side-panel__subaction-button:hover:not(:disabled),
[data-theme='dark'] .side-panel__subaction-button:focus-visible {
--button-color: var(--accent-color, var(--color-accent-400));
--button-hover-border: var(--accent-color, var(--color-accent-400));
--button-hover-bg: color-mix(
in srgb,
var(--accent-color, var(--color-accent-400)) 18%,
transparent 82%
);
}
[data-theme='dark'] .side-panel__subaction-button--delete {
--button-color: rgba(203, 213, 225, 0.75);
--button-border: rgba(255, 255, 255, 0.08);
}
[data-theme='dark']
.side-panel__subaction-button--delete:hover:not(:disabled),
[data-theme='dark'] .side-panel__subaction-button--delete:focus-visible {
--button-color: var(--color-error-200);
--button-hover-bg: color-mix(
in srgb,
var(--color-error-600) 18%,
transparent 82%
);
--button-hover-border: color-mix(
in srgb,
var(--color-error-600) 70%,
transparent 30%
);
}
[data-theme='dark'] .side-panel__subaction-button--delete-confirm {
--button-bg: rgba(220, 38, 38, 0.24);
--button-color: var(--color-error-200);
--button-border: rgba(220, 38, 38, 0.32);
}
[data-theme='dark']
.side-panel__subaction-button--delete-confirm:hover:not(:disabled),
[data-theme='dark'] .side-panel__subaction-button--delete-confirm:focus-visible {
--button-bg: rgba(220, 38, 38, 0.32);
--button-border: rgba(220, 38, 38, 0.4);
}
[data-theme='dark'] .side-panel__details-label {
color: rgba(203, 213, 225, 0.75);
}
[data-theme='dark'] .side-panel__details-value {
color: var(--color-neutral-50);
}
[data-theme='dark'] .side-panel__details-meta {
color: rgba(148, 163, 184, 0.75);
}
[data-theme='dark'] .side-panel__tags-empty {
color: rgba(148, 163, 184, 0.75);
}
[data-theme='dark'] .side-panel__tag {
background: rgba(30, 41, 59, 0.72);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(226, 232, 240, 0.88);
}
[data-theme='dark'] .side-panel__tag svg {
color: currentColor;
fill: currentColor;
}
[data-theme='dark'] .side-panel__tag--interactive:hover,
[data-theme='dark'] .side-panel__tag--interactive:focus-visible {
background: color-mix(
in srgb,
var(--accent-color, var(--color-accent-400)) 24%,
transparent
);
border-color: color-mix(
in srgb,
var(--accent-color, var(--color-accent-300)) 65%,
transparent
);
color: var(--color-neutral-50);
box-shadow: 0 0 0 2px
color-mix(in srgb, var(--accent-color, var(--color-accent-400)) 24%, transparent);
}
[data-theme='dark'] .side-panel__subaction-button[aria-pressed='true'] {
background-color: color-mix(
in srgb,
var(--accent-color, var(--color-accent-400)) 22%,
transparent
);
color: var(--color-neutral-50);
}
[data-theme='dark'] .side-panel__close:hover,
[data-theme='dark'] .side-panel__close:focus-visible,
[data-theme='dark'] .side-panel__subaction-button:hover,
[data-theme='dark'] .side-panel__subaction-button:focus-visible {
background-color: color-mix(in srgb, var(--accent-color, var(--color-accent-400)) 18%, transparent);
color: var(--color-neutral-50);
}
.side-panel__body::-webkit-scrollbar {
width: 0.45rem;
}
.side-panel__body::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, rgba(100, 116, 139, 0.45) 80%, transparent);
border-radius: 999px;
}
.side-panel__body::-webkit-scrollbar-track {
background: transparent;
}
.side-panel__title-fade {
position: relative;
max-width: 100%;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.side-panel__title-fade h2 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0;
padding: 0;
}
.side-panel__title-fade::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
pointer-events: none;
background: linear-gradient(to right, rgba(255,255,255,0), #fff 80%);
}
.side-panel__title-chip-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
}
.side-panel__title-chip {
display: flex;
align-items: center;
}
.wmw-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.42rem 0.9rem;
min-height: 2.25rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
background: var(var(--panel-bg), #e5e7eb);
color: var(--text-color);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
color 0.2s ease;
}
.wmw-chip--sm {
padding: 0.32rem 0.7rem;
font-size: 0.78rem;
gap: 0.4rem;
min-height: 1.95rem;
}
.wmw-chip--md {
padding: 0.42rem 0.9rem;
font-size: 0.85rem;
gap: 0.5rem;
min-height: 2.25rem;
}
.wmw-chip:focus-visible {
outline: none;
border-color: var(--accent-color, #2563eb);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #2563eb) 22%, transparent);
}
.wmw-chip:hover:not(:disabled) {
border-color: var(--accent-color, #2563eb);
background: color-mix(in srgb, var(--accent-color, #2563eb) 12%, var(--panel-bg));
color: var(--accent-color, #2563eb);
}
.wmw-chip:active:not(:disabled),
.wmw-chip[aria-pressed='true'] {
border-color: var(--accent-color, #2563eb);
background: var(--accent-color, #2563eb);
color: white;
}
[data-theme='dark'] .wmw-chip:active:not(:disabled),
[data-theme='dark'] .wmw-chip[aria-pressed='true'] {
background: color-mix(in srgb, var(--accent-color, #2563eb) 50%, var(--panel-bg));
}
.wmw-chip--selected {
border-color: var(--accent-color, #2563eb);
background: color-mix(in srgb, var(--accent-color, #2563eb) 18%, transparent);
color: var(--accent-color, #2563eb);
}
[data-theme='dark'] .wmw-chip--selected {
background: color-mix(in srgb, var(--accent-color, #2563eb) 28%, transparent);
}
.wmw-chip--outlined {
border-color: var(--accent-color, #2563eb);
background: transparent;
color: var(--text-color, #202020);
}
.wmw-chip--outlined:hover:not(:disabled) {
border-color: var(--accent-color, #2563eb);
background: color-mix(in srgb, var(--accent-color, #2563eb) 10%, transparent);
color: var(--text-color, #202020);
}
.wmw-chip--outlined:active:not(:disabled),
.wmw-chip--outlined[aria-pressed='true'],
.wmw-chip--outlined.wmw-chip--selected {
border-color: var(--accent-color, #2563eb);
background: color-mix(in srgb, var(--accent-color, #2563eb) 14%, transparent);
color: var(--text-color, #202020);
}
.wmw-chip--disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.wmw-chip--static {
cursor: default;
}
.wmw-chip--static:hover,
.wmw-chip--static:active,
.wmw-chip--static[aria-pressed='true'] {
border-color: color-mix(in srgb, var(--border-color) 75%, transparent);
background: var(var(--panel-bg), #e5e7eb);
color: var(--text-color);
box-shadow: none;
}
.wmw-chip__icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.wmw-chip__icon--trailing {
margin-left: 0.1rem;
}
.wmw-chip__label {
line-height: 1.2;
white-space: nowrap;
}
.wmw-input.wmw-display-field.wmw-display-field--underlined {
border-bottom: 1px solid #ccc;
padding-bottom: 2px;
}
.wmw-field {
display: flex;
flex-direction: column;
width: 100%;
}
.wmw-field__label {
font-size: 0.8rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--label-color, grey);
}
.wmw-field__required {
color: var(--color-error-600);
font-weight: 700;
}
.wmw-field__description {
margin: 0;
font-size: 0.875rem;
color: var(--muted-text);
max-width: 60ch;
}
.wmw-field__control {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wmw-field__hint {
margin: 0;
font-size: 0.8125rem;
color: var(--muted-text);
}
.wmw-field__error {
margin: 0;
font-size: 0.8125rem;
color: var(--color-error-600);
font-weight: 600;
}
.wmw-input,
.wmw-textarea,
.wmw-select {
width: 100%;
font: inherit;
color: inherit;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
padding: 0.65rem 0.85rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
min-height: 2.75rem;
}
.wmw-input:focus-visible,
.wmw-textarea:focus-visible,
.wmw-select:focus-visible,
.wmw-number-input__field:focus-visible {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10.8%, transparent);
}
.wmw-field--error .wmw-input,
.wmw-field--error .wmw-textarea,
.wmw-field--error .wmw-select,
.wmw-field--error .wmw-number-input,
.wmw-field--error .wmw-toggle {
border-color: color-mix(in srgb, var(--color-error-400) 82%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error-100) 39%, transparent);
}
.wmw-textarea {
min-height: 6.25rem;
resize: vertical;
line-height: 1.5;
}
.wmw-select {
appearance: none;
padding-right: 2.5rem;
cursor: pointer;
}
.wmw-select__icon {
position: absolute;
inset-inline-end: 0.85rem;
inset-block-start: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--muted-text);
}
.wmw-field__control:has(.wmw-select) {
position: relative;
}
.wmw-number-input {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
overflow: hidden;
}
.wmw-number-input__field {
border: none;
font: inherit;
color: inherit;
background: transparent;
padding: 0.65rem 0.85rem;
min-height: 2.75rem;
width: 100%;
}
.wmw-number-input__field:focus-visible {
outline: none;
}
.wmw-number-input__controls {
display: flex;
flex-direction: column;
border-inline-start: 1px solid var(--border-color);
background: color-mix(in srgb, var(--content-bg) 80%, transparent);
}
.wmw-number-input__button {
appearance: none;
border: none;
background: transparent;
padding: 0.20rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted-text);
transition: background 0.2s ease, color 0.2s ease;
}
.wmw-number-input__button:hover,
.wmw-number-input__button:focus-visible {
background: color-mix(in srgb, var(--accent-color) 12%, transparent);
color: var(--accent-color);
}
.wmw-number-input__button:focus-visible {
outline: none;
}
.wmw-number-input__button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.wmw-toggle {
appearance: none;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--panel-bg);
padding: 0.35rem 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.65rem;
cursor: pointer;
color: inherit;
font: inherit;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.wmw-toggle:disabled {
cursor: not-allowed;
opacity: 0.65;
}
.wmw-toggle__track {
position: relative;
inline-size: 2.75rem;
block-size: 1.5rem;
border-radius: 999px;
background: var(--border-color);
transition: background 0.2s ease;
}
.wmw-toggle__thumb {
position: absolute;
inset-block-start: 0.1875rem;
inset-inline-start: 0.2rem;
inline-size: 1.125rem;
block-size: 1.125rem;
border-radius: 999px;
background: var(--color-white);
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
transition: transform 0.2s ease;
}
[data-theme='dark'] .wmw-toggle__thumb {
background: var(--panel-bg);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
}
.wmw-toggle--checked {
background: color-mix(in srgb, var(--accent-color) 12%, transparent);
border-color: var(--accent-color);
}
.wmw-toggle--checked .wmw-toggle__track {
background: var(--accent-color);
}
.wmw-toggle--checked .wmw-toggle__thumb {
transform: translateX(1.2rem);
}
.wmw-toggle__state {
font-size: 0.875rem;
font-weight: 600;
color: var(--muted-text);
}
.wmw-toggle--checked .wmw-toggle__state {
color: var(--accent-color);
}
.wmw-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10.8%, transparent);
}
[data-theme='dark'] .wmw-number-input__controls {
background: color-mix(in srgb, var(--panel-bg) 82%, transparent);
}
[data-theme='dark'] .wmw-number-input__button:hover,
[data-theme='dark'] .wmw-number-input__button:focus-visible {
background: color-mix(in srgb, var(--accent-color) 20%, transparent);
}
[data-theme='dark'] .wmw-toggle {
background: color-mix(in srgb, var(--panel-bg) 75%, transparent);
}
[data-theme='dark'] .wmw-toggle__track {
background: color-mix(in srgb, var(--border-color) 65%, transparent);
}
[data-theme='dark'] .wmw-toggle--checked {
background: color-mix(in srgb, var(--accent-color) 22%, transparent);
}
.wmw-field--error .wmw-toggle__state {
color: var(--color-error-600);
}
.wmw-field--error .wmw-toggle--checked .wmw-toggle__state {
color: var(--color-error-600);
}
.wmw-display-field {
display: flex;
align-items: center;
min-height: 40px;
cursor: default;
}
.wmw-display-field:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.wmw-input.wmw-display-field {
border: none;
box-shadow: none;
background: transparent;
}
.wmw-custom-select {
position: relative;
display: inline-block;
width: 100%;
line-height: 1;
font: inherit;
--wmw-accent-6: color-mix(in srgb, var(--accent-color) 6%, transparent);
--wmw-accent-10: color-mix(in srgb, var(--accent-color) 10%, transparent);
--wmw-accent-20: color-mix(in srgb, var(--accent-color) 20%, transparent);
--wmw-accent-60: color-mix(in srgb, var(--accent-color) 60%, transparent);
--wmw-border: color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
--wmw-list-border: color-mix(in srgb, var(--accent-color) 8%, var(--border-color));
--wmw-icon-color: color-mix(in srgb, var(--accent-color) 40%, var(--muted-text));
--wmw-selected-foreground: color-mix(in srgb, var(--accent-color) 100%, #fff 0%);
}
.wmw-custom-select__button {
font: inherit;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 8px;
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
color: inherit;
cursor: pointer;
text-align: left;
transition: box-shadow 150ms ease, border-color 150ms ease;
padding: 0.65rem 0.85rem;
min-height: 2.75rem;
}
.wmw-custom-select__value {
font: inherit;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
margin-right: 8px;
color: inherit;
}
.wmw-custom-select__button .wmw-select__icon {
font: inherit;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--wmw-icon-color);
transition: transform 160ms ease;
}
.wmw-custom-select__button[aria-expanded="true"] .wmw-select__icon {
transform: translateY(-50%) rotate(180deg);
}
.wmw-custom-select__button:focus {
outline: none;
box-shadow: 0 0 0 3px var(--wmw-accent-10);
border-color: color-mix(in srgb, var(--accent-color) 100%, var(--border-color));
}
.wmw-custom-select__button:hover {
border-color: color-mix(in srgb, var(--accent-color) 100%, var(--border-color));
}
.wmw-custom-select__list {
font: inherit;
position: absolute;
left: 0;
top: calc(100% + 6px);
min-width: 100%;
max-width: 28rem;
max-height: 150px;
overflow: auto;
margin: 0;
padding: 6px 4px;
list-style: none;
background: var(--panel-bg);
border: 1px solid var(--wmw-list-border);
box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 6%, rgba(16,24,40,0.12));
border-radius: 8px;
z-index: 1200;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--border-color) 80%, transparent) transparent;
}
.wmw-custom-select__list::-webkit-scrollbar {
width: 4px;
}
.wmw-custom-select__list::-webkit-scrollbar-track {
background: transparent;
}
.wmw-custom-select__list::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--border-color) 80%, transparent);
border-radius: 999px;
}
.wmw-custom-select__option {
font: inherit;
display: block;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
color: inherit;
background: transparent;
transition: background-color 120ms ease, color 120ms ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wmw-custom-select__option:hover {
background: var(--wmw-accent-10);
}
.wmw-custom-select__option.selected,
.wmw-custom-select__option[aria-selected="true"] {
background: var(--wmw-accent-60);
}
.wmw-custom-select__option[aria-disabled="true"],
.wmw-custom-select__option[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.styled-text-input__controls {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
}
.styled-text-input__controls {
font-size: 0.72rem;
gap: 0.25rem;
}
.styled-text-input__controls .wmw-input {
min-height: 1.2rem;
padding: 0.15rem 0.3rem;
font-size: 0.72rem;
}
.styled-text-input__controls label {
gap: 0.08rem;
font-size: 0.72rem;
}
.info-drawer {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
position: relative;
}
.info-drawer__header {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0;
margin: 0 0 8px 0;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
z-index: 2;
}
.info-drawer__header .side-panel__section-title {
margin: 0;
}
.info-drawer__chevron {
flex: 0 0 auto;
display: inline-block;
margin-left: auto;
margin-right: -0.3rem;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 350ms ease;
opacity: 0.9;
color: #334155;
}
[data-theme='dark'] .info-drawer__chevron {
color: #cbd5e1;
}
.info-drawer[data-collapsed='false'] .info-drawer__chevron {
transform: rotate(225deg);
}
.info-drawer[data-collapsed='true'] .info-drawer__chevron {
margin-right: -0.5rem;
}
.info-drawer--extended .info-drawer__chevron {
margin-right: 0.5rem;
}
.info-drawer--extended[data-collapsed='true'] .info-drawer__chevron {
margin-right: 0.5rem;
}
.info-drawer__body {
overflow: hidden;
max-height: 600px;
opacity: 1;
transition: max-height 500ms ease, opacity 350ms ease;
will-change: max-height, opacity;
}
.info-drawer[data-collapsed='true'] .info-drawer__body {
max-height: 0;
opacity: 0;
}
.info-tile-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
min-width: 0;
min-height: 0;
width: 100%;
align-items: stretch;
margin-bottom: 1rem;
}
.info-tile-section > * {
min-width: 0;
}
.info-fields {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.info-fields__column {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.info-drawer__field-value {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.info-drawer__field-info {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted-text);
cursor: help;
}
.info-drawer__field-info:focus-visible {
outline: none;
color: var(--accent-color);
}
.info-tile-section--extended .info-tile {
min-width: 146px;
flex: 0 0 146px;
}
.info-tile {
min-width: 0;
display: flex;
justify-content: flex-end;
align-items: stretch;
}
.info-tile__placeholder {
width: 146px;
height: 146px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #64748b;
border-radius: 8px;
font-size: 0.75rem;
text-align: center;
padding: 8px;
border: 1px dashed #cbd5e1;
}
[data-theme='dark'] .info-tile__placeholder {
background: #1e293b;
color: #94a3b8;
border-color: #334155;
}
@media (prefers-reduced-motion: reduce) {
.info-drawer__chevron,
.info-drawer__body {
transition: none;
}
}
.info-drawer--extended .info-tile-section--extended {
display: flex;
align-items: stretch;
width: 100%;
gap: 2rem;
}
.info-fields--extended {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
align-items: start;
gap: 1rem;
width: 100%;
}
.info-fields--extended .wmw-field {
min-width: 0;
}
.info-fields--extended .wmw-display-field {
white-space: normal;
}
.info-fields--extended .wmw-field:last-child {
justify-self: start;
}
.info-tile-section--extended .info-tile {
margin-left: auto;
align-self: stretch;
}
.info-tile-section--extended .info-tile > .image-tile,
.info-tile-section--extended .info-tile > .default-tile.image-tile {
height: 100% !important;
}
.info-drawer__body--extended {
width: 100%;
}
.default-tile {
--tile-bg: #f2f2f2;
--tile-fg: #202020;
--tile-border: #e0e0e0;
border-radius: 40px 12px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
background: var(--tile-bg);
color: var(--tile-fg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--tile-border);
padding: 12px;
}
/*
.default-tile:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.10);
transform: translateY(-2px) scale(1.02);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
*/
[data-theme='dark'] .default-tile {
--tile-bg: #3a3a3a;
--tile-fg: #f0f0f0;
--tile-border: #4a4a4a;
background: var(--tile-bg);
color: var(--tile-fg);
border-color: var(--tile-border);
}
.default-tile ::-webkit-scrollbar {
width: 8px;
height: 8px;
background: #b1b1b1;
}
.default-tile ::-webkit-scrollbar-thumb {
background: #474747;
border-radius: 8px;
}
.default-tile ::-webkit-scrollbar-button:single-button:vertical:decrement {
background: url('data:image/svg+xml;utf8,') no-repeat center;
height: 8px;
}
.default-tile ::-webkit-scrollbar-button:single-button:vertical:increment {
background: url('data:image/svg+xml;utf8,') no-repeat center;
height: 8px;
}
.default-tile ::-webkit-scrollbar {
background: #f8f8f8;
}
.default-tile ::-webkit-scrollbar-thumb {
background: #474747;
border-radius: 8px;
}
.default-tile.alert ::-webkit-scrollbar {
background: #2e0c07;
}
.default-tile.inactive ::-webkit-scrollbar {
background: #b1b1b1;
}
.default-tile.alert ::-webkit-scrollbar-thumb {
background: #a8071a;
border-radius: 8px;
}
.default-tile.inactive ::-webkit-scrollbar-thumb {
background: #f1f1f1;
border-radius: 8px;
}
.default-value {
font-weight: 400;
font-family: 'Hanken Grotesk', serif;
line-height: 18px;
}
.default-description {
color: #202020;
text-align: center;
white-space: normal;
padding-bottom: 8px;
padding-top: 2px;
font-family: 'Hanken Grotesk', regular, serif;
}
[data-theme='dark'] .default-description {
color: #e6e6e6;
}
.default-timeago {
font-size: 9px;
color: #bdbdbd;
margin-bottom: 10px;
font-family: 'Hanken Grotesk', regular, serif;
}
[data-theme='dark'] .default-timeago {
color: #cfcfcf;
}
.metric-symbol {
color: dimgrey;
font-family: 'Hanken Grotesk', regular, serif;
}
[data-theme='dark'] .metric-symbol {
color: #cfcfcf;
}
.bar-tile__header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-bottom: 10px;
}
.bar-tile__icon {
margin-right: 8px;
display: flex;
align-items: center;
}
.default-subtitle {
color: #888;
margin-top: -5px;
}
[data-theme='dark'] .default-subtitle {
color: #cfcfcf;
}
.default-tile.list-tile {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 12px;
overflow: hidden;
}
.list-tile__icon {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.list-tile__icon-img {
width: 24px;
height: 24px;
}
.list-tile__title {
font-size: var(--list-title-fs, 16px);
text-align: left;
align-self: flex-start;
max-width: 90%;
font-family: 'Hanken Grotesk', regular, serif;
}
.list-tile__content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
align-items: stretch;
width: 100%;
padding: 10px;
max-height: var(--list-content-max-h, 200px);
}
.list-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: calc(4px * var(--list-scale, 1));
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.list-row__text {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
text-align: left;
}
.list-row__text--current {
max-width: calc(100% - 52px);
}
.list-value {
font-size: var(--list-value-fs, 14px);
font-weight: 700;
line-height: calc(var(--list-value-fs, 14px) + 1px);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-subvalue {
font-size: var(--list-subvalue-fs, 12px);
line-height: var(--list-subvalue-fs, 12px);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: dimgrey;
}
[data-theme='dark'] .list-subvalue {
color: #cfcfcf;
}
.list-chip {
font-size: 10px;
padding: 2px;
margin-left: 0;
flex-shrink: 0;
cursor: default;
}
.default-tile.text-tile {
position: relative;
}
.text-tile__icon {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.text-tile__icon-img {
width: 24px;
height: 24px;
}
.text-tile__inner {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
height: 100%;
width: 100%;
}
.text-tile__title {
font-size: calc(12px * var(--text-scale, 1));
line-height: 14px;
text-align: center;
}
.text-tile-chip {
background: #2e7d32;
color: #000000;
border: none;
cursor: default;
font-size: 12px;
line-height: 1;
min-height: 16px;
height: 16px;
padding: 0 6px;
text-transform: uppercase;
position: relative;
top: 20px;
opacity: 1 !important;
}
.text-tile__value-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.text-tile__value {
font-size: var(--text-value-fs, 33px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
}
.text-tile__value--overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.text-tile__total {
margin-top: 0;
font-size: var(--text-timeago-fs, 14px);
line-height: 1;
}
.text-tile__desc {
font-size: var(--text-desc-fs, 16px);
line-height: calc(19px * var(--text-scale, 1));
max-width: 100%;
}
.text-tile__desc--overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
}
.text-tile__timeago {
font-size: var(--text-timeago-fs, 14px);
line-height: 1;
}
.default-tile.metric-tile {
position: relative;
}
.metric-tile__icon {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.metric-tile__icon-img {
width: 24px;
height: 24px;
}
.metric-tile__title {
font-size: calc(12px * var(--metric-scale, 1));
line-height: 19px;
max-width: 90%;
text-align: center;
}
.metric-tile__value-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
}
.metric-tile__value-area--lowered {
padding-top: calc(30px * var(--metric-scale, 1));
}
.metric-tile__value {
font-size: var(--metric-value-fs, 33px);
}
.metric-tile__metric {
display: inline-flex;
align-items: baseline;
}
.metric-tile__int {
font-size: var(--metric-value-fs, 33px);
}
.metric-tile__dec {
font-size: var(--metric-small-fs, 16px);
vertical-align: baseline;
}
.metric-tile__symbol {
font-size: var(--metric-small-fs, 16px);
margin-left: 2px;
}
.metric-tile__desc {
font-size: var(--metric-desc-fs, 16px);
line-height: calc(19px * var(--metric-scale, 1));
max-width: 90%;
}
.metric-tile__desc--overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.list-row__main {
display: flex;
align-items: center;
gap: 8px;
}
.list-tile__current-sticky {
position: sticky;
top: -10px;
z-index: 2;
background: white;
width: 100%;
padding: 4px 0;
display: flex;
flex-direction: column;
gap: 2px;
}
[data-theme='dark'] .list-tile__current-sticky {
background: var(--tile-bg);
}
.default-value-topright {
position: absolute;
right: 24px;
top: 8px;
color: #444;
pointer-events: none;
padding: 13px;
}
[data-theme='dark'] .default-value-topright {
color: #e6e6e6;
}
.default-tile.map-tile {
border: 1px solid var(--tile-border);
border-radius: 40px 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
background: var(--tile-bg);
box-sizing: border-box;
overflow: hidden;
}
.default-tile.map-tile > div {
border-radius: inherit;
overflow: hidden;
}
.default-tile.inactive {
background: var(--panel-bg, var(--background-color, #ffffff));
color: var(--muted-text, #bdbdbd);
border: 1px solid var(--border-color, #C3C3C3);
}
.default-value.inactive {
color: var(--muted-text, #bdbdbd);
}
.default-description.inactive {
color: var(--muted-text, #bdbdbd);
}.default-tile.alert {
background: #232323;
color: #e53935;
}
.default-description.alert {
color: #fff !important;
}
.text-tile-chip-alert {
background: #e53935 !important;
color: #ffffff !important;
border: none !important;
cursor: default !important;
opacity: 1 !important;
}.default-tile.alert {
background: #232323;
color: #e53935;
}
.default-tile.alert .default-value {
color: #fff;
}
.default-description.alert {
color: #fff;
}
.metric-symbol.alert {
color: darkgrey;
}
.default-tile.alert .metric-tile__part.alert {
color: #e53935;
}
.default-tile.inactive {
border-color: #bdbdbd;
background: #f5f5f5;
color: #bdbdbd; /* base/icon color */
}
.default-tile.inactive .default-value {
color: #8f8f8f; /* value color in inactive */
}
.default-description.inactive {
color: #bdbdbd; /* description/title in inactive */
}
.metric-symbol.inactive {
color: #bdbdbd; /* unit symbol in inactive */
}
.default-tile.inactive .metric-tile__part.inactive {
color: #8f8f8f;
}.default-tile.alert .wmw-chip--alert {
background: #fff1f0;
border: 1px solid #ff4d4f;
color: #a8071a;
}
.default-tile.list-tile.alert .list-tile__current-sticky {
background: #232323;
}
.default-tile.inactive .wmw-chip--disabled {
background: #f5f5f5;
border: 1px solid #d9d9d9;
color: #8c8c8c;
opacity: 0.9;
}
.default-tile.list-tile.inactive .list-tile__current-sticky {
background: #f5f5f5;
}.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top{left:50%;top:0;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-right{right:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{left:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;overflow:hidden;padding:0;width:29px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#0000000d}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23000'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:#ffffff80;margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:initial;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:#ffffff80;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid #0000;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:initial;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:#0000000d}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px #00000059;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:#000000b3;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl-separator{background-color:#e0e0e0;height:1px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{color:#333;font-size:18px;font-weight:700;height:44px;width:44px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:hover{background-color:#f5f5f5}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#4a5568;color:#fff}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#2d3748}.map-container {
width: 100%;
height: 100%;
position: relative;
--map-ui-scale: var(--ui-scale);
}
.map-container__viewport {
position: absolute;
inset: 0;
}
.map-container .mapboxgl-popup {
max-width: none;
}
.map-container .mapboxgl-popup-content {
background: transparent;
padding: 0;
box-shadow: none;
border-radius: 0;
width: auto;
}
.map-container .mapboxgl-popup-close-button,
.map-container .mapboxgl-popup-tip {
display: none;
}
.map-container .mapboxgl-ctrl,
.map-container .mapboxgl-ctrl button {
color: var(--map-control-icon-color);
}
.map-container .mapboxgl-ctrl button {
border: none;
background-color: transparent;
}
.map-container .mapboxgl-ctrl button:focus-visible {
outline: 2px solid var(--color-accent-600);
outline-offset: 1px;
}
.map-container .mapboxgl-ctrl-group {
display: flex;
flex-direction: column;
gap: calc(2px * var(--map-ui-scale));
padding: calc(4px * var(--map-ui-scale)) calc(3px * var(--map-ui-scale));
background-color: var(--map-control-bg);
border-radius: calc(12px * var(--map-ui-scale));
border: 1px solid var(--map-control-border);
box-shadow: var(--map-control-shadow);
}
.map-container .mapboxgl-ctrl-group.mapboxgl-ctrl-group-horizontal {
flex-direction: row;
}
.map-container .mapboxgl-ctrl-group button {
display: flex;
align-items: center;
justify-content: center;
width: calc(32px * var(--map-ui-scale));
height: calc(32px * var(--map-ui-scale));
border-radius: calc(8px * var(--map-ui-scale));
transition: background-color 150ms ease, color 150ms ease;
}
.map-container .mapboxgl-ctrl-group button + button {
border-top: none;
}
.map-container .mapboxgl-ctrl-group.mapboxgl-ctrl-group-horizontal button + button {
border-left: none;
}
.map-container .mapboxgl-ctrl-group button:not(.map-style-control__button--active):hover {
background-color: var(--map-control-hover-bg);
}
.map-container .mapboxgl-ctrl-group button:not(.map-style-control__button--active):active {
background-color: var(--map-control-active-bg);
}
.map-container .mapboxgl-ctrl-bottom-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(8px * var(--map-ui-scale));
}
.map-container .mapboxgl-ctrl-primary-column {
display: flex;
flex-direction: column;
gap: calc(8px * var(--map-ui-scale));
}
.map-container .mapboxgl-ctrl-group .mapboxgl-ctrl-icon {
filter: var(--map-control-icon-filter);
}
.map-container .mapboxgl-ctrl-navigation--with-fullscreen {
align-items: stretch;
}
.map-container .mapboxgl-ctrl-navigation--with-fullscreen .mapboxgl-ctrl-fullscreen {
padding: 0;
background: none;
border: none;
box-shadow: none;
display: flex;
}
.map-container .mapboxgl-ctrl-navigation--with-fullscreen .mapboxgl-ctrl-fullscreen button {
width: 100%;
}
.map-container .mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
width: calc(15px * var(--map-ui-scale));
height: calc(15px * var(--map-ui-scale));
background-size: calc(15px * var(--map-ui-scale)) calc(15px * var(--map-ui-scale));
margin: auto;
}
.map-container .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
width: calc(14px * var(--map-ui-scale));
height: calc(14px * var(--map-ui-scale));
background-size: calc(14px * var(--map-ui-scale)) calc(14px * var(--map-ui-scale));
}
.map-container .mapboxgl-ctrl-fullscreen {
display: flex;
align-items: center;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
}
.map-container .mapboxgl-ctrl-scale {
background-color: var(--map-control-bg);
border: 1px solid var(--map-control-border);
border-radius: calc(6px * var(--map-ui-scale));
box-shadow: var(--map-control-shadow);
color: var(--map-control-icon-color);
padding: 0 calc(8px * var(--map-ui-scale));
}
.map-container .mapboxgl-ctrl-scale--hidden,
.map-container .mapboxgl-ctrl-scale.mapboxgl-ctrl-scale--hidden {
visibility: hidden;
}
.map-container .mapboxgl-ctrl-scale span {
color: inherit;
}
.map-style-control {
padding: 0;
}
.map-style-control__button {
width: calc(32px * var(--map-ui-scale));
height: calc(32px * var(--map-ui-scale));
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
color: var(--map-control-icon-color);
}
.map-style-control__button:focus-visible {
outline: 2px solid var(--color-accent-600);
outline-offset: 1px;
}
.map-style-control__button--active {
background-color: var(--color-accent-600);
color: var(--color-white);
}
.map-style-control__button--active:hover {
background-color: var(--color-accent-700);
}
.map-style-control__icon,
.map-layer-control__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.map-style-control__icon svg,
.map-layer-control__icon svg {
display: block;
width: calc(16px * var(--map-ui-scale));
height: calc(16px * var(--map-ui-scale));
}
.map-container .mapboxgl-ctrl-logo {
display: none !important;
}
.map-container .mapboxgl-ctrl-tilt__button {
display: flex;
align-items: center;
justify-content: center;
width: calc(32px * var(--map-ui-scale));
height: calc(32px * var(--map-ui-scale));
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 0;
text-transform: uppercase;
line-height: 1;
}
.map-container .mapboxgl-ctrl-tilt__button--active {
background-color: var(--color-accent-600);
color: var(--color-white);
}
.map-layer-control {
padding: 0;
display: flex;
flex-direction: column;
}
.map-layer-control__button {
width: calc(32px * var(--map-ui-scale));
height: calc(32px * var(--map-ui-scale));
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--map-control-icon-color);
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.map-layer-control__button:hover:not(:disabled):not(.map-layer-control__button--active) {
background-color: var(--map-control-hover-bg);
}
.map-layer-control__button--active {
background-color: var(--color-accent-600);
color: var(--color-white);
}
.map-layer-control__button--active:hover {
background-color: var(--color-accent-700);
}
.map-layer-control__button--disabled {
opacity: 0.55;
cursor: not-allowed;
}
.map-container__marker-panel {
position: absolute;
top: calc(16px * var(--map-ui-scale));
left: calc(16px * var(--map-ui-scale));
max-width: min(
calc(320px * var(--map-ui-scale)),
calc(100% - (32px * var(--map-ui-scale)))
);
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: calc(16px * var(--map-ui-scale));
box-shadow: var(--map-control-shadow);
padding: calc(16px * var(--map-ui-scale));
display: flex;
flex-direction: column;
gap: calc(12px * var(--map-ui-scale));
z-index: 3;
color: var(--text-color);
pointer-events: auto;
}
.map-container__marker-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(12px * var(--map-ui-scale));
}
.map-container__marker-panel-title {
margin: 0;
font-size: 0.95rem;
white-space: normal;
word-break: break-word;
}
.map-container__marker-panel-close {
border: none;
background: transparent;
width: calc(28px * var(--map-ui-scale));
height: calc(28px * var(--map-ui-scale));
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: inherit;
transition: background-color 150ms ease, color 150ms ease;
}
.map-container__marker-panel-close:hover {
background: var(--map-control-hover-bg);
}
.map-container__marker-panel-content {
display: flex;
flex-direction: column;
gap: calc(8px * var(--map-ui-scale));
font-size: 0.875rem;
}
.default-tile {
border-radius: 40px 12px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
background: #fff;
color: #202020;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #EAEAEA;
position: relative;
}
.default-tile__content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
}
.default-title {
text-align: center;
white-space: normal;
max-width: 90%;
}
.default-value-topright {
position: absolute;
right: 5px;
color: #444;
pointer-events: none;
padding: 13px;
}
.recharts-wrapper:focus,
.recharts-wrapper:focus-visible,
.recharts-wrapper *:focus,
.recharts-wrapper *:focus-visible {
outline: none;
box-shadow: none;
border-color: transparent;
}
.recharts-wrapper:active,
.recharts-wrapper *:active,
.recharts-surface:active,
.recharts-layer:active {
outline: none;
box-shadow: none;
border-color: transparent;
}
.recharts-wrapper,
.recharts-wrapper * {
-webkit-tap-highlight-color: transparent;
}
.recharts-wrapper svg:focus,
.recharts-wrapper svg:focus-visible,
.recharts-wrapper svg:active {
outline: none;
box-shadow: none;
}
.bar-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
.bar-tile__value {
margin-top: 5px;
}
.bar-tile__value-dec {
margin-left: 1px;
}
.bar-tile__header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-bottom: 10px;
}
.horbar-title {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-top: 20px;
}
.bar-tile__icon {
margin-right: 8px;
display: flex;
align-items: center;
}
.bar-tile__chart {
width: 100%;
height: 100%;
}
.default-subtitle {
color: #888;
margin-top: -5px;
}
.default-subtitle.alert {
color: #fff;
}
.default-subtitle.inactive {
color: #bdbdbd;
}
.dot-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
.dot-tile__value {
margin-top: 5px;
}
.dot-tile__value-dec {
margin-left: 1px;
}
.dot-tile__header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-bottom: 60px;
}
.dot-tile__chart {
width: 100%;
height: 100%;
}
.dot-tile-tooltip {
padding: 2px 12px;
border-radius: 4px;
background: #fff;
color: #202020;
border: 1px solid #bdbdbd;
}
.dot-tile-tooltip-size {
min-width: 70px;
max-width: 150px;
white-space: nowrap;
}
.dot-tile__icon {
margin-right: 8px;
display: flex;
align-items: center;
}
.dot-tile__value {
margin-top: 5px;
}
.dot-tile__value-dec {
margin-left: 1px;
}
.dot-tile__subtitle {
text-align: left;
}
.dot-tile__chart {
width: 100%;
height: 100%;
}
.bar-tile-tooltip {
position: absolute;
transform: translate(-50%, -100%);
pointer-events: none;
z-index: 10;
padding: 2px 12px;
border-radius: 4px;
background: #fff;
color: #202020;
border: 1px solid #bdbdbd;
}
.line-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: relative;
}
.line-tile__header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin-bottom: 35px;
}
.line-tile__icon {
margin-right: 12px;
display: flex;
align-items: center;
}
.line-tile__value {
margin-top: 5px;
}
.line-tile__value-dec {
margin-left: 1px;
}
.line-tile__chart {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.line-tile__dot {
transition: fill 0.2s, r 0.2s;
cursor: pointer;
}
.line-tile__tooltip-row {
white-space: nowrap;
}
.line-tile__tooltip-value {
font-weight: bold;
}
.line-tile__tooltip-label {
white-space: nowrap;
}
.line-tile__legend {
display: flex;
gap: 12px;
width: 100%;
margin-top: 8px;
padding: 0 12px;
flex-wrap: wrap;
font-family: inherit;
}
.line-tile__legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
font-family: inherit;
}
.line-tile__legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
.line-tile__legend-label {
white-space: nowrap;
font-family: inherit;
}
.chart-tile__empty {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #888;
font-size: 0.85rem;
line-height: 1.4;
padding: 0 16px;
}
.chart-tile__empty.alert {
color: #fff;
}
.chart-tile__empty.inactive {
color: #bdbdbd;
}
.bar-tile-tooltip.alert {
background: #232323;
color: #fff;
border-color: #803911;
}.bar-tile-tooltip.inactive {
background: #f5f5f5;
color: #bdbdbd;
border-color: #bdbdbd;
}.dot-tile-tooltip.alert {
background: #232323;
color: #fff;
border-color: #803911;
}.dot-tile-tooltip.inactive {
background: #f5f5f5;
color: #bdbdbd;
border-color: #bdbdbd;
}.default-tile.alert {
background: #232323;
color: #fff;
}
.default-value-topright.alert {
color: #fff;
}
.default-title.alert {
color: #fff;
}
.metric-symbol.alert {
color: darkgrey;
}
.default-tile.inactive {
border-color: #bdbdbd;
background: #f5f5f5;
color: #bdbdbd;
}
.default-value-topright.inactive {
color: #bdbdbd;
}
.default-title.inactive {
color: #bdbdbd;
}
.metric-symbol.inactive {
color: #bdbdbd;
}
.horbar-tile__chartWrap {
width: 100%;
flex: 1 1 auto;
display: flex;
}
.horbar-tile__chart {
width: 100%;
height: 100%;
}
.horbar-tile .recharts-tooltip-wrapper {
pointer-events: none;
}
.horbar-tile__desc {
margin-top: 30px;
color: #888;
font-size: 0.85rem;
}
.multiple-horbar-tile {
padding: 18px;
gap: 4px;
box-sizing: border-box;
}
.multiple-horbar-tile__header {
display: flex;
align-items: center;
gap: 5px;
}
.multiple-horbar-tile__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.multiple-horbar-tile__header-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.multiple-horbar-tile__title {
max-width: 100%;
}
.multiple-horbar-tile__subtitle {
margin-top: -5px;
}
.multiple-horbar-tile__content {
display: flex;
flex-direction: column;
}
.multiple-horbar-tile__row {
display: flex;
flex-direction: column;
position: relative;
}
.multiple-horbar-tile__row-header {
display: flex;
margin-left: 10px;
margin-right: 10px;
}
.multiple-horbar-tile__row-title {
color: #888;
}
[data-theme='dark'] .multiple-horbar-tile__row-title {
color: #c7c7c7;
}
.multiple-horbar-tile__row-total {
color: #9a9a9a;
font-size: 11px;
}
[data-theme='dark'] .multiple-horbar-tile__row-total {
color: #c7c7c7;
}
.multiple-horbar-tile__bar {
border-radius: 999px;
display: flex;
align-items: center;
}
[data-theme='dark'] .multiple-horbar-tile__bar {
background: #2f2f2f;
}
.multiple-horbar-tile__bar-chart {
width: 100%;
}
.multiple-horbar-tile__row--today .multiple-horbar-tile__row-title {
color: var(--accent-color, #FF5900);
font-size: 12px;
}
.multiple-horbar-tile {
--multiple-horbar-remainder: rgba(203,208,211,0.26);
--multiple-load-remainder: rgba(203,208,211,0.26);
}
[data-theme='dark'] .multiple-horbar-tile {
--multiple-horbar-remainder: #2f2f2f;
--multiple-load-remainder: #2f2f2f;
}
.multiple-horbar-tile__legend {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
font-size: 10px;
color: #6f6f6f;
margin-top: 4px;
font-family: inherit;
}
[data-theme='dark'] .multiple-horbar-tile__legend {
color: #c7c7c7;
}
.multiple-horbar-tile__legend-item {
display: flex;
align-items: center;
gap: 3px;
font-family: inherit;
}
.multiple-horbar-tile__legend-swatch {
width: 10px;
height: 5px;
border-radius: 2px;
}
.multiple-horbar-tile__legend-label {
white-space: nowrap;
font-family: inherit;
}
.multiple-load-tile {
padding: 18px;
gap: 12px;
box-sizing: border-box;
}
.multiple-load-tile__header {
display: flex;
align-items: center;
gap: 10px;
}
.multiple-load-tile__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.multiple-load-tile__icon-img {
width: 24px;
height: 24px;
}
.multiple-load-tile__header-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.multiple-load-tile__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.multiple-load-tile__subtitle {
margin-top: -5px;
}
.multiple-load-tile__content {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
}
.multiple-load-tile__row {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.multiple-load-tile__row-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.2;
}
.multiple-load-tile__row-title {
color: var(--tile-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.multiple-load-tile__row-total {
color: #9a9a9a;
font-size: 11px;
white-space: nowrap;
}
[data-theme='dark'] .multiple-load-tile__row-total {
color: #c7c7c7;
}
.multiple-load-tile__bar {
height: 10px;
border-radius: 999px;
background: #ececec;
overflow: hidden;
display: flex;
align-items: center;
}
[data-theme='dark'] .multiple-load-tile__bar {
background: #2f2f2f;
}
.multiple-load-tile__bar-chart {
width: 100%;
height: 10px;
}
.multiple-load-tile {
--multiple-load-remainder: #ececec;
}
[data-theme='dark'] .multiple-load-tile {
--multiple-load-remainder: #2f2f2f;
}
.multiple-load-tile__bar-fill,
.multiple-load-tile__bar-segment {
height: 100%;
background: #ff6a1a;
}
.multiple-load-tile__legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-size: 10px;
color: #6f6f6f;
font-family: inherit;
}
[data-theme='dark'] .multiple-load-tile__legend {
color: #c7c7c7;
}
.multiple-load-tile__legend-item {
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.multiple-load-tile__legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
background: #ff6a1a;
}
.multiple-load-tile__legend-label {
white-space: nowrap;
font-family: inherit;
}
.radial-tile {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
padding: 18px;
box-sizing: border-box;
}
.radial-tile__header {
display: flex;
align-items: center;
gap: 10px;
}
.radial-tile__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex-shrink: 0;
}
.radial-tile__icon-img {
width: 24px;
height: 24px;
}
.radial-tile__header-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.radial-tile__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.radial-tile__subtitle {
margin-top: -5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.radial-tile__body {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 10px;
flex: 1;
min-height: 0;
}
.radial-tile__chart-wrap {
position: relative;
width: 100%;
height: 100%;
min-width: 140px;
min-height: 140px;
}
.radial-tile__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.radial-tile__center-value {
font-size: 20px;
font-weight: 700;
line-height: 1;
}
.radial-tile__center-label {
font-size: 10px;
opacity: 0.7;
margin-top: 2px;
line-height: 1;
}
.radial-tile__legend {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
font-family: inherit;
}
.radial-tile__legend-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-family: inherit;
}
.radial-tile__legend-dot {
width: 10px;
height: 10px;
border-radius: 999px;
flex: 0 0 auto;
}
.radial-tile__legend-label {
font-size: 11px;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: inherit;
}
@media (max-width: 350px) {
.radial-tile__body {
grid-template-columns: 1fr;
}
.radial-tile__legend {
flex-direction: row;
flex-wrap: wrap;
}
}
.stacked-bar-tile {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.stacked-bar-tile__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.stacked-bar-tile__chart {
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
.updown-stacked-bar-tile {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.updown-stacked-bar-tile__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.updown-stacked-bar-tile__chart {
width: 100%;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.updown-stacked-bar-tile__tooltip-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.updown-stacked-bar-tile__tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.updown-stacked-bar-tile__tooltip-divider {
height: 1px;
background: rgba(0, 0, 0, 0.15);
margin: 10px 0;
}
.updown-stacked-bar-tile__tooltip-xlabel {
margin-top: 8px;
color: rgba(0, 0, 0, 0.55);
}
.asset-details-grid {
display: grid;
grid-template-columns: repeat(3, 146px);
grid-template-rows: auto;
grid-auto-rows: 146px;
gap: 10px;
justify-content: start;
align-content: start;
width: 100%;
box-sizing: border-box;
transition: grid-template-columns 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.asset-details-grid--extended {
grid-template-columns: repeat(3, 1fr);
}
.asset-tiles-custom-area {
display: contents;
}
.asset-tiles-custom-area > * {
margin-top: -9rem;
}
.asset-info {
grid-column: 1 / span 2;
grid-row: 1;
min-width: 0;
word-break: break-word;
overflow: hidden;
height: 80px;
}
.asset-details-grid .tile1 {
grid-column: 1 / -1;
grid-row: 1;
}
.asset-details-grid .tile2 { grid-column: 1 / span 2; grid-row: 3 / span 2; }
.asset-details-grid .tile3 { grid-column: 3; grid-row: 3; }
.asset-details-grid .tile4 { grid-column: 3; grid-row: 4; }
.asset-details-grid .tile5 { grid-column: 1; grid-row: 5; }
.asset-details-grid .tile6 { grid-column: 2; grid-row: 5; }
.asset-details-grid .tile7 { grid-column: 3; grid-row: 5; }
.asset-details-grid .tile8 { grid-column: 1; grid-row: 6; margin-left: 0.5rem; }
.asset-details-grid__initializing {
grid-column: 1 / -1;
grid-row: 2 / span 4;
width: 100%;
min-height: 32rem;
height: min(32rem, calc(100vh - 16rem));
align-self: start;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border: 2px dashed #d6d9de;
border-radius: 18px;
background: rgba(250, 251, 252, 0.72);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: #7a838f;
text-align: center;
}
.asset-details-grid__initializing-text {
font-size: 0.98rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.asset-details-grid--checkin .tile5 { grid-column: 1; grid-row: 3; }
.asset-details-grid--checkin .tile6 { grid-column: 2; grid-row: 3; }
.asset-details-grid--checkin .tile7 { grid-column: 3; grid-row: 3; }
.asset-details-grid--checkin .tile2 { grid-column: 1 / span 3; grid-row: 4 / span 4; }
.asset-details-grid > * {
min-width: 0;
min-height: 0;
}
.asset-extended-tiles-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: 146px;
column-gap: 10px;
row-gap: 10px;
width: 100%;
box-sizing: border-box;
justify-content: start;
align-content: start;
}
.asset-extended-tiles-grid__tile {
min-width: 0;
min-height: 0;
display: flex;
align-items: stretch;
margin: 0;
}
.asset-extended-tiles-grid__tile > * {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
margin: 0;
}
.asset-extended-sections {
margin: 0;
padding: 0;
}
.asset-extended-tiles-grid__tile.r1c1 { grid-column: 1; grid-row: 1; }
.asset-extended-tiles-grid__tile.r1c2 { grid-column: 2; grid-row: 1; }
.asset-extended-tiles-grid__tile.r1c3 { grid-column: 3; grid-row: 1; }
.asset-extended-tiles-grid__tile.r1c4 { grid-column: 4; grid-row: 1; }
.asset-extended-tiles-grid__tile.r1c5 { grid-column: 5; grid-row: 1; }
.asset-extended-tiles-grid__tile.r1c6 { grid-column: 6; grid-row: 1; }
.asset-extended-tiles-grid__tile.graphA { grid-column: 1 / span 3; grid-row: 2 / span 2; }
.asset-extended-tiles-grid__tile.graphB { grid-column: 4 / span 3; grid-row: 2 / span 2; }
.asset-extended-tiles-grid__tile.list { grid-column: 1 / span 6; grid-row: 4 / span 2; }
.title-row {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
line-height: 1;
}
.generic-panel-list .list-container {
border: none !important;
border-radius: 0 !important;
}
.generic-panel-list--auto-rows .list-pagination__items-per-page {
display: none !important;
}.asset-alarm-tab__date-period {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
padding: 12px 16px;
}
.asset-alarm-tab__date-period-left {
flex: 0 0 auto;
}
.asset-alarm-tab__date-period-label {
color: color-mix(in srgb, var(--text-color, #0f172a) 55%, transparent);
font-weight: 400;
font-size: 0.9rem;
}
.asset-alarm-tab__date-period-controls {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1 1 auto;
gap: 6px;
flex-wrap: nowrap;
}
.asset-alarm-tab__date-period-icon-btn {
width: 34px;
height: 34px;
border-radius: 999px;
border: 0;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
}
.asset-alarm-tab__date-period-icon-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__date-period-icon-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.asset-alarm-tab__date-period-center {
min-width: 80px;
text-align: left;
line-height: 1.15;
}
.asset-alarm-tab__date-period-preset {
font-weight: 700;
letter-spacing: 0.02em;
}
.asset-alarm-tab__date-period-sub {
margin-top: 2px;
font-size: 0.8rem;
color: color-mix(in srgb, var(--text-color, #0f172a) 55%, transparent);
}
.asset-alarm-tab__date-period-right {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
white-space: nowrap;
}
.asset-alarm-tab__date-period-change-text {
border: 0;
background: transparent;
padding: 0 4px;
color: color-mix(in srgb, var(--text-color, #0f172a) 62%, transparent);
font: inherit;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
user-select: none;
}
.asset-alarm-tab__date-period-change-text:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 6px;
}
.asset-alarm-tab__date-period-select-field {
min-width: 110px;
margin-left: 5px;
}
.asset-alarm-tab__date-period-select-field .wmw-field__label {
display: none;
}
.asset-alarm-tab__date-period-select-field .wmw-field__control {
margin: 0;
}
.asset-alarm-tab__date-period-select-field,
.asset-alarm-tab__date-period-select-field * {
font: inherit;
}
.asset-alarm-tab__date-period-select-field .wmw-custom-select__button {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--panel-bg, #fff);
color: inherit;
padding: 6px 10px;
min-height: 34px;
cursor: pointer;
font: inherit;
}
.asset-alarm-tab__date-period-select-field .wmw-input {
font: inherit;
}
.asset-alarm-tab__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.asset-alarm-tab__date-period-center {
position: relative;
}
.asset-alarm-tab__datepicker-popover {
position: fixed;
z-index: 200;
width: max-content;
max-width: min(calc(100vw - 32px), 920px);
height: min(calc(100vh - 40px), 500px);
overflow: hidden;
background: var(--panel-bg, #fff);
border: 1px solid color-mix(in srgb, var(--border-color, #d1d5db) 88%, transparent);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
padding: 12px;
border-radius: 12px;
transform: translateX(-50%);
}
.asset-alarm-tab__datepicker-range-hint--clickable {
background: none;
border: none;
color: var(--accent-color, #2563eb);
font: inherit;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 8px;
cursor: pointer;
text-align: left;
padding: 0 0 4px 0;
transition: color 0.15s;
}
.asset-alarm-tab__datepicker-range-hint--clickable:hover,
.asset-alarm-tab__datepicker-range-hint--clickable:focus-visible {
color: #174ea6;
outline: 2px solid var(--accent-color, #2563eb);
outline-offset: 2px;
border-radius: 4px;
}
.asset-alarm-tab__datepicker-layout {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
height: 100%;
min-height: 0;
}
.asset-alarm-tab__datepicker-presets {
min-width: 148px;
display: flex;
flex-direction: column;
gap: 6px;
padding-right: 12px;
border-right: 1px solid color-mix(in srgb, var(--border-color, #d1d5db) 88%, transparent);
min-height: 0;
overflow-y: auto;
}
.asset-alarm-tab__datepicker-presets-title {
margin-bottom: 2px;
color: color-mix(in srgb, var(--text-color, #0f172a) 58%, transparent);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.asset-alarm-tab__datepicker-preset-btn {
min-height: 34px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: inherit;
padding: 7px 10px;
text-align: left;
font: inherit;
font-size: 0.85rem;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.asset-alarm-tab__datepicker-preset-btn:hover {
background: color-mix(in srgb, var(--panel-bg, #fff) 70%, var(--border-color, #d1d5db));
}
.asset-alarm-tab__datepicker-preset-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-preset-btn--active {
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
background: color-mix(in srgb, var(--accent-color, #2563eb) 16%, var(--panel-bg, #fff));
color: var(--accent-color, #2563eb);
font-weight: 600;
}
.asset-alarm-tab__datepicker-panel {
min-width: 300px;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
overflow: hidden;
}
.asset-alarm-tab__datepicker-quarterly {
min-width: 360px;
display: flex;
flex-direction: column;
gap: 30px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.asset-alarm-tab__datepicker-quarterly + .asset-alarm-tab__datepicker-range-actions {
margin-top: 40px;
}
.asset-alarm-tab__datepicker-quarterly-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.asset-alarm-tab__datepicker-quarterly-title {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text-color, #0f172a) 58%, transparent);
}
.asset-alarm-tab__datepicker-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.asset-alarm-tab__datepicker-title-link {
border: 0;
background: transparent;
color: var(--accent-color, #2563eb);
font: inherit;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
padding: 0;
}
.asset-alarm-tab__datepicker-title-link:hover {
text-decoration: underline;
}
.asset-alarm-tab__datepicker-title-link:focus-visible {
outline: 2px solid var(--accent-color, #2563eb);
outline-offset: 2px;
border-radius: 2px;
}
.asset-alarm-tab__datepicker-quarterly-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.asset-alarm-tab__datepicker-quarterly-chip {
width: fit-content;
min-height: 36px;
border: 1px solid color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
border-radius: 8px;
background: var(--panel-bg, #fff);
color: var(--accent-color, #2563eb);
padding: 7px 10px;
font: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.asset-alarm-tab__datepicker-quarterly-chip:hover {
background: var(--panel-bg, #fff);
}
.asset-alarm-tab__datepicker-quarterly-chip:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-quarterly-chip--active {
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
background: color-mix(in srgb, var(--accent-color, #2563eb) 16%, var(--panel-bg, #fff));
color: var(--accent-color, #2563eb);
}
.asset-alarm-tab__datepicker-quarterly-option {
width: fit-content;
min-width: 0;
min-height: 36px;
border: 1px solid color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
border-radius: 8px;
background: var(--panel-bg, #fff);
color: var(--accent-color, #2563eb);
padding: 7px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.asset-alarm-tab__datepicker-quarterly-option:hover:not(:disabled) {
background: var(--panel-bg, #fff);
}
.asset-alarm-tab__datepicker-quarterly-option:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-quarterly-option--active {
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
background: color-mix(in srgb, var(--accent-color, #2563eb) 16%, var(--panel-bg, #fff));
color: var(--accent-color, #2563eb);
}
.asset-alarm-tab__datepicker-quarterly-option--active .asset-alarm-tab__datepicker-quarterly-option-subtitle {
color: inherit;
}
.asset-alarm-tab__datepicker-quarterly-option:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.asset-alarm-tab__datepicker-quarterly-option-title {
font-size: 0.82rem;
font-weight: 700;
}
.asset-alarm-tab__datepicker-quarterly-option-subtitle {
font-size: 0.74rem;
color: color-mix(in srgb, var(--text-color, #0f172a) 70%, transparent);
}
.asset-alarm-tab__datepicker-month-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.asset-alarm-tab__datepicker-month-row {
gap: 6px;
}
.asset-alarm-tab__datepicker-month-option {
min-width: 0;
}
.asset-alarm-tab__datepicker-calendar {
color: var(--accent-color, #2563eb);
}
.asset-alarm-tab__datepicker-calendar .rdrCalendarWrapper {
color: var(--text-color, #0f172a);
}
.asset-alarm-tab__datepicker-calendar .rdrSelected,
.asset-alarm-tab__datepicker-calendar .rdrInRange,
.asset-alarm-tab__datepicker-calendar .rdrStartEdge,
.asset-alarm-tab__datepicker-calendar .rdrEndEdge,
.asset-alarm-tab__datepicker-calendar .rdrDayStartPreview,
.asset-alarm-tab__datepicker-calendar .rdrDayInPreview,
.asset-alarm-tab__datepicker-calendar .rdrDayEndPreview {
color: var(--accent-color, #2563eb);
}
.asset-alarm-tab__datepicker-calendar .rdrDayToday .rdrDayNumber span:after {
background: var(--accent-color, #2563eb);
}
.asset-alarm-tab__datepicker-calendar .rdrMonthAndYearPickers select:hover,
.asset-alarm-tab__datepicker-calendar .rdrNextPrevButton:hover {
background-color: color-mix(in srgb, var(--accent-color, #2563eb) 14%, var(--panel-bg, #fff));
}
.asset-alarm-tab__datepicker-calendar .rdrMonthAndYearPickers select:focus-visible,
.asset-alarm-tab__datepicker-calendar .rdrNextPrevButton:focus-visible {
outline: 2px solid var(--accent-color, #2563eb);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-custom {
min-width: 280px;
display: flex;
flex-direction: column;
gap: 0;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.asset-alarm-tab__datepicker-custom-field + .asset-alarm-tab__datepicker-custom-field {
margin-top: 30px;
}
.asset-alarm-tab__datepicker-custom-field + .asset-alarm-tab__datepicker-range-actions {
margin-top: 50px;
}
.asset-alarm-tab__datepicker-custom-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.asset-alarm-tab__datepicker-custom-field span {
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: color-mix(in srgb, var(--text-color, #0f172a) 58%, transparent);
}
.asset-alarm-tab__datepicker-custom-shortcuts {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.asset-alarm-tab__datepicker-custom-shortcuts-label {
display: inline-flex;
align-items: center;
gap: 4px;
color: color-mix(in srgb, var(--text-color, #0f172a) 60%, transparent);
font-size: 0.66rem;
font-weight: 600;
line-height: 1;
}
.asset-alarm-tab__datepicker-custom-shortcuts-label svg {
flex: 0 0 auto;
transform: translateY(-0.5px);
}
.asset-alarm-tab__datepicker-custom-shortcut {
border: 0;
background: transparent;
color: var(--color-warning-600, #f97316);
padding: 0;
font: inherit;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
}
.asset-alarm-tab__datepicker-custom-shortcut:hover {
text-decoration: underline;
}
.asset-alarm-tab__datepicker-custom-shortcut:focus-visible {
outline: 2px solid var(--color-warning-600, #f97316);
outline-offset: 2px;
border-radius: 2px;
}
.asset-alarm-tab__datepicker-custom-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.asset-alarm-tab__datepicker-custom-date {
display: flex;
gap: 4px;
flex: 1 1 auto;
}
.asset-alarm-tab__datepicker-custom-time {
display: flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
}
.asset-alarm-tab__datepicker-custom-apply {
background: color-mix(in srgb, var(--accent-color, #2563eb) 16%, var(--panel-bg, #fff));
color: var(--accent-color, #2563eb);
border: 1px solid color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
border-radius: 8px;
padding: 7px 10px;
min-height: 34px;
cursor: pointer;
font: inherit;
font-weight: 600;
}
.asset-alarm-tab__datepicker-custom-apply:hover {
background: color-mix(in srgb, var(--accent-color, #2563eb) 24%, var(--panel-bg, #fff));
}
.asset-alarm-tab__datepicker-custom-apply:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-range-actions {
margin-top: 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.asset-alarm-tab__datepicker-panel > .asset-alarm-tab__datepicker-range-actions,
.asset-alarm-tab__datepicker-custom > .asset-alarm-tab__datepicker-range-actions {
margin-top: auto;
flex: 0 0 auto;
}
.asset-alarm-tab__datepicker-range-chip {
width: 100%;
min-height: 38px;
border: 1px solid var(--accent-color, #2563eb);
border-radius: 10px;
padding: 6px 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: var(--accent-color, #2563eb);
color: #fff;
}
.asset-alarm-tab__datepicker-range-chip-date {
flex: 0 0 auto;
font-size: 0.8rem;
color: inherit;
white-space: nowrap;
}
.asset-alarm-tab__datepicker-range-chip-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
}
.asset-alarm-tab__datepicker-range-chip-main--hourly {
justify-content: flex-end;
}
.asset-alarm-tab__datepicker-range-chip-text {
min-width: 0;
font-size: 0.78rem;
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-alarm-tab__datepicker-range-chip-btn {
border: 0;
background: transparent;
width: 26px;
height: 26px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: inherit;
flex: 0 0 auto;
}
.asset-alarm-tab__datepicker-range-chip-btn:hover:not(:disabled) {
background: color-mix(in srgb, #fff 22%, transparent);
}
.asset-alarm-tab__datepicker-range-chip-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-range-chip-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.asset-alarm-tab__datepicker-continue-btn {
width: 100%;
min-height: 36px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--accent-color, #2563eb) 44%, transparent);
background: var(--panel-bg, #fff);
color: var(--accent-color, #2563eb);
font: inherit;
font-weight: 600;
cursor: pointer;
text-align: left;
padding: 7px 10px;
display: flex;
align-items: center;
gap: 8px;
}
.asset-alarm-tab__datepicker-continue-btn:hover:not(:disabled) {
background: var(--panel-bg, #fff);
}
.asset-alarm-tab__datepicker-continue-btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.asset-alarm-tab__datepicker-continue-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.asset-alarm-tab__datepicker-range-hint,
.asset-alarm-tab__datepicker-range-custom-hint {
width: 100%;
font-size: 0.76rem;
color: color-mix(in srgb, var(--text-color, #0f172a) 64%, transparent);
line-height: 1;
}
.asset-alarm-tab__datepicker-range-custom-hint-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
line-height: 1;
}
.asset-alarm-tab__datepicker-range-hint {
margin-top: 2px;
text-transform: uppercase;
}
.asset-alarm-tab__datepicker-range-custom-link {
border: 0;
background: transparent;
padding: 0;
margin: 0;
color: var(--accent-color, #2563eb);
font: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.asset-alarm-tab__datepicker-range-custom-link:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 4px;
}
.asset-alarm-tab__datepicker-last-chip {
width: 100%;
min-height: 38px;
border-radius: 999px;
border: 1.5px dashed var(--accent-color, #2563eb);
background: var(--panel-bg, #fff);
color: var(--accent-color, #2563eb);
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 6px 12px;
font-size: 0.82rem;
font-weight: 600;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
text-align: left;
}
.asset-alarm-tab__datepicker-last-chip-content {
display: inline-flex;
align-items: center;
gap: 6px;
}
.asset-alarm-tab__datepicker-last-chip:hover,
.asset-alarm-tab__datepicker-last-chip:focus-visible {
background: color-mix(in srgb, var(--accent-color, #2563eb) 28%, var(--panel-bg, #fff));
border-color: var(--accent-color, #2563eb);
box-shadow: 0 1px 4px 0 color-mix(in srgb, var(--accent-color, #2563eb) 18%, transparent);
cursor: pointer;
}
.asset-alarm-tab__date-period-center:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 6px;
}
.asset-alarm-tab__date-period-center:hover {
cursor: pointer;
}
@media (max-width: 900px) {
.asset-alarm-tab__datepicker-layout {
flex-direction: column;
}
.asset-alarm-tab__datepicker-presets {
min-width: 0;
width: 100%;
padding-right: 0;
padding-bottom: 12px;
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, var(--border-color, #d1d5db) 88%, transparent);
}
}
.asset-history-tab__header {
display: flex;
align-items: center;
gap: 12px;
}
.asset-history-tab__header-left {
flex: 1 1 auto;
min-width: 0;
}
.asset-history-tab__header-right {
display: flex;
align-items: center;
gap: 8px;
padding-right: 16px;
flex: 0 0 auto;
}
.alarm-col--time,
.alarm-col--time-ago {
display: inline-block;
width: 9.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asset-alarm-tab__rule-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2rem;
padding: 0.3rem 0.85rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border-color, #d1d5db) 90%, transparent);
background: transparent;
color: color-mix(in srgb, var(--text-color, #0f172a) 72%, transparent);
cursor: default;
pointer-events: none;
user-select: none;
box-shadow: none;
}
.asset-alarm-tab__rule-chip-label {
line-height: 1.2;
white-space: nowrap;
}
.asset-alarm-tab__list .list-table tbody tr:hover,
.asset-alarm-tab__list .list-table tbody tr:focus-within,
.asset-alarm-tab__list .list-table tbody tr[data-selected='true']:hover,
.asset-alarm-tab__list .list-table tbody tr[data-selected='true']:focus-within {
background-color: transparent;
}
.asset-alarm-tab__list .list-table tbody tr:hover svg,
.asset-alarm-tab__list .list-table tbody tr:focus-within svg {
color: inherit;
}
.asset-alarm-tab__list .list-table tbody tr[data-clickable='true']:hover,
.asset-alarm-tab__list .list-table tbody tr[data-clickable='true']:focus-within {
transform: none;
}
.rdrCalendarWrapper {
box-sizing: border-box;
background: #ffffff;
display: inline-flex;
flex-direction: column;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDateDisplay{
display: flex;
justify-content: space-between;
}
.rdrDateDisplayItem{
flex: 1 1;
width: 0;
text-align: center;
color: inherit;
}
.rdrDateDisplayItem + .rdrDateDisplayItem{
margin-left: 0.833em;
}
.rdrDateDisplayItem input{
text-align: inherit
}
.rdrDateDisplayItem input:disabled{
cursor: default;
}
.rdrDateDisplayItemActive{}
.rdrMonthAndYearWrapper {
box-sizing: inherit;
display: flex;
justify-content: space-between;
}
.rdrMonthAndYearPickers{
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
.rdrMonthPicker{}
.rdrYearPicker{}
.rdrNextPrevButton {
box-sizing: inherit;
cursor: pointer;
outline: none;
}
.rdrPprevButton {}
.rdrNextButton {}
.rdrMonths{
display: flex;
}
.rdrMonthsVertical{
flex-direction: column;
}
.rdrMonthsHorizontal > div > div > div{
display: flex;
flex-direction: row;
}
.rdrMonth{
width: 27.667em;
}
.rdrWeekDays{
display: flex;
}
.rdrWeekDay {
flex-basis: calc(100% / 7);
box-sizing: inherit;
text-align: center;
}
.rdrDays{
display: flex;
flex-wrap: wrap;
}
.rdrDateDisplayWrapper{}
.rdrMonthName{}
.rdrInfiniteMonths{
overflow: auto;
}
.rdrDateRangeWrapper{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDateInput {
position: relative;
}
.rdrDateInput input {
outline: none;
}
.rdrDateInput .rdrWarning {
position: absolute;
font-size: 1.6em;
line-height: 1.6em;
top: 0;
right: .25em;
color: #FF0000;
}
.rdrDay {
box-sizing: inherit;
width: calc(100% / 7);
position: relative;
font: inherit;
cursor: pointer;
}
.rdrDayNumber {
display: block;
position: relative;
}
.rdrDayNumber span{
color: #1d2429;
}
.rdrDayDisabled {
cursor: not-allowed;
}
@supports (-ms-ime-align: auto) {
.rdrDay {
flex-basis: 14.285% !important;
}
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
pointer-events: none;
}
.rdrInRange{}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
pointer-events: none;
}
.rdrDayHovered{}
.rdrDayActive{}
.rdrDateRangePickerWrapper{
display: inline-flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rdrDefinedRangesWrapper{}
.rdrStaticRanges{
display: flex;
flex-direction: column;
}
.rdrStaticRange{
font-size: inherit;
}
.rdrStaticRangeLabel{}
.rdrInputRanges{}
.rdrInputRange{
display: flex;
}
.rdrInputRangeInput{}
.rdrCalendarWrapper{
color: #000000;
font-size: 12px;
}
.rdrDateDisplayWrapper{
background-color: rgb(239, 242, 247);
}
.rdrDateDisplay{
margin: 0.833em;
}
.rdrDateDisplayItem{
border-radius: 4px;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
border: 1px solid transparent;
}
.rdrDateDisplayItem input{
cursor: pointer;
height: 2.5em;
line-height: 2.5em;
border: 0px;
background: transparent;
width: 100%;
color: #849095;
}
.rdrDateDisplayItemActive{
border-color: currentColor;
}
.rdrDateDisplayItemActive input{
color: #7d888d
}
.rdrMonthAndYearWrapper {
align-items: center;
height: 60px;
padding-top: 10px;
}
.rdrMonthAndYearPickers{
font-weight: 600;
}
.rdrMonthAndYearPickers select{
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 10px 30px 10px 10px;
border-radius: 4px;
outline: 0;
color: #3e484f;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: right 8px center;
cursor: pointer;
text-align: center
}
.rdrMonthAndYearPickers select:hover{
background-color: rgba(0,0,0,0.07);
}
.rdrMonthPicker, .rdrYearPicker{
margin: 0 5px
}
.rdrNextPrevButton {
display: block;
width: 24px;
height: 24px;
margin: 0 0.833em;
padding: 0;
border: 0;
border-radius: 5px;
background: #EFF2F7
}
.rdrNextPrevButton:hover{
background: #E1E7F0;
}
.rdrNextPrevButton i {
display: block;
width: 0;
height: 0;
padding: 0;
text-align: center;
border-style: solid;
margin: auto;
transform: translate(-3px, 0px);
}
.rdrPprevButton i {
border-width: 4px 6px 4px 4px;
border-color: transparent rgb(52, 73, 94) transparent transparent;
transform: translate(-3px, 0px);
}
.rdrNextButton i {
margin: 0 0 0 7px;
border-width: 4px 4px 4px 6px;
border-color: transparent transparent transparent rgb(52, 73, 94);
transform: translate(3px, 0px);
}
.rdrWeekDays {
padding: 0 0.833em;
}
.rdrMonth{
padding: 0 0.833em 1.666em 0.833em;
}
.rdrMonth .rdrWeekDays {
padding: 0;
}
.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
display: none;
}
.rdrWeekDay {
font-weight: 400;
line-height: 2.667em;
color: rgb(132, 144, 149);
}
.rdrDay {
background: transparent;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 0;
padding: 0;
line-height: 3.000em;
height: 3.000em;
text-align: center;
color: #1d2429
}
.rdrDay:focus {
outline: 0;
}
.rdrDayNumber {
outline: 0;
font-weight: 300;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
top: 5px;
bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.rdrDayToday .rdrDayNumber span{
font-weight: 500
}
.rdrDayToday .rdrDayNumber span:after{
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translate(-50%, 0);
width: 18px;
height: 2px;
border-radius: 2px;
background: #3d91ff;
}
.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
background: #fff;
}
.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
color: rgba(255, 255, 255, 0.85);
}
.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
background: currentColor;
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
}
.rdrSelected{
left: 2px;
right: 2px;
}
.rdrInRange{}
.rdrStartEdge{
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
.rdrEndEdge{
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
.rdrSelected{
border-radius: 1.042em;
}
.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
border-top-left-radius: 1.042em;
border-bottom-left-radius: 1.042em;
left: 2px;
}
.rdrDayEndOfMonth .rdrInRange, .rdrDayEndOfMonth .rdrStartEdge, .rdrDayEndOfWeek .rdrInRange, .rdrDayEndOfWeek .rdrStartEdge{
border-top-right-radius: 1.042em;
border-bottom-right-radius: 1.042em;
right: 2px;
}
.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
border-top-left-radius: 1.333em;
border-bottom-left-radius: 1.333em;
border-left-width: 1px;
left: 0px;
}
.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
border-top-right-radius: 1.333em;
border-bottom-right-radius: 1.333em;
border-right-width: 1px;
right: 0px;
}
.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
background: rgba(255, 255, 255, 0.09);
position: absolute;
top: 3px;
left: 0px;
right: 0px;
bottom: 3px;
pointer-events: none;
border: 0px solid currentColor;
z-index: 1;
}
.rdrDayStartPreview{
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-top-left-radius: 1.333em;
border-bottom-left-radius: 1.333em;
left: 0px;
}
.rdrDayInPreview{
border-top-width: 1px;
border-bottom-width: 1px;
}
.rdrDayEndPreview{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-right-radius: 1.333em;
border-bottom-right-radius: 1.333em;
right: 2px;
right: 0px;
}
.rdrDefinedRangesWrapper{
font-size: 12px;
width: 226px;
border-right: solid 1px #eff2f7;
background: #fff;
}
.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
color: currentColor;
font-weight: 600;
}
.rdrStaticRange{
border: 0;
cursor: pointer;
display: block;
outline: 0;
border-bottom: 1px solid #eff2f7;
padding: 0;
background: #fff
}
.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
background: #eff2f7;
}
.rdrStaticRangeLabel{
display: block;
outline: 0;
line-height: 18px;
padding: 10px 20px;
text-align: left;
}
.rdrInputRanges{
padding: 10px 0;
}
.rdrInputRange{
align-items: center;
padding: 5px 20px;
}
.rdrInputRangeInput{
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 4px;
text-align: center;
border: solid 1px rgb(222, 231, 235);
margin-right: 10px;
color: rgb(108, 118, 122)
}
.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
border-color: rgb(180, 191, 196);
outline: 0;
color: #333;
}
.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
content: '';
border: 1px solid currentColor;
border-radius: 1.333em;
position: absolute;
top: -2px;
bottom: -2px;
left: 0px;
right: 0px;
background: transparent;
}
.rdrDayPassive{
pointer-events: none;
}
.rdrDayPassive .rdrDayNumber span{
color: #d5dce0;
}
.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
display: none;
}
.rdrDayDisabled {
background-color: rgb(248, 248, 248);
}
.rdrDayDisabled .rdrDayNumber span{
color: #aeb9bf;
}
.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
filter: grayscale(100%) opacity(60%);
}
.rdrMonthName{
text-align: left;
font-weight: 600;
color: #849095;
padding: 0.833em;
}
.rich-text-editor {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rich-text-editor__label {
font-weight: 600;
color: var(--color-neutral-800, #1f2937);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.rich-text-editor__required {
color: var(--color-danger-500, #dc2626);
}
.rich-text-editor__toolbar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.rich-text-editor__toolbar-button {
border: 1px solid var(--color-neutral-200, #e5e7eb);
background: var(--color-neutral-50, #f8fafc);
color: var(--color-neutral-700, #374151);
border-radius: 8px;
padding: 0.35rem 0.6rem;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rich-text-editor__toolbar-button:hover:not(:disabled),
.rich-text-editor__toolbar-button:focus-visible:not(:disabled) {
background: var(--menu-item-hover);
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 40%, transparent);
outline: none;
transform: translateY(-1px);
}
.rich-text-editor__toolbar-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.rich-text-editor__surface {
min-height: 240px;
border: 1px solid var(--color-neutral-200, #e5e7eb);
border-radius: 12px;
padding: 1rem;
background: var(--color-surface, #ffffff);
line-height: 1.6;
color: var(--color-neutral-800, #1f2937);
outline: none;
overflow-y: auto;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rich-text-editor__surface:focus-visible {
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 60%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #2563eb) 15%, transparent);
}
.rich-text-editor__surface[data-placeholder]:empty::before {
content: attr(data-placeholder);
color: var(--color-neutral-400, #94a3b8);
pointer-events: none;
}
.rich-text-editor__surface--dragging {
border-color: color-mix(in srgb, var(--accent-color, #2563eb) 70%, transparent);
background: color-mix(in srgb, var(--accent-color, #2563eb) 6%, transparent);
}
.rich-text-editor__hint {
margin: 0;
font-size: 0.85rem;
color: var(--color-neutral-500, #6b7280);
}
.rich-text-editor__surface img {
max-width: 100%;
border-radius: 12px;
margin: 0.75rem 0;
}
.asset-filters-panel {
display: grid;
grid-template-columns: minmax(12rem, 15rem) minmax(24rem, 1fr);
gap: 1.75rem;
max-height: 30rem;
width: 100%;
}
.asset-filters-panel__column-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.asset-filters-panel__column-heading {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--muted-text);
}
.asset-filters-panel__column-items {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-filters-panel__column-button {
display: flex;
flex-direction: column;
gap: 0.125rem;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid transparent;
background-color: transparent;
text-align: left;
font-size: 0.9375rem;
color: var(--text-primary);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.asset-filters-panel__column-button:hover,
.asset-filters-panel__column-button:focus-visible {
border-color: var(--border-color);
background-color: var(--surface-bg, var(--content-bg));
outline: none;
}
.asset-filters-panel__column-button--active {
border-color: var(--accent-color);
background-color: rgba(21, 128, 61, 0.08);
color: var(--accent-color);
}
.asset-filters-panel__column-label {
font-weight: 600;
}
.asset-filters-panel__column-description {
font-size: 0.8125rem;
color: var(--muted-text);
}
.asset-filters-panel__content {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.asset-filters-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.asset-filters-panel__section--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
align-items: flex-end;
}
.asset-filters-panel__text-filter-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.asset-filters-panel__text-filter-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-filters-panel__text-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-end;
}
.asset-filters-panel__field {
min-width: 0;
}
.asset-filters-panel__field--mode {
flex: 0 0 14rem;
}
.asset-filters-panel__field--value {
flex: 1 1 16rem;
}
.asset-filters-panel__field--hidden-label .wmw-field__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.asset-filters-panel__text-filter-divider {
align-self: center;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-text);
text-align: center;
padding: 0.25rem 0;
}
.asset-filters-panel__text-filter-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.asset-filters-panel__remove-line {
margin-left: auto;
}
.asset-filters-panel__options {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 18rem;
overflow-y: auto;
padding-right: 0.25rem;
}
.asset-filters-panel__option {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--text-primary);
}
.asset-filters-panel__option span {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-filters-panel__option input {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.asset-filters-panel__empty,
.asset-filters-panel__status,
.asset-filters-panel__hint {
margin: 0;
font-size: 0.875rem;
color: var(--muted-text);
}
.asset-filters-panel__hint {
grid-column: 1 / -1;
}
.asset-filters-panel__footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.asset-filters-panel__footer-actions {
display: flex;
gap: 0.5rem;
}
[data-theme='dark'] .asset-filters-panel__column-button--active {
background-color: rgba(96, 165, 250, 0.16);
}
.asset-types-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 0 1.5rem 1.5rem;
width: 100%;
box-sizing: border-box;
}
.asset-types__status {
border-radius: 0.75rem;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
color: color-mix(in srgb, var(--color-success-600) 90%, var(--color-neutral-900) 10%);
padding: 0.75rem 1rem;
font-weight: 600;
}
.asset-types__error {
border-radius: 0.75rem;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.25);
color: var(--color-error-700);
padding: 0.75rem 1rem;
}
.asset-types__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.asset-types__empty {
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px dashed var(--border-color);
text-align: center;
color: var(--muted-text);
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.asset-types__empty p {
margin: 0;
}
.asset-types__empty strong {
color: var(--text-color);
}
.asset-types__empty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.asset-types__empty--error {
border-style: solid;
border-color: rgba(239, 68, 68, 0.25);
background: rgba(239, 68, 68, 0.12);
color: var(--color-error-700);
}
.asset-types__row-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
.asset-types__action-button {
--button-bg: transparent;
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
--button-color: var(--text-color);
box-shadow: none;
}
.asset-types__action-button--danger {
--button-color: var(--color-error-600);
}
.asset-types__action-button--confirm {
--button-bg: rgba(220, 38, 38, 0.12);
--button-border: rgba(220, 38, 38, 0.32);
--button-color: var(--color-error-700);
}
.asset-types-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.asset-types-form__error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.25);
color: var(--color-error-700);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
}
.asset-types-form__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-types-form__field label {
font-weight: 600;
}
.asset-types-form__field label span {
color: var(--muted-text);
font-weight: 400;
}
.asset-types-form__field input,
.asset-types-form__field textarea {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 0.65rem;
padding: 0.65rem 0.75rem;
font-size: 0.95rem;
background: var(--bg-color);
color: var(--text-color);
}
.asset-types-form__field textarea {
resize: vertical;
min-height: 6rem;
}
.asset-types-form__help {
font-size: 0.8rem;
color: var(--muted-text);
align-self: flex-end;
}
[data-theme='dark'] .asset-types__status {
background: rgba(34, 197, 94, 0.22);
border-color: rgba(34, 197, 94, 0.4);
color: color-mix(in srgb, var(--color-success-300) 75%, var(--color-white) 25%);
}
[data-theme='dark'] .asset-types__error,
[data-theme='dark'] .asset-types-form__error {
background: rgba(239, 68, 68, 0.22);
border-color: rgba(239, 68, 68, 0.4);
color: var(--color-error-100);
}
[data-theme='dark'] .asset-types__action-button--danger {
--button-color: var(--color-error-300);
}
[data-theme='dark'] .asset-types__action-button--confirm {
--button-bg: rgba(248, 113, 113, 0.22);
--button-border: rgba(248, 113, 113, 0.38);
--button-color: var(--color-error-100);
}
[data-theme='dark'] .asset-types__empty--error {
border-color: rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.22);
color: var(--color-error-100);
}
.assets-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.assets__body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.assets__panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.assetsList {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.assetsList .list-container {
flex: 1;
min-height: 0;
}
.assetsList .list-table-container {
flex: 1;
min-height: 0;
max-height: none;
}
.asset-hybrid__container {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
overflow: hidden;
height: 95vh;
min-height: 0;
flex: 1;
}
.asset-hybrid__panel {
flex-grow: 1;
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.asset-hybrid__list-panel {
flex-basis: var(--asset-hybrid-list-width, 40%);
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
display: flex;
flex-direction: column;
border-right: 1px solid #e0e0e0;
overflow: hidden;
min-height: 0;
}
.asset-hybrid__list-panel--swapped {
border-left: 1px solid #e0e0e0;
border-right: none;
}
.asset-hybrid__header {
padding: 6px 18px;
border-bottom: 1px solid var(--border-color, #eee);
font-size: 12px;
color: var(--text-primary, #222);
display: flex;
align-items: center;
gap: 0.5rem;
}
[data-theme='dark'] .asset-hybrid__header {
color: #fff;
}
.asset-hybrid__divider {
width: 6px;
cursor: col-resize;
background: transparent;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.asset-hybrid__divider-bar {
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 2px;
background: #d0d0d0;
}
.asset-hybrid__swap-btn {
position: relative;
z-index: 3;
background: var(--tile-bg, #f2f2f2);
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px;
color: var(--tile-fg, #202020);
margin-bottom: auto;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
[data-theme='dark'] .asset-hybrid__swap-btn {
background: var(--tile-bg, #3a3a3a);
color: var(--tile-fg, #f0f0f0);
}
.asset-list-panel__row {
background: #f5f5f5;
color: #222;
}
[data-theme='dark'] .asset-list-panel__row {
background: #23272f;
color: #fff;
}
.users__status-badge {
display: inline-block;
padding: 0 10px;
height: 22px;
line-height: 22px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
color: #fff;
background: #bdbdbd;
vertical-align: middle;
user-select: none;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.users__status-badge--active {
--status-color: #16a34a;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.18);
color: var(--text-color);
}
.users__status-badge--inactive {
--status-color: #ef4444;
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.14);
color: var(--text-color);
}
.asset-motion-badge {
background: #e5e7eb;
color: #111111;
}
[data-theme='dark'] .asset-motion-badge {
background: #d1d5db;
color: #111111;
}
.asset-history-tooltip {
min-width: 180px;
max-width: 230px;
border-radius: 10px;
padding: 8px 9px;
border: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text-1);
box-shadow: var(--map-control-shadow);
pointer-events: none;
}
.asset-history-tooltip__header {
display: flex;
flex-direction: column;
gap: 1px;
margin-bottom: 5px;
}
.asset-history-tooltip__header strong {
font-size: 11px;
line-height: 1.2;
}
.asset-history-tooltip__header span {
font-size: 10px;
color: var(--text-3);
}
.asset-history-tooltip__flags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 5px;
}
.asset-history-tooltip__flag {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.01em;
}
.asset-history-tooltip__flag--sos {
background: color-mix(in srgb, var(--color-error-600) 12%, transparent);
color: var(--color-error-600);
border: 1px solid color-mix(in srgb, var(--color-error-600) 36%, transparent);
}
.asset-history-tooltip__flag--motion {
background: color-mix(in srgb, var(--color-success-600) 12%, transparent);
color: var(--color-success-600);
border: 1px solid color-mix(in srgb, var(--color-success-600) 36%, transparent);
}
.asset-history-tooltip__grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 8px;
align-items: center;
font-size: 11px;
}
.asset-history-tooltip__grid span {
color: var(--text-3);
}
.asset-history-tooltip__grid strong {
font-size: 11px;
font-weight: 600;
}
.alarms-page {
display: flex;
flex-direction: column;
min-height: 100%;
}
.alarms-filters {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.alarms-filters__chip {
--button-bg: var(--menu-item-hover);
--button-border: transparent;
--button-hover-bg: var(--menu-item-active);
--button-active-bg: var(--menu-item-active);
--button-color: var(--text-color);
border-radius: 999px;
font-weight: 600;
}
.alarms-layout {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 0 1.5rem 2rem;
margin-top:24px;
}
@media (min-width: 1100px) {
.alarms-layout {
flex-direction: row;
align-items: flex-start;
}
}
.alarms-grid {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.25rem;
}
.alarms-grid__empty {
grid-column: 1 / -1;
text-align: center;
}
.alarm-card {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.35rem;
border-radius: 1.25rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.03);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
background 0.25s ease;
}
.alarm-card:hover {
transform: translateY(-4px);
border-color: rgba(48, 153, 204, 0.65);
}
.alarm-card--active {
border-color: rgba(48, 153, 204, 0.75);
}
.alarm-card--inactive {
opacity: 0.6;
}
.alarm-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.alarm-card__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background: var(--badge-bg);
color: var(--muted-text);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.alarm-card__badge-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
.alarm-card__badge--active {
color: var(--accent-color);
background: rgba(48, 153, 204, 0.16);
}
.alarm-card__badge--active .alarm-card__badge-dot {
opacity: 1;
background: var(--accent-color);
}
.alarm-card__switch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 44px;
}
.alarm-card__switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.alarm-card__switch-track {
position: relative;
width: 40px;
height: 20px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
transition: background 0.25s ease;
}
[data-theme='dark'] .alarm-card__switch-track {
background: rgba(255, 255, 255, 0.18);
}
.alarm-card__switch-track::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg-color);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
transition: transform 0.25s ease, background 0.25s ease;
}
.alarm-card__switch input:checked + .alarm-card__switch-track {
background: var(--accent-color);
}
.alarm-card__switch input:checked + .alarm-card__switch-track::after {
transform: translateX(18px);
background: var(--color-white);
}
[data-theme='dark'] .alarm-card__switch-track::after {
background: var(--color-neutral-900);
}
.alarm-card__content {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.alarm-card__content h2 {
margin: 0;
font-size: 1.2rem;
letter-spacing: -0.01em;
}
.alarm-card__tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.alarm-card__tags li {
margin: 0;
padding: 0;
list-style: none;
}
.alarm-card__applicability {
margin: 0;
color: var(--muted-text);
font-size: 0.78rem;
}
.alarm-card__tag-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: var(--badge-bg);
color: var(--muted-text);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
font-family: inherit;
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease, box-shadow 0.2s ease;
}
.alarm-card__tag-button:hover,
.alarm-card__tag-button:focus-visible {
background: var(--menu-item-hover, rgba(148, 163, 184, 0.14));
color: var(--text-color);
border-color: color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 35%,
transparent
);
outline: none;
box-shadow: 0 0 0 2px
color-mix(
in srgb,
var(--accent-color, var(--color-accent-600)) 24%,
transparent
);
}
.alarm-card__tag-button--active {
background: var(--menu-item-active, rgba(59, 130, 246, 0.08));
color: var(--text-color);
border-color: var(--accent-color, var(--color-accent-600));
}
.alarm-card__description {
margin: 0;
color: var(--muted-text);
line-height: 1.45;
font-size: 0.88rem;
}
.alarm-card__impact-box {
padding: 0.9rem 1rem;
border-radius: 1rem;
background: var(--badge-bg);
color: var(--text-color);
font-weight: 500;
line-height: 1.4;
}
[data-theme='dark'] .alarm-card__impact-box {
background: rgba(48, 153, 204, 0.12);
}
.alarm-card__impact-box p {
margin: 0;
}
.alarm-card__footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.alarm-card__footer .wmw-button--primary {
--button-shadow: none;
box-shadow: none;
}
.alarm-card__footer
.wmw-button--primary:hover:not(:disabled):not([aria-disabled='true']),
.alarm-card__footer
.wmw-button--primary:active:not(:disabled):not([aria-disabled='true']) {
box-shadow: none;
}
.alarm-card__methods {
font-size: 0.85rem;
color: var(--muted-text);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.alarm-config-overlay {
position: fixed;
inset: 0;
z-index: 30;
display: flex;
justify-content: flex-end;
pointer-events: none;
}
.alarm-config-overlay--open {
pointer-events: auto;
}
.alarm-config-overlay__backdrop {
position: absolute;
inset: 0;
border: none;
background: rgba(15, 23, 42, 0.35);
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
display: block;
padding: 0;
--button-bg: transparent;
--button-border: transparent;
--button-hover-bg: transparent;
--button-active-bg: transparent;
}
[data-theme='dark'] .alarm-config-overlay__backdrop {
background: rgba(15, 23, 42, 0.6);
}
.alarm-config-overlay__backdrop:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.alarm-config-overlay--open .alarm-config-overlay__backdrop {
opacity: 1;
}
.side-panel__container.alarm-config-panel {
box-shadow: none;
padding: 1.75rem 2rem;
gap: 1.5rem;
}
.alarm-config-panel__intro {
margin-bottom: 0.5rem;
}
.alarm-config-panel__intro p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
line-height: 1.5;
}
.alarm-config-panel__content {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.alarm-config-panel__content--flat {
gap: 1.5rem;
}
.alarm-config-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
border: none;
padding: 0;
margin: 0;
min-inline-size: 0;
}
.alarm-config-group__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.alarm-config-group__legend {
margin: 0;
padding: 0;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-color);
}
.alarm-config-summary {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.alarm-config-summary__label {
font-weight: 600;
color: var(--text-color);
}
.alarm-config-summary__current {
font-weight: 600;
color: var(--text-color);
}
.alarm-config-option-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
}
.alarm-config-option {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: transparent;
transition: border-color 0.2s ease, background 0.2s ease;
}
.alarm-config-option input {
margin-top: 0.2rem;
}
.alarm-config-option__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.alarm-config-option__label {
font-weight: 600;
color: var(--text-color);
}
.alarm-config-option__description {
font-size: 0.85rem;
color: var(--muted-text);
line-height: 1.4;
}
.alarm-config-option--selected {
border-color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}
.alarm-config-option--selected .alarm-config-option__label {
color: var(--accent-color);
}
.alarm-config-formula {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--badge-bg);
}
.alarm-config-formula__label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-color);
}
.alarm-config-formula p {
margin: 0;
line-height: 1.45;
color: var(--text-color);
}
.alarm-config-formula__variable {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.6rem;
margin: 0 0.15rem;
border-radius: 0.65rem;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
font-weight: 600;
}
.alarm-config-formula__variable-label {
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-text);
}
.alarm-config-formula__variable-value {
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
color: var(--text-color);
}
.alarm-config-checkbox-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-config-checkbox {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--text-color);
}
.alarm-config-checkbox input {
margin-top: 0.2rem;
}
.alarm-config-checkbox__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.alarm-config-checkbox__hint {
font-size: 0.8rem;
color: var(--muted-text);
}
.alarm-config-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.alarm-config-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.alarm-config-tag:hover,
.alarm-config-tag:focus-visible {
border-color: var(--accent-color);
}
.alarm-config-tag:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(48, 153, 204, 0.15);
}
.alarm-config-tag--selected {
border-color: var(--accent-color);
background: rgba(48, 153, 204, 0.12);
color: var(--accent-color);
}
[data-theme='dark'] .alarm-config-tag--selected {
background: rgba(48, 153, 204, 0.24);
}
.alarm-config-tag-form {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-end;
}
.alarm-config-tag-input {
flex: 1 1 220px;
}
.alarm-config-radio-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-config-radio {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: transparent;
transition: border-color 0.2s ease, background 0.2s ease;
}
.alarm-config-radio input {
margin-top: 0.25rem;
}
.alarm-config-radio__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.alarm-config-radio__label {
font-weight: 600;
color: var(--text-color);
}
.alarm-config-radio__description {
font-size: 0.85rem;
color: var(--muted-text);
line-height: 1.35;
}
.alarm-config-radio--selected {
border-color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color) 6%, transparent);
}
.alarm-config-input {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.9rem;
color: var(--text-color);
}
.alarm-config-input input,
.alarm-config-input select {
padding: 0.55rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-color);
font: inherit;
}
.alarm-config-input input:focus-visible,
.alarm-config-input select:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.alarm-config-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--text-color);
}
.alarm-config-toggle input {
width: 1rem;
height: 1rem;
}
.alarm-config-schedule-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.alarm-config-schedule-days {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-config-schedule-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-color);
}
.alarm-config-day-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.alarm-config-day {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--border-color);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--text-color);
}
.alarm-config-day input {
margin: 0;
}
.alarm-config-day span {
display: inline-flex;
align-items: center;
}
.alarm-config-day input:checked + span {
color: var(--accent-color);
font-weight: 600;
}
.alarm-config-escalation-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.alarm-config-panel__section {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-bottom: 1.75rem;
}
.alarm-config-panel__inputs {
gap: 1.5rem;
padding: 0;
}
.alarm-config-panel__inputs-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-config-panel__inputs-footer {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.alarm-config-panel__section .alarm-config-panel__inputs-footer p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
line-height: 1.45;
}
.alarm-config-panel__inputs-meta {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.alarm-config-panel__inputs-meta span {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-color);
}
.alarm-config-panel__section h3 {
margin: 0;
font-size: 1rem;
}
.alarm-config-panel__section p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
line-height: 1.45;
}
.alarm-config-section {
padding: 1.25rem;
border-radius: 1.35rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.048);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.alarm-config-section--expanded {
border-color: var(--accent-color);
box-shadow: 0 20px 36px rgba(15, 23, 42, 0.072);
}
[data-theme='dark'] .alarm-config-section {
border-color: rgba(148, 163, 184, 0.28);
background: rgba(15, 23, 42, 0.68);
box-shadow: 0 24px 40px rgba(2, 6, 23, 0.3);
}
[data-theme='dark'] .alarm-config-section--expanded {
border-color: var(--accent-color);
box-shadow: 0 32px 44px rgba(2, 6, 23, 0.36);
}
.alarm-config-section__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.alarm-config-section__intro {
flex: 1 1 auto;
}
.alarm-config-section__intro p {
margin-top: 0.35rem;
}
.alarm-config-section__toggle {
border-radius: 999px;
font-weight: 600;
font-size: 0.85rem;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease,
transform 0.2s ease;
--button-bg: var(--panel-bg);
--button-border: var(--border-color);
--button-hover-bg: var(--accent-color);
--button-active-bg: var(--accent-color);
--button-color: var(--accent-color);
}
.alarm-config-section__toggle:hover,
.alarm-config-section__toggle:focus-visible {
border-color: var(--accent-color);
background: var(--accent-color);
color: var(--color-white);
transform: translateY(-1px);
outline: none;
box-shadow: 0 14px 24px rgba(15, 23, 42, 0.072);
}
[data-theme='dark'] .alarm-config-section__toggle {
--button-bg: rgba(15, 23, 42, 0.6);
}
[data-theme='dark'] .alarm-config-section__toggle:hover,
[data-theme='dark'] .alarm-config-section__toggle:focus-visible {
box-shadow: 0 16px 28px rgba(2, 6, 23, 0.27);
}
.alarm-config-section__summary {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: baseline;
font-size: 0.85rem;
color: var(--muted-text);
}
.alarm-config-section__summary-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: var(--badge-bg);
color: var(--accent-color);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.alarm-config-section__current {
color: var(--text-color);
font-weight: 600;
}
.alarm-config-section__body {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(148, 163, 184, 0.4);
}
[data-theme='dark'] .alarm-config-section__body {
border-top-color: rgba(148, 163, 184, 0.25);
}
.alarm-config-section__body[hidden] {
display: none;
}
.alarm-severity-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.75rem;
}
.alarm-severity-option {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
width: 100%;
padding: 0.8rem;
border-radius: 0.85rem;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
transform 0.2s ease;
--button-bg: var(--panel-bg);
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--alarm-option-badge, rgba(48, 153, 204, 0.12));
--button-color: var(--text-color);
}
.alarm-severity-option .wmw-button__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
width: 100%;
}
.alarm-severity-option::before {
content: '';
width: 0.75rem;
height: 0.75rem;
border-radius: 999px;
background: var(--alarm-option-color, var(--accent-color));
}
.alarm-severity-option--active {
border-color: var(--alarm-option-color, var(--accent-color));
background: var(--alarm-option-badge, rgba(48, 153, 204, 0.12));
box-shadow: 0 14px 22px rgba(15, 23, 42, 0.06);
--button-border: var(--alarm-option-color, var(--accent-color));
--button-bg: var(--alarm-option-badge, rgba(48, 153, 204, 0.12));
}
.alarm-severity-option__label {
font-weight: 600;
font-size: 0.95rem;
}
.alarm-severity-option__description {
color: var(--muted-text);
font-size: 0.85rem;
line-height: 1.35;
}
.alarm-methods {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.alarm-chip {
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
padding: 0.45rem 0.85rem;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease,
transform 0.2s ease;
--button-bg: transparent;
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
--button-color: var(--text-color);
}
.alarm-chip:hover,
.alarm-chip:focus-visible {
transform: translateY(-1px);
border-color: var(--accent-color);
color: var(--accent-color);
--button-border: var(--accent-color);
--button-color: var(--accent-color);
}
.alarm-chip--active {
border-color: var(--accent-color);
color: var(--accent-color);
background: rgba(48, 153, 204, 0.12);
--button-bg: rgba(48, 153, 204, 0.12);
--button-border: var(--accent-color);
--button-color: var(--accent-color);
}
[data-theme='dark'] .alarm-chip {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
--button-bg: rgba(255, 255, 255, 0.05);
--button-border: rgba(255, 255, 255, 0.12);
--button-color: rgba(255, 255, 255, 0.92);
}
[data-theme='dark'] .alarm-chip:hover,
[data-theme='dark'] .alarm-chip:focus-visible {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
[data-theme='dark'] .alarm-chip--active {
color: var(--color-info-100);
border-color: rgba(81, 182, 226, 0.9);
background: rgba(48, 153, 204, 0.28);
--button-bg: rgba(48, 153, 204, 0.28);
--button-border: rgba(81, 182, 226, 0.9);
--button-color: var(--color-info-100);
}
[data-theme='dark'] .alarm-chip--active:hover,
[data-theme='dark'] .alarm-chip--active:focus-visible {
background: rgba(48, 153, 204, 0.34);
border-color: rgba(99, 194, 238, 0.95);
}
.alarm-parameters {
display: flex;
flex-direction: column;
gap: 1rem;
}
.alarm-parameter {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-parameter__label {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.alarm-parameter__title {
font-weight: 600;
color: var(--text-color);
}
.alarm-parameter__description {
font-size: 0.85rem;
color: var(--muted-text);
line-height: 1.4;
}
.alarm-parameter__control {
display: flex;
align-items: center;
gap: 0.5rem;
}
.alarm-parameter__control--slider {
align-items: stretch;
}
.alarm-parameter__control input {
flex: 1;
min-width: 0;
padding: 0.55rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
color: var(--text-color);
font: inherit;
}
.alarm-parameter__control--slider input[type='range'] {
padding: 0;
border: none;
background: transparent;
accent-color: var(--accent-color);
}
.alarm-parameter__control input:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.alarm-parameter__control input::placeholder {
color: var(--muted-text);
opacity: 0.7;
}
.alarm-parameter__unit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.65rem;
border-radius: 0.75rem;
background: var(--badge-bg);
font-size: 0.85rem;
font-weight: 600;
color: var(--muted-text);
}
.alarm-parameter__slider {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.alarm-parameter__slider-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.alarm-parameter__slider-value {
font-weight: 600;
font-size: 1.05rem;
color: var(--text-color);
font-variant-numeric: tabular-nums;
}
.alarm-parameter__slider-track {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.alarm-parameter__slider-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--muted-text);
}
.alarm-parameter__slider-markers {
position: relative;
height: 2.5rem;
}
.alarm-parameter__slider-marker {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
max-width: 8.5rem;
}
.alarm-parameter__slider-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--accent-color);
}
.alarm-parameter__slider-marker-label {
font-size: 0.75rem;
line-height: 1.2;
color: var(--muted-text);
}
.alarm-parameters__formula-visual {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1rem;
border-radius: 1rem;
background: var(--badge-bg);
border: 1px solid var(--border-color);
}
.alarm-parameters__formula-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-color);
}
.alarm-parameters__formula-visual p {
margin: 0;
color: var(--text-color);
line-height: 1.55;
font-size: 0.98rem;
}
.alarm-parameters__formula-variable {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.4rem 0.75rem;
margin: 0 0.2rem;
border-radius: 0.95rem;
background: rgba(48, 153, 204, 0.22);
border: 1px solid rgba(48, 153, 204, 0.32);
color: var(--color-white);
font-weight: 600;
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
[data-theme='dark'] .alarm-parameters__formula-variable {
background: rgba(48, 153, 204, 0.28);
border-color: rgba(48, 153, 204, 0.38);
}
.alarm-parameters__formula-variable-label {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: inherit;
opacity: 0.85;
}
.alarm-parameters__formula-variable-value {
font-size: 1rem;
color: inherit;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.alarm-activation {
display: flex;
flex-direction: column;
gap: 1rem;
}
.alarm-activation__toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--text-color);
}
.alarm-activation__toggle input {
width: 1.1rem;
height: 1.1rem;
}
.alarm-activation__days {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.alarm-day {
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
--button-bg: var(--panel-bg);
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--accent-color);
--button-color: var(--text-color);
}
.alarm-day--selected {
--button-bg: var(--accent-color);
--button-border: var(--accent-color);
--button-color: var(--color-white);
}
.alarm-activation__grid {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.alarm-activation__grid input {
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
color: var(--text-color);
font: inherit;
}
.alarm-activation__grid input:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.alarm-activation__grid input:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.alarm-methods__support {
margin-top: 1rem;
padding: 0.85rem 1rem;
border-radius: 1rem;
border: 1px solid var(--border-color);
background: rgba(48, 153, 204, 0.08);
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
}
[data-theme='dark'] .alarm-methods__support {
background: rgba(48, 153, 204, 0.18);
}
.alarm-methods__support-title {
font-weight: 700;
color: var(--text-color);
}
.alarm-methods__support-summary {
color: var(--muted-text);
}
.alarm-methods__support-warning {
color: var(--color-error-700);
font-weight: 600;
}
[data-theme='dark'] .alarm-methods__support-warning {
color: var(--color-error-400);
}
.alarm-methods__support-ok {
color: var(--accent-color);
font-weight: 600;
}
.alarm-bundles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.alarm-bundle {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.85rem;
border-radius: 0.85rem;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease,
background 0.2s ease;
--button-bg: var(--panel-bg);
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: rgba(48, 153, 204, 0.12);
--button-color: var(--text-color);
}
.alarm-bundle .wmw-button__content {
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: flex-start;
}
.alarm-bundle--active {
border-color: var(--accent-color);
background: rgba(48, 153, 204, 0.12);
box-shadow: 0 12px 22px rgba(48, 153, 204, 0.12);
--button-border: var(--accent-color);
--button-bg: rgba(48, 153, 204, 0.12);
}
.alarm-bundle__label {
font-weight: 600;
font-size: 0.95rem;
}
.alarm-bundle__description {
color: var(--muted-text);
font-size: 0.85rem;
line-height: 1.35;
}
.alarm-slider {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.alarm-slider input[type='range'] {
width: 100%;
accent-color: var(--accent-color);
}
.alarm-slider__value {
font-size: 0.9rem;
color: var(--text-color);
}
.alarm-checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.75rem;
}
.alarm-checkbox {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.75rem;
border-radius: 0.85rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease,
background 0.2s ease;
}
.alarm-checkbox--selected {
border-color: var(--accent-color);
background: rgba(48, 153, 204, 0.12);
box-shadow: 0 10px 18px rgba(48, 153, 204, 0.108);
}
.alarm-checkbox input {
width: 1rem;
height: 1rem;
accent-color: var(--accent-color);
}
.alarm-checkbox span {
font-size: 0.9rem;
color: var(--text-color);
}
.alarm-escalation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
}
.alarm-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--muted-text);
}
.alarm-select {
border: 1px solid var(--border-color);
background: var(--bg-color);
color: var(--text-color);
border-radius: 0.75rem;
padding: 0.55rem 0.75rem;
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alarm-select:focus {
outline: none;
border-color: var(--accent-color);
}
[data-theme='dark'] .alarm-select {
background: var(--color-neutral-900);
}
.alarm-config-panel__note {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
line-height: 1.4;
}
.alarm-config-panel__footer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
}
.alarm-config-panel__footer-meta {
display: flex;
flex-direction: column;
gap: 0.45rem;
min-width: 0;
}
.alarm-config-panel__actions {
display: flex;
gap: 0.5rem;
margin-left: auto;
}
.alarm-config-panel__hint {
font-size: 0.8rem;
color: var(--muted-text);
max-width: 22rem;
}
@keyframes alarm-panel-slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.alarms-custom-rule-panel__content {
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 2rem 1.5rem;
}
.alarms-custom-rule-panel__chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--panel-bg);
border: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--muted-text);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.048);
}
[data-theme='dark'] .alarms-custom-rule-panel__chip {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.27);
}
@media (prefers-reduced-motion: reduce) {
.alarm-card,
.alarm-config-panel,
.alarm-config-overlay__backdrop,
.alarm-card__switch-track,
.alarm-chip,
.alarm-bundle,
.alarm-severity-option {
transition: none;
}
.alarm-config-panel {
animation: none;
}
}
.tag-selector {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
}
.tag-selector:first-of-type {
border-top: none;
padding-top: 0;
}
.tag-selector__header h3 {
margin: 0 0 0.25rem 0;
font-size: 1.05rem;
line-height: 1.3;
}
.tag-selector__description {
margin: 0;
color: var(--text-2);
font-size: 0.9rem;
line-height: 1.4;
}
.tag-selector__linked h4,
.tag-selector__recommendations h4 {
margin: 0 0 0.5rem 0;
font-size: 0.95rem;
color: var(--text-2);
font-weight: 600;
}
.tag-selector__linked-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-selector__recommendation-list,
.tag-selector__options {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.tag-selector__recommendation-list li,
.tag-selector__options li {
width: 100%;
}
.tag-selector__linked-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.tag-selector__chip {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: var(--menu-item-active);
color: var(--accent-color);
font-weight: 600;
font-size: 0.85rem;
}
.tag-selector__chip-remove {
border: none;
background: transparent;
color: var(--text-2);
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0;
}
.tag-selector__chip-remove:hover,
.tag-selector__chip-remove:focus-visible {
color: var(--text-color);
}
.tag-selector__empty {
margin: 0;
font-size: 0.9rem;
color: var(--text-2);
}
.tag-selector__recommendation,
.tag-selector__option {
border: 1px solid var(--border);
background: var(--panel-bg);
color: var(--text-color);
border-radius: 0.75rem;
padding: 0.75rem;
cursor: pointer;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
text-align: left;
font-size: 0.9rem;
width: 100%;
transition: border-color 0.15s ease, box-shadow 0.15s ease,
background-color 0.15s ease;
}
.tag-selector__recommendation:hover,
.tag-selector__recommendation:focus-visible,
.tag-selector__option:hover,
.tag-selector__option:focus-visible {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.tag-selector__recommendation--selected,
.tag-selector__option--selected {
border-color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color) 12%, var(--panel-bg));
}
.tag-selector__recommendation:disabled,
.tag-selector__option:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.tag-selector__recommendation-label,
.tag-selector__option-label {
font-weight: 600;
font-size: 0.95rem;
}
.tag-selector__recommendation-description,
.tag-selector__option-description {
font-size: 0.85rem;
color: var(--text-2);
}
.tag-selector__search {
width: 100%;
}
.tag-selector__search .wmw-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.tag-selector__search .wmw-field__label {
font-size: 0.85rem;
color: var(--text-2);
}
.tag-selector__search .wmw-input {
padding: 0.6rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border);
background: var(--panel-bg);
color: var(--text-color);
}
.tag-selector__search .wmw-input:focus-visible {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}
.tag-selector__status {
margin: 0;
font-size: 0.85rem;
color: var(--text-2);
}
.tag-selector__status--error {
color: var(--color-error-600);
}
[data-theme='dark'] .tag-selector__chip {
background: color-mix(in srgb, var(--accent-color) 20%, transparent);
color: var(--color-neutral-50);
}
[data-theme='dark'] .tag-selector__recommendation,
[data-theme='dark'] .tag-selector__option {
background: color-mix(in srgb, var(--panel-bg) 90%, var(--color-neutral-900) 10%);
border-color: color-mix(in srgb, var(--border) 60%, transparent);
}
[data-theme='dark'] .tag-selector__recommendation--selected,
[data-theme='dark'] .tag-selector__option--selected {
background: color-mix(in srgb, var(--accent-color) 18%, var(--panel-bg));
}
.tag-selector__footer {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.25rem;
}
.tag-selector--compact {
gap: 0.75rem;
padding: 0.5rem 0;
border-top: none;
}
.tag-selector--compact .tag-selector__header h3 {
font-size: 0.95rem;
}
.tag-selector--compact .tag-selector__description {
font-size: 0.8rem;
}
.tag-selector--compact .tag-selector__linked h4,
.tag-selector--compact .tag-selector__recommendations h4 {
font-size: 0.85rem;
margin-bottom: 0.35rem;
}
.tag-selector--compact .tag-selector__linked-list {
gap: 0.4rem;
}
.tag-selector--compact .tag-selector__chip {
padding: 0.15rem 0.5rem;
font-size: 0.8rem;
}
.tag-selector--compact .tag-selector__search .wmw-field__label {
font-size: 0.8rem;
}
.tag-selector--compact .tag-selector__search .wmw-input {
padding: 0.5rem 0.6rem;
}
.tag-selector--compact .tag-selector__recommendation-list,
.tag-selector--compact .tag-selector__options {
gap: 0.5rem;
}
.tag-selector--compact .tag-selector__recommendation,
.tag-selector--compact .tag-selector__option {
padding: 0.6rem;
border-radius: 0.65rem;
}
.tag-selector--compact .tag-selector__recommendation-label,
.tag-selector--compact .tag-selector__option-label {
font-size: 0.9rem;
}
.tag-selector--compact .tag-selector__recommendation-description,
.tag-selector--compact .tag-selector__option-description {
font-size: 0.75rem;
}
.tag-selector--compact .tag-selector__status {
font-size: 0.8rem;
}
.tag-selector--compact .tag-selector__footer {
gap: 0.5rem;
margin-top: 0;
}
.email-group-selector {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--border);
}
.email-group-selector:first-of-type {
border-top: none;
padding-top: 0;
}
.email-group-selector__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.email-group-selector__header h3 {
margin: 0 0 0.25rem 0;
font-size: 1.05rem;
line-height: 1.3;
}
.email-group-selector__description {
margin: 0;
color: var(--text-2);
font-size: 0.9rem;
line-height: 1.4;
}
.email-group-selector__summary {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-2);
padding: 0.35rem 0.65rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-color) 12%, transparent);
margin-left: auto;
}
.email-group-selector__search {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.email-group-selector__search .wmw-field__label {
font-size: 0.85rem;
color: var(--text-2);
}
.email-group-selector__search .wmw-input {
padding: 0.6rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border);
background: var(--panel-bg);
color: var(--text-color);
}
.email-group-selector__search .wmw-input:focus-visible {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}
.email-group-selector__status {
margin: 0;
font-size: 0.85rem;
color: var(--text-2);
}
.email-group-selector__status--error {
color: var(--color-error-600);
}
.email-group-selector__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.email-group-selector__option {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: flex-start;
padding: 0.75rem;
border-radius: 0.75rem;
border: 1px solid var(--border);
background: var(--panel-bg);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.email-group-selector__option input {
margin-top: 0.2rem;
}
.email-group-selector__option:hover,
.email-group-selector__option:focus-within {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.email-group-selector__option--selected {
border-color: var(--accent-color);
background: color-mix(in srgb, var(--accent-color) 12%, var(--panel-bg));
}
.email-group-selector__option-content {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.email-group-selector__option-name {
font-weight: 600;
font-size: 0.95rem;
}
.email-group-selector__option-description {
font-size: 0.85rem;
color: var(--text-2);
}
.email-group-selector__member-preview {
display: flex;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.email-group-selector__member-preview li {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
background: var(--accent-color);
position: relative;
margin-left: -0.5rem;
box-shadow: 0 0 0 2px var(--panel-bg);
text-transform: uppercase;
}
.email-group-selector__member-preview li:first-child {
margin-left: 0;
}
.email-group-selector__member-preview li:nth-child(2) {
background: color-mix(in srgb, var(--accent-color) 85%, #ffffff);
}
.email-group-selector__member-preview li:nth-child(3) {
background: color-mix(in srgb, var(--accent-color) 70%, #ffffff);
}
.email-group-selector__member-preview li:nth-child(4) {
background: color-mix(in srgb, var(--accent-color) 55%, #ffffff);
}
.email-group-selector__member-preview li:nth-child(n + 5) {
background: color-mix(in srgb, var(--accent-color) 40%, #ffffff);
}
.email-group-selector__footer {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.email-group-selector--compact {
gap: 0.75rem;
padding: 0.5rem 0;
border-top: none;
}
.email-group-selector--compact .email-group-selector__header {
gap: 0.5rem;
}
.email-group-selector--compact .email-group-selector__header h3 {
font-size: 0.95rem;
}
.email-group-selector--compact .email-group-selector__description {
font-size: 0.8rem;
}
.email-group-selector--compact .email-group-selector__summary {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
.email-group-selector--compact .email-group-selector__search .wmw-field__label {
font-size: 0.8rem;
}
.email-group-selector--compact .email-group-selector__search .wmw-input {
padding: 0.5rem 0.6rem;
}
.email-group-selector--compact .email-group-selector__status {
font-size: 0.8rem;
}
.email-group-selector--compact .email-group-selector__list {
gap: 0.5rem;
}
.email-group-selector--compact .email-group-selector__option {
gap: 0.5rem;
padding: 0.6rem;
border-radius: 0.65rem;
}
.email-group-selector--compact .email-group-selector__option-name {
font-size: 0.9rem;
}
.email-group-selector--compact .email-group-selector__option-description {
font-size: 0.8rem;
}
.email-group-selector--compact .email-group-selector__member-preview {
gap: 0;
}
.email-group-selector--compact .email-group-selector__member-preview li {
width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
margin-left: -0.4rem;
}
.email-group-selector--compact .email-group-selector__footer {
gap: 0.5rem;
}
[data-theme='dark'] .email-group-selector__summary {
background: color-mix(in srgb, var(--accent-color) 18%, transparent);
color: var(--color-neutral-50);
}
[data-theme='dark'] .email-group-selector__option {
background: color-mix(in srgb, var(--panel-bg) 90%, var(--color-neutral-900) 10%);
border-color: color-mix(in srgb, var(--border) 60%, transparent);
}
[data-theme='dark'] .email-group-selector__option--selected {
background: color-mix(in srgb, var(--accent-color) 18%, var(--panel-bg));
}
[data-theme='dark'] .email-group-selector__member-preview li {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-bg) 45%, transparent);
}
.device-filters-panel {
display: grid;
grid-template-columns: minmax(12rem, 15rem) minmax(24rem, 1fr);
gap: 1.75rem;
max-height: 32rem;
width: 100%;
background: var(--content-bg, #fff);
border-radius: 1rem;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
padding: 2rem 1.5rem 1.5rem 1.5rem;
}
.device-filters-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.device-filters-panel__section label {
font-size: 0.95rem;
font-weight: 500;
color: var(--text-primary, #222);
margin-bottom: 0.25rem;
}
.device-filters-panel__section input,
.device-filters-panel__section select {
font-size: 1rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color, #d1d5db);
background: var(--input-bg, #f9fafb);
color: var(--text-primary, #222);
outline: none;
transition: border-color 0.2s;
}
.device-filters-panel__section input:focus,
.device-filters-panel__section select:focus {
border-color: var(--accent-color, #15803d);
}
.device-filters-panel__footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 2rem;
}
@media (max-width: 700px) {
.device-filters-panel {
grid-template-columns: 1fr;
padding: 1rem;
}
}
.profile-page {
height: 100%;
display: flex;
flex-direction: column;
}
.profile-content {
flex: 1;
display: flex;
flex-direction: column;
}
.profile-card {
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
color: var(--text-color);
animation: profile-card-enter 0.3s ease-out;
}
.profile-tabpanel {
display: none;
margin-bottom: 1.5rem;
}
.profile-tabpanel--active {
display: flex;
}
.profile-tabpanel--plain {
padding: 1.5rem;
flex-direction: column;
gap: 1.5rem;
color: var(--text-color);
background: var(--bg-color);
}
.profile-branding__grid {
display: grid;
gap: 1.25rem;
}
.profile-enterprise {
display: grid;
gap: 1.5rem;
grid-template-columns: minmax(240px, 280px) 1fr;
}
@media (max-width: 1200px) {
.profile-enterprise {
grid-template-columns: minmax(220px, 260px) 1fr;
}
}
@media (max-width: 960px) {
.profile-enterprise {
grid-template-columns: 1fr;
}
}
.profile-enterprise__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.workspace-identities {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
border: 1px solid var(--border-color);
border-radius: 1rem;
background: var(--bg-color);
}
.workspace-identities__header {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.workspace-identities__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.workspace-identities__header p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.workspace-identities__list {
display: block;
}
.workspace-identities__list > ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
}
.workspace-identities__status {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.workspace-identities__item {
position: relative;
list-style: none;
width: 100%;
border-radius: 0.9rem;
padding: 1rem;
background: var(--panel-bg);
border: 1px solid var(--identity-border-color, var(--border-color));
display: flex;
flex-direction: column;
gap: 0.75rem;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.workspace-identities__item::before {
content: '';
position: absolute;
inset: 0;
background: var(--identity-background-tint, transparent);
pointer-events: none;
}
.workspace-identities__item > * {
position: relative;
z-index: 1;
}
.workspace-identities__item:hover {
border-color: var(--identity-accent-color, rgba(37, 122, 163, 0.5));
}
.workspace-identities__item--selected {
border-color: var(--identity-accent-color, rgba(37, 122, 163, 0.5));
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.072);
}
.workspace-identities__button {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0;
border: none;
background: none;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-color);
cursor: pointer;
text-align: left;
width: 100%;
}
.workspace-identities__button:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
border-radius: 0.5rem;
}
.workspace-identities__button:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.workspace-identities__info {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1;
min-width: 0;
}
.workspace-identities__details {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.workspace-identities__name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-identities__colors {
display: flex;
align-items: center;
gap: 0.35rem;
}
.workspace-identities__color-dot {
width: 0.65rem;
height: 0.65rem;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.15);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.072);
}
.workspace-identities__color-dot--accent {
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.108);
}
.workspace-identities__logo {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background: var(--identity-logo-background, var(--panel-bg));
border: 1px solid var(--identity-logo-border, rgba(15, 23, 42, 0.1));
overflow: hidden;
flex-shrink: 0;
}
.workspace-identities__logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.workspace-identities__logo-fallback {
font-size: 1rem;
font-weight: 600;
color: var(--identity-logo-text, var(--text-color));
}
.workspace-identities__badge {
background: rgba(48, 153, 204, 0.16);
color: var(--accent-color);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
padding: 0.1rem 0.6rem;
}
.workspace-identities__actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.workspace-identities__error {
margin: 0;
color: var(--error-color, #b91c1c);
font-size: 0.9rem;
}
.branding-section {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem;
border: 1px solid var(--border-color);
border-radius: 1rem;
background: var(--bg-color);
}
.branding-section__colors {
display: flex;
flex-direction: column;
gap: 1rem;
}
.branding-section__colors .branding-subsection {
margin-top: 0;
}
.branding-section__header {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.branding-section__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.branding-section__header span {
color: var(--muted-text);
font-size: 0.9rem;
}
.branding-logo {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.branding-subsection {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.branding-subsection__header {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.branding-subsection__header h4 {
font-size: 1rem;
margin: 0;
}
.branding-subsection__header span {
color: var(--muted-text);
font-size: 0.9rem;
}
.branding-logo__preview {
border: 1px dashed var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--muted-text);
background: rgba(48, 153, 204, 0.06);
}
.branding-logo__preview--active {
border-style: solid;
background: var(--bg-color);
color: var(--text-color);
}
.branding-logo__preview img {
max-height: 150px;
max-width: 100%;
object-fit: contain;
}
.branding-logo__preview--compact {
min-height: 120px;
}
.branding-logo__preview--compact img {
max-height: 96px;
}
.branding-logo__preview--wide {
min-height: 160px;
}
.branding-logo__preview--wide img {
max-height: 120px;
width: 100%;
}
.branding-logo__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.branding-suggestion {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border: 1px dashed var(--border-color);
border-radius: 1rem;
background: rgba(37, 122, 163, 0.06);
}
.branding-suggestion__content {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.branding-suggestion__content h5 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.branding-suggestion__content p {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.branding-logo__input {
display: none;
}
.branding-colors {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.branding-colors__summary-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border-radius: 0.9rem;
border: 1px solid var(--border-color);
background: var(--bg-color);
cursor: pointer;
text-align: left;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.branding-colors__summary-button:hover,
.branding-colors__summary-button:focus-visible {
outline: none;
transform: translateY(-1px);
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.072);
border-color: rgba(48, 153, 204, 0.4);
}
.branding-colors__summary-button:disabled {
cursor: not-allowed;
opacity: 0.7;
transform: none;
box-shadow: none;
border-color: var(--border-color);
}
.branding-colors__summary-info {
display: flex;
align-items: center;
gap: 0.85rem;
}
.branding-colors__summary-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
aspect-ratio: 1 / 1;
border-radius: 0.75rem;
font-size: 1.2rem;
border: 2px solid rgba(15, 23, 42, 0.08);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.036);
}
[data-theme='dark'] .branding-colors__summary-swatch {
border-color: rgba(148, 163, 184, 0.4);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.18);
}
.branding-colors__summary-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.branding-colors__summary-text span {
font-size: 0.8rem;
color: var(--muted-text);
}
.branding-colors__summary-text strong {
font-size: 1rem;
font-weight: 600;
}
.branding-colors__summary-action {
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-color, #308fcc);
}
.branding-colors__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 0.75rem;
}
.branding-colors__option {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.branding-colors__swatch {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 0.9rem;
border: 2px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.92);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.branding-colors__swatch:hover,
.branding-colors__swatch:focus-visible {
outline: none;
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(17, 24, 39, 0.09);
}
.branding-colors__swatch--active {
transform: translateY(-1px);
}
.branding-colors__checkmark {
opacity: 0;
transition: opacity 0.2s ease;
}
.branding-colors__swatch--active .branding-colors__checkmark {
opacity: 1;
}
.branding-colors__label {
font-size: 0.8rem;
color: var(--muted-text);
}
.branding-colors__panel {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.branding-colors__panel-description {
margin: 0;
color: var(--muted-text);
}
.profile-branding__form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.branding-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.branding-field__label {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-color);
}
.branding-field__hint {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.profile-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.85rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
color: var(--text-color);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-input:focus-visible {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10.8%, transparent);
}
.profile-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.branding-preview {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.85rem;
border: 1px dashed var(--border-color);
background: var(--panel-bg);
}
.branding-preview__workspace {
flex: 1;
min-height: 48px;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.5rem 0.75rem;
}
.branding-preview__accent {
width: 48px;
height: 48px;
border-radius: 0.75rem;
}
.branding-actions {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
}
.branding-actions__status {
flex: 1;
color: var(--muted-text);
font-size: 0.85rem;
}
.branding-actions__error {
flex: 1;
color: var(--color-error-600);
font-size: 0.9rem;
}
.branding-actions__status:empty,
.branding-actions__error:empty {
display: none;
}
.profile-card__header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
}
.profile-card__header p {
margin: 0.25rem 0 0;
color: var(--muted-text);
font-size: 0.95rem;
}
.profile-personalization {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
@media (min-width: 1024px) {
.profile-personalization {
flex-direction: row;
align-items: flex-start;
}
}
.profile-personalization__sidebar {
flex: 0 0 240px;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.25rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
background: color-mix(in srgb, var(--panel-bg) 92%, var(--border-color) 8%);
}
@media (max-width: 1023px) {
.profile-personalization__sidebar {
flex: 0 0 auto;
flex-direction: row;
gap: 2rem;
overflow-x: auto;
padding: 1rem;
scroll-snap-type: x proximity;
}
}
.profile-personalization__menu-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 140px;
scroll-snap-align: start;
}
.profile-personalization__menu-heading {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted-text) 75%, var(--text-color) 25%);
}
.profile-personalization__menu-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.profile-personalization__menu-item {
width: 100%;
text-align: left;
border: none;font-family: inherit;
border-radius: 0.75rem;
padding: 0.75rem 0.9rem;
background: transparent;
color: var(--text-color);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.profile-personalization__menu-item:hover,
.profile-personalization__menu-item:focus-visible {
background: color-mix(in srgb, var(--accent-color) 16%, transparent);
color: var(--accent-color);
}
.profile-personalization__menu-item--active {
background: color-mix(in srgb, var(--accent-color) 22%, transparent);
color: var(--accent-color);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 50%, transparent);
}
.profile-personalization__menu-item[disabled] {
cursor: not-allowed;
color: color-mix(in srgb, var(--muted-text) 75%, var(--text-color) 25%);
background: transparent;
box-shadow: none;
}
.profile-personalization__menu-item[disabled]:hover,
.profile-personalization__menu-item[disabled]:focus-visible {
color: color-mix(in srgb, var(--muted-text) 75%, var(--text-color) 25%);
background: transparent;
}
.profile-personalization__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
.profile-personalization__layout {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
@media (min-width: 1024px) {
.profile-personalization__toggles {
flex: 0 0 360px;
max-width: 360px;
}
.profile-personalization__layout {
flex-direction: row;
align-items: stretch;
}
}
.profile-personalization__toggles {
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 1;
}
.profile-personalization__map {
flex: 1;
display: flex;
min-width: 0;
align-items: stretch;
}
@media (min-width: 1024px) {
.profile-personalization__map {
max-width: none;
}
}
.profile-personalization__scale {
display: flex;
}
.profile-toggle-group {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.25rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
background: color-mix(in srgb, var(--panel-bg) 92%, var(--border-color) 8%);
}
.profile-toggle-group__header {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.profile-toggle-group__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.profile-toggle-group__header span {
font-size: 0.9rem;
color: var(--muted-text);
}
.profile-toggle-group__options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.profile-map-preview {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1.25rem;
border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
background: color-mix(in srgb, var(--panel-bg) 92%, var(--border-color) 8%);
width: 100%;
flex: 1;
}
.profile-map-preview__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.25rem;
}
.profile-map-preview__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.profile-map-preview__header p {
margin: 0.25rem 0 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.profile-map-preview__chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-color);
background: color-mix(in srgb, var(--muted-text) 18%, transparent);
}
.profile-map-preview__chip--dark {
background: color-mix(in srgb, #1f2937 70%, transparent);
color: #f9fafb;
}
.profile-map-preview__chip--timebased {
background: linear-gradient(135deg, rgba(14, 116, 144, 0.75), rgba(249, 169, 19, 0.75));
color: #0b1020;
}
.profile-map-preview__map-container {
position: relative;
flex: 1;
min-height: 18rem;
border-radius: 1.25rem;
overflow: hidden;
background: color-mix(in srgb, var(--panel-bg) 80%, var(--border-color) 20%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 55%, transparent);
}
.profile-map-preview__map {
height: 100%;
}
.profile-map-preview__map .mapboxgl-ctrl-group {
backdrop-filter: blur(12px);
}
.profile-map-preview__details {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
margin: 0;
}
.profile-map-preview__details div {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.profile-map-preview__details dt {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted-text) 65%, var(--text-color) 35%);
margin: 0;
}
.profile-map-preview__details dd {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.profile-map-preview__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: space-between;
}
.profile-map-preview__hint {
font-size: 0.85rem;
color: var(--muted-text);
}
.profile-settings {
display: grid;
gap: 1.5rem;
}
.profile-settings__columns {
display: grid;
gap: 1.5rem;
grid-column: 1 / -1;
width: 100%;
align-items: stretch;
}
@media (min-width: 768px) {
.profile-settings__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.profile-settings__column {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
}
.profile-settings__column--scale {
height: 100%;
}
.profile-setting--full-width {
grid-column: 1 / -1;
}
.profile-setting {
display: flex;
flex-direction: column;
gap: 1rem;
}
.profile-setting--interface {
flex: 1;
padding: 1.25rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
background: color-mix(in srgb, var(--panel-bg) 88%, var(--border-color) 12%);
}
[data-theme='dark'] .profile-setting--interface {
background: color-mix(in srgb, var(--panel-bg) 78%, var(--border-color) 22%);
}
.profile-setting__header {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profile-setting__header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.profile-setting__header span {
color: var(--muted-text);
font-size: 0.9rem;
}
.profile-map-setting {
gap: 1.25rem;
}
.profile-map-setting__sections {
display: grid;
gap: 1.25rem;
}
@media (min-width: 768px) {
.profile-map-setting__sections {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.profile-map-setting__section {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.1rem;
border: 1px solid var(--border-color);
border-radius: 1rem;
background: var(--bg-color);
}
.profile-map-setting__section-header {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.profile-map-setting__section-header h4 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.profile-map-setting__section-header span {
color: var(--muted-text);
font-size: 0.85rem;
}
.profile-setting__controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.profile-option {
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
text-align: left;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
--button-bg: var(--bg-color);
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: rgba(48, 153, 204, 0.08);
--button-color: inherit;
box-shadow: none;
}
.profile-option .wmw-button__content {
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
}
.profile-option:hover,
.profile-option:focus-visible {
box-shadow: 0 4px 12px rgba(48, 153, 204, 0.072);
transform: translateY(-1px);
border-color: var(--accent-color);
}
.profile-option--active {
--button-border: var(--accent-color);
--button-bg: rgba(48, 153, 204, 0.08);
}
[data-theme='dark'] .profile-option--active {
--button-bg: rgba(48, 153, 204, 0.18);
}
.profile-option__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(40px * var(--ui-scale));
height: calc(40px * var(--ui-scale));
border-radius: 0.75rem;
background: rgba(48, 153, 204, 0.12);
color: var(--accent-color);
}
.profile-option__icon--drawn svg path {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.profile-option__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profile-option__label {
font-weight: 600;
}
.profile-option__description {
color: var(--muted-text);
font-size: 0.85rem;
}
.profile-zoom {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.profile-setting--interface .profile-zoom {
flex: 1;
gap: 1rem;
}
.profile-zoom__controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.profile-zoom__step {
border-radius: 50%;
width: calc(40px * var(--ui-scale));
min-width: calc(40px * var(--ui-scale));
height: calc(40px * var(--ui-scale));
--button-bg: var(--bg-color);
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
--button-color: inherit;
box-shadow: none;
}
.profile-zoom__step:hover:not(:disabled):not([aria-disabled='true']) {
border-color: var(--accent-color);
box-shadow: 0 4px 12px rgba(48, 153, 204, 0.072);
}
.profile-zoom__step:disabled {
box-shadow: none;
}
.profile-zoom input[type='range'] {
flex: 1;
appearance: none;
height: 6px;
border-radius: 999px;
background: rgba(48, 153, 204, 0.2);
outline: none;
}
.profile-zoom input[type='range']::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
}
.profile-zoom input[type='range']::-moz-range-thumb {
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
}
.profile-zoom__value {
font-weight: 600;
font-size: 0.95rem;
}
.profile-zoom__preview {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 0.75rem;
background: rgba(48, 153, 204, 0.08);
color: var(--text-color);
}
[data-theme='dark'] .profile-zoom__preview {
background: rgba(48, 153, 204, 0.16);
}
.profile-zoom__preview-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(36px * var(--ui-scale));
height: calc(36px * var(--ui-scale));
border-radius: 0.75rem;
background: var(--bg-color);
border: 1px solid rgba(48, 153, 204, 0.25);
color: var(--accent-color);
}
.profile-zoom__preview p {
margin: 0.25rem 0 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.profile-menu-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.profile-menu-list__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.profile-menu-list__header h4 {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
}
.profile-menu-list__header p {
margin: 0;
color: var(--muted-text);
font-size: 0.85rem;
}
.profile-menu-list__items {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.profile-menu-list__item {
border: 1px solid var(--border-color);
border-radius: 0.75rem;
background: var(--bg-color);
padding: 0.75rem 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.profile-menu-list__item:hover:not(.profile-menu-list__item--disabled),
.profile-menu-list__item:focus-within:not(.profile-menu-list__item--disabled) {
border-color: var(--accent-color);
box-shadow: 0 4px 12px rgba(48, 153, 204, 0.072);
transform: translateY(-1px);
}
.profile-menu-list__item--checked {
border-color: var(--accent-color);
}
.profile-menu-list__item--disabled {
opacity: 0.65;
}
.profile-menu-list__label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
flex: 1;
}
.profile-menu-list__item-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
flex-wrap: wrap;
}
.profile-menu-list__home-button {
margin-left: auto;
align-self: flex-start;
white-space: nowrap;
}
.profile-menu-list__checkbox {
width: 1.1rem;
height: 1.1rem;
margin-top: 0.2rem;
}
.profile-menu-list__content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profile-menu-list__name {
font-weight: 600;
}
.profile-menu-list__description {
font-size: 0.85rem;
color: var(--muted-text);
}
.profile-menu-list__children {
list-style: none;
margin: 0.5rem 0 0 2.5rem;
padding: 0 0 0 1.25rem;
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.profile-menu-list__child {
display: flex;
align-items: center;
}
.profile-menu-list__child--checked .profile-menu-list__label--child {
color: var(--accent-color);
}
.profile-menu-list__child--disabled {
opacity: 0.65;
}
.profile-menu-list__label--child {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
cursor: pointer;
}
.profile-menu-list__checkbox--child {
width: 1rem;
height: 1rem;
margin: 0;
}
@keyframes profile-card-enter {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 1024px) {
.profile-branding__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.branding-section__colors {
flex-direction: row;
}
.branding-section__colors .branding-subsection {
flex: 1;
}
}
@media (max-width: 720px) {
.profile-page {
padding-right: 1rem;
}
}
.wmw-tabs {
--tabs-container-bg: color-mix(
in srgb,
var(--panel-bg) 88%,
var(--color-white) 12%
);
--tabs-border-color: color-mix(
in srgb,
var(--border-color) 65%,
transparent
);
--tabs-hover-bg: color-mix(
in srgb,
var(--accent-color) 12%,
transparent
);
--tabs-label-color: color-mix(in srgb, var(--text-2) 92%, transparent);
--tabs-hover-color: color-mix(in srgb, var(--accent-color) 85%, transparent);
--tabs-active-label: color-mix(in srgb, var(--accent-color) 95%, transparent);
--tabs-active-indicator: color-mix(
in srgb,
var(--accent-color) 82%,
transparent
);
--tabs-count-bg: color-mix(
in srgb,
var(--accent-color) 18%,
transparent
);
--tabs-count-color: color-mix(
in srgb,
var(--accent-color) 92%,
var(--color-neutral-900) 8%
);
--tabs-gap: 6px;
--tabs-tab-max-width: 280px;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.wmw-tabs__list {
display: inline-flex;
align-items: stretch;
justify-content: flex-start;
gap: var(--tabs-gap);
padding: 6px 8px;
border-radius: 14px;
background: var(--tabs-container-bg);
border: 1px solid var(--tabs-border-color);
width: fit-content;
max-width: 100%;
position: relative;
}
.wmw-tabs--align-center .wmw-tabs__list {
justify-content: center;
}
.wmw-tabs--align-start .wmw-tabs__list {
justify-content: flex-start;
}
.wmw-tabs--stretch .wmw-tabs__list {
width: 100%;
justify-content: space-between;
}
.wmw-tabs--stretch:not(.wmw-tabs--vertical) .wmw-tabs__tab-content {
justify-content: center;
width: 100%;
}
.wmw-tabs--stretch:not(.wmw-tabs--vertical) .wmw-tabs__tab {
flex: 1 1 0;
min-width: 0;
}
.wmw-tabs--vertical .wmw-tabs__list {
flex-direction: column;
width: 100%;
border-radius: 16px;
}
.wmw-tabs__tab {
position: relative;
border: none;
background: transparent;
color: var(--tabs-label-color, var(--text-2));
border-radius: 10px;
padding: 12px 16px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
font: inherit;
font-weight: 600;
cursor: pointer;
min-width: 0;
max-width: var(--tabs-tab-max-width);
white-space: nowrap;
transition: color 0.2s ease, background 0.2s ease;
}
.wmw-tabs--stretch .wmw-tabs__tab {
max-width: none;
}
.wmw-tabs--align-center .wmw-tabs__tab {
justify-content: center;
text-align: center;
}
.wmw-tabs__tab:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.wmw-tabs__tab[disabled] {
cursor: not-allowed;
color: color-mix(in srgb, var(--text-3) 88%, transparent);
opacity: 0.7;
}
.wmw-tabs__tab-content {
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1;
}
.wmw-tabs__tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
color: inherit;
}
.wmw-tabs--icon-subtitle {
--tabs-label-color: var(--color-neutral-600);
--tabs-hover-color: color-mix(
in srgb,
var(--accent-color) 92%,
transparent
);
--tabs-active-label: var(--accent-color);
--tabs-active-indicator: var(--accent-color);
}
.wmw-tabs--icon-subtitle .wmw-tabs__more-button {
padding: 16px 18px;
}
[data-theme='dark'] .wmw-tabs--icon-subtitle {
--tabs-label-color: color-mix(
in srgb,
var(--text-color) 70%,
transparent
);
--tabs-hover-color: color-mix(
in srgb,
var(--accent-color) 88%,
transparent
);
--tabs-active-label: color-mix(
in srgb,
var(--accent-color) 90%,
transparent
);
--tabs-active-indicator: color-mix(
in srgb,
var(--accent-color) 90%,
transparent
);
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab-icon {
color: var(--tabs-label-color, var(--text-2));
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab--active .wmw-tabs__tab-icon {
color: var(--tabs-active-label, var(--accent-color));
}
.wmw-tabs__tab-label-group {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
text-align: left;
max-width: 100%;
min-width: 0;
}
.wmw-tabs--align-center .wmw-tabs__tab-label-group {
align-items: center;
text-align: center;
}
.wmw-tabs__tab-label {
font-size: 0.95rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.wmw-tabs__tab-helper {
font-size: 0.75rem;
color: color-mix(in srgb, currentColor 60%, transparent);
line-height: 1.1;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.wmw-tabs--icon-subtitle .wmw-tabs__list {
width: auto;
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab {
padding: 16px 18px;
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab-content {
flex-direction: column;
align-items: center;
gap: 8px;
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab-label-group {
align-items: center;
text-align: center;
gap: 6px;
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wmw-tabs--icon-subtitle .wmw-tabs__tab-helper {
font-size: 0.82rem;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.wmw-tabs__tab-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: var(--badge-bg, color-mix(in srgb, currentColor 20%, transparent));
color: var(--badge-color, currentColor);
}
.wmw-tabs__tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: var(--tabs-count-bg);
color: var(--tabs-count-color);
}
.wmw-tabs__active-indicator {
position: absolute;
left: 16px;
right: 16px;
bottom: -6px;
height: 3px;
border-radius: 999px;
background: var(--tabs-active-indicator, transparent);
opacity: 0;
transform: scaleX(0.4);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.wmw-tabs__tab:hover:not([disabled]) {
color: var(--tabs-hover-color, var(--text-color));
background: var(--tabs-hover-bg, transparent);
}
.wmw-tabs__tab--active {
color: var(--tabs-active-label, var(--text-color));
background: color-mix(
in srgb,
var(--accent-color) 12%,
transparent
);
}
.wmw-tabs__tab--active .wmw-tabs__active-indicator {
opacity: 1;
transform: scaleX(1);
}
.wmw-tabs__tab--overflow-hidden {
position: absolute;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.wmw-tabs__overflow {
position: relative;
display: inline-flex;
align-items: stretch;
}
.wmw-tabs__overflow--hidden {
position: absolute;
top: 0;
right: 0;
visibility: hidden;
pointer-events: none;
}
.wmw-tabs__more-button {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
color: var(--tabs-label-color, var(--text-2));
border-radius: 10px;
padding: 12px 14px;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
text-decoration: none;
}
.wmw-tabs__overflow:not(.wmw-tabs__overflow--hidden)
.wmw-tabs__more-button:hover {
color: var(--tabs-hover-color, var(--text-color));
background: var(--tabs-hover-bg, transparent);
}
.wmw-tabs__more-button--active,
.wmw-tabs__more-button--open {
color: var(--tabs-active-label, var(--accent-color));
}
.wmw-tabs__more-button--open {
background: var(--tabs-hover-bg, transparent);
}
.wmw-tabs__more-button[disabled] {
cursor: not-allowed;
color: color-mix(in srgb, var(--text-3) 90%, transparent);
opacity: 0.7;
}
.wmw-tabs__more-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: var(--tabs-count-bg, color-mix(in srgb, var(--accent-color) 18%, transparent));
color: var(--tabs-count-color, color-mix(in srgb, var(--accent-color) 92%, transparent));
}
.wmw-tabs--underline .wmw-tabs__more-button {
padding: 10px 0;
border-radius: 8px;
}
.wmw-tabs--underline .wmw-tabs__overflow:not(.wmw-tabs__overflow--hidden)
.wmw-tabs__more-button:hover {
background: transparent;
}
.wmw-tabs__overflow:not(.wmw-tabs__overflow--hidden)
.wmw-tabs__more-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.wmw-tabs__overflow-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
min-width: 220px;
border-radius: 12px;
background: color-mix(
in srgb,
var(--panel-bg) 94%,
var(--color-white) 6%
);
border: 1px solid color-mix(
in srgb,
var(--border-color) 55%,
transparent
);
box-shadow: 0 18px 48px -24px color-mix(
in srgb,
var(--color-neutral-900) 36%,
transparent
);
z-index: 20;
}
.wmw-tabs__overflow-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--text-2);
font: inherit;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.wmw-tabs__overflow-item:hover,
.wmw-tabs__overflow-item:focus-visible {
outline: none;
color: var(--tabs-hover-color, var(--text-color));
background: var(--tabs-hover-bg, transparent);
}
.wmw-tabs__overflow-item--active {
color: var(--tabs-active-label, var(--accent-color));
background: color-mix(
in srgb,
var(--accent-color) 12%,
transparent
);
}
.wmw-tabs__overflow-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.wmw-tabs__overflow-label {
flex: 1 1 auto;
min-width: 0;
}
.wmw-tabs__overflow-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
background: var(--tabs-count-bg);
color: var(--tabs-count-color);
}
.wmw-tabs__overflow-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: var(--badge-bg, color-mix(in srgb, currentColor 20%, transparent));
color: var(--badge-color, currentColor);
}
.wmw-tabs--primary {
--tabs-container-bg: color-mix(
in srgb,
var(--panel-bg) 92%,
var(--accent-color) 8%
);
--tabs-border-color: color-mix(
in srgb,
var(--accent-color) 28%,
transparent
);
--tabs-label-color: color-mix(in srgb, var(--text-2) 96%, transparent);
--tabs-hover-bg: color-mix(
in srgb,
var(--accent-color) 18%,
transparent
);
--tabs-hover-color: color-mix(in srgb, var(--accent-color) 96%, transparent);
--tabs-active-label: color-mix(in srgb, var(--accent-color) 98%, transparent);
--tabs-active-indicator: color-mix(
in srgb,
var(--accent-color) 82%,
transparent
);
--tabs-count-bg: color-mix(
in srgb,
var(--accent-color) 20%,
transparent
);
--tabs-count-color: color-mix(
in srgb,
var(--accent-color) 92%,
var(--color-neutral-900) 8%
);
}
.wmw-tabs--primary .wmw-tabs__list {
padding: 8px 12px;
border-radius: 16px;
}
.wmw-tabs--primary .wmw-tabs__tab {
gap: 10px;
padding: 12px 18px;
}
.wmw-tabs--primary .wmw-tabs__tab-icon {
color: color-mix(in srgb, var(--accent-color) 85%, transparent);
}
.wmw-tabs--primary .wmw-tabs__tab--active .wmw-tabs__tab-icon {
color: var(--accent-color);
}
.wmw-tabs--primary .wmw-tabs__active-indicator {
bottom: -7px;
height: 4px;
}
.wmw-tabs--underline {
--tabs-container-bg: transparent;
--tabs-border-color: transparent;
--tabs-label-color: color-mix(in srgb, var(--text-3) 98%, transparent);
--tabs-hover-bg: color-mix(
in srgb,
var(--accent-color) 14%,
transparent
);
--tabs-hover-color: color-mix(in srgb, var(--accent-color) 92%, transparent);
--tabs-active-label: color-mix(in srgb, var(--accent-color) 98%, transparent);
--tabs-active-indicator: color-mix(
in srgb,
var(--accent-color) 82%,
transparent
);
--tabs-count-bg: color-mix(
in srgb,
var(--accent-color) 18%,
transparent
);
--tabs-count-color: color-mix(
in srgb,
var(--accent-color) 96%,
transparent
);
--tabs-gap: 24px;
}
.wmw-tabs--underline .wmw-tabs__list {
border: none;
background: transparent;
padding: 0;
gap: var(--tabs-gap);
width: 100%;
}
.wmw-tabs--underline .wmw-tabs__list::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: color-mix(
in srgb,
var(--border-color) 70%,
transparent
);
pointer-events: none;
}
.wmw-tabs--underline .wmw-tabs__tab {
border-radius: 8px;
padding: 10px 0;
background: transparent;
}
.wmw-tabs--underline .wmw-tabs__tab:hover:not([disabled]) {
background: transparent;
}
.wmw-tabs--underline .wmw-tabs__active-indicator {
left: 0;
right: 0;
bottom: -2px;
}
.wmw-tabs--underline .wmw-tabs__tab--active {
background: transparent;
}
.wmw-tabs--underline .wmw-tabs__tab-count {
background: color-mix(
in srgb,
var(--accent-color) 18%,
transparent
);
color: var(--accent-color);
}
.wmw-tabs--vertical .wmw-tabs__active-indicator {
bottom: 12px;
top: 12px;
left: auto;
right: -6px;
width: 3px;
height: auto;
transform: scaleY(0.4);
}
.wmw-tabs--vertical .wmw-tabs__tab--active .wmw-tabs__active-indicator {
transform: scaleY(1);
}
@media (max-width: 720px) {
.wmw-tabs__list {
width: 100%;
}
.wmw-tabs__tab {
padding: 10px 12px;
}
.wmw-tabs__active-indicator {
left: 12px;
right: 12px;
}
}
.enterprise-personalisation-page {
display: flex;
flex-direction: column;
min-height: 100%;
}
.enterprise-personalisation-page__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.enterprise-personalisation-page .profile-card,
.enterprise-personalisation-page .branding-section,
.enterprise-personalisation-page .branding-logo__preview,
.enterprise-personalisation-page .branding-suggestion {
border-radius: 0;
}
.enterprise-personalisation-page .workspace-identities {
padding: 0;
gap: 0;
border-radius: 0;
display: flex;
flex-direction: column;
}
.enterprise-personalisation-page .workspace-identities__inner {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem 1.5rem 1rem;
align-items: flex-start;
}
.enterprise-personalisation-page .workspace-identities__list {
border-top: 1px solid var(--border-color);
}
.enterprise-personalisation-page .workspace-identities__placeholder {
padding: 1.5rem;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__list {
border: none;
background: transparent;
border-radius: 0;
padding: 0;
gap: 0;
width: 100%;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab {
border-radius: 0;
border-left: 4px solid transparent;
padding: 0;
color: var(--text-color);
transition: border-color 0.2s ease, background 0.2s ease;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab-content {
width: 100%;
padding: 1rem 1.5rem;
gap: 1rem;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab-label {
width: 100%;
}
.enterprise-personalisation-page .workspace-identities__tab-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab:hover:not([disabled]) {
border-left-color: color-mix(
in srgb,
var(--workspace-tab-accent, var(--accent-color)) 55%,
transparent
);
background: color-mix(
in srgb,
var(--workspace-tab-accent, var(--accent-color)) 12%,
transparent
);
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__tab--active {
border-left-color: var(--workspace-tab-accent, var(--accent-color));
background: color-mix(
in srgb,
var(--workspace-tab-accent, var(--accent-color)) 18%,
transparent
);
}
.enterprise-personalisation-page .workspace-identities__tabs .wmw-tabs__active-indicator {
display: none;
}
.enterprise-personalisation-page .workspace-identities__tab-content .workspace-identities__badge {
align-self: flex-start;
}
.enterprise-personalisation-page .workspace-identities__footer {
border-top: 1px solid var(--border-color);
padding: 1rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.enterprise-personalisation-page .workspace-identities__footer-status {
font-size: 0.9rem;
color: var(--muted-text);
}
.enterprise-personalisation-page .workspace-identities__actions {
justify-content: flex-start;
gap: 0.75rem;
}
.enterprise-personalisation-page .workspace-identities__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.enterprise-personalisation-page__header {
gap: 1rem;
}
.enterprise-personalisation-page__title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
}
.enterprise-personalisation-page__title h2 {
margin: 0;
font-size: 1.5rem;
}
.enterprise-personalisation-page__title-secondary {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted-text);
}
.enterprise-personalisation-page .branding-logo__preview--dark,
.enterprise-personalisation-page .branding-logo__preview--dark.branding-logo__preview--active {
background: var(--color-neutral-900);
border-color: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
color: color-mix(in srgb, var(--color-white) 90%, transparent);
}
.list-selection-bar-container {
--list-selection-bar-height: 0px;
max-height: var(--list-selection-bar-height);
height: auto;
transition: max-height 200ms ease, opacity 160ms ease;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.list-selection-bar-container[data-active='true'] {
opacity: 1;
pointer-events: auto;
overflow: visible;
}
.list-selection-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
background: var(--menu-item-hover);
color: inherit;
}
.list-selection-bar__summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
font-weight: 600;
}
.list-selection-bar__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.list-selection-bar__summary-text {
display: inline-flex;
align-items: center;
}
.list-selection-bar__prompt-text {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem;
text-align: left;
}
.list-selection-bar__actions .wmw-button:not(.wmw-button--icon-only) {
min-width: 6rem;
}
.list-selection-bar__danger {
--button-color: var(--color-danger-600, #b91c1c);
--button-border: color-mix(in srgb, var(--color-danger-200, #fecaca) 60%, transparent 40%);
--button-hover-bg: color-mix(in srgb, var(--color-danger-100, #fee2e2) 70%, transparent 30%);
--button-active-bg: color-mix(in srgb, var(--color-danger-200, #fecaca) 65%, transparent 35%);
}
.summary-card {
--summary-card-accent: var(--color-accent-600);
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.15rem 1.4rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
[data-theme='dark'] .summary-card {
border-color: color-mix(in srgb, var(--border-color) 65%, transparent 35%);
}
.summary-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
position: relative;
z-index: 1;
}
.summary-card__title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
}
.summary-card__subtitle {
color: var(--muted-text);
font-size: 0.85rem;
font-weight: 500;
}
.summary-card__content {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 1rem 1.35rem;
}
.summary-card__metric {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.summary-card__amount {
font-size: clamp(1.9rem, 3vw, 2.35rem);
font-weight: 700;
letter-spacing: -0.035em;
color: var(--text-color);
}
.summary-card__amount-secondary {
font-size: 0.75em;
color: color-mix(in srgb, var(--text-color) 70%, var(--muted-text) 30%);
}
.summary-card__unit {
display: inline-flex;
align-items: center;
margin-left: 0.4rem;
font-size: clamp(0.95rem, 1.9vw, 1.05rem);
font-weight: 600;
color: var(--muted-text);
}
.summary-card__difference {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--summary-card-accent);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.2;
}
.summary-card__difference-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
}
.summary-card__difference-value {
font-weight: 700;
}
.summary-card__difference-label {
color: color-mix(in srgb, currentColor 45%, var(--muted-text) 55%);
font-weight: 500;
}
.summary-card__sparkline {
display: flex;
align-items: center;
justify-content: center;
width: min(96px, 100%);
overflow: hidden;
}
.summary-card__sparkline svg {
width: 100%;
height: auto;
}
.summary-card--metric {
--summary-card-icon-bg: rgba(100, 116, 139, 0.15);
--summary-card-icon-color: var(--text-primary);
flex-direction: row;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.1rem;
border-radius: 0.95rem;
min-height: 0;
}
.summary-card--metric-compact {
padding: 0.85rem 0.95rem;
border-radius: 0.85rem;
gap: 0.75rem;
}
.summary-card__metric-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--summary-card-icon-bg);
color: var(--summary-card-icon-color);
}
.summary-card--metric-compact .summary-card__metric-icon {
width: 2rem;
height: 2rem;
border-radius: 0.65rem;
background: var(--content-bg);
border: 1px solid var(--border-color);
}
.summary-card__metric-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
flex: 1;
}
.summary-card__metric-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
}
.summary-card__metric-title {
margin: 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--muted-text);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.summary-card__metric-meta {
font-size: 0.75rem;
color: var(--muted-text);
white-space: nowrap;
}
.summary-card__metric-body {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.summary-card__metric-footer {
margin-top: 0.25rem;
}
.summary-card__metric-value {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-color);
}
.summary-card__metric-value-number {
font-variant-numeric: tabular-nums;
}
.summary-card__metric-description {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.summary-card--metric-compact {
gap: 0.6rem;
}
.summary-card--metric-compact .summary-card__metric-title {
font-size: 0.8rem;
}
.summary-card--metric-compact .summary-card__metric-value {
font-size: 1.4rem;
}
.summary-card--with-intro {
opacity: 0;
transform: translateY(12px) scale(0.98);
transition:
opacity 320ms cubic-bezier(0.25, 0.1, 0.25, 1),
transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.summary-card--with-intro.summary-card--visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.summary-card--with-intro .summary-card__metric-icon,
.summary-card--with-intro .summary-card__metric-header,
.summary-card--with-intro .summary-card__metric-body,
.summary-card--with-intro .summary-card__metric-footer {
transition:
opacity 260ms cubic-bezier(0.25, 0.1, 0.25, 1),
transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: 80ms;
}
.summary-card--with-intro:not(.summary-card--visible) .summary-card__metric-icon,
.summary-card--with-intro:not(.summary-card--visible) .summary-card__metric-header,
.summary-card--with-intro:not(.summary-card--visible) .summary-card__metric-body,
.summary-card--with-intro:not(.summary-card--visible) .summary-card__metric-footer {
opacity: 0;
transform: translateY(10px);
}
.summary-card--with-intro .summary-card__metric-icon {
transition-delay: 40ms;
}
.summary-card--with-intro .summary-card__metric-body {
transition-delay: 120ms;
}
.summary-card--with-intro .summary-card__metric-footer {
transition-delay: 160ms;
}
.summary-card--default {
padding: 1.25rem 1.45rem;
}
.summary-card--mini {
padding: 0.95rem 1.1rem;
gap: 0.75rem;
}
.summary-card--mini .summary-card__header {
align-items: center;
}
.summary-card--mini .summary-card__title {
font-size: 0.9rem;
}
.summary-card--mini .summary-card__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.summary-card--mini .summary-card__metric {
gap: 0.35rem;
}
.summary-card--mini .summary-card__amount {
font-size: clamp(1.6rem, 2.6vw, 1.9rem);
}
.summary-card--mini .summary-card__unit {
font-size: clamp(0.9rem, 1.6vw, 1rem);
}
.summary-card--mini .summary-card__sparkline {
width: min(88px, 100%);
}
.summary-card__meta {
font-size: 0.8rem;
color: var(--muted-text);
line-height: 1.25;
}
.summary-card--mini .summary-card__meta {
font-size: 0.75rem;
}
.summary-card--positive {
--summary-card-accent: var(--color-success-600);
}
.summary-card--negative {
--summary-card-accent: var(--color-error-600);
}
.summary-card--warning {
--summary-card-accent: var(--color-warning-600);
}
.summary-card--neutral {
--summary-card-accent: var(--color-accent-600);
}
[data-theme='dark'] .summary-card--positive {
--summary-card-accent: var(--color-success-400);
}
[data-theme='dark'] .summary-card--negative {
--summary-card-accent: var(--color-error-400);
}
[data-theme='dark'] .summary-card--warning {
--summary-card-accent: var(--color-warning-400);
}
[data-theme='dark'] .summary-card--neutral {
--summary-card-accent: var(--color-accent-400);
}
.summary-card--metric.summary-card--positive .summary-card__metric-value,
.summary-card--metric.summary-card--positive .summary-card__metric-description {
color: var(--color-info-600);
}
.summary-card--metric.summary-card--warning .summary-card__metric-value,
.summary-card--metric.summary-card--warning .summary-card__metric-description {
color: var(--color-warning-600);
}
.summary-card--metric.summary-card--negative .summary-card__metric-value,
.summary-card--metric.summary-card--negative .summary-card__metric-description {
color: var(--color-error-600);
}
[data-theme='dark'] .summary-card--metric.summary-card--positive .summary-card__metric-value,
[data-theme='dark'] .summary-card--metric.summary-card--positive .summary-card__metric-description {
color: var(--color-info-500);
}
[data-theme='dark'] .summary-card--metric.summary-card--warning .summary-card__metric-value,
[data-theme='dark'] .summary-card--metric.summary-card--warning .summary-card__metric-description {
color: var(--color-warning-400);
}
[data-theme='dark'] .summary-card--metric.summary-card--negative .summary-card__metric-value,
[data-theme='dark'] .summary-card--metric.summary-card--negative .summary-card__metric-description {
color: var(--color-error-400);
}
@media (max-width: 720px) {
.summary-card {
padding: 1rem 1.1rem;
}
.summary-card__content {
grid-template-columns: 1fr;
}
.summary-card__sparkline {
justify-self: flex-start;
min-width: 110px;
}
}
@media (prefers-reduced-motion: reduce) {
.summary-card--with-intro {
opacity: 1;
transform: none;
transition: none;
}
.summary-card--with-intro .summary-card__metric-icon,
.summary-card--with-intro .summary-card__metric-header,
.summary-card--with-intro .summary-card__metric-body,
.summary-card--with-intro .summary-card__metric-footer {
transition: none;
opacity: 1;
transform: none;
}
}
.device-types-page {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0;
height: 100%;
overflow-y: auto;
background: var(--content-bg);
}
.device-types__banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0 24px;
padding: 0.75rem 1rem;
border-radius: 0.875rem;
border: 1px solid var(--border-color);
background: var(--panel-bg);
color: var(--muted-text);
font-size: 0.9rem;
}
.device-types__banner .wmw-button {
font-weight: 600;
}
.device-types__filters {
display: flex;
align-items: center;
gap: 0.5rem;
}
.device-types__filter-chip {
border-radius: 999px;
}
.device-types__body {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin: 24px;
}
.device-types__intro {
max-width: 760px;
}
.device-types__intro p {
margin: 0;
color: var(--muted-text);
font-size: 0.95rem;
line-height: 1.5;
}
.device-types__summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.device-types__list {
display: flex;
flex-direction: column;
gap: 1rem;
background: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.024);
}
[data-theme='dark'] .device-types__list {
box-shadow: none;
}
.device-types__list header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.device-types__list header h2 {
margin: 0;
font-size: 1.2rem;
}
.device-types__list header p {
margin: 0.35rem 0 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.device-types-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.device-types-form__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.device-types-form__field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.device-types-form__field--full {
grid-column: 1 / -1;
}
.device-types-form__field label {
font-size: 0.85rem;
font-weight: 600;
color: var(--muted-text);
}
.device-types-form__field input,
.device-types-form__field select,
.device-types-form__field textarea {
border-radius: 0.75rem;
border: 1px solid var(--border-color);
background: var(--content-bg);
padding: 0.55rem 0.75rem;
color: var(--text-color);
font-size: 0.95rem;
}
.device-types-form__field textarea {
resize: vertical;
min-height: 110px;
}
.device-types-form__checkboxes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.device-types-form__checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--content-bg);
font-size: 0.9rem;
}
.device-types-form__checkbox input {
accent-color: var(--accent-color);
}
.device-types__delete-action {
color: var(--color-error-700);
}
[data-theme='dark'] .device-types__delete-action {
color: var(--color-error-300);
}
.device-types__error {
margin: 0;
font-size: 0.85rem;
color: var(--color-error-700);
}
[data-theme='dark'] .device-types__error {
color: var(--color-error-300);
}
.device-types__error-container {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem;
}
.device-types__error-container .device-types__error {
margin: 0;
}
.device-types__status {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.device-types__confirm {
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 0.9rem;
padding: 0.85rem 1rem;
background: rgba(239, 68, 68, 0.08);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
[data-theme='dark'] .device-types__confirm {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.45);
}
.device-types__confirm-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.device-types__confirm strong {
color: var(--text-color);
}
.device-types__empty {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.device-types__list .list-container {
border-radius: 0.85rem;
border: 1px solid var(--border-color);
background: var(--content-bg);
padding: 0.75rem;
}
.device-types__list .list-table th,
.device-types__list .list-table td {
padding: 0.55rem 0.75rem;
}
.device-types__list .list-table td:last-child {
width: 110px;
}
.device-types__list .list-table tbody tr:hover {
background: rgba(148, 163, 184, 0.1);
}
[data-theme='dark'] .device-types__list .list-table tbody tr:hover {
background: rgba(148, 163, 184, 0.15);
}
.device-types__badge {
align-self: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--border-color);
color: var(--muted-text);
font-size: 0.85rem;
}
.location-details-grid {
display: grid;
grid-template-columns: repeat(3, 146px);
grid-template-rows: auto min-content;
grid-auto-rows: 146px;
gap: 10px;
justify-content: start;
align-content: start;
width: 100%;
box-sizing: border-box;
transition: grid-template-columns 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.location-details-grid--extended {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
.location-tiles-custom-area {
display: contents;
}
.location-tiles-custom-area > * {
margin-top: 0;
}
.location-info {
grid-column: 1 / span 2;
grid-row: 1;
min-width: 0;
word-break: break-word;
overflow: hidden;
height: 80px;
}
.location-details-grid .tile1 {
grid-column: 1 / -1;
grid-row: 1;
}
.location-details-grid .tile2 { grid-column: 1 / span 2; grid-row: 3 / span 2; }
.location-details-grid .tile3 { grid-column: 3; grid-row: 3; }
.location-details-grid .tile4 { grid-column: 3; grid-row: 4; }
.location-details-grid > * {
min-width: 0;
min-height: 0;
}
.location-extended-tiles-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-rows: 146px;
column-gap: 10px;
row-gap: 10px;
width: 100%;
box-sizing: border-box;
justify-content: start;
align-content: start;
}
.location-extended-tiles-grid__tile {
min-width: 0;
min-height: 0;
display: flex;
align-items: stretch;
margin: 0;
}
.location-extended-tiles-grid__tile > * {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
margin: 0;
}
.location-extended-sections {
margin: 0;
padding: 0;
}
.location-extended-tiles-grid__tile.r1c2 { grid-column: 6; grid-row: 1; }
.location-extended-tiles-grid__tile.r1c3 { grid-column: 7; grid-row: 1; }
.location-extended-tiles-grid__tile.r1c4 { grid-column: 6; grid-row: 2; }
.location-extended-tiles-grid__tile.r1c5 { grid-column: 7; grid-row: 2; }
.location-extended-tiles-grid__tile.graphA { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.title-row {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
margin-top: 10px;
}
.location-floors-tab .list-container {
border: none !important;
border-radius: 0 !important;
}
:root {
--text-primary: #333;
}
.user-filters-panel {
display: grid;
grid-template-columns: minmax(12rem, 15rem) minmax(24rem, 1fr);
gap: 1.75rem;
max-height: 40rem;
width: 100%;
}
.user-filters-panel__column-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.user-filters-panel__column-heading {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--muted-text);
}
.user-filters-panel__column-items {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.user-filters-panel__column-button {
display: flex;
flex-direction: column;
gap: 0.125rem;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid transparent;
background-color: transparent;
text-align: left;
font-size: 0.9375rem;
color: var(--text-primary);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.user-filters-panel__column-button:hover,
.user-filters-panel__column-button:focus-visible {
border-color: var(--border-color);
background-color: var(--surface-bg, var(--content-bg));
outline: none;
}
.user-filters-panel__column-button--active {
border-color: var(--accent-color);
background-color: rgba(21, 128, 61, 0.08);
color: var(--accent-color);
}
.user-filters-panel__column-label {
font-weight: 600;
}
.user-filters-panel__column-description {
font-size: 0.8125rem;
color: var(--muted-text);
}
.user-filters-panel__content {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.user-filters-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.user-filters-panel__section--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
align-items: flex-end;
}
.user-filters-panel__text-filter-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.user-filters-panel__text-filter-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.user-filters-panel__text-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-end;
}
.user-filters-panel__field {
min-width: 0;
}
.user-filters-panel__field--mode {
flex: 0 0 14rem;
}
.user-filters-panel__field--value {
flex: 1 1 16rem;
}
.user-filters-panel__field--hidden-label .wmw-field__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.user-filters-panel__text-filter-divider {
align-self: center;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-text);
text-align: center;
padding: 0.25rem 0;
}
.user-filters-panel__text-filter-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.user-filters-panel__remove-line {
margin-left: auto;
}
.user-filters-panel__options {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 18rem;
overflow-y: auto;
padding-right: 0.25rem;
}
.user-filters-panel__option {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--text-primary);
}
.user-filters-panel__option span {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-filters-panel__option input {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.user-filters-panel__empty,
.user-filters-panel__status,
.user-filters-panel__hint {
margin: 0;
font-size: 0.875rem;
color: var(--muted-text);
}
.user-filters-panel__hint {
grid-column: 1 / -1;
}
.user-filters-panel__footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.user-filters-panel__footer-actions {
display: flex;
gap: 0.5rem;
}
[data-theme='dark'] .user-filters-panel__column-button--active {
background-color: rgba(96, 165, 250, 0.16);
}
.user-filters-panel__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
}
.user-filters-panel__footer-actions--right {
display: flex;
gap: 0.5rem;
margin-left: auto;
}
.locations-page {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.locations-content {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
min-height: 0;
}
.locations-filters {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.locations-filters__chip {
--button-bg: var(--menu-item-hover);
--button-border: transparent;
--button-hover-bg: var(--menu-item-active);
--button-active-bg: var(--menu-item-active);
--button-color: var(--text-color);
font-weight: 600;
border-radius: 999px;
}
.locations-layout {
flex: 1;
min-height: 0;
}
.locations-map {
flex: 1;
width: 100%;
position: relative;
min-height: 400px;
}
.locations-list {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
}
.locations-list .page-title {
padding: 0 0 1rem 0;
}
.locations-panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(420px, 100%);
background: var(--sidebar-bg);
border-left: 1px solid var(--sidebar-border);
box-shadow: -20px 0 40px rgba(15, 23, 42, 0.09);
transform: translateX(100%);
transition: transform 0.3s ease, width 0.3s ease, box-shadow 0.3s ease;
pointer-events: none;
display: flex;
flex-direction: column;
padding: 1.5rem;
z-index: 2;
overflow: hidden;
}
.locations-panel.open {
transform: translateX(0);
pointer-events: auto;
}
.locations-panel.expanded {
width: min(640px, 60vw);
}
.locations-panel__inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
overflow-y: auto;
padding-right: 0.25rem;
flex: 1;
min-height: 0;
}
.locations-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.locations-panel__title-group {
display: flex;
gap: 0.75rem;
align-items: center;
min-width: 0;
flex: 1 1 auto;
}
.locations-panel__title-text {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
min-width: 0;
}
.locations-panel__title-text h2 {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
flex: 1 1 auto;
min-width: 0;
}
.locations-panel__subtitle {
font-size: 0.875rem;
color: var(--muted-text);
}
.locations-panel__actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-start;
margin-left: 0;
}
.locations-panel__cta-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.locations-panel__cta-icon-button {
--button-bg: var(--sidebar-bg);
--button-border: var(--sidebar-border);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
--button-color: var(--accent-color);
border-radius: 999px;
width: 2.5rem;
min-width: 2.5rem;
height: 2.5rem;
gap: 0;
box-shadow: none;
}
.locations-panel__cta-icon-button.wmw-button--sm {
padding: 0.35rem;
}
.locations-panel__cta-icon-button:hover,
.locations-panel__cta-icon-button:focus-visible {
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.048);
}
.locations-panel__cta-icon-button .wmw-button__icon {
color: inherit;
}
.locations-panel__cta-icon-button--assets {
--button-color: var(--accent-color);
}
.locations-panel__cta-icon-button--alarm {
--button-color: var(--color-error-600);
}
[data-theme='dark'] .locations-panel__cta-icon-button--alarm {
--button-color: var(--color-error-400);
}
.locations-panel__cta-count {
position: absolute;
top: -0.35rem;
right: -0.35rem;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--accent-color);
color: var(--color-white);
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.072);
}
[data-theme='dark'] .locations-panel__cta-count {
background: var(--accent-color);
color: var(--color-white);
}
.locations-panel__cta-icon-button--alarm .locations-panel__cta-count {
background: var(--color-error-600);
}
[data-theme='dark'] .locations-panel__cta-icon-button--alarm .locations-panel__cta-count {
background: var(--color-error-400);
}
.locations-panel__icon-button {
width: 36px;
min-width: 36px;
height: 36px;
border-radius: 0.75rem;
--button-bg: var(--sidebar-bg);
--button-border: var(--sidebar-border);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
color: inherit;
box-shadow: none;
}
.locations-panel__icon-button:hover,
.locations-panel__icon-button:focus-visible {
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.048);
}
.locations-panel__icon-button--accent {
--button-bg: var(--menu-item-active);
--button-border: transparent;
color: var(--accent-color);
}
.locations-panel__icon-button--accent:hover,
.locations-panel__icon-button--accent:focus-visible {
--button-bg: var(--menu-item-hover);
}
.locations-panel__icon-button--danger {
--button-bg: var(--sidebar-bg);
--button-border: var(--sidebar-border);
--button-hover-bg: rgba(220, 38, 38, 0.12);
--button-active-bg: rgba(220, 38, 38, 0.18);
--button-color: inherit;
}
.locations-panel__icon-button--danger:hover,
.locations-panel__icon-button--danger:focus-visible {
--button-bg: rgba(220, 38, 38, 0.12);
--button-border: rgba(220, 38, 38, 0.32);
--button-hover-bg: rgba(220, 38, 38, 0.18);
--button-active-bg: rgba(220, 38, 38, 0.24);
--button-color: var(--color-error-700);
}
[data-theme='dark'] .locations-panel__icon-button--danger {
--button-bg: color-mix(in srgb, var(--sidebar-bg) 85%, transparent);
--button-border: rgba(148, 163, 184, 0.25);
--button-hover-bg: rgba(239, 68, 68, 0.24);
--button-active-bg: rgba(239, 68, 68, 0.32);
--button-color: inherit;
}
[data-theme='dark'] .locations-panel__icon-button--danger:hover,
[data-theme='dark'] .locations-panel__icon-button--danger:focus-visible {
--button-bg: rgba(239, 68, 68, 0.24);
--button-border: rgba(239, 68, 68, 0.36);
--button-hover-bg: rgba(239, 68, 68, 0.28);
--button-active-bg: rgba(239, 68, 68, 0.36);
--button-color: var(--color-error-100);
}
.locations-panel__cancel-delete-button,
.locations-panel__confirm-delete-button {
box-shadow: none;
}
.locations-panel__cancel-delete-button {
--button-bg: var(--panel-bg);
--button-border: var(--sidebar-border);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
}
.locations-panel__confirm-delete-button {
--button-bg: rgba(220, 38, 38, 0.12);
--button-border: rgba(220, 38, 38, 0.32);
--button-hover-bg: rgba(220, 38, 38, 0.18);
--button-active-bg: rgba(220, 38, 38, 0.24);
--button-color: var(--color-error-700);
}
[data-theme='dark'] .locations-panel__cancel-delete-button {
--button-bg: color-mix(in srgb, var(--panel-bg) 85%, transparent);
--button-hover-bg: color-mix(in srgb, var(--menu-item-hover) 75%, transparent);
--button-active-bg: color-mix(in srgb, var(--menu-item-active) 85%, transparent);
}
[data-theme='dark'] .locations-panel__confirm-delete-button {
--button-bg: rgba(239, 68, 68, 0.2);
--button-border: rgba(239, 68, 68, 0.36);
--button-hover-bg: rgba(239, 68, 68, 0.28);
--button-active-bg: rgba(239, 68, 68, 0.36);
--button-color: var(--color-error-100);
}
.locations-panel__close-button {
width: 36px;
min-width: 36px;
height: 36px;
border-radius: 0.75rem;
--button-bg: var(--menu-item-hover);
--button-border: transparent;
--button-hover-bg: var(--menu-item-active);
--button-active-bg: var(--menu-item-active);
color: var(--text-color);
}
.locations-panel__close-button .wmw-button__icon {
font-size: 1.25rem;
line-height: 1;
}
.locations-panel__error {
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.28);
color: var(--color-error-700);
font-size: 0.875rem;
}
[data-theme='dark'] .locations-panel__error {
background: color-mix(in srgb, var(--color-error-600) 25%, transparent);
border-color: color-mix(in srgb, var(--color-error-500) 35%, transparent);
color: var(--color-error-100);
}
.locations-panel__insights {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.locations-panel__tile.insight-tile {
max-width: none;
width: 100%;
min-height: 0;
aspect-ratio: auto;
padding: 1rem 1.25rem;
gap: 1rem;
}
.locations-panel__tile .insight-tile__title {
font-size: 1rem;
}
.locations-panel__tile .insight-tile__value {
font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
}
.locations-panel__tile .insight-tile__difference {
margin-top: 0;
}
.locations-panel__tile .insight-tile__meta {
font-size: 0.85rem;
color: var(--muted-text);
}
.locations-panel__placeholder {
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5rem;
color: var(--muted-text);
}
.locations-panel__placeholder h2 {
margin: 0;
font-size: 1.25rem;
color: var(--text-color);
}
/* Maps markers use the default Mapbox pin styling to match the Assets overview */
@media (max-width: 900px) {
.locations-panel {
width: 100%;
}
}
.locations-create__form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.locations-create__section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.locations-create__section h3 {
margin: 0;
font-size: 1rem;
}
.locations-create__note {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
}
.locations-create__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.locations-create__field label {
font-weight: 600;
font-size: 0.9rem;
}
.locations-create__field input {
border: 1px solid var(--sidebar-border);
border-radius: 0.75rem;
padding: 0.65rem 0.75rem;
font: inherit;
background: var(--bg-color);
color: inherit;
}
.locations-create__tags-empty {
margin: 0;
color: var(--muted-text);
font-size: 0.9rem;
}
.locations-create__custom-tag-form {
display: flex;
align-items: center;
gap: 0.5rem;
}
.locations-create__custom-tag-form input {
flex: 1;
border: 1px solid var(--sidebar-border);
border-radius: 0.75rem;
padding: 0.5rem 0.75rem;
font: inherit;
background: var(--bg-color);
color: inherit;
}
.locations-create__selected-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.locations-create__selected-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border-radius: 999px;
background: var(--sidebar-border);
padding: 0.25rem 0.75rem;
font-size: 0.85rem;
}
[data-theme='dark'] .locations-create__selected-tag {
background: rgba(148, 163, 184, 0.25);
}
.locations-create__selected-tag button {
border: none;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0;
}
.locations-create__geofence-controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.locations-create__geofence-button {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.locations-create__geofence-button--active {
--button-bg: rgba(37, 99, 235, 0.12);
--button-border: var(--accent-color);
--button-color: var(--accent-color);
--button-hover-bg: rgba(37, 99, 235, 0.18);
--button-active-bg: rgba(37, 99, 235, 0.22);
}
[data-theme='dark'] .locations-create__geofence-button--active {
--button-bg: rgba(96, 165, 250, 0.2);
--button-hover-bg: rgba(59, 130, 246, 0.28);
--button-active-bg: rgba(59, 130, 246, 0.32);
--button-border: var(--accent-color);
--button-color: var(--accent-color);
}
.locations-create__geofence-hints {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
color: var(--muted-text);
}
.locations-create__geofence-list {
margin: 0;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
color: var(--muted-text);
}
.locations-create__error {
margin: 0;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
background: rgba(239, 68, 68, 0.12);
color: var(--color-error-700);
font-weight: 500;
}
[data-theme='dark'] .locations-create__error {
background: rgba(248, 113, 113, 0.2);
color: var(--color-error-100);
}
/* Hybrid View Styles (Synced with Asset Hybrid) */
.location-hybrid__container {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
overflow: hidden;
height: 100%;
min-height: 0;
flex: 1;
}
.location-hybrid__panel {
flex-grow: 1;
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.location-hybrid__list-panel {
flex-basis: var(--location-hybrid-list-width, 40%);
flex-grow: 0;
flex-shrink: 0;
min-width: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--sidebar-border, #e0e0e0);
overflow: hidden;
min-height: 0;
background: var(--sidebar-bg);
}
.location-hybrid__list-panel--swapped {
border-left: 1px solid var(--sidebar-border, #e0e0e0);
border-right: none;
}
.location-hybrid__header {
padding: 6px 18px;
border-bottom: 1px solid var(--border-color, #eee);
font-size: 12px;
color: var(--text-primary, #222);
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--sidebar-bg);
}
[data-theme='dark'] .location-hybrid__header {
color: #fff;
}
.location-hybrid__divider {
width: 6px;
cursor: col-resize;
background: transparent;
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.location-hybrid__divider-bar {
position: absolute;
top: 0;
bottom: 0;
left: 2px;
width: 2px;
background: #d0d0d0;
}
.location-hybrid__swap-btn {
position: relative;
z-index: 11;
background: var(--tile-bg, #f2f2f2);
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px;
color: var(--tile-fg, #202020);
margin-bottom: auto;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}
.location-hybrid__swap-btn:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
[data-theme='dark'] .location-hybrid__swap-btn {
background: var(--tile-bg, #3a3a3a);
color: var(--tile-fg, #f0f0f0);
}
.asset-types-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 0 1.5rem 1.5rem;
width: 100%;
box-sizing: border-box;
}
.asset-types__status {
border-radius: 0.75rem;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
color: color-mix(in srgb, var(--color-success-600) 90%, var(--color-neutral-900) 10%);
padding: 0.75rem 1rem;
font-weight: 600;
}
.asset-types__error {
border-radius: 0.75rem;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.25);
color: var(--color-error-700);
padding: 0.75rem 1rem;
}
.asset-types__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.asset-types__empty {
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px dashed var(--border-color);
text-align: center;
color: var(--muted-text);
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.asset-types__empty p {
margin: 0;
}
.asset-types__empty strong {
color: var(--text-color);
}
.asset-types__empty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.asset-types__empty--error {
border-style: solid;
border-color: rgba(239, 68, 68, 0.25);
background: rgba(239, 68, 68, 0.12);
color: var(--color-error-700);
}
.asset-types__row-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
.asset-types__action-button {
--button-bg: transparent;
--button-border: var(--border-color);
--button-hover-bg: var(--menu-item-hover);
--button-active-bg: var(--menu-item-active);
--button-color: var(--text-color);
box-shadow: none;
}
.asset-types__action-button--danger {
--button-color: var(--color-error-600);
}
.asset-types__action-button--confirm {
--button-bg: rgba(220, 38, 38, 0.12);
--button-border: rgba(220, 38, 38, 0.32);
--button-color: var(--color-error-700);
}
.asset-types-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.asset-types-form__error {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.25);
color: var(--color-error-700);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
}
.asset-types-form__field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-types-form__field label {
font-weight: 600;
}
.asset-types-form__field label span {
color: var(--muted-text);
font-weight: 400;
}
.asset-types-form__field input,
.asset-types-form__field textarea {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 0.65rem;
padding: 0.65rem 0.75rem;
font-size: 0.95rem;
background: var(--bg-color);
color: var(--text-color);
}
.asset-types-form__field textarea {
resize: vertical;
min-height: 6rem;
}
.asset-types-form__help {
font-size: 0.8rem;
color: var(--muted-text);
align-self: flex-end;
}
[data-theme='dark'] .asset-types__status {
background: rgba(34, 197, 94, 0.22);
border-color: rgba(34, 197, 94, 0.4);
color: color-mix(in srgb, var(--color-success-300) 75%, var(--color-white) 25%);
}
[data-theme='dark'] .asset-types__error,
[data-theme='dark'] .asset-types-form__error {
background: rgba(239, 68, 68, 0.22);
border-color: rgba(239, 68, 68, 0.4);
color: var(--color-error-100);
}
[data-theme='dark'] .asset-types__action-button--danger {
--button-color: var(--color-error-300);
}
[data-theme='dark'] .asset-types__action-button--confirm {
--button-bg: rgba(248, 113, 113, 0.22);
--button-border: rgba(248, 113, 113, 0.38);
--button-color: var(--color-error-100);
}
[data-theme='dark'] .asset-types__empty--error {
border-color: rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.22);
color: var(--color-error-100);
}
.asset-type-delete-panel__card {
background: #f3f6f9;
border: 1px dashed #cfd6de;
border-radius: 18px;
padding: 10px 10px;
margin-bottom: 15px;
}
.asset-type-delete-panel__title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
color: #1f2937;
}
.asset-type-delete-panel__text {
margin: 0;
font-size: 10px;
line-height: 1.5;
color: #6b7280;
}
.asset-type-delete-panel__status {
margin: 12px 0 0;
font-size: 13px;
}
.asset-type-delete-panel__status--error {
color: #b91c1c;
}
.side-panel__section {
margin-bottom: 24px;
}
.form-error {
color: var(--danger, #c00);
margin-bottom: 8px;
}
.properties-section {
margin-top: 16px;
}
.properties-label {
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.property-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 4px;
}
.add-property-btn {
margin-top: 8px;
}
.asset-type-form-row {
display: flex;
gap: 12px;
}
.asset-type-form-stack{
display: flex;
flex-direction: column;
gap: 6px;
}
:root {
--text-primary: #333;
}
.asset-type-filters-panel {
display: grid;
grid-template-columns: minmax(12rem, 15rem) minmax(24rem, 1fr);
gap: 1.75rem;
max-height: 40rem;
width: 100%;
}
.asset-type-filters-panel__column-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.asset-type-filters-panel__column-heading {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--muted-text);
}
.asset-type-filters-panel__column-items {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-type-filters-panel__column-button {
display: flex;
flex-direction: column;
gap: 0.125rem;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 0.75rem;
border: 1px solid transparent;
background-color: transparent;
text-align: left;
font-size: 0.9375rem;
color: var(--text-primary);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.asset-type-filters-panel__column-button:hover,
.asset-type-filters-panel__column-button:focus-visible {
border-color: var(--border-color);
background-color: var(--surface-bg, var(--content-bg));
outline: none;
}
.asset-type-filters-panel__column-button--active {
border-color: var(--accent-color);
background-color: rgba(21, 128, 61, 0.08);
color: var(--accent-color);
}
.asset-type-filters-panel__column-label {
font-weight: 600;
}
.asset-type-filters-panel__column-description {
font-size: 0.8125rem;
color: var(--muted-text);
}
.asset-type-filters-panel__content {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.asset-type-filters-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.asset-type-filters-panel__section--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: 0.75rem;
align-items: flex-end;
}
.asset-type-filters-panel__text-filter-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.asset-type-filters-panel__text-filter-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.asset-type-filters-panel__text-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-end;
}
.asset-type-filters-panel__field {
min-width: 0;
}
.asset-type-filters-panel__field--mode {
flex: 0 0 14rem;
}
.asset-type-filters-panel__field--value {
flex: 1 1 16rem;
}
.asset-type-filters-panel__field--hidden-label .wmw-field__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.asset-type-filters-panel__text-filter-divider {
align-self: center;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted-text);
text-align: center;
padding: 0.25rem 0;
}
.asset-type-filters-panel__text-filter-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.asset-type-filters-panel__remove-line {
margin-left: auto;
}
.asset-type-filters-panel__options {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 18rem;
overflow-y: auto;
padding-right: 0.25rem;
}
.asset-type-filters-panel__option {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--text-primary);
}
.asset-type-filters-panel__option span {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.asset-type-filters-panel__option input {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.asset-type-filters-panel__empty,
.asset-type-filters-panel__status,
.asset-type-filters-panel__hint {
margin: 0;
font-size: 0.875rem;
color: var(--muted-text);
}
.asset-type-filters-panel__hint {
grid-column: 1 / -1;
}
.asset-type-filters-panel__footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.asset-type-filters-panel__footer-actions {
display: flex;
gap: 0.5rem;
}
[data-theme='dark'] .asset-type-filters-panel__column-button--active {
background-color: rgba(96, 165, 250, 0.16);
}
.asset-type-filters-panel__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
}
.asset-type-filters-panel__footer-actions--right {
display: flex;
gap: 0.5rem;
margin-left: auto;
}
.top_spacer {
margin-top: 0.9rem;
}.wmw-field__value-scroll {
max-height: 25rem;
overflow-y: auto;
word-break: break-word;
}
.wmw-field__value-scroll.collapsed {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: none;
}
.wmw-field__read-more {
cursor: pointer;
margin-top: 0.5rem;
display: inline-block;
font-size: 0.95em;
}
.count-indicator {
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
}
.count-indicator__label {
font-variant-numeric: tabular-nums;
color: var(--text-color, #222);
min-width: 48px;
text-align: right;
}
.count-indicator__bar-bg {
background: var(--color-neutral-200, #e0e0e0);
border-radius: 4px;
height: 0.5rem;
width: 80px;
min-width: 40px;
max-width: 50px;
overflow: hidden;
flex-shrink: 0;
}
.count-indicator__bar {
height: 100%;
transition: width 0.3s;
}
.count-indicator__bar--high {
background: var(--color-error-400, #e53935);
}
.count-indicator__bar--medium {
background: var(--color-warning-300, #ffb300);
}
.count-indicator__bar--low {
background: var(--color-neutral-500, #bdbdbd);
}
.count-indicator__label {
font-variant-numeric: tabular-nums;
min-width: 48px;
text-align: right;
font-size: 0.85em;
display: flex;
align-items: baseline;
gap: 0.1em;
}
.count-indicator__amount {
font-size: 0.85em;
color: var(--text-color, #222);
}
.count-indicator__slash {
font-size: 0.85em;
color: var(--color-neutral-500, #bdbdbd);
}
.count-indicator__total--high {
font-size: 0.85em;
color: var(--color-error-400, #e53935);
}
.count-indicator__total--medium {
font-size: 0.85em;
color: var(--color-warning-300, #ffb300);
}
.count-indicator__total--low {
font-size: 0.85em;
color: var(--color-neutral-500, #bdbdbd);
}
.notifications-center-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.notifications-center-page__content {
padding: 0 1.5rem 2.5rem;
}
.notifications-center-page__placeholder {
max-width: 32rem;
background: color-mix(in srgb, var(--content-bg) 85%, transparent);
border: 1px dashed var(--border-color);
border-radius: 0.75rem;
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
color: var(--muted-text);
}
.notifications-center-page__placeholder h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
}
.notifications-center-page__placeholder p {
margin: 0;
line-height: 1.5;
}
.auth-redirect-notice {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.auth-redirect-notice__card {
width: min(520px, 100%);
background-color: var(--panel-bg);
border: 1px solid var(--border-color);
border-radius: 1.25rem;
padding: 2rem 2.5rem;
box-shadow: 0 25px 50px -32px rgba(15, 23, 42, 0.95);
display: flex;
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.auth-redirect-notice__eyebrow {
font-size: 0.85rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent-color);
}
.auth-redirect-notice__title {
margin: 0;
font-size: 1.75rem;
line-height: 1.3;
color: var(--text-color);
}
.auth-redirect-notice__message {
margin: 0;
color: var(--muted-text);
font-size: 1rem;
line-height: 1.6;
}
.auth-redirect-notice__countdown {
margin: 0;
font-weight: 600;
color: var(--text-color);
}
.auth-redirect-notice__countdown span {
font-size: 1.25rem;
}
.auth-redirect-notice__actions {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: center;
}
.auth-redirect-notice__hint {
margin: 0;
font-size: 0.85rem;
color: var(--muted-text);
max-width: 320px;
}
.auth-redirect-notice__bypass {
font-size: 0.85rem;
}
.auth-redirect-notice__buttons {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
gap: 0.75rem;
align-items: center;
justify-content: center;
}
.user-delete-panel__card {
background: #f3f6f9;
border: 1px dashed #cfd6de;
border-radius: 18px;
padding: 10px 10px;
margin-bottom: 15px;
}
.user-delete-panel__title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
color: #1f2937;
}
.user-delete-panel__text {
margin: 0;
font-size: 10px;
line-height: 1.5;
color: #6b7280;
}
.user-delete-panel__link {
color: #6b7280;
text-decoration: underline;
cursor: pointer;
}
.user-delete-panel__link:hover,
.user-delete-panel__link:focus-visible {
color: #374151;
}
.user-delete-panel__status {
margin: 12px 0 0;
font-size: 13px;
}
.user-delete-panel__status--error {
color: #b91c1c;
}
.user-wizard-form__row {
display: flex;
gap: 50px;
}
.usersList tr > :first-child {
padding-left: 12px;
}
.usersList tbody tr > :first-child {
padding-left: 20px;
}
.user-wizard-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.user-wizard-form__row {
display: flex;
gap: 12px;
}
.user-wizard-form__row--single {
display: block;
}
.user-wizard-form__row + .user-wizard-form__row,
.user-wizard-form__row--single + .user-wizard-form__row,
.user-wizard-form__row + .user-wizard-form__row--single {
margin-top: 12px;
}
.user-detail-panel {
padding: 0;
}
.side-panel__section {
margin-bottom: 24px;
}
.side-panel__details-list {
margin: 0;
padding: 0;
}
.side-panel__details-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #eee;
}
.side-panel__details-label {
font-weight: 500;
color: #444;
}
.side-panel__details-value {
color: #222;
text-align: right;
flex: 1;
margin-left: 16px;
}
.title-spacing{
margin-right: 12px;
}
.user-detail-panel {
height: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
}
.user-detail-panel::-webkit-scrollbar {
display: none;
}
.side-panel__body {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.top_spacer {
margin-top: 0.9rem;
}
.wizard-status-bar {
display: flex;
gap: 0.5rem;
justify-content: flex-start;
align-items: center;
}
.wizard-status-bar__step {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #666;
display: inline-flex;
align-items: center;
min-width: 0;
}
.wizard-status-bar__step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid #ccc;
font-weight: 600;
font-size: 11px;
line-height: 1;
background: #fff;
color: inherit;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wizard-status-bar__arrow {
margin-left: 4px;
color: #999;
font-size: 12px;
line-height: 1;
}
.wizard-status-bar__step--active .wizard-status-bar__step-number {
background: var(--accent-color, var(--color-accent-600));
border-color: var(--accent-color, var(--color-accent-600));
color: #fff;
}
.wizard-status-bar__step:disabled {
cursor: not-allowed;
color: #bbb;
}
.wizard-status-bar__step:disabled .wizard-status-bar__step-number {
background: #f5f5f5;
border-color: #e3e3e3;
color: #bbb;
}
.wizard-status-bar__step:disabled .wizard-status-bar__arrow {
color: #cfcfcf;
}
.account-wizard {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 24px 24px 24px;
}
.account-wizard__steps {
display: flex;
gap: 8px;
margin: 24px 0 16px 0;
}
.account-wizard__step {
padding: 6px 16px;
border-radius: 16px;
background: #f3f4f6;
color: #555;
font-weight: 500;
cursor: pointer;
border: none;
transition: background 0.2s;
}
.account-wizard__step--active {
background: #2563eb;
color: #fff;
}
.account-wizard__form {
display: flex;
flex-direction: column;
gap: 12px;
}
.account-wizard-form__row {
display: flex;
gap: 12px;
}
.account-wizard-form__row--single {
display: block;
}
.account-wizard-form__row + .account-wizard-form__row,
.account-wizard-form__row--single + .account-wizard-form__row,
.account-wizard-form__row + .account-wizard-form__row--single {
margin-top: 12px;
}
.account-wizard__actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: auto;
}
.account-wizard__title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
}
.account-wizard__subtitle {
color: #666;
margin-bottom: 16px;
font-size: 1rem;
}
.account-wizard__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.account-wizard__error {
color: #dc2626;
font-size: 0.95em;
margin-top: 4px;
}
.field-with-toggle {
display: flex;
align-items: flex-end;
gap: 12px;
}
.field-with-toggle .wmw-field__label {
margin: 0;
}
.top_spacer {
margin-top: 0.9rem;
}.form-search-input {
position: relative;
display: flex;
align-items: center;
}
.form-search-input__field .wmw-input {
padding-left: 5em;
}
.form-search-input__wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.form-search-input__icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--wmw-input-icon, #888);
z-index: 2;
display: flex;
align-items: center;
height: 100%;
}
.form-search-input__field {
padding-left: 2.5em !important;
width: 100%;
box-sizing: border-box;
}
.account-type-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 500;
text-transform: capitalize;
border: 1px solid transparent;
}
.account-type-badge--reseller {
background-color: #fff0e6;
border-color: #ffc299;
color: #d95f02;
}
.account-type-badge--partner {
background-color: #e6f7ff;
border-color: #91d5ff;
color: #096dd9;
}
.account-type-badge--customer {
background-color: #f6f6f6;
border-color: #d9d9d9;
color: #595959;
}
.accounts-page {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
background: var(--content-bg);
}
.accounts-page__header h1 {
margin: 0;
font-size: 1.25rem;
}
.accounts-page__subtitle {
margin: 6px 0 0;
color: var(--muted-text);
font-size: 0.95rem;
}
.accounts-page__tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
align-items: start;
max-width: 1300px;
width: 100%;
}
.accounts-tile {
display: flex;
flex-direction: column;
}
.accounts-tile--roles .accounts-tile__roles {
display: flex;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.accounts-tile__role {
display: flex;
gap: 8px;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-color, #60a5fa) 12%, transparent);
font-weight: 600;
}
.accounts-tile__role-label {
font-size: 0.85rem;
}
.accounts-tile__role-count {
background: rgba(0,0,0,0.06);
padding: 2px 8px;
border-radius: 999px;
font-size: 0.85rem;
margin-left: 6px;
}
.accounts-page__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.accounts-page__list-title {
margin: 0;
font-size: 1rem;
}
.accounts__muted {
color: var(--muted-text);
font-size: 0.9rem;
}
.accounts__status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-color);
background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.accounts__status-badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--status-color, #16a34a);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.36);
flex: 0 0 auto;
}
.accounts__status-badge--active {
--status-color: #16a34a;
background: rgba(16, 185, 129, 0.08);
border-color: rgba(16, 185, 129, 0.18);
color: var(--text-color);
}
.accounts__status-badge--inactive {
--status-color: #ef4444;
background: rgba(239, 68, 68, 0.06);
border-color: rgba(239, 68, 68, 0.14);
color: var(--text-color);
}
.reseller-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-color);
background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.reseller-badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--status-color, #9ca3af);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.36);
flex: 0 0 auto;
}
.reseller-badge--yes {
--status-color: var(--accent-color, #60a5fa);
background: color-mix(in srgb, var(--accent-color, #60a5fa) 12%, transparent);
border-color: color-mix(in srgb, var(--accent-color, #60a5fa) 20%, transparent);
color: var(--text-color);
}
.reseller-badge--no {
--status-color: #9ca3af;
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.06);
color: var(--muted-text);
}
.reseller-badge:hover {
filter: brightness(0.98);
}
.accounts-wizard-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.accounts-wizard-form__row {
display: flex;
gap: 12px;
}
.accounts-wizard-form__row--single {
display: block;
}
.accounts-wizard-form__row + .accounts-wizard-form__row,
.accounts-wizard-form__row--single + .accounts-wizard-form__row,
.accounts-wizard-form__row + .accounts-wizard-form__row--single {
margin-top: 12px;
}
.accounts-detail-panel {
padding: 0;
}
.side-panel__section {
margin-bottom: 24px;
}
.side-panel__details-list {
margin: 0;
padding: 0;
}
.side-panel__details-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #eee;
}
.side-panel__details-label {
font-weight: 500;
color: #444;
}
.side-panel__details-value {
color: #222;
text-align: right;
flex: 1;
margin-left: 16px;
}
.title-spacing{
margin-right: 12px;
}
.accounts-detail-panel {
height: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
}
.accounts-detail-panel::-webkit-scrollbar {
display: none;
}
.side-panel__body {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.accounts-wizard-form__row {
display: flex;
gap: 50px;
}
.accounts-delete-panel__card {
background: #f3f6f9;
border: 1px dashed #cfd6de;
border-radius: 18px;
padding: 10px 10px;
margin-bottom: 15px;
}
.accounts-delete-panel__title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 700;
color: #1f2937;
}
.accounts-delete-panel__text {
margin: 0;
font-size: 10px;
line-height: 1.5;
color: #6b7280;
}
.accounts-delete-panel__link {
color: #6b7280;
text-decoration: underline;
cursor: pointer;
}
.accounts-delete-panel__link:hover,
.accounts-delete-panel__link:focus-visible {
color: #374151;
}
.accounts-delete-panel__status {
margin: 12px 0 0;
font-size: 13px;
}
.accounts-delete-panel__status--error {
color: #b91c1c;
}
.title-row {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.title-row .title-spacing {
display: inline-flex;
align-items: center;
}
.reseller-badge,
.side-panel__subaction-button--delete,
.top-bar__title-separator-icon {
margin: 0;
}
.title-row__name {
display: inline-block;
max-width: min(1400px, 80vw);
vertical-align: middle;
overflow: hidden;
position: relative;
min-width: 140px;
}
.title-row__name-inner {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
mask-image: linear-gradient(to right, black 80%, transparent 100%);
}.user-edit-panel__backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.user-edit-panel {
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
padding: 2rem 2.5rem;
min-width: 340px;
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
position: relative;
}
.user-edit-panel h2 {
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 600;
}
.user-edit-panel form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.user-edit-panel__actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 1.5rem;
}
.user-edit-panel label {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}
.user-edit-panel input[type="text"],
.user-edit-panel input[type="email"],
.user-edit-panel input[type="number"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 1rem;
}
.user-edit-panel input[type="checkbox"] {
margin-right: 0.5rem;
}
.account-tree-list__node {
display: flex;
flex-direction: column;
}
.account-tree-list__row {
display: flex;
align-items: center;
width: 100%;
padding: 4px 0;
transition: background 0.2s;
}
.account-tree-list__row--bg-open {
background: var(--panel-bg, var(--background-color, #ffffff));
}
[data-theme='dark'] .account-tree-list__row--bg-open {
background: color-mix(
in srgb,
var(--panel-bg, #0b1220) 88%,
var(--color-black, #000000) 100%
);
}
.account-tree-list__row--bg-closed {
background: color-mix(
in srgb,
var(--panel-bg, var(--background-color, #ffffff)) 50%,
var(--text-color, #0f172a) 5%
);
}
.account-tree-list__row--open {
border-radius: 6px;
}
.account-tree-list__row--clickable {
cursor: pointer;
}
.account-tree-list__row--virtual {
cursor: default;
}
.account-tree-list__indent {
display: inline-flex;
align-items: center;
white-space: nowrap;
margin-right: 6px;
min-width: 24px;
}
.account-tree-list__toggle {
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font-size: 16px;
line-height: 1;
display: inline-flex;
align-items: center;
}
.account-tree-list__toggle-inner {
display: inline-flex;
align-items: center;
}
.account-tree-list__toggle-arrow {
margin-left: 6px;
}
.account-tree-list__toggle-spacer {
width: 22px;
display: inline-block;
}
.account-tree-list__icon {
margin-right: 10px;
flex-shrink: 0;
}
.account-tree-list__name {
flex: 2;
font-size: 13px;
}
.account-tree-list__name--virtual {
color: color-mix(in srgb, var(--text-color, #0f172a) 100%, var(--muted-text, #6b7280) 100%);
opacity: 0.7;
}
.account-tree-list__name--normal {
color: var(--text-color, #0f172a);
opacity: 1;
}
.account-tree-list__col {
flex: 1;
}
.account-tree-list__children {
margin-left: 35px;
margin-top: 2px;
display: flex;
flex-direction: column;
gap: 0;
}
.account-tree-list__header-row {
display: flex;
align-items: center;
width: 100%;
}
.account-tree-list__header-bar {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.account-tree-list__expand-toggle {
cursor: pointer;
font-size: 10px;
text-decoration: underline;
padding: 6px 10px;
user-select: none;
line-height: 1;
}
.account-tree-list__group {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
align-items: stretch;
}.grid-settings-panel {
display: flex;
flex-direction: column;
gap: 1.75rem;
padding-block: 0.5rem;
}
.grid-settings-panel__section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.grid-settings-panel__section-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.grid-settings-panel__section-header p {
margin: 0.25rem 0 0;
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.4;
}
.grid-settings-panel__options {
display: grid;
gap: 0.75rem;
}
.grid-settings-panel__column-groups {
display: flex;
flex-direction: column;
gap: 1rem;
}
.grid-settings-panel__column-group {
margin: 0;
padding: 0.9rem 1rem;
border: 1px solid var(--border);
border-radius: 0.9rem;
background: var(--surface-1);
min-inline-size: 0;
}
.grid-settings-panel__column-group legend {
display: none;
}
.grid-settings-panel__column-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.grid-settings-panel__column-item {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
cursor: grab;
color: var(--text-1);
transition: opacity 160ms ease;
}
.grid-settings-panel__column-item:active {
cursor: grabbing;
}
.grid-settings-panel__column-item--dragging {
opacity: 0.65;
}
.grid-settings-panel__column-handle {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
opacity: 0.72;
}
.grid-settings-panel__column-item-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--text-1);
}
.grid-settings-panel__column-item-label input[type='checkbox'] {
width: 1rem;
height: 1rem;
}
.grid-settings-panel__option {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 0.75rem;
background: var(--surface-2);
color: var(--text-1);
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease,
background-color 160ms ease;
}
.grid-settings-panel__option:hover,
.grid-settings-panel__option:focus-within {
border-color: color-mix(in srgb, var(--accent-color) 55%, transparent 45%);
box-shadow: 0 0 0 1px
color-mix(in srgb, var(--accent-color) 35%, transparent 65%);
}
.grid-settings-panel__option input[type='radio'] {
appearance: none;
width: 1.125rem;
height: 1.125rem;
border-radius: 999px;
border: 1px solid var(--border);
margin: 0.125rem 0 0;
display: grid;
place-items: center;
background-color: var(--surface-1);
transition: border-color 160ms ease, background-color 160ms ease;
}
.grid-settings-panel__option input[type='radio']::before {
content: '';
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
transform: scale(0);
transition: transform 160ms ease;
background-color: var(--accent-color);
}
.grid-settings-panel__option input[type='radio']:checked {
border-color: var(--accent-color);
background-color: color-mix(in srgb, var(--accent-color) 12%, var(--surface-1) 88%);
}
.grid-settings-panel__option input[type='radio']:checked::before {
transform: scale(1);
}
.grid-settings-panel__option-body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.grid-settings-panel__drop-zone {
height: 0;
border-radius: 999px;
background: transparent;
margin: 0.15rem 0;
transition: background-color 160ms ease, height 160ms ease;
}
.grid-settings-panel__column-list--dragging .grid-settings-panel__drop-zone {
height: 0.25rem;
}
.grid-settings-panel__drop-zone--active {
height: 0.65rem;
background: color-mix(in srgb, var(--accent-color) 30%, transparent 70%);
}
.grid-settings-panel__option-label {
font-weight: 600;
color: var(--text-1);
}
.grid-settings-panel__option-description {
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.4;
}
.grid-settings-panel__option--selected {
border-color: var(--accent-color);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 50%, transparent 50%);
background-color: color-mix(in srgb, var(--accent-color) 10%, var(--surface-2) 90%);
}
[data-theme='dark'] .grid-settings-panel__section-header p,
[data-theme='dark'] .grid-settings-panel__option-description,
[data-theme='dark'] .grid-settings-panel__column-handle {
color: rgba(203, 213, 225, 0.72);
}
[data-theme='dark'] .grid-settings-panel__column-group {
border-color: rgba(148, 163, 184, 0.18);
background: color-mix(in srgb, var(--panel-bg) 90%, var(--color-neutral-900) 10%);
}
[data-theme='dark'] .grid-settings-panel__option {
border-color: rgba(148, 163, 184, 0.18);
background: color-mix(in srgb, var(--panel-bg) 86%, var(--color-neutral-900) 14%);
color: var(--color-neutral-50);
}
[data-theme='dark'] .grid-settings-panel__option:hover,
[data-theme='dark'] .grid-settings-panel__option:focus-within {
border-color: color-mix(in srgb, var(--accent-color) 55%, transparent 45%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 35%, transparent 65%);
background: color-mix(in srgb, var(--accent-color) 8%, var(--panel-bg) 92%);
}
[data-theme='dark'] .grid-settings-panel__option input[type='radio'] {
border-color: rgba(148, 163, 184, 0.35);
background-color: color-mix(in srgb, var(--panel-bg) 78%, rgba(30, 41, 59, 0.65) 22%);
}
[data-theme='dark'] .grid-settings-panel__option input[type='radio']:checked {
border-color: color-mix(in srgb, var(--accent-color) 65%, rgba(148, 163, 184, 0.35) 35%);
background-color: color-mix(in srgb, var(--accent-color) 22%, rgba(15, 23, 42, 0.65) 78%);
}
[data-theme='dark'] .grid-settings-panel__option--selected {
border-color: color-mix(in srgb, var(--accent-color) 75%, transparent 25%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 45%, transparent 55%);
background-color: color-mix(in srgb, var(--accent-color) 16%, rgba(15, 23, 42, 0.78) 84%);
}
.twoPartGrid {
width: 100%;
--tile-size: 146px;
--tile-gap: 4px;
--left-cols: 4;
--rows: 8;
--left-closed-width: 34px;
--left-scrollbar-size: 20px;
--reverse-gap: 0px;
display: grid;
height: var(--grid-height, 86vh);
min-height: 0;
grid-template-columns: calc(
var(--left-cols) * var(--tile-size) + (var(--left-cols) - 1) * var(--tile-gap) + var(--left-scrollbar-size)
)
1fr;
grid-template-rows: 1fr;
gap: calc(var(--tile-gap) + var(--reverse-gap));
transition: grid-template-columns 900ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.twoPartGrid--reverse {
--reverse-gap: 12px;
grid-template-columns: 1fr calc(
var(--left-cols) * var(--tile-size) + (var(--left-cols) - 1) * var(--tile-gap) + var(--left-scrollbar-size)
);
}
.twoPartGrid--reverse.twoPartGrid--leftClosed {
grid-template-columns: 1fr var(--left-closed-width);
}
.twoPartGrid:not(.twoPartGrid--reverse).twoPartGrid--leftClosed {
grid-template-columns: var(--left-closed-width) 1fr;
}
.twoPartGrid__leftDrawer {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
width: calc(
var(--left-cols) * var(--tile-size) + (var(--left-cols) - 1) * var(--tile-gap) + var(--left-scrollbar-size)
);
max-width: none;
background: inherit;
transition: width 900ms cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: width;
overflow: auto;
grid-column: 1;
border-right: 0 solid rgba(71, 85, 105, 0.35);
border-left: 0 solid rgba(71, 85, 105, 0.35);
}
.twoPartGrid--reverse .twoPartGrid__leftDrawer {
grid-column: 2;
}
.twoPartGrid--reverse .twoPartGrid__right {
grid-column: 1;
}
.twoPartGrid__leftDrawer--closed {
width: var(--left-closed-width);
min-width: 0;
overflow: visible;
border-right-width: 1px;
}
.twoPartGrid--reverse .twoPartGrid__leftDrawer--closed {
border-right-width: 0;
border-left-width: 1px;
}
.twoPartGrid__leftDrawer::after,
.twoPartGrid--reverse .twoPartGrid__leftDrawer::after,
.twoPartGrid__leftDrawer--closed::after,
.twoPartGrid--reverse .twoPartGrid__leftDrawer--closed::after {
content: none;
}
.twoPartGrid__leftDrawerToggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
background: transparent;
border: none;
cursor: pointer;
gap: 10px;
}
.twoPartGrid__leftDrawer:not(.twoPartGrid__leftDrawer--closed) .twoPartGrid__leftDrawerToggle {
align-items: flex-start;
gap: 0;
}
.twoPartGrid__leftDrawerRow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding-Bottom: 10px;
}
.twoPartGrid__leftDrawer:not(.twoPartGrid__leftDrawer--closed) .twoPartGrid__leftDrawerRow {
justify-content: flex-start;
}
.twoPartGrid__leftDrawerChevron {
width: 8px;
height: 8px;
border-top: 2px solid #475569;
border-right: 2px solid #475569;
transform: rotate(45deg);
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.twoPartGrid__leftDrawer[data-open='false'] .twoPartGrid__leftDrawerChevron {
transform: rotate(-135deg);
margin-left: -10px;
}
.twoPartGrid__leftDrawerTitleTop {
font-size: 0.85rem;
font-weight: 600;
color: #475569;
writing-mode: vertical-rl;
text-orientation: mixed;
letter-spacing: 0.08em;
line-height: 1;
user-select: none;
}
.twoPartGrid__leftDrawerTitleTop__open {
font-size: 0.85rem;
font-weight: 600;
color: #475569;
letter-spacing: 0.08em;
margin-left: 10px;
}
.twoPartGrid__leftDrawer--closed .twoPartGrid__leftDrawerTitleTop {
align-self: flex-start;
}
.twoPartGrid__leftScroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
opacity: 1;
visibility: visible;
pointer-events: auto;
scrollbar-gutter: stable;
scrollbar-color: transparent transparent;
transition: opacity 160ms ease, visibility 0s linear 0s, scrollbar-color 0.3s ease;
}
.twoPartGrid__leftDrawer--closed .twoPartGrid__leftScroll {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease, visibility 0s linear 120ms;
}
.twoPartGrid__leftScroll:hover {
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.twoPartGrid__leftScroll::-webkit-scrollbar {
width: 8px;
}
.twoPartGrid__leftScroll::-webkit-scrollbar-track {
background: transparent;
}
.twoPartGrid__leftScroll::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
.twoPartGrid__leftScroll:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
}
.twoPartGrid__left {
display: grid;
grid-template-columns: repeat(var(--left-cols), var(--tile-size));
grid-template-rows: repeat(var(--rows), var(--tile-size));
gap: var(--tile-gap);
grid-auto-flow: dense;
width: calc(
var(--left-cols) * var(--tile-size) + (var(--left-cols) - 1) * var(--tile-gap)
);
flex: 0 0 auto;
}
.twoPartGrid__item {
height: 100%;
width: 100%;
min-height: 0;
min-width: 0;
align-self: stretch;
justify-self: stretch;
overflow: hidden;
}
.twoPartGrid__item > .default-tile {
width: var(--grid-item-w, 100%);
height: var(--grid-item-h, 100%);
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
}
.twoPartGrid__right {
min-width: 0;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
grid-column: 2;
}
.twoPartGrid__rightInner {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
@media (max-width: 900px) {
.twoPartGrid {
grid-template-columns: 1fr;
height: auto;
max-height: none;
overflow: visible;
}
.twoPartGrid__rightInner {
min-height: 0;
}
}
.cart-retrieval-grid-view {
padding: 20px;
}
.cart-retrieval-board {
--cart-board-gap: 7px;
--cart-board-tile-size: 180px;
display: grid;
grid-template-columns: repeat(var(--cart-board-cols), minmax(0, var(--cart-board-tile-size)));
grid-template-rows: repeat(var(--cart-board-rows), var(--cart-board-tile-size));
gap: var(--cart-board-gap);
overflow-x: auto;
padding-bottom: 6px;
}
.cart-retrieval-board__item {
min-width: 0;
min-height: 0;
overflow: hidden;
}
.cart-retrieval-board__item > .default-tile {
width: 100% !important;
height: 100% !important;
box-sizing: border-box;
}