/* The AI-matching "Upload Files" side panel, per the Beacon side-panel mockup: gradient-washed header
   with the Beacon sparkle before the title, and Start Matching in the Beacon CTA treatment. ILSidePanel
   exposes no header or button hooks, so the panel is reached from outside the way the confirm dialog's
   icon is - anchored on the panel BODY's own class via :has(), which scopes these rules to exactly this
   panel. The class lives on AiMatchingUploadSidePanelBody.razor in this project, so the selector and the
   markup move together; both portals link this stylesheet from their host page. Retire the file together
   with the panel. */
.il-modal:has(.ai-matching-upload) .modal-header {
    /* Sampled from the mockup: pale blue into pale purple, fading to plain white well before the X. */
    background-image: linear-gradient(90deg, #eef2fc 0%, #f3eafa 37%, #ffffff 75%);
}

.il-modal:has(.ai-matching-upload) .modal-body {
    padding: 20px;
}

.il-modal:has(.ai-matching-upload) .side-panel-inner-container {
    padding: 0 !important;
}

.il-modal:has(.ai-matching-upload) .modal-title {
    display: inline-flex;
    align-items: center;
    /* Mockup: the sparkle box is 30px and the title starts 34px in, so the gap is the remaining 4. */
    gap: 4px;
    font-weight: 700;
}

/* The Beacon sparkle before the title: the BeaconSparkleIcon SVG itself, drawn as a background image
   so its two gradients and flat navy minis survive. A mask cannot render this mark, since a mask
   casts a single colour or gradient across every path, which is what left the earlier glyph
   off-brand. The SVG is copied from Web.Shared/Components/BeaconSparkleIcon.razor with fixed
   gradient ids; change them together. */
.il-modal:has(.ai-matching-upload) .modal-title::before {
    content: "";
    flex-shrink: 0;
    /* 30px per the mockup's header icon — the artwork carries its own padding inside the box, the same
       relative geometry BeaconSparkleIcon draws at its default 24. */
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M16.8013%2013.3348L13.5818%2012.2125C12.6264%2011.88%2011.8755%2011.1291%2011.543%2010.1737L10.4207%206.95426C10.3693%206.80797%2010.1624%206.80797%2010.1121%206.95426L8.98983%2010.1737C8.65725%2011.1291%207.9064%2011.88%206.95097%2012.2125L3.73154%2013.3348C3.58525%2013.3863%203.58525%2013.5931%203.73154%2013.6434L6.95097%2014.7657C7.9064%2015.0983%208.65725%2015.8491%208.98983%2016.8045L10.1121%2020.024C10.1635%2020.1703%2010.3704%2020.1703%2010.4207%2020.024L11.543%2016.8045C11.8755%2015.8491%2012.6264%2015.0983%2013.5818%2014.7657L16.8013%2013.6434C16.9475%2013.592%2016.9475%2013.3851%2016.8013%2013.3348Z'%20fill='url(%23bs-large)'/%3E%3Cpath%20d='M4.88761%207.82971L5.43961%208.02171C5.51275%208.04685%205.5699%208.10514%205.59618%208.17828L5.78818%208.73028C5.86704%208.95771%206.18818%208.95771%206.26818%208.73028L6.46018%208.17828C6.48533%208.10514%206.54361%208.04799%206.61676%208.02171L7.16875%207.82971C7.39618%207.75085%207.39618%207.42971%207.16875%207.34971L6.61676%207.15771C6.54361%207.13256%206.48647%207.07428%206.46018%207.00114L6.26818%206.44914C6.18933%206.22171%205.86818%206.22171%205.78818%206.44914L5.59618%207.00114C5.57104%207.07428%205.51275%207.13142%205.43961%207.15771L4.88761%207.34971C4.66018%207.42856%204.66018%207.74971%204.88761%207.82971Z'%20fill='%23000B27'/%3E%3Cpath%20d='M20.2248%207.28573L18.6591%206.74059C18.034%206.5223%2017.5426%206.03088%2017.3243%205.40573L16.7791%203.84002C16.7071%203.63316%2016.4146%203.63316%2016.3426%203.84002L15.7974%205.40573C15.5791%206.03088%2015.0877%206.5223%2014.4626%206.74059L12.8968%207.28573C12.69%207.35773%2012.69%207.6503%2012.8968%207.72345L14.4626%208.26859C15.0877%208.48688%2015.5791%208.9783%2015.7974%209.60345L16.3426%2011.1692C16.4146%2011.376%2016.7071%2011.376%2016.7803%2011.1692L17.3254%209.60345C17.5437%208.9783%2018.0351%208.48688%2018.6603%208.26859L20.226%207.72345C20.4328%207.65145%2020.4328%207.35888%2020.226%207.28573H20.2248Z'%20fill='url(%23bs-small)'/%3E%3Cpath%20d='M19.7119%2017.5154L18.9233%2017.24C18.4113%2017.0617%2018.0102%2016.6594%2017.8319%2016.1486L17.5565%2015.36C17.4616%2015.0891%2017.0799%2015.0891%2016.985%2015.36L16.7096%2016.1486C16.5313%2016.6606%2016.129%2017.0617%2015.6182%2017.24L14.8296%2017.5154C14.5588%2017.6091%2014.5588%2017.992%2014.8296%2018.0869L15.6182%2018.3623C16.1302%2018.5406%2016.5313%2018.9429%2016.7096%2019.4537L16.985%2020.2423C17.0788%2020.5131%2017.4616%2020.5131%2017.5565%2020.2423L17.8319%2019.4537C18.0102%2018.9417%2018.4125%2018.5406%2018.9233%2018.3623L19.7119%2018.0869C19.9828%2017.9931%2019.9828%2017.6103%2019.7119%2017.5154Z'%20fill='%23000B27'/%3E%3Cdefs%3E%3ClinearGradient%20id='bs-large'%20x1='3.62183'%20y1='13.4891'%20x2='16.9102'%20y2='13.5878'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23568FF6'/%3E%3Cstop%20offset='1'%20stop-color='%23791BC9'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='bs-small'%20x1='12.7417'%20y1='7.50459'%20x2='20.3807'%20y2='7.56133'%20gradientUnits='userSpaceOnUse'%3E%3Cstop%20stop-color='%23568FF6'/%3E%3Cstop%20offset='1'%20stop-color='%23791BC9'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Start Matching: the Beacon CTA fill (gradient under a 20% black overlay), not the default primary. */
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary {
    /* The library leaves the flex button on align-items: stretch, which centres the icon (a fixed-height
       span) but tops the bare text node; the mockup centres both. Its gap-1 utility is 4px under
       !important, where the mockup spaces icon and label 10px apart. */
    align-items: center;
    gap: 10px !important;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(106deg, #568ff6 0%, #791bc9 98%);
}

/* Hover and pressed deepen both layers per the Beacon button-states spec — the overlay to 40% black
   and the gradient's blue end to #256ff3. The library's own hover only moves background-color, which
   this background-image paints over, so the states have to live here. */
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary:hover:not(:disabled),
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary:active:not(:disabled) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        linear-gradient(106deg, #256ff3 0%, #791bc9 98%);
}

/* Pressed adds the pale Beacon ring around the button — a blue-to-purple gradient, which box-shadow
   cannot draw: an ::after frame 4px outside the bounds, its middle punched out by compositing the two
   mask layers, keeps the layout still where a real border would grow the button. box-shadow: none
   (!important) drops bootstrap's own focus ring, which otherwise glows underneath this one. */
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary:active:not(:disabled) {
    position: relative;
    box-shadow: none !important;
}

.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary:active:not(:disabled)::after {
    content: "";
    position: absolute;
    inset: -4px;
    /* The button's 8px radius plus the ring's own 4px, so the two curves stay concentric. */
    border-radius: 12px;
    padding: 4px;
    background: linear-gradient(90deg, #b6cffb 0%, #c28ff0 100%);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* Disabled and loading share one face in the design: the resting fill at 60% opacity. */
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary:disabled {
    opacity: 0.6;
}

/* Its glyph: swap the outline beacon mask for the solid sparkle so it fills white edge to edge. */
.il-modal:has(.ai-matching-upload) .modal-footer .btn-primary .beacon-icon {
    width: 18px;
    height: 18px;
    align-self: center;
    background-color: #fff;
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2018'%3E%3Cpath%20d%3D'M14.1903%2010.4199L10.7102%209.20674C9.67742%208.84724%208.86577%208.03559%208.50628%207.00281L7.29313%203.52274C7.23754%203.36461%207.01393%203.36461%206.95958%203.52274L5.74643%207.00281C5.38693%208.03559%204.57529%208.84724%203.5425%209.20674L0.0624299%2010.4199C-0.0956992%2010.4755%20-0.0956992%2010.6991%200.0624299%2010.7534L3.5425%2011.9666C4.57529%2012.3261%205.38693%2013.1377%205.74643%2014.1705L6.95958%2017.6506C7.01517%2017.8087%207.23877%2017.8087%207.29313%2017.6506L8.50628%2014.1705C8.86577%2013.1377%209.67742%2012.3261%2010.7102%2011.9666L14.1903%2010.7534C14.3484%2010.6978%2014.3484%2010.4742%2014.1903%2010.4199Z'%2F%3E%3Cpath%20d%3D'M1.30985%204.47149L1.90654%204.67904C1.98561%204.70621%202.04738%204.76922%202.07579%204.84828L2.28334%205.44497C2.36858%205.69082%202.71572%205.69082%202.8022%205.44497L3.00974%204.84828C3.03692%204.76922%203.09993%204.70745%203.17899%204.67904L3.77568%204.47149C4.02152%204.38625%204.02152%204.03911%203.77568%203.95263L3.17899%203.74509C3.09993%203.71791%203.03816%203.6549%203.00974%203.57584L2.8022%202.97915C2.71696%202.73331%202.36981%202.73331%202.28334%202.97915L2.07579%203.57584C2.04861%203.6549%201.98561%203.71667%201.90654%203.74509L1.30985%203.95263C1.06401%204.03787%201.06401%204.38502%201.30985%204.47149Z'%2F%3E%3Cpath%20d%3D'M17.8902%203.88246L16.1978%203.29319C15.522%203.05723%2014.9908%202.52601%2014.7548%201.85026L14.1656%200.157783C14.0877%20-0.0658212%2013.7715%20-0.0658212%2013.6936%200.157783L13.1044%201.85026C12.8684%202.52601%2012.3372%203.05723%2011.6614%203.29319L9.96896%203.88246C9.74535%203.96029%209.74535%204.27655%209.96896%204.35562L11.6614%204.94489C12.3372%205.18085%2012.8684%205.71207%2013.1044%206.38782L13.6936%208.0803C13.7715%208.3039%2014.0877%208.3039%2014.1668%208.0803L14.7561%206.38782C14.992%205.71207%2015.5232%205.18085%2016.199%204.94489L17.8915%204.35562C18.1151%204.27779%2018.1151%203.96153%2017.8915%203.88246H17.8902Z'%2F%3E%3Cpath%20d%3D'M17.3375%2014.94L16.4851%2014.6423C15.9316%2014.4495%2015.498%2014.0147%2015.3053%2013.4625L15.0075%2012.6101C14.905%2012.3173%2014.4924%2012.3173%2014.3898%2012.6101L14.0921%2013.4625C13.8994%2014.0159%2013.4645%2014.4495%2012.9123%2014.6423L12.0599%2014.94C11.7671%2015.0413%2011.7671%2015.4551%2012.0599%2015.5577L12.9123%2015.8554C13.4658%2016.0481%2013.8994%2016.483%2014.0921%2017.0352L14.3898%2017.8876C14.4911%2018.1804%2014.905%2018.1804%2015.0075%2017.8876L15.3053%2017.0352C15.498%2016.4818%2015.9328%2016.0481%2016.4851%2015.8554L17.3375%2015.5577C17.6303%2015.4564%2017.6303%2015.0425%2017.3375%2014.94Z'%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2018'%3E%3Cpath%20d%3D'M14.1903%2010.4199L10.7102%209.20674C9.67742%208.84724%208.86577%208.03559%208.50628%207.00281L7.29313%203.52274C7.23754%203.36461%207.01393%203.36461%206.95958%203.52274L5.74643%207.00281C5.38693%208.03559%204.57529%208.84724%203.5425%209.20674L0.0624299%2010.4199C-0.0956992%2010.4755%20-0.0956992%2010.6991%200.0624299%2010.7534L3.5425%2011.9666C4.57529%2012.3261%205.38693%2013.1377%205.74643%2014.1705L6.95958%2017.6506C7.01517%2017.8087%207.23877%2017.8087%207.29313%2017.6506L8.50628%2014.1705C8.86577%2013.1377%209.67742%2012.3261%2010.7102%2011.9666L14.1903%2010.7534C14.3484%2010.6978%2014.3484%2010.4742%2014.1903%2010.4199Z'%2F%3E%3Cpath%20d%3D'M1.30985%204.47149L1.90654%204.67904C1.98561%204.70621%202.04738%204.76922%202.07579%204.84828L2.28334%205.44497C2.36858%205.69082%202.71572%205.69082%202.8022%205.44497L3.00974%204.84828C3.03692%204.76922%203.09993%204.70745%203.17899%204.67904L3.77568%204.47149C4.02152%204.38625%204.02152%204.03911%203.77568%203.95263L3.17899%203.74509C3.09993%203.71791%203.03816%203.6549%203.00974%203.57584L2.8022%202.97915C2.71696%202.73331%202.36981%202.73331%202.28334%202.97915L2.07579%203.57584C2.04861%203.6549%201.98561%203.71667%201.90654%203.74509L1.30985%203.95263C1.06401%204.03787%201.06401%204.38502%201.30985%204.47149Z'%2F%3E%3Cpath%20d%3D'M17.8902%203.88246L16.1978%203.29319C15.522%203.05723%2014.9908%202.52601%2014.7548%201.85026L14.1656%200.157783C14.0877%20-0.0658212%2013.7715%20-0.0658212%2013.6936%200.157783L13.1044%201.85026C12.8684%202.52601%2012.3372%203.05723%2011.6614%203.29319L9.96896%203.88246C9.74535%203.96029%209.74535%204.27655%209.96896%204.35562L11.6614%204.94489C12.3372%205.18085%2012.8684%205.71207%2013.1044%206.38782L13.6936%208.0803C13.7715%208.3039%2014.0877%208.3039%2014.1668%208.0803L14.7561%206.38782C14.992%205.71207%2015.5232%205.18085%2016.199%204.94489L17.8915%204.35562C18.1151%204.27779%2018.1151%203.96153%2017.8915%203.88246H17.8902Z'%2F%3E%3Cpath%20d%3D'M17.3375%2014.94L16.4851%2014.6423C15.9316%2014.4495%2015.498%2014.0147%2015.3053%2013.4625L15.0075%2012.6101C14.905%2012.3173%2014.4924%2012.3173%2014.3898%2012.6101L14.0921%2013.4625C13.8994%2014.0159%2013.4645%2014.4495%2012.9123%2014.6423L12.0599%2014.94C11.7671%2015.0413%2011.7671%2015.4551%2012.0599%2015.5577L12.9123%2015.8554C13.4658%2016.0481%2013.8994%2016.483%2014.0921%2017.0352L14.3898%2017.8876C14.4911%2018.1804%2014.905%2018.1804%2015.0075%2017.8876L15.3053%2017.0352C15.498%2016.4818%2015.9328%2016.0481%2016.4851%2015.8554L17.3375%2015.5577C17.6303%2015.4564%2017.6303%2015.0425%2017.3375%2014.94Z'%2F%3E%3C%2Fsvg%3E");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Start Matching while the start round-trip is in flight — the design's loading face: the resting fill
   at 60% opacity with the sparkle swapped for the library's spinner. This button is the side panel's own
   markup, so ILProgressButton cannot be substituted into it; the state travels as the body's --starting
   class instead and :has() carries it here, the same route every other rule on this button takes.
   pointer-events backs up the handler's own re-entry guard. */
.il-modal:has(.ai-matching-upload--starting) .modal-footer .btn-primary {
    opacity: 0.6;
    pointer-events: none;
}

/* The library's spinner.svg glyph, inlined the way the sparkle above is; the spin keyframes are the
   library's own, global in its stylesheet. */
.il-modal:has(.ai-matching-upload--starting) .modal-footer .btn-primary .beacon-icon {
    mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2019%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M18.2281%2015.6832C17.3394%2016.9698%2016.1614%2018.0301%2014.7887%2018.7789C13.416%2019.5276%2011.8868%2019.9441%2010.324%2019.9948C8.76111%2020.0454%207.20817%2019.7289%205.78984%2019.0705C4.37151%2018.4122%203.12733%2017.4304%202.15722%2016.2041C1.18711%2014.9777%200.5181%2013.541%200.203926%2012.0092C-0.110247%2010.4774%20-0.0608311%208.89333%200.348206%207.38411C0.757244%205.87489%201.5145%204.48263%202.55917%203.31913C3.60383%202.15563%204.90679%201.25333%206.36339%200.684687L7.45437%203.47928C6.43475%203.87733%205.52268%204.50894%204.79142%205.32339C4.06015%206.13784%203.53007%207.11242%203.24374%208.16888C2.95742%209.22533%202.92283%2010.3342%203.14275%2011.4064C3.36267%2012.4787%203.83097%2013.4844%204.51005%2014.3429C5.18913%2015.2013%206.06006%2015.8885%207.05289%2016.3494C8.04572%2016.8102%209.13278%2017.0318%2010.2268%2016.9963C11.3208%2016.9609%2012.3912%2016.6694%2013.3521%2016.1452C14.313%2015.621%2015.1376%2014.8789%2015.7597%2013.9782L18.2281%2015.6832Z'%20fill%3D'%232E3A59'%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2019%2020'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M18.2281%2015.6832C17.3394%2016.9698%2016.1614%2018.0301%2014.7887%2018.7789C13.416%2019.5276%2011.8868%2019.9441%2010.324%2019.9948C8.76111%2020.0454%207.20817%2019.7289%205.78984%2019.0705C4.37151%2018.4122%203.12733%2017.4304%202.15722%2016.2041C1.18711%2014.9777%200.5181%2013.541%200.203926%2012.0092C-0.110247%2010.4774%20-0.0608311%208.89333%200.348206%207.38411C0.757244%205.87489%201.5145%204.48263%202.55917%203.31913C3.60383%202.15563%204.90679%201.25333%206.36339%200.684687L7.45437%203.47928C6.43475%203.87733%205.52268%204.50894%204.79142%205.32339C4.06015%206.13784%203.53007%207.11242%203.24374%208.16888C2.95742%209.22533%202.92283%2010.3342%203.14275%2011.4064C3.36267%2012.4787%203.83097%2013.4844%204.51005%2014.3429C5.18913%2015.2013%206.06006%2015.8885%207.05289%2016.3494C8.04572%2016.8102%209.13278%2017.0318%2010.2268%2016.9963C11.3208%2016.9609%2012.3912%2016.6694%2013.3521%2016.1452C14.313%2015.621%2015.1376%2014.8789%2015.7597%2013.9782L18.2281%2015.6832Z'%20fill%3D'%232E3A59'%2F%3E%3C%2Fsvg%3E");
    mask-position: center;
    -webkit-mask-position: center;
    animation: spin 1.6s infinite linear;
}