1;!function(){try { var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&((e._debugIds|| (e._debugIds={}))[n]="2c5026ef-6041-913c-15af-a1b0aac1bdbe")}catch(e){}}(); 2(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,728504,e=>{"use strict";let t=` 3 /* ======================================== 4 CSS VARIABLES 5 ======================================== */ 6 :root { 7 --pr-primary: #5E61EE; 8 --pr-primary-hover: #818CF8; 9 --pr-success: #4ADE80; 10 --pr-warning: #F59E0B; 11 --pr-error: #DC6B6B; 12 --pr-font: var(--font-inter), Inter, sans-serif; 13 14 /* Dark mode defaults */ 15 --pr-bg: rgba(255, 255, 255, 0.05); 16 --pr-bg-hover: rgba(255, 255, 255, 0.08); 17 --pr-border: rgba(255, 255, 255, 0.1); 18 --pr-border-hover: rgba(255, 255, 255, 0.2); 19 --pr-text: inherit; 20 --pr-text-muted: rgba(255, 255, 255, 0.55); 21 --pr-panel-bg: #141414; 22 --pr-panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); 23 } 24 25 .light-mode, 26 [data-theme="light"] { 27 --pr-bg: #f8fafc; 28 --pr-bg-hover: #f1f5f9; 29 /* Match v3 design token colors.border (#BEBEBE â Asteroid Ring) so 30 PrimeReact-wrapped inputs (DatePicker, Calendar) show the same outline 31 weight as v3 Input/Combobox on light surfaces. */ 32 --pr-border: #BEBEBE; 33 --pr-border-hover: #9CA3AF; 34 --pr-text: inherit; 35 --pr-text-muted: rgba(0, 0, 0, 0.55); 36 --pr-panel-bg: #ffffff; 37 --pr-panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); 38 } 39 40 /* ======================================== 41 1. INPUTTEXT 42 ======================================== */ 43 /* Use data-pc-name attribute for unstyled mode */ 44 [data-pc-name="inputtext"], 45 .p-inputtext { 46 width: 100%; 47 padding: 0.625rem 1rem; 48 background-color: var(--pr-bg); 49 border: 1px solid var(--pr-border); 50 border-radius: 0.5rem; 51 color: var(--pr-text); 52 font-family: var(--pr-font); 53 font-size: 0.875rem; 54 outline: none; 55 transition: border-color 0.15s ease, box-shadow 0.15s ease; 56 } 57 58 [data-pc-name="inputtext"]::placeholder, 59 .p-inputtext::placeholder { 60 color: var(--pr-text-muted); 61 } 62 63 [data-pc-name="inputtext"]:hover, 64 .p-inputtext:hover { 65 border-color: var(--pr-border-hover); 66 } 67 68 [data-pc-name="inputtext"]:focus, 69 .p-inputtext:focus { 70 border-color: var(--pr-primary); 71 box-shadow: 0 0 0 1px var(--pr-primary); 72 } 73 74 [data-pc-name="inputtext"]:disabled, 75 .p-inputtext:disabled { 76 opacity: 0.5; 77 cursor: not-allowed; 78 } 79 80 /* Ensure password inputs use the same font */ 81 [data-pc-name="inputtext"][type="password"], 82 .p-inputtext[type="password"], 83 input[type="password"] { 84 font-family: var(--pr-font); 85 } 86 87 /* Input with Icon (IconField) */ 88 [data-pc-name="iconfield"], 89 .p-icon-field, 90 .p-iconfield { 91 position: relative; 92 display: flex; 93 align-items: center; 94 width: 100%; 95 } 96 97 /* Icon positioning - left (default) - exclude password inputs */ 98 [data-pc-name="iconfield"]:not([data-pc-name="password"]) [data-pc-name="inputtext"]:not([type="password"]):not([type="text"]:has(~ [data-pc-section="showicon"])):not([type="text"]:has(~ [data-pc-section="hideicon"])), 99 [data-pc-name="iconfield"]:not(:has([data-pc-section="showicon"])):not(:has([data-pc-section="hideicon"])) .p-inputtext, 100 .p-icon-field-left .p-inputtext, 101 .p-iconfield-left .p-inputtext { 102 padding-left: 2.5rem; 103 } 104 105 /* Password inputs should NOT have left icon padding */ 106 [data-pc-name="password"] input, 107 [data-pc-name="password"] [data-pc-name="inputtext"] { 108 padding-left: 1rem !important; 109 } 110 111 /* Icon positioning - right */ 112 .p-icon-field-right .p-inputtext, 113 .p-iconfield-right .p-inputtext { 114 padding-right: 2.5rem; 115 padding-left: 1rem; 116 } 117 118 /* InputIcon wrapper positioning */ 119 [data-pc-name="iconfield"] [data-pc-name="inputicon"], 120 [data-pc-name="iconfield"] > span:first-child { 121 position: absolute; 122 left: 0.875rem; 123 top: 50%; 124 transform: translateY(-50%); 125 z-index: 1; 126 pointer-events: none; 127 display: flex; 128 align-items: center; 129 justify-content: center; 130 } 131 132 /* Icon styling inside InputIcon */ 133 [data-pc-name="iconfield"] [data-pc-name="inputicon"] svg, 134 [data-pc-name="iconfield"] > span:first-child svg, 135 [data-pc-name="iconfield"] [data-pc-section="icon"], 136 [data-pc-name="iconfield"] > svg, 137 [data-pc-name="iconfield"] > i, 138 .p-icon-field > svg, 139 .p-icon-field > i, 140 .p-iconfield > svg, 141 .p-iconfield > i, 142 .p-input-icon-left > svg, 143 .p-input-icon-left > i, 144 .p-input-icon-right > svg, 145 .p-input-icon-right > i { 146 color: var(--pr-text-muted); 147 width: 1rem; 148 height: 1rem; 149 pointer-events: none; 150 } 151 152 /* Direct SVG/icon children need absolute positioning */ 153 [data-pc-name="iconfield"] > svg, 154 [data-pc-name="iconfield"] > i { 155 position: absolute; 156 top: 50%; 157 transform: translateY(-50%); 158 left: 0.875rem; 159 z-index: 1; 160 } 161 162 /* Right icon position */ 163 [data-pc-name="iconfield"][iconposition="right"] [data-pc-name="inputicon"], 164 [data-pc-name="iconfield"][iconposition="right"] > span:first-child, 165 .p-icon-field-right > svg, 166 .p-icon-field-right > i, 167 .p-iconfield-right > svg, 168 .p-iconfield-right > i, 169 .p-input-icon-right > svg, 170 .p-input-icon-right > i { 171 right: 0.875rem; 172 left: auto; 173 } 174 175 /* ======================================== 176 2. INPUTTEXTAREA 177 ======================================== */ 178 [data-pc-name="inputtextarea"], 179 .p-inputtextarea { 180 width: 100%; 181 padding: 0.75rem 1rem; 182 background-color: var(--pr-bg); 183 border: 1px solid var(--pr-border); 184 border-radius: 0.5rem; 185 color: var(--pr-text); 186 font-family: var(--pr-font); 187 font-size: 0.875rem; 188 outline: none; 189 resize: vertical; 190 transition: border-color 0.15s ease, box-shadow 0.15s ease; 191 } 192 193 [data-pc-name="inputtextarea"]::placeholder, 194 .p-inputtextarea::placeholder { 195 color: var(--pr-text-muted); 196 } 197 198 [data-pc-name="inputtextarea"]:hover, 199 .p-inputtextarea:hover { 200 border-color: var(--pr-border-hover); 201 } 202 203 [data-pc-name="inputtextarea"]:focus, 204 .p-inputtextarea:focus { 205 border-color: var(--pr-primary); 206 box-shadow: 0 0 0 1px var(--pr-primary); 207 } 208 209 [data-pc-name="inputtextarea"]:disabled, 210 .p-inputtextarea:disabled { 211 opacity: 0.5;
212 cursor: not-allowed; 213 resize: none; 214 } 215 216 /* ======================================== 217 3. CHECKBOX 218 ======================================== */ 219 [data-pc-name="checkbox"], 220 .p-checkbox { 221 position: relative; 222 width: 1.25rem; 223 height: 1.25rem; 224 display: inline-flex; 225 align-items: center; 226 justify-content: center; 227 flex-shrink: 0; 228 cursor: pointer; 229 } 230 231 [data-pc-name="checkbox"] input, 232 .p-checkbox input { 233 position: absolute; 234 width: 100%; 235 height: 100%; 236 top: 0; 237 left: 0; 238 margin: 0; 239 padding: 0; 240 opacity: 0; 241 z-index: 1; 242 cursor: pointer; 243 } 244 245 /* Hide PrimeReact's default icons */ 246 [data-pc-name="checkbox"] svg, 247 .p-checkbox .p-checkbox-icon, 248 .p-checkbox svg, 249 .p-checkbox-box svg, 250 .p-checkbox [data-pc-section="icon"], 251 [data-pc-section="icon"] { 252 display: none !important; 253 } 254 255 [data-pc-section="box"], 256 .p-checkbox-box { 257 width: 1.25rem; 258 height: 1.25rem; 259 background-color: var(--pr-bg); 260 border: 2px solid var(--pr-border-hover); 261 border-radius: 0.25rem; 262 display: flex; 263 align-items: center; 264 justify-content: center; 265 position: relative; 266 cursor: pointer; 267 transition: all 0.15s ease; 268 } 269 270 [data-pc-name="checkbox"]:hover [data-pc-section="box"], 271 .p-checkbox:hover .p-checkbox-box { 272 border-color: var(--pr-primary); 273 } 274 275 /* Checked state - multiple selectors for compatibility */ 276 [data-pc-name="checkbox"][data-p-highlight="true"] [data-pc-section="box"], 277 .p-checkbox.p-highlight .p-checkbox-box, 278 .p-checkbox-checked .p-checkbox-box, 279 .p-checkbox[data-p-highlight="true"] .p-checkbox-box, 280 [data-p-highlight="true"] .p-checkbox-box { 281 background-color: var(--pr-primary); 282 border-color: var(--pr-primary); 283 } 284 285 /* Checkmark - centered properly */ 286 [data-pc-name="checkbox"][data-p-highlight="true"] [data-pc-section="box"]::after, 287 .p-checkbox.p-highlight .p-checkbox-box::after, 288 .p-checkbox-checked .p-checkbox-box::after, 289 .p-checkbox[data-p-highlight="true"] .p-checkbox-box::after, 290 [data-p-highlight="true"] .p-checkbox-box::after { 291 content: ''; 292 display: block; 293 width: 4px; 294 height: 8px; 295 border: solid white; 296 border-width: 0 2px 2px 0; 297 transform: rotate(45deg) translateY(-1px); 298 } 299 300 [data-pc-name="checkbox"][data-p-disabled="true"], 301 .p-checkbox.p-disabled { 302 opacity: 0.5; 303 cursor: not-allowed; 304 } 305 306 [data-pc-name="checkbox"][data-p-disabled="true"] [data-pc-section="box"], 307 .p-checkbox.p-disabled .p-checkbox-box { 308 cursor: not-allowed; 309 } 310 311 /* ======================================== 312 4. DROPDOWN (SELECT) 313 ======================================== */ 314 [data-pc-name="dropdown"], 315 .p-dropdown { 316 display: flex; 317 align-items: center; 318 background-color: var(--pr-bg); 319 border: 1px solid var(--pr-border); 320 border-radius: 0.5rem; 321 cursor: pointer; 322 transition: border-color 0.15s ease, box-shadow 0.15s ease; 323 min-height: 2.75rem; 324 } 325 326 [data-pc-name="dropdown"]:hover, 327 .p-dropdown:hover { 328 border-color: var(--pr-border-hover); 329 } 330 331 [data-pc-name="dropdown"][data-p-focus="true"], 332 [data-pc-name="dropdown"]:focus-within, 333 .p-dropdown.p-focus, 334 .p-dropdown:focus-within { 335 border-color: var(--pr-primary); 336 box-shadow: 0 0 0 1px var(--pr-primary); 337 } 338 339 [data-pc-section="input"], 340 .p-dropdown-label { 341 padding: 0.625rem 1rem; 342 flex: 1; 343 font-family: var(--pr-font); 344 font-size: 0.875rem; 345 color: var(--pr-text); 346 white-space: nowrap; 347 overflow: hidden; 348 text-overflow: ellipsis; 349 background: transparent; 350 border: none; 351 outline: none; 352 } 353 354 [data-pc-section="input"]::placeholder, 355 .p-dropdown-label.p-placeholder { 356 color: var(--pr-text-muted); 357 } 358 359 [data-pc-section="trigger"], 360 .p-dropdown-trigger { 361 padding: 0 0.75rem; 362 color: var(--pr-text-muted); 363 display: flex; 364 align-items: center; 365 transition: transform 0.15s ease; 366 } 367 368 [data-pc-name="dropdown"][aria-expanded="true"] [data-pc-section="trigger"], 369 .p-dropdown[aria-expanded="true"] .p-dropdown-trigger { 370 transform: rotate(180deg); 371 } 372 373 [data-pc-section="clearicon"], 374 .p-dropdown-clear-icon { 375 color: var(--pr-text-muted); 376 padding: 0 0.5rem; 377 cursor: pointer; 378 transition: color 0.15s ease; 379 } 380 381 [data-pc-section="clearicon"]:hover, 382 .p-dropdown-clear-icon:hover { 383 color: var(--pr-primary); 384 } 385 386 /* Dropdown Panel - uses data-pc-section="panel" in unstyled mode */ 387 [data-pc-name="dropdown"] ~ [data-pc-section="panel"],
388 [data-pc-section="panel"]:has([data-pc-section="list"]), 389 [data-pc-name="dropdownpanel"], 390 .p-dropdown-panel { 391 background-color: #141414; /* Solid background for dark mode - Nebula Veil */ 392 border: 1px solid var(--pr-border); 393 border-radius: 0.5rem; 394 box-shadow: var(--pr-panel-shadow); 395 margin-top: 4px; 396 overflow: hidden; 397 z-index: 9999; 398 backdrop-filter: none; /* Ensure no transparency effects */ 399 -webkit-backdrop-filter: none; 400 } 401 402 /* Light mode dropdown panel */ 403 .light-mode [data-pc-name="dropdown"] ~ [data-pc-section="panel"], 404 .light-mode [data-pc-section="panel"]:has([data-pc-section="list"]), 405 .light-mode [data-pc-name="dropdownpanel"], 406 .light-mode .p-dropdown-panel { 407 background-color: #ffffff; /* Solid white for light mode */ 408 } 409 410 /* Dropdown filter header â ensure icon centers with input */ 411 [data-pc-name="dropdown"] [data-pc-section="header"] { 412 position: relative; 413 padding: 0.5rem; 414 } 415 416 [data-pc-name="dropdown"] [data-pc-section="header"] [data-pc-section="filtercontainer"] { 417 position: relative; 418 width: 100%; 419 } 420 421 [data-pc-name="dropdown"] [data-pc-section="header"] input { 422 width: 100%; 423 padding: 0.5rem 2rem 0.5rem 0.75rem; 424 background-color: var(--pr-bg); 425 border: 1px solid var(--pr-border); 426 border-radius: 0.375rem; 427 font-family: var(--pr-font); 428 font-size: 0.875rem; 429 color: var(--pr-text); 430 outline: none; 431 line-height: 1.25rem; 432 } 433 434 [data-pc-name="dropdown"] [data-pc-section="header"] input::placeholder { 435 color: var(--pr-text-muted); 436 } 437 438 [data-pc-name="dropdown"] [data-pc-section="header"] input:focus { 439 border-color: var(--pr-primary); 440 } 441 442 [data-pc-name="dropdown"] [data-pc-section="header"] [data-pc-section="filtericon"], 443 [data-pc-name="dropdown"] [data-pc-section="header"] [data-pc-section="filtercontainer"] > svg { 444 position: absolute; 445 right: 0.75rem; 446 top: 50%; 447 transform: translateY(-50%); 448 color: var(--pr-text-muted); 449 width: 0.875rem; 450 height: 0.875rem; 451 pointer-events: none; 452 } 453 454 [data-pc-section="wrapper"], 455 .p-dropdown-items-wrapper { 456 max-height: 250px; 457 overflow-y: auto; 458 scrollbar-width: none; 459 -ms-overflow-style: none; 460 } 461 462 [data-pc-section="wrapper"]::-webkit-scrollbar, 463 .p-dropdown-items-wrapper::-webkit-scrollbar {
464 display: none; 465 } 466 467 [data-pc-section="list"], 468 .p-dropdown-items { 469 margin: 0; 470 padding: 0.25rem; 471 list-style: none; 472 } 473 474 [data-pc-section="item"], 475 .p-dropdown-item { 476 padding: 0.5rem 0.75rem; 477 border-radius: 0.375rem; 478 margin: 2px 0; 479 cursor: pointer; 480 font-family: var(--pr-font); 481 font-size: 0.875rem; 482 transition: background-color 0.15s ease; 483 color: var(--pr-text); 484 } 485 486 [data-pc-section="item"]:hover, 487 .p-dropdown-item:hover { 488 background-color: var(--pr-bg-hover); 489 } 490 491 [data-pc-section="item"][data-p-focus="true"], 492 .p-dropdown-item.p-focus { 493 background-color: var(--pr-bg-hover); 494 } 495 496 [data-pc-section="item"][data-p-highlight="true"], 497 .p-dropdown-item.p-highlight { 498 background-color: rgba(99, 102, 241, 0.15); 499 color: #a5b4fc; 500 } 501 502 .light-mode [data-pc-section="item"][data-p-highlight="true"], 503 .light-mode .p-dropdown-item.p-highlight { 504 color: #4f46e5; 505 } 506 507 [data-pc-section="emptymessage"], 508 .p-dropdown-empty-message { 509 padding: 0.75rem; 510 text-align: center; 511 color: var(--pr-text-muted); 512 font-size: 0.875rem; 513 } 514 515 [data-pc-name="dropdown"][data-p-disabled="true"], 516 .p-dropdown.p-disabled { 517 opacity: 0.5; 518 cursor: not-allowed; 519 } 520 521 [data-pc-name="dropdown"][data-p-disabled="true"] [data-pc-section="input"], 522 [data-pc-name="dropdown"][data-p-disabled="true"] [data-pc-section="trigger"], 523 .p-dropdown.p-disabled .p-dropdown-label, 524 .p-dropdown.p-disabled .p-dropdown-trigger { 525 cursor: not-allowed; 526 } 527 528 /* Phone input pattern - dropdown + input in flex container */ 529 /* Ensure dropdown matches input height exactly */ 530 .flex > [data-pc-name="dropdown"] { 531 min-height: unset; 532 height: auto; 533 } 534 535 .flex > [data-pc-name="dropdown"] [data-pc-section="input"] { 536 padding: 0.625rem 0.5rem; 537 display: flex; 538 align-items: center; 539 justify-content: center; 540 } 541 542 /* ======================================== 543 5. MULTISELECT 544 ======================================== */ 545 [data-pc-name="multiselect"], 546 .p-multiselect { 547 display: flex; 548 align-items: center; 549 background-color: var(--pr-bg); 550 border: 1px solid var(--pr-border); 551 border-radius: 0.5rem; 552 min-height: 2.75rem; 553 cursor: pointer; 554 transition: border-color 0.15s ease, box-shadow 0.15s ease; 555 } 556 557 [data-pc-name="multiselect"]:hover, 558 .p-multiselect:hover { 559 border-color: var(--pr-border-hover); 560 } 561 562 [data-pc-name="multiselect"][data-p-focus="true"], 563 [data-pc-name="multiselect"]:focus-within, 564 .p-multiselect.p-focus, 565 .p-multiselect:focus-within { 566 border-color: var(--pr-primary); 567 box-shadow: 0 0 0 1px var(--pr-primary); 568 } 569 570 [data-pc-name="multiselect"] [data-pc-section="labelcontainer"], 571 .p-multiselect-label-container { 572 flex: 1; 573 padding: 0.5rem 1rem; 574 display: flex; 575 flex-wrap: wrap; 576 gap: 0.25rem; 577 } 578 579 [data-pc-name="multiselect"] [data-pc-section="label"], 580 .p-multiselect-label { 581 font-family: var(--pr-font); 582 font-size: 0.875rem; 583 color: var(--pr-text); 584 } 585 586 [data-pc-name="multiselect"] [data-pc-section="label"][data-p-placeholder="true"], 587 .p-multiselect-label.p-placeholder { 588 color: var(--pr-text-muted); 589 } 590 591 [data-pc-name="multiselect"] [data-pc-section="trigger"], 592 .p-multiselect-trigger { 593 padding: 0 0.75rem; 594 color: var(--pr-text-muted); 595 display: flex; 596 align-items: center; 597 transition: transform 0.15s ease; 598 } 599 600 [data-pc-name="multiselect"][aria-expanded="true"] [data-pc-section="trigger"], 601 .p-multiselect[aria-expanded="true"] .p-multiselect-trigger { 602 transform: rotate(180deg); 603 } 604 605 /* Chip tokens container - add gap between chips */ 606 [data-pc-name="multiselect"] [data-pc-section="label"]:has(.p-multiselect-token), 607 .p-multiselect-label:has(.p-multiselect-token) { 608 display: flex; 609 flex-wrap: wrap; 610 gap: 0.375rem; 611 align-items: center; 612 } 613 614 /* Chip tokens */ 615 .p-multiselect-token { 616 display: inline-flex; 617 align-items: center; 618 gap: 0.375rem; 619 padding: 0.25rem 0.625rem; 620 background-color: rgba(99, 102, 241, 0.2); 621 color: #a5b4fc; 622 border: 1px solid rgba(99, 102, 241, 0.3); 623 border-radius: 0.375rem; 624 font-size: 0.8125rem; 625 font-weight: 500; 626 } 627 628 .light-mode .p-multiselect-token { 629 background-color: rgba(99, 102, 241, 0.1); 630 color: #4f46e5; 631 } 632 633 .p-multiselect-token-icon { 634 cursor: pointer; 635 opacity: 0.7; 636 transition: opacity 0.15s ease; 637 width: 0.875rem; 638 height: 0.875rem; 639 } 640 641 .p-multiselect-token-icon:hover { 642 opacity: 1; 643 } 644 645 /* MultiSelect panel - uses data-pc-section="panel" with checkbox items */ 646 /* Note: Panel is rendered as portal, so we need global selectors */ 647 [data-pc-name="multiselect"] ~ [data-pc-section="panel"],
648 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]), 649 .p-multiselect-panel, 650 div[data-pc-section="panel"][style*="position: absolute"] { 651 background-color: #141414 !important; /* Solid background for dark mode */ 652 border: 1px solid var(--pr-border); 653 border-radius: 0.5rem; 654 backdrop-filter: none !important; 655 -webkit-backdrop-filter: none !important; 656 box-shadow: var(--pr-panel-shadow); 657 margin-top: 4px; 658 overflow: hidden; 659 z-index: 9999; 660 } 661 662 /* Ensure all nested elements in multiselect panel have opaque backgrounds */ 663 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="wrapper"], 664 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="list"], 665 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="header"], 666 .p-multiselect-panel .p-multiselect-items-wrapper, 667 .p-multiselect-panel .p-multiselect-items, 668 .p-multiselect-panel .p-multiselect-header { 669 background-color: inherit; 670 } 671 672 /* Light mode multiselect panel */ 673 .light-mode [data-pc-name="multiselect"] ~ [data-pc-section="panel"],
674 .light-mode [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]), 675 .light-mode .p-multiselect-panel, 676 .light-mode div[data-pc-section="panel"][style*="position: absolute"] { 677 background-color: #ffffff !important; 678 } 679 680 /* MultiSelect panel override class - ensures solid background when applied via panelClassName */ 681 .multiselect-panel-override, 682 .multiselect-panel-override[data-pc-section="panel"] { 683 background-color: #141414 !important; 684 backdrop-filter: none !important; 685 -webkit-backdrop-filter: none !important; 686 } 687 688 .light-mode .multiselect-panel-override, 689 .light-mode .multiselect-panel-override[data-pc-section="panel"] { 690 background-color: #ffffff !important; 691 } 692 693 /* Hide the per-row checkbox in MultiSelect items â selection is already 694 communicated via the chips/labels in the trigger, and the dual click 695 target (row vs checkbox) creates flaky click behavior. Header 696 "select all" checkbox also hidden for the same reason. */ 697 .multiselect-panel-override [data-pc-section="item"] [data-pc-name="checkbox"], 698 .multiselect-panel-override [data-pc-section="item"] [data-pc-section="checkboxcontainer"], 699 .multiselect-panel-override .p-multiselect-item .p-checkbox, 700 .multiselect-panel-override [data-pc-section="headercheckboxcontainer"], 701 .multiselect-panel-override .p-multiselect-header .p-checkbox { 702 display: none !important; 703 } 704 705 /* When the row itself is selected, mark it visually since the checkbox is gone. */ 706 .multiselect-panel-override [data-pc-section="item"][data-p-highlight="true"], 707 .multiselect-panel-override .p-multiselect-item.p-highlight { 708 background-color: rgba(99, 102, 241, 0.15) !important; 709 color: var(--pr-primary) !important; 710 } 711 712 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="header"], 713 .p-multiselect-header { 714 display: flex; 715 align-items: center; 716 gap: 0.75rem; 717 padding: 0.75rem; 718 border-bottom: 1px solid var(--pr-border); 719 } 720 721 [data-pc-section="headercheckboxcontainer"], 722 .p-multiselect-select-all { 723 display: flex; 724 align-items: center; 725 } 726 727 [data-pc-section="filtercontainer"], 728 .p-multiselect-filter-container { 729 flex: 1; 730 position: relative; 731 display: flex; 732 align-items: center; 733 } 734 735 /* MultiSelect filter input */ 736 [data-pc-section="filtercontainer"] input, 737 [data-pc-section="filtercontainer"] [data-pc-section="root"], 738 .p-multiselect-filter { 739 width: 100%; 740 padding: 0.5rem 2rem 0.5rem 0.75rem; 741 background-color: var(--pr-bg); 742 border: 1px solid var(--pr-border); 743 border-radius: 0.375rem; 744 font-family: var(--pr-font); 745 font-size: 0.875rem; 746 color: var(--pr-text); 747 outline: none; 748 transition: border-color 0.15s ease; 749 } 750 751 [data-pc-section="filtercontainer"] input::placeholder, 752 .p-multiselect-filter::placeholder { 753 color: var(--pr-text-muted); 754 } 755 756 [data-pc-section="filtercontainer"] input:focus, 757 .p-multiselect-filter:focus { 758 border-color: var(--pr-primary); 759 } 760 761 /* Filter search icon - position on right */ 762 [data-pc-section="filtercontainer"] [data-pc-section="filtericon"], 763 [data-pc-section="filtercontainer"] svg, 764 .p-multiselect-filter-icon { 765 position: absolute; 766 right: 0.75rem; 767 top: 50%; 768 transform: translateY(-50%); 769 color: var(--pr-text-muted); 770 width: 0.875rem; 771 height: 0.875rem; 772 pointer-events: none; 773 } 774 775 /* Hide close button */ 776 .p-multiselect-close, 777 [data-pc-section="closebutton"] { 778 display: none; 779 } 780 781 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="wrapper"], 782 .p-multiselect-items-wrapper { 783 max-height: 250px; 784 overflow-y: auto; 785 } 786 787 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="list"], 788 .p-multiselect-items { 789 margin: 0; 790 padding: 0.25rem; 791 list-style: none; 792 } 793 794 /* MultiSelect items - checkbox and label inline */ 795 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="item"], 796 .p-multiselect-item { 797 display: flex; 798 flex-direction: row; 799 align-items: center; 800 gap: 0.75rem; 801 padding: 0.5rem 0.75rem; 802 border-radius: 0.375rem; 803 margin: 2px 0; 804 cursor: pointer; 805 font-family: var(--pr-font); 806 font-size: 0.875rem; 807 color: var(--pr-text); 808 transition: background-color 0.15s ease; 809 } 810 811 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-
811pc-section="item"]:hover, 812 .p-multiselect-item:hover { 813 background-color: var(--pr-bg-hover); 814 } 815 816 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="item"][data-p-focused="true"], 817 .p-multiselect-item.p-focus { 818 background-color: var(--pr-bg-hover); 819 } 820 821 [data-pc-section="panel"]:has([data-pc-section="headercheckboxcontainer"]) [data-pc-section="item"][data-p-highlight="true"], 822 .p-multiselect-item.p-highlight { 823 background-color: rgba(99, 102, 241, 0.15); 824 } 825 826 /* Checkbox container in multiselect items */ 827 [data-pc-section="item"] [data-pc-section="checkboxcontainer"], 828 [data-pc-section="item"] [data-pc-name="checkbox"] { 829 flex-shrink: 0; 830 } 831 832 /* Option label text */ 833 [data-pc-section="item"] [data-pc-section="option"], 834 .p-multiselect-item-label { 835 flex: 1; 836 } 837 838 .p-multiselect-empty-message { 839 padding: 0.75rem; 840 text-align: center; 841 color: var(--pr-text-muted); 842 font-size: 0.875rem; 843 } 844 845 .p-multiselect.p-disabled { 846 opacity: 0.5; 847 cursor: not-allowed; 848 } 849 850 /* ======================================== 851 6. SLIDER 852 ======================================== */ 853 [data-pc-name="slider"], 854 .p-slider { 855 position: relative; 856 background-color: var(--pr-bg); 857 border: 1px solid var(--pr-border); 858 border-radius: 9999px; 859 height: 0.5rem; 860 cursor: pointer; 861 } 862 863 [data-pc-name="slider"] [data-pc-section="range"], 864 .p-slider-range { 865 background: linear-gradient(90deg, var(--pr-primary), var(--pr-primary-hover)); 866 border-radius: 9999px; 867 height: 100%; 868 position: absolute; 869 top: 0; 870 } 871 872 [data-pc-name="slider"] [data-pc-section="handle"], 873 .p-slider-handle { 874 width: 1.25rem; 875 height: 1.25rem; 876 background-color: white; 877 border: 2px solid var(--pr-primary); 878 border-radius: 50%; 879 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 880 cursor: grab; 881 position: absolute; 882 top: 50%; 883 margin-top: -0.625rem; 884 transform: translateX(-50%); 885 transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; 886 outline: none; 887 } 888 889 [data-pc-name="slider"] [data-pc-section="handle"]:hover, 890 .p-slider-handle:hover { 891 box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4); 892 transform: translateX(-50%) scale(1.1); 893 } 894 895 [data-pc-name="slider"] [data-pc-section="handle"]:focus, 896 .p-slider-handle:focus { 897 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); 898 } 899 900 [data-pc-name="slider"] [data-pc-section="handle"]:active, 901 .p-slider-handle:active { 902 cursor: grabbing; 903 box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25); 904 transform: translateX(-50%) scale(1.15); 905 } 906 907 /* Vertical slider */ 908 .p-slider-vertical { 909 width: 0.5rem; 910 height: 100%; 911 } 912 913 .p-slider-vertical .p-slider-range { 914 width: 100%; 915 height: auto; 916 bottom: 0; 917 top: auto; 918 background: linear-gradient(180deg, var(--pr-primary-hover), var(--pr-primary)); 919 } 920 921 .p-slider-vertical .p-slider-handle { 922 top: auto; 923 left: 50%; 924 margin-left: -0.625rem; 925 margin-top: 0; 926 transform: translateY(50%); 927 } 928 929 .p-slider-vertical .p-slider-handle:hover, 930 .p-slider-vertical .p-slider-handle:active { 931 transform: translateY(50%) scale(1.1); 932 } 933 934 .p-slider.p-disabled { 935 opacity: 0.5; 936 cursor: not-allowed; 937 } 938 939 .p-slider.p-disabled .p-slider-handle { 940 cursor: not-allowed; 941 } 942 943 .p-slider.p-disabled .p-slider-handle:hover { 944 transform: translateX(-50%); 945 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 946 } 947 948 /* ======================================== 949 7. CHIPS 950 ======================================== */ 951 [data-pc-name="chips"], 952 .p-chips { 953 display: flex; 954 flex-wrap: wrap; 955 align-items: center; 956 gap: 0.375rem; 957 padding: 0.5rem; 958 min-height: 2.75rem; 959 background-color: var(--pr-bg); 960 border: 1px solid var(--pr-border); 961 border-radius: 0.5rem; 962 transition: border-color 0.15s ease, box-shadow 0.15s ease; 963 } 964 965 [data-pc-name="chips"]:focus-within, 966 .p-chips:focus-within { 967 border-color: var(--pr-primary); 968 box-shadow: 0 0 0 1px var(--pr-primary); 969 } 970 971 [data-pc-name="chips"] [data-pc-section="container"], 972 .p-chips-multiple-container { 973 display: flex; 974 flex-wrap: wrap; 975 align-items: center; 976 gap: 0.375rem; 977 flex: 1; 978 list-style: none; 979 margin: 0; 980 padding: 0; 981 } 982 983 /* Chip tokens */ 984 [data-pc-section="token"], 985 .p-chips-token { 986 display: inline-flex; 987 align-items: center; 988 gap: 0.375rem; 989 padding: 0.25rem 0.625rem; 990 background-color: rgba(99, 102, 241, 0.2); 991 color: #a5b4fc; 992 border: 1px solid rgba(99, 102, 241, 0.3); 993 border-radius: 0.375rem; 994 font-family: var(--pr-font); 995 font-size: 0.8125rem; 996 font-weight: 500; 997 } 998 999 .light-mode [data-pc-section="token"], 1000 .light-mode .p-chips-token { 1001 background-color: rgba(99, 102, 241, 0.1); 1002 color: #4f46e5; 1003 } 1004 1005 [data-pc-section="removeicon"], 1006 .p-chips-token-icon { 1007 width: 0.875rem; 1008 height: 0.875rem; 1009 cursor: pointer; 1010 opacity: 0.7; 1011 transition: opacity 0.15s ease; 1012 } 1013 1014 [data-pc-section="removeicon"]:hover, 1015 .p-chips-token-icon:hover { 1016 opacity: 1; 1017 } 1018 1019 [data-pc-name="chips"] [data-pc-section="inputtoken"], 1020 .p-chips-input-token { 1021 flex: 1; 1022 display: flex; 1023 } 1024 1025 [data-pc-name="chips"] [data-pc-section="inputtoken"] input, 1026 [data-pc-name="chips"] input, 1027 .p-chips-input-token input { 1028 flex: 1; 1029 min-width: 100px; 1030 background-color: transparent; 1031 border: none; 1032 outline: none; 1033 color: var(--pr-text); 1034 font-family: var(--pr-font); 1035 font-size: 0.875rem; 1036 padding: 0.25rem; 1037 } 1038 1039 [data-pc-name="chips"] input::placeholder, 1040 .p-chips-input-token input::placeholder { 1041 color: var(--pr-text-muted); 1042 } 1043 1044 [data-pc-name="chips"][data-p-disabled="true"], 1045 .p-chips.p-disabled { 1046 opacity: 0.5;
1047 cursor: not-allowed; 1048 } 1049 1050 [data-pc-name="chips"][data-p-disabled="true"] [data-pc-section="removeicon"], 1051 .p-chips.p-disabled .p-chips-token-icon { 1052 display: none; 1053 } 1054 1055 /* ======================================== 1056 8. INPUTSWITCH 1057 ======================================== */ 1058 [data-pc-name="inputswitch"], 1059 .p-inputswitch { 1060 width: 2.75rem; 1061 height: 1.5rem; 1062 position: relative; 1063 display: inline-block; 1064 } 1065 1066 [data-pc-name="inputswitch"] [data-pc-section="input"], 1067 .p-inputswitch-input { 1068 appearance: none; 1069 position: absolute; 1070 top: 0; 1071 left: 0; 1072 width: 100%; 1073 height: 100%; 1074 margin: 0; 1075 padding: 0; 1076 opacity: 0; 1077 z-index: 1; 1078 cursor: pointer; 1079 border-radius: 9999px; 1080 } 1081 1082 [data-pc-name="inputswitch"] [data-pc-section="slider"], 1083 .p-inputswitch-slider { 1084 position: absolute; 1085 top: 0; 1086 left: 0; 1087 right: 0; 1088 bottom: 0; 1089 border-radius: 9999px; 1090 background-color: rgba(255, 255, 255, 0.15); 1091 border: 1px solid rgba(255, 255, 255, 0.1); 1092 transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; 1093 } 1094 1095 .light-mode [data-pc-name="inputswitch"] [data-pc-section="slider"], 1096 .light-mode .p-inputswitch-slider { 1097 background-color: #cbd5e1; 1098 border-color: #94a3b8; 1099 } 1100 1101 [data-pc-name="inputswitch"]:hover [data-pc-section="slider"], 1102 .p-inputswitch:hover .p-inputswitch-slider { 1103 border-color: rgba(255, 255, 255, 0.3); 1104 } 1105 1106 .light-mode [data-pc-name="inputswitch"]:hover [data-pc-section="slider"], 1107 .light-mode .p-inputswitch:hover .p-inputswitch-slider { 1108 border-color: #64748b; 1109 } 1110 1111 [data-pc-name="inputswitch"]:focus-within [data-pc-section="slider"], 1112 .p-inputswitch:focus-within .p-inputswitch-slider { 1113 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); 1114 } 1115 1116 [data-pc-name="inputswitch"] [data-pc-section="slider"]::before, 1117 .p-inputswitch-slider::before { 1118 content: ''; 1119 position: absolute; 1120 width: 1rem; 1121 height: 1rem; 1122 top: 50%; 1123 left: 0.25rem; 1124 margin-top: -0.5rem; 1125 background-color: white; 1126 border-radius: 50%; 1127 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 1128 transition: transform 0.2s ease, box-shadow 0.2s ease; 1129 } 1130 1131 [data-pc-name="inputswitch"][data-p-highlight="true"] [data-pc-section="slider"], 1132 .p-inputswitch.p-highlight .p-inputswitch-slider, 1133 .p-inputswitch[data-p-highlight="true"] .p-inputswitch-slider { 1134 background-color: var(--pr-primary); 1135 border-color: var(--pr-primary); 1136 } 1137 1138 [data-pc-name="inputswitch"][data-p-highlight="true"]:hover [data-pc-section="slider"], 1139 .p-inputswitch.p-highlight:hover .p-inputswitch-slider, 1140 .p-inputswitch[data-p-highlight="true"]:hover .p-inputswitch-slider { 1141 background-color: var(--pr-primary-hover); 1142 border-color: var(--pr-primary-hover); 1143 } 1144 1145 [data-pc-name="inputswitch"][data-p-highlight="true"] [data-pc-section="slider"]::before, 1146 .p-inputswitch.p-highlight .p-inputswitch-slider::before, 1147 .p-inputswitch[data-p-highlight="true"] .p-inputswitch-slider::before { 1148 transform: translateX(1.25rem); 1149 } 1150 1151 [data-pc-name="inputswitch"][data-p-disabled="true"] [data-pc-section="input"], 1152 .p-inputswitch.p-disabled .p-inputswitch-input { 1153 cursor: not-allowed; 1154 } 1155 1156 [data-pc-name="inputswitch"][data-p-disabled="true"] [data-pc-section="slider"], 1157 .p-inputswitch.p-disabled .p-inputswitch-slider { 1158 opacity: 0.5; 1159 } 1160 1161 [data-pc-name="inputswitch"][data-p-disabled="true"]:hover [data-pc-section="slider"], 1162 .p-inputswitch.p-disabled:hover .p-inputswitch-slider { 1163 border-color: rgba(255, 255, 255, 0.1); 1164 } 1165 1166 /* ======================================== 1167 9. CALENDAR / DATEPICKER 1168 ======================================== */ 1169 [data-pc-name="calendar"], 1170 .p-calendar { 1171 display: inline-flex; 1172 width: 100%; 1173 } 1174 1175 [data-pc-name="calendar"] [data-pc-name="inputtext"], 1176 .p-calendar .p-inputtext { 1177 flex: 1; 1178 } 1179 1180 /* Calendar panel - uses data-pc-section="panel" with day sections */ 1181 [data-pc-name="calendar"] ~ [data-pc-section="panel"],
1182 [data-pc-section="panel"]:has([data-pc-section="day"]), 1183 [data-pc-section="panel"]:has([data-pc-section="groupcontainer"]), 1184 .p-datepicker { 1185 background-color: #141414; /* Solid background for dark mode - Nebula Veil */ 1186 border: 1px solid var(--pr-border); 1187 border-radius: 0.5rem; 1188 box-shadow: var(--pr-panel-shadow); 1189 padding: 0.75rem; 1190 min-width: 280px; 1191 font-family: var(--pr-font); 1192 backdrop-filter: none; 1193 -webkit-backdrop-filter: none; 1194 z-index: 9999; 1195 } 1196 1197 /* Light mode datepicker panel */ 1198 .light-mode [data-pc-name="calendar"] ~ [data-pc-section="panel"], 1199 .light-mode [data-pc-section="panel"]:has([data-pc-section="day"]), 1200 .light-mode [data-pc-section="panel"]:has([data-pc-section="groupcontainer"]), 1201 .light-mode .p-datepicker { 1202 background-color: #ffffff; /* Solid white for light mode */ 1203 } 1204 1205 /* DatePicker overflow fix - when appendTo="self", allow panel to overflow scroll containers */ 1206 .datepicker-overflow-fix { 1207 position: relative; 1208 overflow: visible !important; 1209 } 1210 1211 /* Datepicker panel override class - ensures solid background and proper padding */ 1212 .datepicker-panel-override, 1213 .datepicker-panel-override[data-pc-section="panel"],
1214 [data-pc-section="panel"].datepicker-panel-override { 1215 background-color: #141414 !important; 1216 backdrop-filter: none !important; 1217 -webkit-backdrop-filter: none !important; 1218 opacity: 1 !important; 1219 position: absolute; 1220 z-index: 999999 !important; 1221 padding: 1rem !important; 1222 border-radius: 0.75rem !important; 1223 border: 1px solid rgba(255, 255, 255, 0.1) !important; 1224 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; 1225 min-width: 300px; 1226 } 1227 1228 /* Ensure all child elements also have solid backgrounds */ 1229 .datepicker-panel-override *, 1230 .datepicker-panel-override [data-pc-section="groupcontainer"], 1231 .datepicker-panel-override [data-pc-section="timepicker"] { 1232 background-color: inherit; 1233 } 1234 1235 .light-mode .datepicker-panel-override, 1236 .light-mode .datepicker-panel-override[data-pc-section="panel"], 1237 .light-mode [data-pc-section="panel"].datepicker-panel-override { 1238 background-color: #ffffff !important; 1239 border: 1px solid rgba(0, 0, 0, 0.1) !important; 1240 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important; 1241 } 1242 1243 [data-pc-section="header"], 1244 .p-datepicker-header { 1245 display: flex; 1246 align-items: center; 1247 justify-content: space-between; 1248 padding: 0.5rem 0; 1249 margin-bottom: 0.5rem; 1250 } 1251 1252 [data-pc-section="title"], 1253 .p-datepicker-title { 1254 display: flex; 1255 align-items: center; 1256 gap: 0.5rem; 1257 font-weight: 500; 1258 color: var(--pr-text); 1259 } 1260 1261 [data-pc-section="monthtitle"], 1262 [data-pc-section="yeartitle"], 1263 .p-datepicker-month, 1264 .p-datepicker-year { 1265 font-weight: 600; 1266 cursor: pointer; 1267 padding: 0.25rem 0.5rem; 1268 border-radius: 0.25rem; 1269 transition: background-color 0.15s ease; 1270 background: transparent; 1271 border: none; 1272 color: var(--pr-text); 1273 } 1274 1275 [data-pc-section="monthtitle"]:hover, 1276 [data-pc-section="yeartitle"]:hover, 1277 .p-datepicker-month:hover, 1278 .p-datepicker-year:hover { 1279 background-color: var(--pr-bg-hover); 1280 } 1281 1282 [data-pc-section="previousbutton"], 1283 [data-pc-section="nextbutton"], 1284 .p-datepicker-prev, 1285 .p-datepicker-next { 1286 background: transparent; 1287 border: none; 1288 cursor: pointer; 1289 padding: 0.5rem; 1290 border-radius: 0.375rem; 1291 display: flex; 1292 align-items: center; 1293 justify-content: center; 1294 color: var(--pr-text); 1295 transition: background-color 0.15s ease, color 0.15s ease; 1296 } 1297 1298 [data-pc-section="previousbutton"]:hover, 1299 [data-pc-section="nextbutton"]:hover, 1300 .p-datepicker-prev:hover, 1301 .p-datepicker-next:hover { 1302 background-color: var(--pr-bg-hover); 1303 color: var(--pr-primary); 1304 } 1305 1306 [data-pc-section="previousbutton"]:focus, 1307 [data-pc-section="nextbutton"]:focus, 1308 .p-datepicker-prev:focus, 1309 .p-datepicker-next:focus { 1310 outline: none; 1311 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); 1312 } 1313 1314 [data-pc-section="panel"]:has([data-pc-section="day"]) table, 1315 .p-datepicker table { 1316 width: 100%; 1317 border-collapse: collapse; 1318 } 1319 1320 [data-pc-section="tableheadercell"], 1321 [data-pc-section="weekday"], 1322 .p-datepicker th { 1323 padding: 0.5rem; 1324 text-align: center; 1325 font-weight: 500; 1326 font-size: 0.75rem; 1327 color: var(--pr-text-muted); 1328 } 1329 1330 [data-pc-section="day"], 1331 .p-datepicker td { 1332 padding: 0.125rem; 1333 text-align: center; 1334 } 1335 1336 [data-pc-section="daylabel"], 1337 .p-datepicker td > span { 1338 display: flex; 1339 align-items: center; 1340 justify-content: center; 1341 width: 2rem; 1342 height: 2rem; 1343 margin: 0 auto; 1344 border-radius: 0.375rem; 1345 cursor: pointer; 1346 font-size: 0.875rem; 1347 color: var(--pr-text); 1348 transition: all 0.15s ease; 1349 } 1350 1351 [data-pc-section="daylabel"]:hover, 1352 .p-datepicker td > span:hover { 1353 background-color: var(--pr-bg-hover); 1354 } 1355 1356 [data-pc-section="daylabel"]:focus, 1357 .p-datepicker td > span:focus { 1358 outline: none; 1359 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); 1360 } 1361 1362 [data-pc-section="day"][data-p-today="true"] [data-pc-section="daylabel"], 1363 .p-datepicker-today > span { 1364 background-color: rgba(99, 102, 241, 0.2); 1365 font-weight: 600; 1366 border: 1px solid rgba(99, 102, 241, 0.4); 1367 } 1368 1369 [data-pc-section="day"][data-p-highlight="true"] [data-pc-section="daylabel"], 1370 .p-datepicker td > span.p-highlight, 1371 .p-datepicker td.p-datepicker-today > span.p-highlight { 1372 background-color: var(--pr-primary); 1373 color: white; 1374 border-color: var(--pr-primary); 1375 } 1376 1377 /* âââ Range selection: in-range band âââââââââââââââââââââââââââââââââââ 1378 * The DatePicker wrapper tags each day cell (td) with a 1379 * data-range-pos attribute (start, end, middle, or single) when the 1380 * picker is in range mode. We use that to: 1381 * 1. Paint a translucent brand-color band across the day cell so the 1382 * span between endpoints reads as one continuous selection. 1383 * 2. Soften the in-range middle cells so they don't compete with the 1384 * solid start/end endpoints. 1385 * 3. Use ::before bridges to fill the gap between adjacent cells so 1386 * the band is visually unbroken across the grid. 1387 * 1388 * Note: PrimeReact in unstyled mode does NOT add the .p-datepicker 1389 * class to the panel, so we scope by attribute instead of class. 1390 */ 1391 td[data-range-pos] { 1392 position: relative; 1393 } 1394 1395 /* The connecting band â sits behind the day pill, full row height */ 1396 td[data-range-pos]::before { 1397 content: ''; 1398 position: absolute; 1399 top: 50%; 1400 left: 0; 1401 right: 0; 1402 height: 2rem; 1403 transform: translateY(-50%); 1404 background-color: rgba(99, 102, 241, 0.18); 1405 pointer-events: none; 1406 z-index: 0; 1407 } 1408 .light-mode td[data-range-pos]::before, 1409 [data-theme="light"] td[data-range-pos]::before { 1410 background-color: rgba(99, 102, 241, 0.16); 1411 } 1412 1413 /* Endpoints: cap the band on the outside edge with a half-pill of 1414 * transparency so the solid start/end pills sit cleanly inside the band */ 1415 td[data-range-pos="start"]::before { 1416 left: 50%; 1417 } 1418 td[data-range-pos="end"]::before { 1419 right: 50%; 1420 } 1421 td[data-range-pos="single"]::before { 1422 display: none; 1423 } 1424 1425 /* Keep the day pill above the band */ 1426 td[data-range-pos] > span { 1427 position: relative; 1428 z-index: 1; 1429 } 1430 1431 /* Middle cells: keep them transparent â the band behind is the cue */ 1432 td[data-range-pos="middle"] > span, 1433 td[data-range-pos="middle"] > span.p-highlight, 1434 td[data-range-pos="middle"] [data-pc-section="daylabel"][data-p-highlight="true"] { 1435 background-color: transparent; 1436 color: var(--pr-text); 1437 border-color: transparent; 1438 font-weight: 500; 1439 } 1440 1441 /* When today is a middle cell, don't let the today ring out-rank the band */ 1442 td[data-range-pos="middle"][data-p-today="true"] > span { 1443 background-color: transparent; 1444 border-color: rgba(99, 102, 241, 0.4); 1445 } 1446 1447 /* Endpoint pills: paint a solid primary fill on start + end so they 1448 * read as anchored bookends to the band. Without this, unstyled-mode 1449 * PrimeReact leaves the day span transparent (the original .p-datepicker 1450 * highlight rule requires a class that isn't present on the panel). */ 1451 td[data-range-pos="start"] > span, 1452 td[data-range-pos="end"] > span, 1453 td[data-range-pos="single"] > span { 1454 background-color: var(--pr-primary); 1455 color: white; 1456 border-color: var(--pr-primary); 1457 font-weight: 600; 1458 } 1459 1460 [data-pc-section="day"][data-p-othermonth="true"] [data-pc-section="daylabel"], 1461 .p-datepicker-other-month > span { 1462 opacity: 0.4; 1463 } 1464 1465 [data-pc-section="day"][data-p-othermonth="true"] [data-pc-section="daylabel"]:hover, 1466 .p-datepicker-other-month > span:hover { 1467 opacity: 0.6; 1468 } 1469 1470 /* Month/Year picker views */ 1471 .p-monthpicker, 1472 .p-yearpicker { 1473 padding: 0.5rem; 1474 } 1475 1476 .p-monthpicker-month, 1477 .p-yearpicker-year { 1478 padding: 0.5rem; 1479 border-radius: 0.375rem; 1480 cursor: pointer; 1481 transition: background-color 0.15s ease; 1482 text-align: center; 1483 } 1484 1485 .p-monthpicker-month:hover, 1486 .p-yearpicker-year:hover {
1487 background-color: var(--pr-bg-hover); 1488 } 1489 1490 .p-monthpicker-month.p-highlight, 1491 .p-yearpicker-year.p-highlight { 1492 background-color: var(--pr-primary); 1493 color: white; 1494 } 1495 1496 /* Calendar with icon trigger button - make it appear inside the input */ 1497 [data-pc-name="calendar"]:has([data-pc-name="button"]) { 1498 position: relative; 1499 } 1500 1501 [data-pc-name="calendar"]:has([data-pc-name="button"]) [data-pc-name="inputtext"] { 1502 padding-right: 2.5rem; 1503 } 1504 1505 [data-pc-name="calendar"] [data-pc-name="button"], 1506 .p-datepicker-trigger { 1507 position: absolute; 1508 right: 0; 1509 top: 0; 1510 bottom: 0; 1511 background: transparent; 1512 border: none; 1513 cursor: pointer; 1514 padding: 0 0.75rem; 1515 color: var(--pr-text-muted); 1516 display: flex; 1517 align-items: center; 1518 justify-content: center; 1519 transition: color 0.15s ease; 1520 } 1521 1522 [data-pc-name="calendar"] [data-pc-name="button"]:hover, 1523 .p-datepicker-trigger:hover { 1524 color: var(--pr-primary); 1525 } 1526 1527 /* Time picker */ 1528 [data-pc-section="timepicker"], 1529 .p-timepicker { 1530 display: flex; 1531 align-items: center; 1532 justify-content: center; 1533 gap: 0.5rem; 1534 padding: 0.75rem 0; 1535 border-top: 1px solid var(--pr-border); 1536 margin-top: 0.5rem; 1537 } 1538 1539 [data-pc-section="hourpicker"], 1540 [data-pc-section="minutepicker"], 1541 [data-pc-section="secondpicker"], 1542 [data-pc-section="ampmpicker"], 1543 .p-hour-picker, 1544 .p-minute-picker, 1545 .p-second-picker, 1546 .p-ampm-picker { 1547 display: flex; 1548 flex-direction: column; 1549 align-items: center; 1550 gap: 0.25rem; 1551 } 1552 1553 /* Time picker increment/decrement buttons */ 1554 [data-pc-section="incrementbutton"], 1555 [data-pc-section="decrementbutton"], 1556 .p-hour-picker button, 1557 .p-minute-picker button, 1558 .p-second-picker button, 1559 .p-ampm-picker button { 1560 background: transparent; 1561 border: none; 1562 cursor: pointer; 1563 padding: 0.25rem 0.5rem; 1564 border-radius: 0.25rem; 1565 color: var(--pr-text); 1566 display: flex; 1567 align-items: center; 1568 justify-content: center; 1569 } 1570 1571 [data-pc-section="incrementbutton"]:hover, 1572 [data-pc-section="decrementbutton"]:hover, 1573 .p-hour-picker button:hover, 1574 .p-minute-picker button:hover, 1575 .p-second-picker button:hover, 1576 .p-ampm-picker button:hover { 1577 background-color: var(--pr-bg-hover); 1578 } 1579 1580 /* Time values display */ 1581 [data-pc-section="hour"], 1582 [data-pc-section="minute"], 1583 [data-pc-section="second"] { 1584 font-size: 1.125rem; 1585 font-weight: 500; 1586 color: var(--pr-text); 1587 min-width: 2rem; 1588 text-align: center; 1589 } 1590 1591 /* AM/PM buttons */ 1592 [data-pc-section="ampm"] { 1593 background: transparent; 1594 border: 1px solid var(--pr-border); 1595 cursor: pointer; 1596 padding: 0.375rem 0.75rem; 1597 border-radius: 0.25rem; 1598 color: var(--pr-text); 1599 font-size: 0.875rem; 1600 font-weight: 500; 1601 transition: all 0.15s ease; 1602 } 1603 1604 [data-pc-section="ampm"]:hover { 1605 background-color: var(--pr-bg-hover); 1606 border-color: var(--pr-border-hover); 1607 } 1608 1609 [data-pc-section="ampm"][data-p-highlight="true"] { 1610 background-color: var(--pr-primary); 1611 border-color: var(--pr-primary); 1612 color: white; 1613 } 1614 1615 /* Time separator */ 1616 [data-pc-section="separator"], 1617 .p-separator { 1618 font-weight: 600; 1619 font-size: 1.125rem; 1620 color: var(--pr-text-muted); 1621 } 1622 1623 [data-pc-section="separatorcontainer"] { 1624 display: flex; 1625 align-items: center; 1626 padding: 0 0.25rem; 1627 } 1628 1629 /* Button Bar (Today / Clear buttons) */ 1630 [data-pc-section="buttonbar"], 1631 .p-datepicker-buttonbar { 1632 display: flex; 1633 justify-content: space-between; 1634 align-items: center; 1635 gap: 0.75rem; 1636 padding: 0.75rem 0 0 0; 1637 border-top: 1px solid var(--pr-border); 1638 margin-top: 0.75rem; 1639 } 1640 1641 /* Today and Clear buttons in button bar */ 1642 [data-pc-section="buttonbar"] button, 1643 [data-pc-section="todaybutton"], 1644 [data-pc-section="clearbutton"], 1645 .p-datepicker-buttonbar button, 1646 .p-datepicker-today-button, 1647 .p-datepicker-clear-button { 1648 flex: 1; 1649 padding: 0.625rem 1rem; 1650 background-color: var(--pr-bg); 1651 border: 1px solid var(--pr-border); 1652 border-radius: 0.375rem; 1653 font-family: var(--pr-font); 1654 font-size: 0.875rem; 1655 font-weight: 500; 1656 color: var(--pr-text); 1657 cursor: pointer; 1658 transition: all 0.15s ease; 1659 } 1660 1661 [data-pc-section="buttonbar"] button:hover, 1662 [data-pc-section="todaybutton"]:hover, 1663 [data-pc-section="clearbutton"]:hover, 1664 .p-datepicker-buttonbar button:hover, 1665 .p-datepicker-today-button:hover, 1666 .p-datepicker-clear-button:hover {
1667 background-color: var(--pr-bg-hover); 1668 border-color: var(--pr-border-hover); 1669 } 1670 1671 [data-pc-section="buttonbar"] button:focus, 1672 [data-pc-section="todaybutton"]:focus, 1673 [data-pc-section="clearbutton"]:focus, 1674 .p-datepicker-buttonbar button:focus, 1675 .p-datepicker-today-button:focus, 1676 .p-datepicker-clear-button:focus { 1677 outline: none; 1678 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); 1679 border-color: var(--pr-primary); 1680 } 1681 1682 /* Today button - primary styling */ 1683 [data-pc-section="todaybutton"], 1684 .p-datepicker-today-button { 1685 background-color: var(--pr-primary); 1686 border-color: var(--pr-primary); 1687 color: white; 1688 } 1689 1690 [data-pc-section="todaybutton"]:hover, 1691 .p-datepicker-today-button:hover { 1692 background-color: var(--pr-primary-hover); 1693 border-color: var(--pr-primary-hover); 1694 } 1695 1696 /* ======================================== 1697 10. AUTOCOMPLETE 1698 ======================================== */ 1699 [data-pc-name="autocomplete"], 1700 .p-autocomplete { 1701 display: inline-flex; 1702 width: 100%; 1703 position: relative; 1704 } 1705 1706 [data-pc-name="autocomplete"] [data-pc-name="inputtext"], 1707 .p-autocomplete-input { 1708 flex: 1; 1709 width: 100%; 1710 } 1711 1712 /* When the dropdown chevron is present, reserve right padding on the input 1713 so the absolutely-positioned chevron sits flush INSIDE the input edge. */ 1714 [data-pc-name="autocomplete"]:has([data-pc-name="button"]) [data-pc-name="inputtext"], 1715 [data-pc-name="autocomplete"]:has(.p-autocomplete-dropdown) [data-pc-name="inputtext"], 1716 .p-autocomplete-dd .p-autocomplete-input { 1717 padding-right: 2.5rem; 1718 } 1719 1720 /* PrimeReact renders its internal "searching" spinner whenever 1721 completeMethod fires â even for synchronous in-memory filters that 1722 return immediately. That causes a phantom spinner in idle state on 1723 static AutoComplete demos. Hide it by default; v2 wrappers that need 1724 a real async indicator can opt in with [data-loading="true"] on 1725 the root or with their own loading UI rendered outside PrimeReact. */ 1726 [data-pc-name="autocomplete"] [data-pc-section="loadingicon"], 1727 [data-pc-name="autocomplete"] .p-autocomplete-loader, 1728 .p-autocomplete > [data-pc-section="loadingicon"], 1729 .p-autocomplete > .p-autocomplete-loader { 1730 display: none; 1731 } 1732 1733 [data-pc-name="autocomplete"][data-loading="true"] [data-pc-section="loadingicon"], 1734 [data-pc-name="autocomplete"][data-loading="true"] .p-autocomplete-loader { 1735 display: block; 1736 position: absolute; 1737 right: 0.75rem; 1738 top: 50%; 1739 transform: translateY(-50%); 1740 color: var(--pr-text-muted); 1741 animation: pr-spin 1s linear infinite; 1742 pointer-events: none; 1743 } 1744 1745 /* When loading is shown, slide the chevron out of the way */ 1746 [data-pc-name="autocomplete"][data-loading="true"] [data-pc-name="button"], 1747 [data-pc-name="autocomplete"][data-loading="true"] .p-autocomplete-dropdown { 1748 display: none; 1749 } 1750 1751 /* Dropdown chevron button â render INSIDE the input's right edge, the 1752 same pattern Calendar uses for its trigger. Strip the default button 1753 chrome since the input itself owns the border. */ 1754 [data-pc-name="autocomplete"] [data-pc-name="button"], 1755 [data-pc-name="autocomplete"] .p-autocomplete-dropdown, 1756 .p-autocomplete-dropdown { 1757 position: absolute; 1758 right: 0; 1759 top: 0; 1760 bottom: 0; 1761 width: 2.25rem; 1762 background: transparent; 1763 border: none; 1764 border-radius: 0; 1765 cursor: pointer; 1766 padding: 0 0.625rem; 1767 color: var(--pr-text-muted); 1768 display: flex; 1769 align-items: center; 1770 justify-content: center; 1771 transition: color 0.15s ease; 1772 z-index: 1; 1773 } 1774 1775 [data-pc-name="autocomplete"] [data-pc-name="button"]:hover, 1776 [data-pc-name="autocomplete"] .p-autocomplete-dropdown:hover, 1777 .p-autocomplete-dropdown:hover { 1778 color: var(--pr-primary); 1779 } 1780 1781 [data-pc-name="autocomplete"] [data-pc-name="button"] svg, 1782 [data-pc-name="autocomplete"] .p-autocomplete-dropdown svg { 1783 width: 0.875rem; 1784 height: 0.875rem; 1785 } 1786 1787 [data-pc-name="autocomplete"] [data-pc-name="button"]:disabled, 1788 [data-pc-name="autocomplete"] .p-autocomplete-dropdown:disabled {
1789 cursor: not-allowed; 1790 opacity: 0.6; 1791 } 1792 1793 /* PrimeReact-specific spin animation for absolutely positioned spinners */ 1794 /* Named pr-spin to avoid conflicting with Tailwind's animate-spin */ 1795 @keyframes pr-spin { 1796 from { transform: translateY(-50%) rotate(0deg); } 1797 to { transform: translateY(-50%) rotate(360deg); } 1798 } 1799 1800 /* AutoComplete panel */ 1801 [data-pc-name="autocomplete"] ~ [data-pc-section="panel"], 1802 [data-pc-section="panel"]:has([data-pc-section="item"]:not([data-pc-section="checkboxcontainer"])), 1803 .p-autocomplete-panel { 1804 background-color: var(--pr-panel-bg); 1805 border: 1px solid var(--pr-border); 1806 border-radius: 0.5rem; 1807 box-shadow: var(--pr-panel-shadow); 1808 margin-top: 4px; 1809 overflow: hidden; 1810 z-index: 9999; 1811 } 1812 1813 [data-pc-section="panel"] [data-pc-section="wrapper"], 1814 .p-autocomplete-items-wrapper { 1815 max-height: 250px; 1816 overflow-y: auto; 1817 } 1818 1819 [data-pc-section="panel"] [data-pc-section="list"]:not(:has([data-pc-section="checkboxcontainer"])), 1820 .p-autocomplete-items { 1821 margin: 0; 1822 padding: 0.25rem; 1823 list-style: none; 1824 } 1825 1826 .p-autocomplete-item { 1827 padding: 0.5rem 0.75rem; 1828 border-radius: 0.375rem; 1829 margin: 2px 0; 1830 cursor: pointer; 1831 font-family: var(--pr-font); 1832 font-size: 0.875rem; 1833 color: var(--pr-text); 1834 transition: background-color 0.15s ease; 1835 } 1836 1837 .p-autocomplete-item:hover { 1838 background-color: var(--pr-bg-hover); 1839 } 1840 1841 .p-autocomplete-item.p-focus { 1842 background-color: var(--pr-bg-hover); 1843 } 1844 1845 .p-autocomplete-item.p-highlight { 1846 background-color: rgba(99, 102, 241, 0.15); 1847 color: #a5b4fc; 1848 } 1849 1850 .light-mode .p-autocomplete-item.p-highlight { 1851 color: #4f46e5; 1852 } 1853 1854 [data-pc-section="emptymessage"], 1855 .p-autocomplete-empty-message { 1856 padding: 0.75rem; 1857 text-align: center; 1858 color: var(--pr-text-muted); 1859 font-size: 0.875rem; 1860 } 1861 1862 /* Multiple mode chips */ 1863 [data-pc-name="autocomplete"] [data-pc-section="container"], 1864 .p-autocomplete-multiple-container { 1865 display: flex; 1866 flex-wrap: wrap; 1867 align-items: center; 1868 gap: 0.25rem; 1869 padding: 0.25rem 0.5rem; 1870 background-color: var(--pr-bg); 1871 border: 1px solid var(--pr-border); 1872 border-radius: 0.5rem; 1873 min-height: 2.75rem; 1874 cursor: text; 1875 transition: border-color 0.15s ease, box-shadow 0.15s ease; 1876 } 1877 1878 .p-autocomplete-multiple-container:focus-within { 1879 border-color: var(--pr-primary); 1880 box-shadow: 0 0 0 1px var(--pr-primary); 1881 } 1882 1883 .p-autocomplete-token { 1884 display: inline-flex; 1885 align-items: center; 1886 gap: 0.375rem; 1887 padding: 0.25rem 0.625rem; 1888 background-color: rgba(99, 102, 241, 0.2); 1889 color: #a5b4fc; 1890 border: 1px solid rgba(99, 102, 241, 0.3); 1891 border-radius: 0.375rem; 1892 font-size: 0.8125rem; 1893 font-weight: 500; 1894 } 1895 1896 .light-mode .p-autocomplete-token { 1897 background-color: rgba(99, 102, 241, 0.1); 1898 color: #4f46e5; 1899 } 1900 1901 .p-autocomplete-token-icon { 1902 cursor: pointer; 1903 opacity: 0.7; 1904 transition: opacity 0.15s ease; 1905 } 1906 1907 .p-autocomplete-token-icon:hover { 1908 opacity: 1; 1909 } 1910 1911 .p-autocomplete-input-token input { 1912 background: transparent; 1913 border: none; 1914 outline: none; 1915 color: var(--pr-text); 1916 font-family: var(--pr-font); 1917 font-size: 0.875rem; 1918 min-width: 100px; 1919 flex: 1; 1920 } 1921 1922 .p-autocomplete-input-token input::placeholder { 1923 color: var(--pr-text-muted); 1924 } 1925 1926 .p-autocomplete.p-disabled { 1927 opacity: 0.5; 1928 } 1929 1930 .p-autocomplete.p-disabled .p-autocomplete-multiple-container { 1931 cursor: not-allowed; 1932 } 1933 1934 /* ======================================== 1935 11. PASSWORD 1936 ======================================== */ 1937 /* Password component renders as IconField with input[type=password] */ 1938 [data-pc-name="password"], 1939 .p-password { 1940 display: inline-flex; 1941 position: relative; 1942 width: 100%; 1943 } 1944 1945 /* Password input styling - padding on RIGHT for the toggle icon */ 1946 input[type="password"], 1947 input[type="text"][data-pc-name="inputtext"]:has(+ [data-pc-section="showicon"]), 1948 input[type="text"][data-pc-name="inputtext"]:has(+ [data-pc-section="hideicon"]) { 1949 padding-right: 2.5rem !important; 1950 padding-left: 1rem !important; 1951 font-family: var(--pr-font) !important; 1952 letter-spacing: normal !important; 1953 } 1954 1955 /* IconField containing password input - position icon on RIGHT */
1956 [data-pc-name="iconfield"]:has(input[type="password"]) [data-pc-name="inputicon"], 1957 [data-pc-name="iconfield"]:has([data-pc-section="showicon"]) [data-pc-name="inputicon"], 1958 [data-pc-name="iconfield"]:has([data-pc-section="hideicon"]) [data-pc-name="inputicon"] { 1959 position: absolute !important; 1960 right: 0.75rem !important; 1961 left: auto !important; 1962 top: 50% !important; 1963 transform: translateY(-50%) !important; 1964 z-index: 2; 1965 pointer-events: auto; 1966 cursor: pointer; 1967 } 1968 1969 /* Toggle mask SVG icon - MUST have pointer-events for click to work */ 1970 [data-pc-section="showicon"], 1971 [data-pc-section="hideicon"] { 1972 color: var(--pr-text-muted); 1973 cursor: pointer; 1974 width: 1rem; 1975 height: 1rem; 1976 transition: color 0.15s ease; 1977 pointer-events: auto !important; /* Override the none from icon styling */ 1978 } 1979 1980 [data-pc-section="showicon"]:hover, 1981 [data-pc-section="hideicon"]:hover { 1982 color: var(--pr-primary); 1983 } 1984 1985 /* Password strength meter panel - rendered as portal at body level */ 1986 [data-pc-section="panel"],
1987 [data-pc-name="passwordpanel"], 1988 .p-password-panel { 1989 background-color: var(--pr-panel-bg); 1990 border: 1px solid var(--pr-border); 1991 border-radius: 0.5rem; 1992 box-shadow: var(--pr-panel-shadow); 1993 padding: 0.75rem; 1994 margin-top: 4px; 1995 min-width: 200px; 1996 font-family: var(--pr-font); 1997 } 1998 1999 /* Strength meter */ 2000 [data-pc-section="meter"], 2001 .p-password-meter { 2002 height: 6px; 2003 background-color: var(--pr-bg); 2004 border-radius: 3px; 2005 margin-bottom: 0.5rem; 2006 overflow: hidden; 2007 } 2008 2009 [data-pc-section="meterlabel"], 2010 .p-password-meter-label { 2011 height: 100%; 2012 border-radius: 3px; 2013 transition: width 0.3s ease, background-color 0.3s ease; 2014 /* Default red for weak */ 2015 background-color: var(--pr-error); 2016 } 2017 2018 /* Medium strength - yellow/warning color */ 2019 [data-pc-section="meterlabel"][style*="66"], 2020 [data-pc-section="meterlabel"][style*="50"] { 2021 background-color: var(--pr-warning); 2022 } 2023 2024 /* Strong - green/success color */ 2025 [data-pc-section="meterlabel"][style*="100"] { 2026 background-color: var(--pr-success); 2027 } 2028 2029 /* Strength info text */ 2030 [data-pc-section="info"], 2031 .p-password-info { 2032 font-size: 0.75rem; 2033 color: var(--pr-text-muted); 2034 text-align: center; 2035 } 2036 2037 .p-password.p-disabled { 2038 opacity: 0.5; 2039 } 2040 2041 .p-password.p-disabled .p-inputtext { 2042 cursor: not-allowed; 2043 } 2044 2045 .p-password.p-disabled .p-password-toggle-mask-icon, 2046 .p-password.p-disabled > svg { 2047 cursor: not-allowed; 2048 pointer-events: none; 2049 } 2050 2051 /* ======================================== 2052 12. PANEL (Toggleable/Collapsible) 2053 ======================================== */ 2054 [data-pc-name="panel"], 2055 .p-panel { 2056 background-color: var(--pr-bg); 2057 border: 1px solid var(--pr-border); 2058 border-radius: 0.5rem; 2059 overflow: hidden; 2060 transition: border-color 0.15s ease; 2061 } 2062 2063 [data-pc-name="panel"]:hover, 2064 .p-panel:hover { 2065 border-color: var(--pr-border-hover); 2066 } 2067 2068 /* Panel Header */ 2069 [data-pc-name="panel"] [data-pc-section="header"], 2070 .p-panel-header { 2071 display: flex; 2072 align-items: center; 2073 justify-content: space-between; 2074 padding: 0.875rem 1rem; 2075 background-color: transparent; 2076 font-family: var(--pr-font); 2077 font-weight: 500; 2078 color: var(--pr-text); 2079 cursor: pointer; 2080 transition: background-color 0.15s ease; 2081 } 2082 2083 [data-pc-name="panel"] [data-pc-section="header"]:hover, 2084 .p-panel-header:hover { 2085 background-color: var(--pr-bg-hover); 2086 } 2087 2088 /* Panel Title */ 2089 [data-pc-name="panel"] [data-pc-section="title"], 2090 .p-panel-title { 2091 font-weight: 500; 2092 font-size: 0.9375rem; 2093 color: var(--pr-text); 2094 } 2095 2096 /* Panel Toggle Icons Container */ 2097 [data-pc-name="panel"] [data-pc-section="icons"], 2098 .p-panel-icons { 2099 display: flex; 2100 align-items: center; 2101 gap: 0.5rem; 2102 } 2103 2104 /* Panel Toggler Button */ 2105 [data-pc-name="panel"] [data-pc-section="toggler"], 2106 .p-panel-toggler { 2107 display: flex; 2108 align-items: center; 2109 justify-content: center; 2110 width: 1.75rem; 2111 height: 1.75rem; 2112 background-color: transparent; 2113 border: none; 2114 border-radius: 0.375rem; 2115 cursor: pointer; 2116 color: var(--pr-text-muted); 2117 transition: background-color 0.15s ease, color 0.15s ease; 2118 } 2119 2120 [data-pc-name="panel"] [data-pc-section="toggler"]:hover, 2121 .p-panel-toggler:hover { 2122 background-color: var(--pr-bg-hover); 2123 color: var(--pr-primary); 2124 } 2125 2126 [data-pc-name="panel"] [data-pc-section="toggler"]:focus, 2127 .p-panel-toggler:focus { 2128 outline: none; 2129 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); 2130 } 2131 2132 /* Panel Toggle Icon */ 2133 [data-pc-name="panel"] [data-pc-section="togglericon"], 2134 .p-panel-toggler svg, 2135 .p-panel-toggler .pi { 2136 width: 0.875rem; 2137 height: 0.875rem; 2138 transition: transform 0.2s ease; 2139 } 2140 2141 /* Panel Content Wrapper - for animation */ 2142 [data-pc-name="panel"] [data-pc-section="toggleablecontent"], 2143 .p-toggleable-content { 2144 overflow: hidden; 2145 } 2146 2147 /* Panel Content */ 2148 [data-pc-name="panel"] [data-pc-section="content"], 2149 .p-panel-content { 2150 padding: 1rem; 2151 font-family: var(--pr-font); 2152 font-size: 0.875rem; 2153 color: var(--pr-text); 2154 border-top: 1px solid var(--pr-border); 2155 } 2156 2157 /* Panel Footer (if used) */ 2158 [data-pc-name="panel"] [data-pc-section="footer"], 2159 .p-panel-footer { 2160 padding: 0.75rem 1rem; 2161 border-top: 1px solid var(--pr-border); 2162 background-color: var(--pr-bg); 2163 } 2164
2165 /* Collapsed state - hide content border */ 2166 [data-pc-name="panel"][data-p-toggleable="true"][data-p-collapsed="true"] [data-pc-section="content"], 2167 .p-panel.p-panel-collapsed .p-panel-content { 2168 border-top: none; 2169 } 2170 2171 /* ======================================== 2172 13. TABVIEW (Tabs) 2173 ======================================== */ 2174 [data-pc-name="tabview"], 2175 .p-tabview { 2176 background-color: transparent; 2177 font-family: var(--pr-font); 2178 } 2179 2180 /* Tab Navigation Container */ 2181 [data-pc-name="tabview"] [data-pc-section="nav"], 2182 [data-pc-name="tabview"] [data-pc-section="navcontainer"], 2183 .p-tabview-nav-container { 2184 position: relative; 2185 } 2186 2187 /* Tab Navigation List */ 2188 [data-pc-name="tabview"] [data-pc-section="nav"], 2189 .p-tabview-nav { 2190 display: flex; 2191 margin: 0; 2192 padding: 0; 2193 list-style: none; 2194 border-bottom: 1px solid var(--pr-border); 2195 gap: 0; 2196 } 2197 2198 /* Tab Navigation Content (for scrollable) */ 2199 [data-pc-name="tabview"] [data-pc-section="navcontent"], 2200 .p-tabview-nav-content { 2201 overflow-x: auto; 2202 overflow-y: hidden; 2203 scroll-behavior: smooth; 2204 scrollbar-width: none; 2205 -ms-overflow-style: none; 2206 } 2207 2208 [data-pc-name="tabview"] [data-pc-section="navcontent"]::-webkit-scrollbar, 2209 .p-tabview-nav-content::-webkit-scrollbar {
2210 display: none; 2211 } 2212 2213 /* Individual Tab Header */ 2214 [data-pc-name="tabview"] [data-pc-section="header"], 2215 .p-tabview-nav li { 2216 margin-bottom: -1px; 2217 } 2218 2219 /* Tab Header Link/Button - inactive state */ 2220 [data-pc-name="tabview"] [data-pc-section="header"]:not([data-p-highlight="true"]) [data-pc-section="headeraction"], 2221 [data-pc-name="tabview"] li:not([data-p-highlight="true"]) a[data-pc-section="headeraction"], 2222 .p-tabview-nav li:not(.p-highlight) .p-tabview-nav-link { 2223 color: var(--pr-text-muted) !important; 2224 border-bottom-color: transparent !important; 2225 } 2226 2227 /* Tab Header Link/Button - base styles */ 2228 [data-pc-name="tabview"] [data-pc-section="headeraction"], 2229 .p-tabview-nav-link { 2230 display: flex; 2231 align-items: center; 2232 gap: 0.5rem; 2233 padding: 0.875rem 1.25rem; 2234 background-color: transparent; 2235 border: none; 2236 border-bottom: 2px solid transparent; 2237 font-family: var(--pr-font); 2238 font-size: 0.875rem; 2239 font-weight: 500; 2240 cursor: pointer; 2241 transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; 2242 white-space: nowrap; 2243 text-decoration: none; 2244 } 2245 2246 [data-pc-name="tabview"] [data-pc-section="headeraction"]:hover, 2247 .p-tabview-nav-link:hover { 2248 color: var(--pr-text); 2249 background-color: var(--pr-bg-hover); 2250 } 2251 2252 [data-pc-name="tabview"] [data-pc-section="headeraction"]:focus, 2253 .p-tabview-nav-link:focus { 2254 outline: none; 2255 box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.3); 2256 } 2257 2258 /* Active Tab - comprehensive selectors for PrimeReact unstyled mode */ 2259 [data-pc-section="header"][data-p-highlight="true"] [data-pc-section="headeraction"], 2260 [data-pc-section="header"][data-p-active="true"] [data-pc-section="headeraction"], 2261 [data-p-highlight="true"] [data-pc-section="headeraction"], 2262 [data-p-highlight="true"] > a, 2263 [data-p-highlight="true"] > button, 2264 li[data-p-highlight="true"] [data-pc-section="headeraction"], 2265 li[data-p-highlight="true"] a, 2266 li[data-p-highlight="true"] button, 2267 .p-tabview-nav li.p-highlight .p-tabview-nav-link, 2268 .p-tabview-nav li.p-tabview-selected .p-tabview-nav-link, 2269 .p-tabview-header.p-highlight a, 2270 .p-highlight [data-pc-section="headeraction"], 2271 .p-highlight > a, 2272 .p-highlight > button { 2273 color: var(--gt-primary-text) !important; 2274 border-bottom: 2px solid var(--gt-primary) !important; 2275 } 2276 2277 /* Active tab - target the anchor/button directly when parent has highlight */ 2278 [data-pc-name="tabview"] [data-p-highlight="true"] a, 2279 [data-pc-name="tabview"] [data-p-highlight="true"] button, 2280 [data-pc-name="tabview"] .p-highlight a, 2281 [data-pc-name="tabview"] .p-highlight button { 2282 color: var(--gt-primary-text) !important; 2283 border-bottom: 2px solid var(--gt-primary) !important; 2284 } 2285 2286 /* Active tab - target the header title text inside active tabs */ 2287 [data-p-highlight="true"] [data-pc-section="headertitle"], 2288 [data-p-highlight="true"] [data-pc-section="headeraction"] span, 2289 [data-p-highlight="true"] a span, 2290 [data-p-highlight="true"] button span, 2291 li[data-p-highlight="true"] span, 2292 .p-highlight span, 2293 .p-highlight [data-pc-section="headertitle"] { 2294 color: var(--gt-primary-text) !important; 2295 } 2296 2297 /* Ensure all descendants of active tab inherit color */ 2298 [data-p-highlight="true"] [data-pc-section="headeraction"] *, 2299 li[data-p-highlight="true"] a *, 2300 li[data-p-highlight="true"] button * { 2301 color: inherit !important; 2302 } 2303 2304 /* Ultra-specific active tab override - highest specificity */ 2305 [data-pc-name="tabview"] [data-pc-section="nav"] [data-pc-section="header"][data-p-highlight="true"] [data-pc-section="headeraction"], 2306 [data-pc-name="tabview"] [data-pc-section="nav"] li[data-p-highlight="true"] [data-pc-section="headeraction"], 2307 [data-pc-name="tabview"] ul li[data-p-highlight="true"] a, 2308 [data-pc-name="tabview"] ul li[data-p-highlight="true"] button { 2309 color: var(--gt-primary-text) !important; 2310 border-bottom: 2px solid var(--gt-primary) !important; 2311 } 2312 2313 /* Ultra-specific: text inside active tab */ 2314 [data-pc-name="tabview"] [data-pc-section="nav"] [data-p-highlight="true"] [data-pc-section="headertitle"], 2315 [data-pc-name="tabview"] [data-pc-section="nav"] li[data-p-highlight="true"] span { 2316 color: var(--gt-primary-text) !important; 2317 } 2318 2319 /* Disabled Tab */ 2320 [data-pc-name="tabview"] [data-pc-section="header"][data-p-disabled="true"] [data-pc-section="headeraction"], 2321 .p-tabview-nav li.p-disabled .p-tabview-nav-link { 2322 opacity: 0.5;
2323 cursor: not-allowed; 2324 pointer-events: none; 2325 } 2326 2327 /* Tab Header Title */ 2328 [data-pc-name="tabview"] [data-pc-section="headertitle"], 2329 .p-tabview-title { 2330 line-height: 1; 2331 } 2332 2333 /* Tab Close Button */ 2334 [data-pc-name="tabview"] [data-pc-section="closebutton"], 2335 .p-tabview-close { 2336 display: flex; 2337 align-items: center; 2338 justify-content: center; 2339 width: 1.25rem; 2340 height: 1.25rem; 2341 margin-left: 0.5rem; 2342 background-color: transparent; 2343 border: none; 2344 border-radius: 0.25rem; 2345 color: var(--pr-text-muted); 2346 cursor: pointer; 2347 transition: color 0.15s ease, background-color 0.15s ease; 2348 } 2349 2350 [data-pc-name="tabview"] [data-pc-section="closebutton"]:hover, 2351 .p-tabview-close:hover { 2352 color: #DC6B6B; 2353 background-color: rgba(220, 107, 107, 0.15); 2354 } 2355 2356 [data-pc-name="tabview"] [data-pc-section="closebutton"] svg, 2357 .p-tabview-close svg { 2358 width: 0.75rem; 2359 height: 0.75rem; 2360 } 2361 2362 /* Scroll Navigation Buttons */ 2363 [data-pc-name="tabview"] [data-pc-section="previousbutton"], 2364 [data-pc-name="tabview"] [data-pc-section="nextbutton"], 2365 .p-tabview-nav-prev, 2366 .p-tabview-nav-next { 2367 display: flex; 2368 align-items: center; 2369 justify-content: center; 2370 width: 2.5rem; 2371 background-color: var(--pr-bg); 2372 border: none; 2373 color: var(--pr-text-muted); 2374 cursor: pointer; 2375 flex-shrink: 0; 2376 transition: color 0.15s ease, background-color 0.15s ease; 2377 z-index: 2; 2378 } 2379 2380 [data-pc-name="tabview"] [data-pc-section="previousbutton"]:hover, 2381 [data-pc-name="tabview"] [data-pc-section="nextbutton"]:hover, 2382 .p-tabview-nav-prev:hover, 2383 .p-tabview-nav-next:hover { 2384 color: var(--pr-primary); 2385 background-color: var(--pr-bg-hover); 2386 } 2387 2388 [data-pc-name="tabview"] [data-pc-section="previousbutton"]:focus, 2389 [data-pc-name="tabview"] [data-pc-section="nextbutton"]:focus, 2390 .p-tabview-nav-prev:focus, 2391 .p-tabview-nav-next:focus { 2392 outline: none; 2393 box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.3); 2394 } 2395 2396 [data-pc-name="tabview"] [data-pc-section="previousbutton"] svg, 2397 [data-pc-name="tabview"] [data-pc-section="nextbutton"] svg, 2398 .p-tabview-nav-prev svg, 2399 .p-tabview-nav-next svg { 2400 width: 0.875rem; 2401 height: 0.875rem; 2402 } 2403 2404 /* Tab Panel Container */ 2405 [data-pc-name="tabview"] [data-pc-section="panelcontainer"], 2406 .p-tabview-panels { 2407 padding: 1.25rem 0; 2408 } 2409 2410 /* Individual Tab Panel */ 2411 [data-pc-name="tabview"] [data-pc-section="panel"],
2412 .p-tabview-panel { 2413 font-size: 0.875rem; 2414 color: var(--pr-text); 2415 } 2416 2417 /* Ink Bar (animated underline - optional enhancement) */ 2418 [data-pc-name="tabview"] [data-pc-section="inkbar"], 2419 .p-tabview-ink-bar { 2420 display: none; /* Using border-bottom on active tab instead */ 2421 } 2422`;e.s(["primeReactFixStyles",0,t])}]); 2423 2424//# debugId=2c5026ef-6041-913c-15af-a1b0aac1bdbe
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.