.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1000;

}


.modal.hidden{

    display:none;

}


/* overflow-y:auto used to live directly on this rounded box — a scrollbar
   inside an element with border-radius still clips the CONTENT correctly,
   but the scrollbar track itself is drawn as a flat rectangular strip that
   ignores the radius, so the top-right/bottom-right corners looked square
   the moment a modal was tall enough to actually scroll. Splitting the
   "rounded, clipping shell" (this) from the "thing that actually scrolls"
   (#modal-body, below) fixes that — the shell's own overflow:hidden clips
   everything, scrollbar included, to its rounded corners, and the inner
   element scrolling inside it never touches the edge. */
.modal-content{

    background:white;

    /* Scales with the window instead of a flat pixel cap — every :has()
       override below follows the same min(px, vw) pattern, each one just
       wider than it used to be, so a modal genuinely uses more of a large
       window rather than sitting at the same fixed size regardless of it. */
    width:min(600px, 92vw);

    max-height:90vh;

    border-radius:12px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

#modal-body{

    overflow-y:auto;

    /* A flex item defaults to min-height:auto, which refuses to shrink
       below its own content size — without this, overflow-y:auto here
       would never actually kick in inside the height-constrained flex
       column above. */
    min-height:0;

    padding:25px;

}

/* Sets the outer shell's width, not .confirm-modal's own — .modal-content
   is a fixed-width flex container regardless of how narrow its content
   happens to be, so a width on the inner div alone would just leave blank
   space around it rather than actually resizing the visible modal box.
   Kept narrower than the base default on purpose: a confirm dialog is a
   short message and two buttons, not a form — as wide as everything else
   here would just be empty space around a sentence. */
.modal-content:has(.confirm-modal){

    width:min(480px, 90vw);

}

.confirm-input-label{

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-top:12px;

    margin-bottom:6px;

}

.confirm-modal textarea{

    width:100%;

    padding:10px 12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:14px;

    font-family:inherit;

    resize:vertical;

}

.modal-content:has(.bulk-transition-modal){

    width:min(900px, 94vw);

}


.confirm-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}


.danger{

    background:#d32f2f;

    color:white;

}

.modal-hint{

    color:#6b7280;

    font-size:13px;

    margin-bottom:12px;

}

.modal-content:has(.user-create-modal){

    width:min(760px, 92vw);

}

.modal-content:has(.automation-picker){

    width:min(760px, 92vw);

}

.modal-content:has(.automation-modal){

    width:min(960px, 94vw);

}

.modal-content:has(.order-modal),
.modal-content:has(.product-modal){

    width:min(1100px, 94vw);

}

.modal-content:has(.reassign-department-modal){

    width:min(760px, 92vw);

}

.reassign-user-table select{

    width:100%;

    padding:6px 8px;

    font-size:13px;

}

.field-clickable{

    cursor:pointer;

}

.field-clickable:hover{

    background:#f5f7fb;

}

.field-clickable-hint{

    color:#9ca3af;

    font-size:16px;

}

.user-create-modal{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.user-create-modal label{

    font-size:13px;

    font-weight:600;

    color:#374151;

    margin-top:4px;

}

.user-create-modal input,
.user-create-modal select{

    width:100%;

    padding:12px 14px;

    font-size:15px;

    border:1px solid #ddd;

    border-radius:8px;

    box-sizing:border-box;

}

.modal-loading{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 0;

    color:#374151;

    font-size:14px;

}

.spinner{

    width:16px;

    height:16px;

    border:2px solid #ddd;

    border-top-color:var(--primary-color);

    border-radius:50%;

    animation:spin .7s linear infinite;

    flex-shrink:0;

}

@keyframes spin{

    to{ transform:rotate(360deg); }

}

.searchable-select{

    position:relative;

}

.searchable-select-search{

    width:100%;

    box-sizing:border-box;

}

.searchable-select-list{

    position:absolute;

    top:calc(100% + 4px);

    left:0;

    right:0;

    max-height:220px;

    overflow-y:auto;

    background:white;

    border:1px solid #ddd;

    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,.1);

    z-index:20;

}

.searchable-select-option{

    padding:8px 12px;

    font-size:14px;

    cursor:pointer;

}

.searchable-select-option:hover{

    background:#f3f4f6;

}

.searchable-select-option-sublabel{

    font-size:12px;

    color:#9ca3af;

    margin-top:2px;

}

.searchable-select-empty{

    padding:8px 12px;

    font-size:13px;

    color:#9ca3af;

}