/**
 * ColourSpace CI4 admin — shared classes (prefer these over inline styles).
 * Loaded after sb-admin-2.css so we can refine CI3 leftovers without editing the symlink.
 */

/* Layout */
.navbar-mb-0 {
    margin-bottom: 0;
}

/* Remove black focus / active outline on action links (Edit / Delete / icons) */
#wrapper a:focus,
#wrapper a:active,
#page-wrapper a:focus,
#page-wrapper a:active,
#page-wrapper label:focus,
#page-wrapper .fa a:focus,
#page-wrapper .fa a:active,
#page-wrapper .text-right a:focus,
#page-wrapper table a:focus,
#page-wrapper table a:active {
    outline: none !important;
    box-shadow: none !important;
}

#page-wrapper a::-moz-focus-inner {
    border: 0;
}

/* Artwork masonry grid (CI3 mesonary / AnimOnScroll) */
.grid li.profile-pic1 {
    min-height: 223px;
}

.grid li.profile-pic1 .media {
    min-height: 223px;
    position: relative;
}

.grid li.profile-pic1 .media > img.fs-gal {
    width: 100%;
    min-height: 180px;
    object-fit: cover;
    background: #ececec;
}

.paging-wrap {
    text-align: center;
}

/* Drag-and-drop listing rows */
.ui-sortable tr,
.ui-sortable-handle,
.ui-sortable-helper,
.ui-sortable tr:active {
    cursor: pointer;
}

.drag-drop-hint {
    font-size: 12px;
    color: #f00;
    margin-bottom: 0;
    padding-top: 15px;
}

/* Visibility (prefer class toggles from JS over style="") */
.is-hidden {
    display: none !important;
}

.is-hidden-soft {
    display: none;
}

.is-hidden-mt15 {
    display: none;
    margin-top: 15px;
}

/* Width helpers (table columns / buttons) */
.w-2p { width: 2%; }
.w-3p { width: 3%; }
.w-4p { width: 4%; }
.w-5p { width: 5%; }
.w-8p { width: 8%; }
.w-9p { width: 9%; }
.w-10p { width: 10%; }
.w-13p { width: 13%; }
.w-19p { width: 19%; }
.w-22p { width: 22%; }
.w-15p { width: 15%; }
.w-17p { width: 17%; }
.w-18p { width: 18%; }
.w-40p { width: 40%; }
.w-20p { width: 20%; }
.w-25p { width: 25%; }
.w-30p { width: 30%; }
.w-46p { width: 46%; }
.w-50p { width: 50%; }
.w-70 { width: 70px; }
.w-95 { width: 95px; }

/* Spacing / form tweaks */
.pad-t27 { padding-top: 27px; }
.pad-t35-l20 { padding-top: 35px; padding-left: 20px; }
.pad-15-important { padding: 15px !important; }
.select-pad-l5 { padding-left: 5px; }
.mgr-r5 { margin-right: 5px; }
.mgr-r10 { margin-right: 10px; }
.mgr-t30 { margin-top: 30px; }
.mgr-b0 { margin-bottom: 0; }

.filter-checkbox {
    margin-right: 0;
    margin-left: 0;
    vertical-align: middle;
}
.filter-checkbox-bottom {
    margin-right: 0;
    margin-left: 0;
    vertical-align: bottom;
}
.modal-checkbox {
    padding-top: 30px;
}
.del-status-hint {
    font-size: 12px;
    color: #f00;
}
.pad-l7 { padding-left: 7px; }
.artwork-abs-chk {
    position: absolute;
    left: 0;
    top: 0;
}
.w-80 { width: 80px; }
.mgr-b15 { margin-bottom: 15px; }
.va-text-bottom { vertical-align: text-bottom; }

/* Typography / colour */
.table-fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-16 { font-size: 16px; }
.fs-16-black { font-size: 16px; color: #000; }
.text-red { color: #f00 !important; }
.text-red-lg { font-size: 20px; color: #f00; }
.section-title-caps {
    color: #414042;
    text-transform: uppercase;
    font-size: 20px;
}

/* Media / uploads */
.max-w-380 { max-width: 380px; }
.relative-max-115 {
    position: relative;
    max-width: 115px;
}

.img-preview-circle {
    width: 110px;
    border-radius: 50px;
    height: 100px;
}

.img-preview-circle.is-hidden-soft {
    display: none;
}

.border-bg-white {
    border: 1px solid #fff;
    background-color: #fff;
}

.queue-hidden {
    height: 0;
    min-height: 0;
    display: none;
}

.artist-img-del {
    color: #ff0000;
    opacity: 0.62;
    padding: 0 3px;
    position: absolute;
    right: 0;
    top: -15px;
    cursor: pointer;
}

.artist-img-del.is-hidden-soft {
    display: none;
}

/* Artwork module (ported from CI3 inline styles) */
.pad-t5 { padding-top: 5px; }
.pad-t10 { padding-top: 10px; }
.pad-t30 { padding-top: 30px; }
.pad-r0 { padding-right: 0; }
.pad-x4 { padding-left: 4px; padding-right: 4px; }
.pad-15-15-0 { padding: 15px 15px 0; }
.mgr-b10 { margin-bottom: 10px; }
.mgr-b20 { margin-bottom: 20px; }
.mgr-t24 { margin-top: 24px; }
.fs-11 { font-size: 11px; }
.fs-14 { font-size: 14px; }
.w-118 { width: 118px; }
.w-150 { width: 150px; }
.w-200 { width: 200px; }
.w-135-imp { width: 135px !important; }
.w-190-imp { width: 190px !important; }
.w-140-ml10 { width: 140px !important; margin-left: 10px; }
.pos-rel-t0-l15 { position: relative; top: 0; left: 15px; }
.max-w-100 { max-width: 100%; }
.cursor-pointer { cursor: pointer; }
.royalty-icon-pending { color: #ef8e06; }
.royalty-icon-incomplete { color: #f00; }
.royalty-icon-complete { color: #2cf819 !important; }
.royalty-link-incomplete { color: #f00 !important; }
.modal-checkbox-pt20 { padding-top: 20px; }
.va-middle { vertical-align: middle; }
.table-fs-12 { font-size: 12px; }
.sold-icon-bar-pos { bottom: 80px; }
.ajax-page-link { padding: 10px 5px; }
.mb-10 { margin-bottom: 10px; }
.st-display-block { display:block; }
.st-margin-bottom-23px { margin-bottom:23px; }
.st-margin-bottom-80px { margin-bottom: 80px; }
.st-padding-5px-10px-margin-right-3px-line-height-30 {
    padding: 5px 10px;
    margin-right: 3px;
    line-height: 30px;
    background-color: var(--color-swatch);
}
.st-width-100 { width:100%; }
.st-width-115px-important { width:115px !important; }
.st-width-200px-important { width:200px !important; }
.st-width-200px-padding-left-4px-padding-right-4px { width:200px;padding-left: 4px;padding-right: 4px; }
.collection-images img { max-width: 70px; margin: 2px; }
.rotation-error-1 { border: 2px solid #f00; }
.rotation-error-2 { border: 3px solid #f0f; }
.rotation-error-3 { border: 3px solid #ffa500; }
.rotation-error-4 { border: 3px solid #a020f0; }
.rotation-error-5 { border: 3px solid #00f; }

.cs-woo-panel {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}