/* Custom CSS for action circle buttons for creamy */

.circle-button{
    position: fixed;
    width: 55px;
    height: 55px;
    border-radius: 55.5px;
    color: white;
    padding: 22px;
    box-shadow: 1px 1px 3px #000000;
    z-index: 1000;
    right: 24px;
    /*bottom: 45px;*/
    bottom: 20px;
}

/* Task 56.1: getCircleButton() now emits a real <button> carrying .circle-button,
   replacing an <a> with malformed markup that could never take focus. These
   declarations undo the UA button chrome so the circle looks exactly as before,
   and centre the glyph properly -- the old 22px padding on a 55x55 border-box
   left an 11x11 content box and pushed the icon ~1.5px off centre. */
button.circle-button{
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    cursor: pointer;
}

/* !important is load-bearing: the vendor stylesheet app.css ships a global
   `:focus { outline: 0 !important; }` which outranks every rule here regardless
   of specificity. Same reason as css/whatsapp-admin-suite.css:1174. */
button.circle-button:focus-visible{
    outline: 3px solid #1a1a1a !important;
    outline-offset: 3px !important;
}

@supports not selector(:focus-visible){
    button.circle-button:focus{
        outline: 3px solid #1a1a1a !important;
        outline-offset: 3px !important;
    }
}

/* The skin :hover/:focus rules below lighten the circle but the glyph kept the
   base `color: white`, so the "+" fell below 4.5:1 on six of the seven skins and
   vanished completely on skin-black and skin-minimalist, whose hover colour is
   #fff -- 1:1, an invisible control. Measured headed on pj 2026-08-31. Only
   skin-purple's hover colour (#605ca8) is dark enough to keep a white glyph.

   This was always true on hover; task 56.1 makes the state keyboard-reachable
   too, so the glyph gets an ink that contrasts with each lightened background:
   #1a1a1a scores 18.1 on #fff, 14.7 on #00FC89, 10.0 on #50BBFA, 9.6 on
   #FFA413 and 6.2 on #FC5641. */
button.circle-button.skin-black:hover,      button.circle-button.skin-black:focus,
button.circle-button.skin-minimalist:hover, button.circle-button.skin-minimalist:focus,
button.circle-button.skin-blue:hover,       button.circle-button.skin-blue:focus,
button.circle-button.skin-green:hover,      button.circle-button.skin-green:focus,
button.circle-button.skin-red:hover,        button.circle-button.skin-red:focus,
button.circle-button.skin-yellow:hover,     button.circle-button.skin-yellow:focus{
    color: #1a1a1a;
}


/* Task 56.2: the items were <a> with no href (not focusable); they are now real
   <button> elements. Same !important reasoning as button.circle-button above --
   app.css's global `:focus { outline: 0 !important; }` outranks anything weaker. */
button.fab-div-item{
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.fab-div-item:focus-visible{
    outline: 3px solid #1a1a1a !important;
    outline-offset: 3px !important;
}

@supports not selector(:focus-visible){
    button.fab-div-item:focus{
        outline: 3px solid #1a1a1a !important;
        outline-offset: 3px !important;
    }
}

.fab-div-area{
    display:none;
    border-radius:auto;
    position: fixed;
    bottom: 45px;
    right: 24px;
    /* z-index: 999999; */
}

.fab-div-item{
    width: 55px;
    height: 55px;
    border-radius: 55.5px;
    color: white;
    background-color: #333;
    padding: 22px;
    box-shadow: 3px 3px 5px #888888;
    z-index: 5;
}

.fab-ul{
    min-height: 90px;
}

.li-style{
    list-style:none;
    margin: 0.000000001px 0;
}

/* Theme Colors */
/* Black */
.skin-black{
    background-color: #2a2a2a;
}

.skin-black:hover,
.skin-black:focus{
    background-color: #fff;
   /* cursor:pointer;*/
}

/* Blue */
.skin-blue{
    background-color: #3c8dbc;
}

.skin-blue:hover,
.skin-blue:focus{
    background-color: #50BBFA;
    /* cursor:pointer; */
}

/* Green */
.skin-green{
    background-color: #00a65a;
}

.skin-green:hover,
.skin-green:focus{
    background-color: #00FC89;
    /*cursor:pointer;*/
}

/* Minimalist */
.skin-minimalist{
    background-color: #ddd;
}

.skin-minimalist:hover,
.skin-minimalist:focus{
    background-color: #fff;
    cursor:pointer;
}

/* Purple */
.skin-purple{
    background-color: #8680EB;
}

.skin-purple:hover,
.skin-purple:focus{
    background-color: #605ca8;
    cursor:pointer;
}

/* Red */
.skin-red{
    background-color: #dd4b39;
}

.skin-red:hover,
.skin-red:focus{
    background-color: #FC5641;
    /*cursor:pointer;*/
}

/* Yellow */
.skin-yellow{
    background-color: #f39c12;
}

.skin-yellow:hover,
.skin-yellow:focus{
    background-color: #FFA413;
    /*cursor:pointer;*/
}

/* Task 56.3: at mobile the fixed circle (bottom:20px, height:55px) lands on
   whatever the page puts at the bottom right, and on any page with a paginated
   table that is the DataTables "Next" control -- measured on settingswhatsapp.php
   at 360, session 80: the circle covered ~33px of Next's width. Moving the
   button can't fix this (it's the same 55px circle at every width by design);
   the page needs to reserve space below its content instead.

   The button is position:fixed and its DOM placement is NOT consistent across
   the pages this helper serves -- on some it sits inside .content-wrapper,
   on settingswhatsapp.php it is a sibling OUTSIDE .wrapper entirely. :has()
   matches either shape without per-page markup changes, which is why this is
   fixable in one place: broad support (Chrome 105+, Firefox 121+, Safari 15.4+)
   comfortably covers this admin tool's userbase; on anything older the page
   keeps today's pre-existing overlap, not a new regression either way.

   90px = 55px circle + 20px bottom offset + 15px clearance, so the last
   pagination row always sits above the circle once fully scrolled.
   Task 72.7: the space is reserved on the content area, not on .wrapper, whose
   dark skin background showed through as a 90px band above the footer. */
@media (max-width:767px){
    body:has(.action-button-circle) .wrapper > :is(.content-wrapper, .right-side),
    body:has(.bottom-menu) .wrapper > :is(.content-wrapper, .right-side){
        padding-bottom:90px;
    }
}