/* =========================================================
   DRAGGABLE MODALS - GLOBAL
   ========================================================= */

.draggable-modal .modal-dialog {
    position: fixed !important;
    margin: 0 !important;

    width: 440px !important;
    max-width: calc(100vw - 20px) !important;

    z-index: 9999 !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

#gamePlayerSheetsModal .modal-dialog {
    width: 1080px !important;
}

#gamePlayerSheetsModal .modal-body {
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
}

#gamePlayerSheetsModal .lineup-sheet-comment {
    white-space: pre-line;
    overflow-wrap: anywhere;
    min-height: 38px;
    padding: 8px 10px 10px;
    color: #2f3740;
    font-size: 12px;
    line-height: 1.45;
}

#gamePlayerSheetsModal .scene-reference {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent;
    color: var(--bs-link-color);
    text-decoration: underline;
    vertical-align: baseline;
}

#gamePlayerSheetsModal .scene-reference-unavailable {
    color: #adb5bd;
}

#teamsheetModal .tag-hitbox.unavailable-scene-reference,
#playersheetModal .tag-hitbox.unavailable-scene-reference {
    background: #fff;
    color: #adb5bd;
}

#gamePlayerSheetsModal .lineup-sheet-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #d9dee4;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}

#gamePlayerSheetsModal .lineup-sheet-card-header {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border-bottom: 1px solid #d9dee4;
    background: #fff;
}

#gamePlayerSheetsModal .lineup-sheet-card-header h6 {
    margin: 0;
    overflow: hidden;
    color: #27323d;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#gamePlayerSheetsModal .lineup-sheet-position {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
    color: #17212b;
    font-size: 12px;
    font-weight: 700;
}

#gamePlayerSheetsModal .lineup-sheet-image {
    display: block;
    width: 100%;
    aspect-ratio: 1.32;
    object-fit: contain;
    background: #fff;
}

.draggable-modal .modal-content {
    font-size: 11px !important;
    border-radius: 4px !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.draggable-modal .modal-header {
    display: flex !important;
    align-items: center !important;

    height: 34px !important;
    min-height: 34px !important;

    padding: 4px 8px !important;

    cursor: move !important;
    user-select: none;
}

.draggable-modal .modal-title {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
}


/* Close */

.draggable-modal .btn-close {
    width: 12px !important;
    height: 12px !important;

    padding: 4px !important;
    margin: 0 0 0 auto !important;
}


/* =========================================================
   BODY
   ========================================================= */

.draggable-modal .modal-body {
    padding: 6px 8px !important;
    margin: 0 !important;
}


/* =========================================================
   FORM
   ========================================================= */

.draggable-modal form {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CAKEPHP INPUT WRAPPER
   ========================================================= */

.draggable-modal .input {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.draggable-modal label,
.draggable-modal .form-label {
    display: block !important;

    margin: 0 0 1px 0 !important;
    padding: 0 !important;

    font-size: 10px !important;
    line-height: 12px !important;

    font-weight: 600 !important;

    color: #333 !important;
    background: transparent !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.draggable-modal input.form-control,
.draggable-modal select.form-select,
.draggable-modal input,
.draggable-modal select {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 26px !important;
    min-height: 26px !important;

    margin: 0 !important;

    padding: 2px 6px !important;

    font-size: 11px !important;
    line-height: 20px !important;

    color: #333 !important;
    background-color: #fff !important;

    border-radius: 3px !important;
}


/* Number fields */

.draggable-modal input[type="number"] {
    height: 26px !important;
    min-height: 26px !important;
}


/* Hidden fields */

.draggable-modal input[type="hidden"] {
    display: none !important;
}


/* =========================================================
   ROW / COLUMNS
   ========================================================= */

.draggable-modal .row {
    --bs-gutter-x: 6px !important;
    --bs-gutter-y: 3px !important;

    margin-right: -3px !important;
    margin-left: -3px !important;
}

.draggable-modal .row > * {
    padding-right: 3px !important;
    padding-left: 3px !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.draggable-modal .modal-footer {
    display: flex !important;
    align-items: center !important;

    min-height: 34px !important;

    padding: 4px 8px !important;
    margin: 0 !important;

    gap: 4px !important;

    color: #333 !important;
    background-color: #fff !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.draggable-modal .modal-footer .btn,
.draggable-modal button.btn {
    height: 25px !important;
    min-height: 25px !important;

    margin: 0 !important;

    padding: 2px 8px !important;

    font-size: 10px !important;
    line-height: 20px !important;

    border-radius: 3px !important;
}


/* =========================================================
   MODAL COLORS / VIDEO.JS FULLSCREEN
   ========================================================= */

.draggable-modal .modal-content,
.draggable-modal .modal-header,
.draggable-modal .modal-body,
.draggable-modal .modal-footer {
    color: #333 !important;
    background-color: #fff !important;
}

.draggable-modal .modal-title,
.draggable-modal label,
.draggable-modal .form-label {
    color: #333 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .draggable-modal .modal-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

}