/* JUGEM-BOARD Admin Pages POP + SVG UI v1 */

.sb-ui-admin-page,
.sb-af.sb-ui-admin-page{
    --sb-ui-navy:#17345f;
    --sb-ui-blue:#348eea;
    --sb-ui-pink:#ef4f87;
    --sb-ui-green:#2fb66d;
    --sb-ui-orange:#ff9d2a;
    --sb-ui-teal:#24b2a4;
    --sb-ui-purple:#8b63df;
    --sb-ui-red:#ef5564;
    --sb-ui-gold:#efa928;
    --sb-ui-gray:#64738f;
    --sb-ui-line:#e6edf6;
    max-width:1100px;
}

.sb-ui-admin-page .sb-card,
.sb-ui-admin-page .sb-form-box,
.sb-af.sb-ui-admin-page .sb-af-card{
    border:1px solid rgba(192,207,228,.75);
    border-radius:24px;
    box-shadow:0 12px 34px rgba(35,64,105,.09);
}

.sb-ui-admin-page .sb-card,
.sb-ui-admin-page .sb-form-box{
    background:
        radial-gradient(circle at 96% 4%, rgba(82,169,255,.06) 0 70px, transparent 71px),
        #fff;
}

/* page headers */
.sb-ui-admin-page .sb-na-head,
.sb-ui-admin-page .sb-rd-head,
.sb-ui-admin-page .sb-ca-head,
.sb-ui-admin-page .sb-sa-head,
.sb-ui-admin-page .sb-as-head,
.sb-ui-admin-page .sb-rs-head,
.sb-ui-admin-page .sb-wp-head,
.sb-af.sb-ui-admin-page .sb-af-head{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    padding:25px 28px;
    box-shadow:0 12px 28px rgba(37,69,110,.16);
}
.sb-ui-admin-page .sb-na-head::after,
.sb-ui-admin-page .sb-rd-head::after,
.sb-ui-admin-page .sb-ca-head::after,
.sb-ui-admin-page .sb-sa-head::after,
.sb-ui-admin-page .sb-as-head::after,
.sb-ui-admin-page .sb-rs-head::after,
.sb-ui-admin-page .sb-wp-head::after,
.sb-af.sb-ui-admin-page .sb-af-head::after{
    content:"";
    position:absolute;
    right:-35px;
    bottom:-65px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    pointer-events:none;
}
.sb-ui-admin-page .sb-na-head h2,
.sb-ui-admin-page .sb-rd-head h2,
.sb-ui-admin-page .sb-ca-head h2,
.sb-ui-admin-page .sb-sa-head h2,
.sb-ui-admin-page .sb-as-head h2,
.sb-ui-admin-page .sb-rs-head h2,
.sb-ui-admin-page .sb-wp-head h2,
.sb-af.sb-ui-admin-page .sb-af-head h2{
    font-size:24px;
    font-weight:900;
    letter-spacing:.02em;
}
.sb-ui-admin-page .sb-na-head p,
.sb-ui-admin-page .sb-rd-head p,
.sb-ui-admin-page .sb-ca-head p,
.sb-ui-admin-page .sb-sa-head p,
.sb-ui-admin-page .sb-as-head p,
.sb-ui-admin-page .sb-rs-head p,
.sb-ui-admin-page .sb-wp-head p,
.sb-af.sb-ui-admin-page .sb-af-head p{
    font-size:14px;
    font-weight:600;
}

/* inputs */
.sb-ui-admin-page input[type="text"],
.sb-ui-admin-page input[type="password"],
.sb-ui-admin-page input[type="email"],
.sb-ui-admin-page input[type="file"],
.sb-ui-admin-page textarea,
.sb-ui-admin-page select,
.sb-af.sb-ui-admin-page input[type="text"],
.sb-af.sb-ui-admin-page input[type="file"],
.sb-af.sb-ui-admin-page textarea{
    min-height:50px;
    border:1.5px solid #dce5f0;
    border-radius:14px;
    background:#fbfdff;
    font-size:16px;
    padding:13px 15px;
    box-sizing:border-box;
}
.sb-ui-admin-page textarea,
.sb-af.sb-ui-admin-page textarea{ min-height:170px; }
.sb-ui-admin-page input:focus,
.sb-ui-admin-page textarea:focus,
.sb-ui-admin-page select:focus,
.sb-af.sb-ui-admin-page input:focus,
.sb-af.sb-ui-admin-page textarea:focus{
    outline:none;
    border-color:#69aefa;
    box-shadow:0 0 0 4px rgba(52,142,234,.10);
    background:#fff;
}

/* SVG action buttons */
.sb-ui-admin-page .sb-ui-action,
.sb-af.sb-ui-admin-page .sb-ui-action{
    --sb-btn-bg:linear-gradient(135deg,#348eea,#2479d7);
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:50px;
    padding:0 20px;
    border:0 !important;
    border-radius:15px !important;
    background:var(--sb-btn-bg) !important;
    color:#fff !important;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none !important;
    box-shadow:0 7px 16px rgba(44,85,135,.20) !important;
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
    cursor:pointer;
    box-sizing:border-box;
}
.sb-ui-admin-page .sb-ui-action:hover,
.sb-af.sb-ui-admin-page .sb-ui-action:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 21px rgba(44,85,135,.25) !important;
    filter:saturate(1.05);
    opacity:1 !important;
}
.sb-ui-admin-page .sb-ui-action:active,
.sb-af.sb-ui-admin-page .sb-ui-action:active{ transform:translateY(0); }
.sb-ui-admin-page .sb-ui-action::before,
.sb-af.sb-ui-admin-page .sb-ui-action::before{
    content:"";
    flex:0 0 32px;
    width:32px;
    height:32px;
    border-radius:10px;
    background-color:rgba(255,255,255,.18);
    background-position:center;
    background-repeat:no-repeat;
    background-size:18px 18px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.sb-ui-admin-page .sb-ui-mini,
.sb-af.sb-ui-admin-page .sb-ui-mini{
    min-height:42px;
    padding:0 14px;
    border-radius:13px !important;
    font-size:14px;
    gap:7px;
}
.sb-ui-admin-page .sb-ui-mini::before,
.sb-af.sb-ui-admin-page .sb-ui-mini::before{
    flex-basis:26px; width:26px; height:26px; border-radius:8px; background-size:15px 15px;
}
.sb-ui-blue{--sb-btn-bg:linear-gradient(135deg,#419cf4,#2f7fe0)!important;}
.sb-ui-pink{--sb-btn-bg:linear-gradient(135deg,#f26497,#e64278)!important;}
.sb-ui-green{--sb-btn-bg:linear-gradient(135deg,#3bc678,#27a960)!important;}
.sb-ui-orange{--sb-btn-bg:linear-gradient(135deg,#ffad39,#f58a17)!important;}
.sb-ui-teal{--sb-btn-bg:linear-gradient(135deg,#31c3b6,#149e93)!important;}
.sb-ui-purple{--sb-btn-bg:linear-gradient(135deg,#9a73e7,#7a50cf)!important;}
.sb-ui-red{--sb-btn-bg:linear-gradient(135deg,#f56b75,#e64655)!important;}
.sb-ui-gold{--sb-btn-bg:linear-gradient(135deg,#f4bd43,#eaa020)!important;}
.sb-ui-gray{--sb-btn-bg:linear-gradient(135deg,#71809d,#586781)!important;}

.sb-ui-ic-back::before{background-image:url('../icons/admin-ui/back.svg');}
.sb-ui-ic-prev::before{background-image:url('../icons/admin-ui/prev.svg');}
.sb-ui-ic-next::before{background-image:url('../icons/admin-ui/next.svg');}
.sb-ui-ic-calendar::before{background-image:url('../icons/admin-ui/calendar.svg');}
.sb-ui-ic-plus::before{background-image:url('../icons/admin-ui/plus.svg');}
.sb-ui-ic-edit::before{background-image:url('../icons/admin-ui/edit.svg');}
.sb-ui-ic-delete::before{background-image:url('../icons/admin-ui/delete.svg');}
.sb-ui-ic-save::before{background-image:url('../icons/admin-ui/save.svg');}
.sb-ui-ic-send::before{background-image:url('../icons/admin-ui/send.svg');}
.sb-ui-ic-file::before{background-image:url('../icons/admin-ui/file.svg');}
.sb-ui-ic-reply::before{background-image:url('../icons/admin-ui/reply.svg');}
.sb-ui-ic-adduser::before{background-image:url('../icons/admin-ui/adduser.svg');}
.sb-ui-ic-download::before{background-image:url('../icons/admin-ui/download.svg');}
.sb-ui-ic-upload::before{background-image:url('../icons/admin-ui/upload.svg');}
.sb-ui-ic-restore::before{background-image:url('../icons/admin-ui/restore.svg');}
.sb-ui-ic-bell::before{background-image:url('../icons/admin-ui/bell.svg');}
.sb-ui-ic-check::before{background-image:url('../icons/admin-ui/check.svg');}
.sb-ui-ic-menu::before{background-image:url('../icons/admin-ui/menu.svg');}
.sb-ui-ic-csv::before{background-image:url('../icons/admin-ui/csv.svg');}

/* month navigation */
.sb-ui-admin-page .sb-read-month-nav,
.sb-ui-admin-page .sb-comment-month-nav{
    padding:14px;
    border-radius:18px;
    background:linear-gradient(135deg,#f7fbff,#fff);
    border:1px solid #e3edf7;
}
.sb-ui-admin-page .sb-read-current-month,
.sb-ui-admin-page .sb-comment-current-month{
    font-size:20px;
    font-weight:900;
    color:#21385d;
}

/* tables */
.sb-ui-admin-page .sb-table,
.sb-ui-admin-page .sb-notice-table{
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border:1px solid #e3ebf5;
    border-radius:16px;
    background:#fff;
}
.sb-ui-admin-page .sb-table th,
.sb-ui-admin-page .sb-notice-table th{
    background:#f3f8ff;
    color:#234a7b;
    font-weight:800;
}
.sb-ui-admin-page .sb-table tr:nth-child(even) td,
.sb-ui-admin-page .sb-notice-table tr:nth-child(even) td{ background:#fbfdff; }

/* details / read dashboard */
.sb-ui-admin-page .sb-details-summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 16px;
    border-radius:14px;
    background:#eef7ff;
    color:#2776c8;
    border:1px solid #d3e8fb;
    font-size:16px;
}
.sb-ui-admin-page .sb-details-summary::before{
    content:""; width:28px; height:28px; border-radius:9px;
    background:#3a92e8 url('../icons/admin-ui/check.svg') center/16px no-repeat;
}

/* comment cards */
.sb-ui-admin-page .sb-admin-comment-card{
    border-radius:20px;
    border:1px solid #f0dfca;
    box-shadow:0 9px 24px rgba(84,66,35,.07);
}
.sb-ui-admin-page .sb-admin-original-comment{border-radius:15px;background:#fffaf4;}
.sb-ui-admin-page .sb-comment-reply{border-radius:14px;}

/* settings tool cards */
.sb-ui-admin-page .sb-as-action{
    border-radius:20px;
    box-shadow:0 9px 22px rgba(36,64,100,.10);
    transition:transform .16s ease, box-shadow .16s ease;
}
.sb-ui-admin-page .sb-as-action:hover{transform:translateY(-3px);box-shadow:0 13px 26px rgba(36,64,100,.15);}

/* destructive warning */
.sb-ui-admin-page .sb-error{border-radius:16px;}
.sb-ui-admin-page .sb-success{border-radius:16px;}

/* avoid legacy button styles fighting the new UI */
.sb-ui-admin-page .sb-ui-action.sb-small-delete-button,
.sb-ui-admin-page .sb-ui-action.sb-danger{
    min-width:auto;
}

@media(max-width:700px){
    .sb-ui-admin-page,
    .sb-af.sb-ui-admin-page{ padding-left:12px; padding-right:12px; }
    .sb-ui-admin-page .sb-na-head,
    .sb-ui-admin-page .sb-rd-head,
    .sb-ui-admin-page .sb-ca-head,
    .sb-ui-admin-page .sb-sa-head,
    .sb-ui-admin-page .sb-as-head,
    .sb-ui-admin-page .sb-rs-head,
    .sb-ui-admin-page .sb-wp-head,
    .sb-af.sb-ui-admin-page .sb-af-head{
        padding:20px 18px;
        border-radius:20px;
    }
    .sb-ui-admin-page .sb-na-head h2,
    .sb-ui-admin-page .sb-rd-head h2,
    .sb-ui-admin-page .sb-ca-head h2,
    .sb-ui-admin-page .sb-sa-head h2,
    .sb-ui-admin-page .sb-as-head h2,
    .sb-ui-admin-page .sb-rs-head h2,
    .sb-ui-admin-page .sb-wp-head h2,
    .sb-af.sb-ui-admin-page .sb-af-head h2{font-size:21px;}
    .sb-ui-admin-page .sb-ui-action,
    .sb-af.sb-ui-admin-page .sb-ui-action{
        min-height:52px;
        font-size:16px;
    }
    .sb-ui-admin-page p > .sb-ui-action:only-child,
    .sb-af.sb-ui-admin-page .sb-af-links .sb-ui-action{ width:100%; }
    .sb-ui-admin-page .sb-shop-edit-buttons .sb-ui-action{ width:100%; }
    .sb-ui-admin-page .sb-admin-reply-button .sb-ui-action{ width:100% !important; }
    .sb-ui-admin-page .sb-comment-month-nav,
    .sb-ui-admin-page .sb-read-month-nav{ gap:8px; }
}