/* TeachersWebV2 Admin Final UI System */
:root{
    --admin-ui-font:16px;
    --admin-ui-radius:12px;
    --admin-ui-radius-lg:16px;
    --admin-ui-border:#dfe7e4;
    --admin-ui-muted:#71817a;
    --admin-ui-text:#183f35;
    --admin-ui-primary:#266652;
    --admin-ui-primary-soft:#eef7f3;
    --admin-ui-danger:#a64242;
    --admin-ui-danger-soft:#fff1f1;
    --admin-ui-warning:#88691a;
    --admin-ui-warning-soft:#fff8e3;
    --admin-ui-success:#18714f;
    --admin-ui-success-soft:#edf8f2;
    --admin-ui-shadow:0 8px 24px rgba(23,63,53,.07);
}

/* ---- Global admin typography ---- */
body{
    font-size:var(--admin-ui-font);
    line-height:1.55;
}

.admin-shell,
.admin-page,
.admin-content,
.admin-layout,
.site-admin,
main{
    text-rendering:optimizeLegibility;
}

.admin-shell h1,
.admin-page h1,
.page-header h1,
.admin-head h1,
.admin-header h1,
main h1{
    color:var(--admin-ui-text);
    font-size:1.55rem!important;
    line-height:1.25!important;
    font-weight:900!important;
    letter-spacing:0!important;
}

.admin-shell h2,
.admin-page h2,
.admin-section-title,
.card-title{
    font-size:1.08rem!important;
    line-height:1.35!important;
    font-weight:850!important;
}

.admin-shell h3,
.admin-page h3{
    font-size:.98rem!important;
    font-weight:800!important;
}

.admin-shell p,
.admin-page p,
.admin-shell li,
.admin-page li{
    font-size:.92rem;
}

.admin-shell small,
.admin-page small{
    font-size:.78rem;
}

/* ---- Sidebar + topbar ---- */
.admin-sidebar,
.site-admin-sidebar{
    font-size:.94rem!important;
}

.admin-nav-item,
.site-admin-sidebar a,
.admin-sidebar a{
    min-height:43px;
    padding-top:9px!important;
    padding-bottom:9px!important;
    font-size:.92rem!important;
    line-height:1.35!important;
}

.admin-nav-icon,
.admin-nav-item svg{
    flex:none;
}

.admin-topbar,
.site-admin-topbar,
.admin-headerbar{
    min-height:62px;
}

.admin-topbar button,
.admin-topbar a,
.site-admin-topbar button,
.site-admin-topbar a{
    font-size:.88rem;
}

/* ---- Unified page headers ---- */
:where(.admin-page-header,.page-header,.admin-head,.admin-header,.admin-shell>header){
    margin-bottom:16px;
}

:where(.admin-page-header,.page-header,.admin-head,.admin-header){
    gap:14px;
}

/* ---- Inputs ---- */
.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.form-control,
.form-select),
.admin-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.form-control,
.form-select){
    min-height:44px;
    border-radius:10px!important;
    border-color:#d7e1dd;
    padding:9px 12px;
    font-size:.92rem!important;
    line-height:1.4;
}

.admin-shell textarea,
.admin-page textarea{
    min-height:110px;
}

.admin-shell label,
.admin-page label,
.form-label{
    display:inline-block;
    margin-bottom:5px;
    color:#405d54;
    font-size:.86rem!important;
    font-weight:750;
}

.admin-shell input:focus,
.admin-shell select:focus,
.admin-shell textarea:focus,
.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus{
    border-color:#7aa998!important;
    box-shadow:0 0 0 3px rgba(38,102,82,.10)!important;
    outline:none!important;
}

/* ---- Buttons ---- */
.admin-shell :where(button,.btn,[role="button"]),
.admin-page :where(button,.btn,[role="button"]){
    min-height:42px;
    border-radius:10px!important;
    padding:8px 13px;
    font-size:.88rem!important;
    font-weight:800!important;
    line-height:1.2;
}

.admin-shell :where(.btn-sm,button.btn-sm),
.admin-page :where(.btn-sm,button.btn-sm){
    min-height:36px;
    padding:6px 10px;
    font-size:.81rem!important;
}

.admin-shell :where(.btn-primary,.admin-primary-button),
.admin-page :where(.btn-primary,.admin-primary-button){
    background:var(--admin-ui-primary)!important;
    border-color:var(--admin-ui-primary)!important;
}

.admin-shell :where(.btn-danger,.danger,.delete-action,[data-delete]),
.admin-page :where(.btn-danger,.danger,.delete-action,[data-delete]){
    border-radius:10px!important;
}

/* ---- Cards / panels / filters ---- */
.admin-shell :where(.card,.admin-card,.panel,.filter-card,.filters-card,.admin-filter-card),
.admin-page :where(.card,.admin-card,.panel,.filter-card,.filters-card,.admin-filter-card){
    border-color:var(--admin-ui-border);
    border-radius:var(--admin-ui-radius-lg)!important;
}

.admin-shell :where(.filter-card,.filters-card,.admin-filter-card,.filters),
.admin-page :where(.filter-card,.filters-card,.admin-filter-card,.filters){
    padding:15px!important;
}

.admin-shell :where(.card-body,.admin-card-body),
.admin-page :where(.card-body,.admin-card-body){
    padding:16px;
}

/* ---- Tables / DataTables ---- */
.admin-shell table,
.admin-page table{
    width:100%;
    font-size:.88rem!important;
}

.admin-shell table th,
.admin-page table th{
    padding:11px 12px!important;
    color:#4d655d;
    font-size:.8rem!important;
    font-weight:850!important;
    line-height:1.35;
    white-space:normal;
}

.admin-shell table td,
.admin-page table td{
    padding:12px!important;
    font-size:.87rem!important;
    line-height:1.5;
    vertical-align:middle;
}

.admin-shell table tbody tr,
.admin-page table tbody tr{
    border-color:#edf1ef;
}

.dataTables_wrapper,
.dt-container{
    font-size:.87rem!important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-search input,
.dt-container .dt-length select{
    min-height:39px!important;
    font-size:.86rem!important;
    border-radius:9px!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button{
    min-width:36px;
    min-height:36px;
    padding:7px 9px!important;
    border-radius:8px!important;
    font-size:.81rem!important;
}

/* ---- Empty states ---- */
:where(.admin-empty,.empty-state,.empty-box,.no-data,.no-results,.dataTables_empty,.dt-empty){
    padding:28px 18px!important;
    color:#75867f!important;
    background:#f8faf9!important;
    border:1px dashed #d8e2de!important;
    border-radius:12px!important;
    text-align:center!important;
    font-size:.88rem!important;
    line-height:1.7!important;
}

/* ---- Validation ---- */
.field-validation-error,
.validation-summary-errors,
.text-danger{
    font-size:.81rem;
}

.validation-summary-errors{
    padding:11px 13px;
    border:1px solid #efcccc;
    border-radius:10px;
    background:#fff4f4;
}

/* ---- Toast layer ---- */
.admin-toast-stack{
    position:fixed;
    top:76px;
    left:18px;
    z-index:2147483000;
    display:grid;
    gap:8px;
    width:min(390px,calc(100vw - 28px));
    pointer-events:none;
}

.admin-toast{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:start;
    gap:10px;
    padding:12px 12px 12px 13px;
    border:1px solid var(--admin-ui-border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 16px 38px rgba(16,55,45,.16);
    color:#36574d;
    pointer-events:auto;
    animation:adminToastIn .18s ease-out;
}

.admin-toast.success{border-color:#c8e5d6;background:#f7fcf9}
.admin-toast.error{border-color:#efcdcd;background:#fff9f9}
.admin-toast.warning{border-color:#ead9aa;background:#fffdf6}
.admin-toast.info{border-color:#d6e3df;background:#fbfdfc}

.admin-toast-icon{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:8px;
    background:var(--admin-ui-primary-soft);
    color:var(--admin-ui-primary);
    font-size:.82rem;
    font-weight:950;
}

.admin-toast.error .admin-toast-icon{background:var(--admin-ui-danger-soft);color:var(--admin-ui-danger)}
.admin-toast.warning .admin-toast-icon{background:var(--admin-ui-warning-soft);color:var(--admin-ui-warning)}
.admin-toast.success .admin-toast-icon{background:var(--admin-ui-success-soft);color:var(--admin-ui-success)}

.admin-toast-copy{min-width:0}
.admin-toast-title{display:block;margin-bottom:2px;font-size:.84rem;font-weight:900;color:#284c41}
.admin-toast-message{display:block;font-size:.8rem;line-height:1.55;color:#60756d;overflow-wrap:anywhere}
.admin-toast-close{
    min-height:27px!important;
    width:27px;
    padding:0!important;
    border:0!important;
    border-radius:7px!important;
    background:transparent!important;
    color:#86938e!important;
    font-size:1rem!important;
    cursor:pointer;
}

.admin-toast::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:2px;
    background:#4f8e7a;
    transform-origin:right;
    animation:adminToastLife var(--toast-life,4.5s) linear forwards;
}
.admin-toast.error::after{background:#c45d5d}
.admin-toast.warning::after{background:#d1b675}
.admin-toast.is-leaving{animation:adminToastOut .16s ease-in forwards}

/* ---- Confirm dialog ---- */
.admin-confirm-backdrop{
    position:fixed;
    inset:0;
    z-index:2147483100;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(15,37,31,.52);
    backdrop-filter:blur(3px);
}

.admin-confirm-backdrop[hidden]{display:none!important}

.admin-confirm-dialog{
    width:min(450px,100%);
    overflow:hidden;
    border:1px solid #dfe7e4;
    border-radius:16px;
    background:#fff;
    box-shadow:0 25px 80px rgba(11,39,31,.30);
    animation:adminConfirmIn .16s ease-out;
}

.admin-confirm-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 17px 9px;
}

.admin-confirm-mark{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:11px;
    background:#fff0f0;
    color:#aa4444;
    font-size:1.05rem;
    font-weight:950;
}

.admin-confirm-head h3{
    margin:0!important;
    color:#234b40!important;
    font-size:1rem!important;
}

.admin-confirm-body{
    padding:3px 17px 16px;
    color:#687a73;
    font-size:.86rem;
    line-height:1.7;
}

.admin-confirm-actions{
    display:flex;
    justify-content:flex-end;
    gap:7px;
    padding:12px 17px 16px;
    border-top:1px solid #edf1ef;
    background:#fbfcfc;
}

.admin-confirm-actions button{
    min-height:40px!important;
    padding:8px 13px!important;
    border-radius:9px!important;
    font-size:.85rem!important;
    font-weight:850!important;
}

.admin-confirm-cancel{
    border:1px solid #d7e1dd!important;
    background:#fff!important;
    color:#526b62!important;
}

.admin-confirm-ok{
    border:1px solid #a84747!important;
    background:#a84747!important;
    color:#fff!important;
}

/* ---- Release badge ---- */
.admin-release-version{
    margin:12px 10px 8px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.72);
    text-align:center;
    font-size:.68rem;
    line-height:1.5;
    direction:ltr;
}

.admin-release-version strong{
    color:#fff;
    font-weight:850;
}

@keyframes adminToastIn{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
@keyframes adminToastOut{to{opacity:0;transform:translateY(-6px) scale(.985)}}
@keyframes adminToastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes adminConfirmIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:760px){
    :root{--admin-ui-font:15.5px}

    .admin-shell h1,
    .admin-page h1,
    .page-header h1,
    .admin-head h1,
    .admin-header h1,
    main h1{
        font-size:1.35rem!important;
    }

    .admin-shell table th,
    .admin-page table th{
        font-size:.77rem!important;
    }

    .admin-shell table td,
    .admin-page table td{
        font-size:.84rem!important;
    }

    .admin-toast-stack{
        top:68px;
        left:8px;
        width:calc(100vw - 16px);
    }
}

@media(prefers-reduced-motion:reduce){
    .admin-toast,
    .admin-toast::after,
    .admin-confirm-dialog{
        animation:none!important;
    }
}

/* =========================================================
   ADMIN POLISH A - FIX1
   Confirm/Toast/Sidebar Collapse/Admin Visual Normalizer
   ========================================================= */

body.teachers-site-admin{
    --teachers-sidebar-collapsed-width:78px;
}

/* ---- Guaranteed toast position (including older toast implementations) ---- */
body.teachers-site-admin .admin-toast-stack,
body.teachers-site-admin :is(
    .toast-container,
    #toast-container,
    .admin-toast-container,
    .app-toast-container,
    .toast-stack,
    .toasts-container,
    .notification-toast-container
){
    position:fixed!important;
    top:76px!important;
    left:18px!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2147483200!important;
    width:min(400px,calc(100vw - 30px))!important;
    max-width:min(400px,calc(100vw - 30px))!important;
    margin:0!important;
    pointer-events:none;
}

body.teachers-site-admin :is(
    .toast-container,
    #toast-container,
    .admin-toast-container,
    .app-toast-container,
    .toast-stack,
    .toasts-container,
    .notification-toast-container
) > *{
    pointer-events:auto;
}

/* Bootstrap utility classes must not push toast hosts behind the RTL sidebar. */
body.teachers-site-admin .position-fixed.bottom-0.end-0:has(.toast),
body.teachers-site-admin .position-fixed.bottom-0.start-0:has(.toast){
    top:76px!important;
    left:18px!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2147483200!important;
}

/* ---- Confirm overlay hardening ---- */
body.teachers-site-admin.admin-confirm-open{
    overflow:hidden;
}

body.teachers-site-admin .admin-confirm-backdrop{
    z-index:2147483400!important;
}

body.teachers-site-admin .admin-confirm-dialog{
    position:relative;
    z-index:1;
}

/* ---- Sidebar collapse ---- */
.teachers-admin-sidebar{
    position:relative;
    transition:width .2s ease,flex-basis .2s ease,min-width .2s ease;
}

.teachers-sidebar-toggle{
    position:absolute;
    top:16px;
    left:12px;
    z-index:20;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    min-height:34px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
    font:inherit;
    font-size:1rem!important;
    font-weight:900!important;
    line-height:1!important;
    cursor:pointer;
    transition:background .15s ease,transform .15s ease;
}

.teachers-sidebar-toggle:hover{
    background:rgba(255,255,255,.13)!important;
}

.teachers-admin-sidebar.is-collapsed{
    width:var(--teachers-sidebar-collapsed-width)!important;
    min-width:var(--teachers-sidebar-collapsed-width)!important;
    max-width:var(--teachers-sidebar-collapsed-width)!important;
    flex:0 0 var(--teachers-sidebar-collapsed-width)!important;
    overflow-x:hidden!important;
}

.teachers-admin-sidebar.is-collapsed .teachers-sidebar-toggle{
    left:50%;
    transform:translateX(-50%);
}

.teachers-admin-sidebar.is-collapsed :is(
    .sidebar-section-title,
    .admin-sidebar-section-title,
    .nav-section-title,
    .sidebar-label,
    .admin-release-version,
    .sidebar-footer-text,
    .brand-copy,
    .sidebar-brand-copy,
    .sidebar-subtitle
){
    display:none!important;
}

.teachers-admin-sidebar.is-collapsed :is(
    .admin-nav-item,
    nav a
){
    justify-content:center!important;
    gap:0!important;
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:0!important;
    white-space:nowrap!important;
}

.teachers-admin-sidebar.is-collapsed :is(
    .admin-nav-icon,
    .admin-nav-item svg,
    nav a svg
){
    display:inline-grid!important;
    flex:none!important;
    margin:0!important;
    font-size:1rem!important;
}

.teachers-admin-sidebar.is-collapsed :is(
    .admin-nav-item span:not(.admin-nav-icon),
    nav a span:not(.admin-nav-icon)
){
    display:none!important;
}

.teachers-admin-sidebar.is-collapsed :is(
    .sidebar-brand,
    .admin-sidebar-brand,
    .brand,
    .logo-wrap,
    .sidebar-header
){
    justify-content:center!important;
    padding-left:7px!important;
    padding-right:7px!important;
}

/* Common fixed/margin layouts. */
body.teachers-site-admin.teachers-sidebar-collapsed.teachers-sidebar-right
:is(.admin-main,.admin-content,.site-admin-content,.admin-page-content){
    margin-right:var(--teachers-sidebar-collapsed-width)!important;
}

body.teachers-site-admin.teachers-sidebar-collapsed.teachers-sidebar-left
:is(.admin-main,.admin-content,.site-admin-content,.admin-page-content){
    margin-left:var(--teachers-sidebar-collapsed-width)!important;
}

/* ---- Unified visual language across every /site-admin page ---- */
body.teachers-site-admin .teachers-admin-main{
    min-width:0;
}

body.teachers-site-admin .teachers-admin-main h1:first-of-type{
    color:#173f35!important;
    font-size:1.52rem!important;
    line-height:1.25!important;
    font-weight:950!important;
    letter-spacing:0!important;
}

body.teachers-site-admin .teachers-admin-main h1:first-of-type + p{
    color:#71817a!important;
    font-size:.9rem!important;
    line-height:1.7!important;
}

body.teachers-site-admin .teachers-admin-main :is(
    .page-header,
    .admin-page-header,
    .admin-head,
    .admin-header
){
    margin-bottom:17px!important;
    padding-bottom:13px!important;
    border-bottom:1px solid #e6ece9;
}

body.teachers-site-admin .teachers-admin-main :is(
    .card,
    .admin-card,
    .panel,
    .box,
    .filter-card,
    .filters-card,
    .admin-filter-card
){
    border:1px solid #dfe7e4!important;
    border-radius:15px!important;
    box-shadow:0 7px 22px rgba(23,63,53,.055);
}

body.teachers-site-admin .teachers-admin-main table{
    border-collapse:separate;
    border-spacing:0;
}

body.teachers-site-admin .teachers-admin-main table thead th{
    background:#f6f9f8!important;
    color:#486159!important;
}

body.teachers-site-admin .teachers-admin-main table tbody tr:hover td{
    background:#fbfdfc;
}

/* ---- /site-admin/access: force it onto the same system ---- */
body.admin-access-page .teachers-admin-main{
    width:100%;
    max-width:1320px;
    margin-inline:auto;
}

body.admin-access-page .teachers-admin-main :is(
    .access-page,
    .access-shell,
    .access-container,
    .roles-page,
    .permissions-page,
    .users-page
){
    width:100%!important;
    max-width:none!important;
}

body.admin-access-page .teachers-admin-main h1{
    color:#173f35!important;
    font-size:1.52rem!important;
    font-weight:950!important;
    line-height:1.25!important;
}

body.admin-access-page .teachers-admin-main :is(
    .access-card,
    .role-card,
    .user-card,
    .permission-card,
    .card,
    .panel
){
    border:1px solid #dfe7e4!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 7px 22px rgba(23,63,53,.055)!important;
}

body.admin-access-page .teachers-admin-main :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
){
    min-height:44px!important;
    border-radius:10px!important;
    font-size:.92rem!important;
}

body.admin-access-page .teachers-admin-main :is(button,.btn){
    min-height:42px!important;
    border-radius:10px!important;
    font-size:.88rem!important;
    font-weight:850!important;
}

body.admin-access-page .teachers-admin-main table th{
    padding:11px 12px!important;
    font-size:.8rem!important;
}

body.admin-access-page .teachers-admin-main table td{
    padding:12px!important;
    font-size:.87rem!important;
}

/* Fix release badge typography */
.admin-release-version{
    direction:ltr!important;
    unicode-bidi:isolate;
}

@media(max-width:900px){
    /* On tablet/mobile keep the app's existing drawer behavior.
       Collapse is a desktop feature only. */
    .teachers-sidebar-toggle{
        display:none!important;
    }

    .teachers-admin-sidebar.is-collapsed{
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        flex-basis:auto!important;
    }

    body.teachers-site-admin.teachers-sidebar-collapsed
    :is(.admin-main,.admin-content,.site-admin-content,.admin-page-content){
        margin-left:0!important;
        margin-right:0!important;
    }
}

@media(max-width:760px){
    body.teachers-site-admin .admin-toast-stack,
    body.teachers-site-admin :is(
        .toast-container,
        #toast-container,
        .admin-toast-container,
        .app-toast-container,
        .toast-stack,
        .toasts-container,
        .notification-toast-container
    ){
        top:68px!important;
        left:8px!important;
        width:calc(100vw - 16px)!important;
        max-width:calc(100vw - 16px)!important;
    }
}


/* =========================================================
   ADMIN POLISH A - FIX2
   Restore layout + Accordion sidebar + Unified Page Headers
   ========================================================= */

/* The previous desktop-width collapse changed the sidebar to position:relative.
   FIX2 does NOT add teachers-admin-sidebar anymore, and these overrides neutralize
   any stale class that might survive in cached markup. */
body.teachers-site-admin .teachers-admin-sidebar{
    position:var(--teachers-sidebar-original-position, revert)!important;
    width:auto;
    max-width:none;
}

body.teachers-site-admin .teachers-sidebar-toggle{
    display:none!important;
}

body.teachers-site-admin.teachers-sidebar-collapsed
:is(.admin-main,.admin-content,.site-admin-content,.admin-page-content){
    margin-left:revert!important;
    margin-right:revert!important;
}

/* ---- Sidebar accordion ---- */
body.teachers-site-admin .teachers-menu-group{
    margin:2px 0 7px;
}

body.teachers-site-admin .teachers-menu-group-toggle{
    position:relative;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-height:38px;
    padding:8px 10px!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:rgba(220,236,232,.68)!important;
    font:inherit;
    font-size:.76rem!important;
    font-weight:850!important;
    line-height:1.3;
    text-align:right;
    cursor:pointer;
    transition:background .16s ease,color .16s ease;
}

body.teachers-site-admin .teachers-menu-group-toggle:hover,
body.teachers-site-admin .teachers-menu-group.is-open>.teachers-menu-group-toggle{
    background:rgba(255,255,255,.055)!important;
    color:#fff!important;
}

body.teachers-site-admin .teachers-menu-group-toggle .teachers-menu-chevron{
    display:grid;
    place-items:center;
    flex:none;
    width:22px;
    height:22px;
    border-radius:6px;
    color:rgba(220,236,232,.72);
    font-size:.72rem;
    transition:transform .18s ease;
}

body.teachers-site-admin .teachers-menu-group.is-open
>.teachers-menu-group-toggle
.teachers-menu-chevron{
    transform:rotate(90deg);
}

body.teachers-site-admin .teachers-menu-group-items{
    display:grid;
    grid-template-rows:0fr;
    opacity:.2;
    transition:grid-template-rows .2s ease,opacity .18s ease;
}

body.teachers-site-admin .teachers-menu-group-items-inner{
    min-height:0;
    overflow:hidden;
}

body.teachers-site-admin .teachers-menu-group.is-open
>.teachers-menu-group-items{
    grid-template-rows:1fr;
    opacity:1;
}

body.teachers-site-admin .teachers-menu-group-items-inner
:is(a,.admin-nav-item){
    margin-top:2px;
}

body.teachers-site-admin .teachers-menu-group-items-inner
:is(a,.admin-nav-item).active,
body.teachers-site-admin .teachers-menu-group-items-inner
:is(a,.admin-nav-item)[aria-current="page"]{
    box-shadow:inset -3px 0 0 #d1b675;
}

/* If JS uses sibling mode because the existing sidebar markup is flat. */
body.teachers-site-admin .teachers-menu-sibling-item{
    overflow:hidden;
    max-height:70px;
    opacity:1;
    transition:max-height .2s ease,opacity .15s ease,margin .2s ease,padding .2s ease;
}

body.teachers-site-admin .teachers-menu-sibling-item.is-menu-hidden{
    max-height:0!important;
    opacity:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    pointer-events:none;
}

/* ---- Restore normal page start / eliminate artificial top void ---- */
body.teachers-site-admin .teachers-admin-main{
    position:relative;
    min-width:0;
}

body.teachers-site-admin .teachers-admin-main.teachers-admin-gap-reset{
    margin-top:0!important;
    transform:none!important;
}

/* ---- Truly unified page-title system across /site-admin ---- */
body.teachers-site-admin .teachers-page-header-normalized{
    position:relative;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:100%!important;
    margin:0 0 18px!important;
    padding:0 0 14px!important;
    border-bottom:1px solid #e2e9e6!important;
    background:transparent!important;
}

body.teachers-site-admin .teachers-page-header-copy{
    min-width:0;
}

body.teachers-site-admin .teachers-page-title{
    margin:0!important;
    padding:0!important;
    color:#173f35!important;
    font-size:1.52rem!important;
    line-height:1.25!important;
    font-weight:950!important;
    letter-spacing:0!important;
}

body.teachers-site-admin .teachers-page-subtitle{
    display:block;
    max-width:850px;
    margin:5px 0 0!important;
    padding:0!important;
    color:#71817a!important;
    font-size:.86rem!important;
    line-height:1.7!important;
    font-weight:450!important;
}

body.teachers-site-admin .teachers-page-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex-wrap:wrap;
    flex:none;
}

/* Existing header implementations that are already semantic still get the baseline. */
body.teachers-site-admin :is(
    .admin-page-header,
    .page-header,
    .admin-head,
    .admin-header
).teachers-page-header-normalized{
    border-radius:0!important;
    box-shadow:none!important;
}

/* Prevent giant legacy top spacers inside Site Admin content. */
body.teachers-site-admin .teachers-admin-main
:is(.page-spacer,.admin-spacer,.top-spacer,.content-spacer):first-child{
    display:none!important;
}

/* ---- Unified page canvas/cards/tables ---- */
body.teachers-site-admin .teachers-admin-main{
    color:#304f45;
}

body.teachers-site-admin .teachers-admin-main
:is(.container,.container-fluid,.shell,.admin-shell):first-child{
    padding-top:18px;
}

body.teachers-site-admin .teachers-admin-main
:is(.card,.admin-card,.panel,.box,.widget,.filter-card,.filters-card,.admin-filter-card){
    border:1px solid #dfe7e4!important;
    border-radius:15px!important;
    background:#fff;
    box-shadow:0 7px 22px rgba(23,63,53,.055);
}

body.teachers-site-admin .teachers-admin-main
:is(.card-header,.panel-heading,.admin-card-header){
    padding:13px 15px!important;
    border-bottom:1px solid #e8eeeb!important;
    background:#fbfcfc!important;
    color:#294e43!important;
    font-size:.9rem!important;
    font-weight:850!important;
}

body.teachers-site-admin .teachers-admin-main
:is(.card-body,.panel-body,.admin-card-body){
    padding:15px!important;
}

body.teachers-site-admin .teachers-admin-main table{
    width:100%;
    border-collapse:separate!important;
    border-spacing:0!important;
    font-size:.87rem!important;
}

body.teachers-site-admin .teachers-admin-main table thead th{
    padding:11px 12px!important;
    border-bottom:1px solid #dfe7e4!important;
    background:#f6f9f8!important;
    color:#486159!important;
    font-size:.8rem!important;
    font-weight:850!important;
}

body.teachers-site-admin .teachers-admin-main table tbody td{
    padding:12px!important;
    border-bottom:1px solid #edf1ef!important;
    vertical-align:middle!important;
    font-size:.87rem!important;
}

body.teachers-site-admin .teachers-admin-main table tbody tr:hover td{
    background:#fbfdfc!important;
}

/* ---- Access page: same canvas, no special old visual identity ---- */
body.admin-access-page .teachers-admin-main{
    width:100%;
}

body.admin-access-page .teachers-admin-main
:is(.access-page,.access-shell,.access-container,.roles-page,.permissions-page,.users-page){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}

body.admin-access-page .teachers-page-header-normalized{
    margin-bottom:18px!important;
}

body.admin-access-page .teachers-admin-main
:is(.access-card,.role-card,.user-card,.permission-card){
    border:1px solid #dfe7e4!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 7px 22px rgba(23,63,53,.055)!important;
}

/* ---- Toasts always above the content and away from the right sidebar ---- */
body.teachers-site-admin .admin-toast-stack,
body.teachers-site-admin :is(
    .toast-container,#toast-container,.admin-toast-container,
    .app-toast-container,.toast-stack,.toasts-container,
    .notification-toast-container
){
    position:fixed!important;
    top:74px!important;
    left:18px!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2147483200!important;
}

@media(max-width:900px){
    body.teachers-site-admin .teachers-menu-group-toggle{
        min-height:42px;
        font-size:.8rem!important;
    }

    body.teachers-site-admin .teachers-page-header-normalized{
        align-items:stretch!important;
        flex-direction:column!important;
    }

    body.teachers-site-admin .teachers-page-header-actions{
        justify-content:flex-start;
    }
}

@media(max-width:760px){
    body.teachers-site-admin .teachers-page-title{
        font-size:1.32rem!important;
    }

    body.teachers-site-admin .teachers-page-subtitle{
        font-size:.82rem!important;
    }
}

/* =========================================================
   ADMIN POLISH A - FIX3
   ONE ADMIN CANVAS + REAL PARENT/SUBMENU + HOME SECTIONS FIX
   ========================================================= */

body.teachers-site-admin{
    --tw-admin-canvas-max:1320px;
    --tw-admin-canvas-x:28px;
    --tw-admin-canvas-top:22px;
}

/* ---------------------------------------------------------
   1. ONE CANVAS FOR EVERY /site-admin PAGE
   --------------------------------------------------------- */

body.teachers-site-admin .teachers-admin-main{
    position:relative!important;
    min-width:0!important;
    padding:0!important;
    margin-top:0!important;
    transform:none!important;
}

body.teachers-site-admin .teachers-admin-main > :not(script):not(style):not(link){
    width:min(
        var(--tw-admin-canvas-max),
        calc(100% - (var(--tw-admin-canvas-x) * 2))
    )!important;
    max-width:var(--tw-admin-canvas-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

body.teachers-site-admin .teachers-admin-main > :first-child:not(script):not(style):not(link){
    margin-top:var(--tw-admin-canvas-top)!important;
}

/* When a page already has its own shell/container, kill the varying widths/paddings. */
body.teachers-site-admin .teachers-admin-main > :is(
    .container,
    .container-fluid,
    .shell,
    .admin-shell,
    .admin-page,
    .page-shell,
    .content-shell,
    .access-shell,
    .analytics-shell,
    .health-shell,
    .seo-shell,
    .dq-shell
){
    width:min(
        var(--tw-admin-canvas-max),
        calc(100% - (var(--tw-admin-canvas-x) * 2))
    )!important;
    max-width:var(--tw-admin-canvas-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
}

/* Remove old page-specific large top paddings/margins. */
body.teachers-site-admin .teachers-admin-main :is(
    .container,
    .container-fluid,
    .shell,
    .admin-shell,
    .admin-page,
    .page-shell,
    .content-shell
):first-child{
    padding-top:0!important;
    margin-top:0!important;
}

/* ---------------------------------------------------------
   2. EXACT SAME HEADER SYSTEM EVERYWHERE
   --------------------------------------------------------- */

body.teachers-site-admin .teachers-global-page-header{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:18px!important;

    width:min(
        var(--tw-admin-canvas-max),
        calc(100% - (var(--tw-admin-canvas-x) * 2))
    )!important;
    max-width:var(--tw-admin-canvas-max)!important;

    margin:
        var(--tw-admin-canvas-top)
        auto
        18px!important;

    padding:0 0 14px!important;
    border:0!important;
    border-bottom:1px solid #e2e9e6!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

body.teachers-site-admin .teachers-global-page-header-copy{
    min-width:0;
    flex:1 1 auto;
}

body.teachers-site-admin .teachers-global-page-header h1{
    margin:0!important;
    padding:0!important;
    border:0!important;
    color:#173f35!important;
    font-size:1.52rem!important;
    line-height:1.25!important;
    font-weight:950!important;
    letter-spacing:0!important;
}

body.teachers-site-admin .teachers-global-page-header-subtitle{
    display:block!important;
    max-width:880px!important;
    margin:5px 0 0!important;
    padding:0!important;
    color:#71817a!important;
    font-size:.86rem!important;
    line-height:1.7!important;
    font-weight:450!important;
}

body.teachers-site-admin .teachers-global-page-header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    flex-wrap:wrap!important;
    flex:0 0 auto!important;
}

/* The original page-specific header no longer owns visual spacing. */
body.teachers-site-admin .teachers-original-header-normalized{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* Avoid double top spacing after the new global header. */
body.teachers-site-admin .teachers-global-page-header
+ :is(
    .container,
    .container-fluid,
    .shell,
    .admin-shell,
    .admin-page,
    section,
    div
){
    margin-top:0!important;
}

/* ---------------------------------------------------------
   3. CARDS / FORMS / TABLES - SAME LANGUAGE EVERYWHERE
   --------------------------------------------------------- */

body.teachers-site-admin .teachers-admin-main :is(
    .card,
    .admin-card,
    .panel,
    .box,
    .widget,
    .filter-card,
    .filters-card,
    .admin-filter-card,
    .access-card,
    .role-card,
    .user-card,
    .permission-card
){
    border:1px solid #dfe7e4!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 7px 22px rgba(23,63,53,.055)!important;
}

body.teachers-site-admin .teachers-admin-main :is(
    .card-header,
    .panel-heading,
    .admin-card-header
){
    padding:13px 15px!important;
    border-bottom:1px solid #e7eeeb!important;
    background:#fbfcfc!important;
    color:#294e43!important;
    font-size:.9rem!important;
    font-weight:850!important;
}

body.teachers-site-admin .teachers-admin-main :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .form-control,
    .form-select
){
    min-height:44px!important;
    border:1px solid #d7e1dd!important;
    border-radius:10px!important;
    padding:9px 11px!important;
    background:#fff!important;
    color:#304f45!important;
    font-size:.9rem!important;
    line-height:1.45!important;
}

body.teachers-site-admin .teachers-admin-main textarea{
    min-height:90px!important;
    resize:vertical;
}

body.teachers-site-admin .teachers-admin-main label{
    color:#3f5c53!important;
    font-size:.82rem!important;
    font-weight:800!important;
    line-height:1.45!important;
}

body.teachers-site-admin .teachers-admin-main :is(button,.btn,[role="button"]){
    min-height:40px;
    border-radius:10px!important;
    font-size:.84rem!important;
    font-weight:850!important;
}

body.teachers-site-admin .teachers-admin-main table{
    width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    font-size:.86rem!important;
}

body.teachers-site-admin .teachers-admin-main table thead th{
    padding:11px 12px!important;
    border-bottom:1px solid #dfe7e4!important;
    background:#f6f9f8!important;
    color:#486159!important;
    font-size:.79rem!important;
    font-weight:850!important;
    vertical-align:middle!important;
}

body.teachers-site-admin .teachers-admin-main table tbody td{
    padding:12px!important;
    border-bottom:1px solid #edf1ef!important;
    font-size:.86rem!important;
    line-height:1.5!important;
    vertical-align:middle!important;
}

/* ---------------------------------------------------------
   4. REAL PARENT MENU + SUBITEMS
   --------------------------------------------------------- */

body.teachers-site-admin .teachers-sidebar-original-nav{
    display:none!important;
}

body.teachers-site-admin .teachers-admin-accordion{
    display:grid;
    gap:5px;
    width:100%;
    margin-top:8px;
    padding:0 8px 10px;
}

body.teachers-site-admin .teachers-admin-menu-group{
    display:grid;
    gap:2px;
}

body.teachers-site-admin .teachers-admin-parent{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;

    width:100%;
    min-height:43px;
    padding:9px 11px!important;

    border:0!important;
    border-radius:10px!important;
    background:transparent!important;

    color:rgba(227,239,235,.72)!important;
    font:inherit;
    font-size:.84rem!important;
    font-weight:900!important;
    line-height:1.3;
    text-align:right;
    cursor:pointer;

    transition:background .16s ease,color .16s ease;
}

body.teachers-site-admin .teachers-admin-parent:hover,
body.teachers-site-admin .teachers-admin-menu-group.is-open
> .teachers-admin-parent{
    background:rgba(255,255,255,.07)!important;
    color:#fff!important;
}

body.teachers-site-admin .teachers-admin-parent-label{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

body.teachers-site-admin .teachers-admin-parent-dot{
    width:7px;
    height:7px;
    flex:none;
    border-radius:50%;
    background:rgba(209,182,117,.72);
}

body.teachers-site-admin .teachers-admin-parent-chevron{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    flex:none;
    border-radius:6px;
    color:rgba(227,239,235,.64);
    font-size:.9rem;
    transition:transform .18s ease;
}

body.teachers-site-admin .teachers-admin-menu-group.is-open
.teachers-admin-parent-chevron{
    transform:rotate(90deg);
}

body.teachers-site-admin .teachers-admin-submenu{
    display:grid;
    grid-template-rows:0fr;
    opacity:.15;
    transition:grid-template-rows .2s ease,opacity .18s ease;
}

body.teachers-site-admin .teachers-admin-submenu-inner{
    min-height:0;
    overflow:hidden;
    display:grid;
    gap:2px;
    padding-right:8px;
}

body.teachers-site-admin .teachers-admin-menu-group.is-open
> .teachers-admin-submenu{
    grid-template-rows:1fr;
    opacity:1;
}

body.teachers-site-admin .teachers-admin-submenu a{
    position:relative;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;

    min-height:39px!important;
    padding:7px 12px!important;

    border-radius:9px!important;
    background:transparent!important;
    color:rgba(226,239,234,.67)!important;

    font-size:.79rem!important;
    font-weight:700!important;
    line-height:1.35!important;
    text-decoration:none!important;

    transition:background .15s ease,color .15s ease;
}

body.teachers-site-admin .teachers-admin-submenu a:hover{
    background:rgba(255,255,255,.055)!important;
    color:#fff!important;
}

body.teachers-site-admin .teachers-admin-submenu a.active,
body.teachers-site-admin .teachers-admin-submenu a[aria-current="page"]{
    background:rgba(8,91,74,.80)!important;
    color:#fff!important;
    box-shadow:inset -3px 0 0 #d1b675;
}

body.teachers-site-admin .teachers-admin-submenu a::before{
    content:"";
    width:5px;
    height:5px;
    flex:none;
    border-radius:50%;
    background:rgba(209,182,117,.55);
}

body.teachers-site-admin .teachers-admin-submenu a.active::before,
body.teachers-site-admin .teachers-admin-submenu a[aria-current="page"]::before{
    background:#d1b675;
}

/* Keep original link icons if cloned. */
body.teachers-site-admin .teachers-admin-submenu a
:is(.admin-nav-icon,svg){
    flex:none!important;
}

/* ---------------------------------------------------------
   5. /site-admin "أقسام الرئيسية" FORM FIX
   --------------------------------------------------------- */

body.teachers-site-admin .teachers-home-sections-editor{
    overflow:visible!important;
}

body.teachers-site-admin .teachers-home-section-row{
    display:grid!important;
    grid-template-columns:
        minmax(210px,1.15fr)
        minmax(270px,1.55fr)
        minmax(82px,.42fr)
        minmax(90px,.45fr)
        auto!important;
    align-items:end!important;
    gap:12px!important;

    width:100%!important;
    margin:0!important;
    padding:13px!important;

    border:1px solid #dfe7e4!important;
    border-radius:13px!important;
    background:#fff!important;
}

body.teachers-site-admin .teachers-home-section-row
> :is(div,label,fieldset,.form-group,.field,.input-group){
    min-width:0!important;
    width:100%;
    margin:0!important;
}

body.teachers-site-admin .teachers-home-section-row
:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}

body.teachers-site-admin .teachers-home-section-row textarea{
    min-height:72px!important;
    height:72px!important;
}

body.teachers-site-admin .teachers-home-section-row
input[type="number"]{
    min-width:72px!important;
    width:100%!important;
}

body.teachers-site-admin .teachers-home-section-row
:is(input[type="checkbox"],input[type="radio"]){
    width:auto!important;
    min-height:0!important;
}

body.teachers-site-admin .teachers-home-section-row
:is(button,.btn){
    min-width:76px!important;
    white-space:nowrap!important;
    align-self:end!important;
}

body.teachers-site-admin .teachers-home-sections-editor
.teachers-home-section-row + .teachers-home-section-row{
    margin-top:8px!important;
}

/* New section/editor block */
body.teachers-site-admin .teachers-home-section-add{
    margin-bottom:14px!important;
    padding:14px!important;
    border:1px dashed #bcd8cf!important;
    border-radius:14px!important;
    background:#fbfdfc!important;
}

/* ---------------------------------------------------------
   6. ACCESS PAGE HAS NO SPECIAL MARGINS ANYMORE
   --------------------------------------------------------- */

body.admin-access-page .teachers-admin-main > :not(script):not(style):not(link){
    width:min(
        var(--tw-admin-canvas-max),
        calc(100% - (var(--tw-admin-canvas-x) * 2))
    )!important;
    max-width:var(--tw-admin-canvas-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media(max-width:1120px){
    body.teachers-site-admin .teachers-home-section-row{
        grid-template-columns:1fr 1fr 110px 110px!important;
    }

    body.teachers-site-admin .teachers-home-section-row > :last-child{
        grid-column:1/-1;
        justify-self:start;
    }
}

@media(max-width:760px){
    body.teachers-site-admin{
        --tw-admin-canvas-x:12px;
        --tw-admin-canvas-top:14px;
    }

    body.teachers-site-admin .teachers-global-page-header{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:10px!important;
    }

    body.teachers-site-admin .teachers-global-page-header h1{
        font-size:1.3rem!important;
    }

    body.teachers-site-admin .teachers-global-page-header-subtitle{
        font-size:.8rem!important;
    }

    body.teachers-site-admin .teachers-global-page-header-actions{
        justify-content:flex-start!important;
    }

    body.teachers-site-admin .teachers-home-section-row{
        grid-template-columns:1fr!important;
        gap:9px!important;
    }

    body.teachers-site-admin .teachers-home-section-row > :last-child{
        grid-column:auto;
        width:100%!important;
    }

    body.teachers-site-admin .teachers-home-section-row
    :is(button,.btn){
        width:100%!important;
    }
}

/* =========================================================
   PRE-LAUNCH F FIX1
   SAFE: existing Admin UI assets only
   ========================================================= */

/* ---------- Executive drilldown ---------- */
.f1-attention-button{
    width:100%;
    min-height:36px!important;
    margin-top:8px;
    padding:6px 9px!important;
    border:1px solid #e5c98c!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#7b5b14!important;
    font-size:.72rem!important;
    font-weight:900!important;
    cursor:pointer;
}
.f1-attention-button:hover{background:#fffaf0!important}

.f1-attention-panel{
    display:none;
    margin:0 0 18px;
    padding:14px;
    border:1px solid #d9e4e0;
    border-radius:15px;
    background:#fbfdfc;
}
.f1-attention-panel.is-open{display:block}

.f1-attention-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:10px;
}
.f1-attention-panel-head strong{
    display:block;
    color:#173f35;
    font-size:.92rem;
    font-weight:950;
}
.f1-attention-panel-head span{
    display:block;
    margin-top:3px;
    color:#75857f;
    font-size:.72rem;
}
.f1-attention-panel-total{
    min-width:48px;
    padding:6px 8px;
    border-radius:9px;
    background:#fff2df;
    color:#85601b;
    text-align:center;
    font-size:.82rem;
    font-weight:950;
}
.f1-attention-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}
.f1-attention-link{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
    min-height:54px;
    padding:9px 10px;
    border:1px solid #e0e8e5;
    border-radius:10px;
    background:#fff;
    color:#31584d;
    text-decoration:none;
}
.f1-attention-link:hover{
    border-color:#b9d4ca;
    background:#f7fbf9;
}
.f1-attention-link span{
    min-width:0;
    font-size:.74rem;
    font-weight:800;
}
.f1-attention-link b{
    min-width:29px;
    padding:4px 6px;
    border-radius:7px;
    background:#eef5f2;
    color:#22664f;
    text-align:center;
    font-size:.78rem;
    font-weight:950;
}
.f1-attention-empty{
    grid-column:1/-1;
    padding:16px;
    border:1px dashed #d3dfda;
    border-radius:10px;
    color:#7a8984;
    text-align:center;
    font-size:.75rem;
}

.f1-kpi-open{
    display:inline-flex!important;
    width:max-content!important;
    min-height:0!important;
    margin-top:7px;
    padding:4px 7px!important;
    border:0!important;
    border-radius:7px!important;
    background:#eef5f2!important;
    color:#2c6854!important;
    text-decoration:none!important;
    font-size:.66rem!important;
    font-weight:900!important;
}

/* ---------- Notification preview ---------- */
.f1-template-preview{
    overflow:hidden;
    margin:0 0 10px;
    border:1px solid #dce6e2;
    border-radius:12px;
    background:#f8fbfa;
}
.f1-template-preview-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border-bottom:1px solid #e3ebe8;
    background:#fff;
}
.f1-template-preview-head strong{
    color:#31594d;
    font-size:.74rem;
    font-weight:900;
}
.f1-template-preview-head span{
    color:#89958f;
    font-size:.65rem;
}
.f1-template-preview-body{padding:10px}

.f1-wa-bubble{
    width:min(94%,400px);
    padding:9px 10px;
    border-radius:11px 11px 3px 11px;
    background:#e8f7ed;
    color:#214a3c;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:.76rem;
    line-height:1.65;
}

.f1-email-preview{
    overflow:hidden;
    border:1px solid #dfe7e4;
    border-radius:10px;
    background:#fff;
}
.f1-email-subject{
    padding:7px 9px;
    border-bottom:1px solid #e7eeeb;
    background:#fafcfb;
    color:#38594f;
    font-size:.72rem;
}
.f1-email-content{
    padding:9px;
    color:#50675f;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    font-size:.74rem;
    line-height:1.65;
}
.f1-template-tokens{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:0 10px 8px;
}
.f1-template-tokens code{
    padding:3px 6px;
    border:1px solid #dbe6e2;
    border-radius:999px;
    background:#fff;
    color:#5f756d;
    direction:ltr;
    font-size:.62rem;
}
.f1-template-warning{
    display:none;
    margin:0 10px 8px;
    padding:7px 8px;
    border:1px solid #ead5a1;
    border-radius:8px;
    background:#fff9ed;
    color:#7d6017;
    font-size:.7rem;
    line-height:1.6;
}
.f1-template-warning.is-visible{display:block}
.f1-template-count{
    padding:0 10px 8px;
    color:#8b9691;
    direction:ltr;
    text-align:left;
    font-size:.62rem;
}

@media(max-width:950px){
    .f1-attention-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .f1-attention-list{grid-template-columns:1fr}
    .f1-attention-panel-head{flex-direction:column}
    .f1-wa-bubble{width:100%}
}