/* PressFly professional flat UI layer
 * A low-risk final visual pass shared by public, member, auth and admin layouts.
 * It deliberately avoids business-specific component geometry and theme colors.
 */
:root{
    --pf-ui-radius-xs:5px;
    --pf-ui-radius-sm:7px;
    --pf-ui-radius:9px;
    --pf-ui-radius-lg:11px;
    --pf-ui-border:#e5e9f0;
    --pf-ui-border-strong:#d8dee8;
    --pf-ui-surface:#fff;
    --pf-ui-surface-soft:#f7f9fc;
    --pf-ui-text:#172033;
    --pf-ui-muted:#667085;
    --pf-ui-focus:rgba(59,130,246,.22);
    --pf-ui-shadow:0 1px 2px rgba(16,24,40,.04);
    --pf-ui-shadow-hover:0 2px 8px rgba(16,24,40,.07);
    --pf-ui-fast:160ms ease;
}

html{scroll-behavior:smooth;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color-scheme:light}
body{color:var(--pf-ui-text)}
img,video,iframe{max-width:100%}
button,input,select,textarea{font:inherit}

/* Accessible keyboard focus without changing mouse interactions. */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,.form-control:focus,.form-select:focus{
    outline:0!important;
    box-shadow:0 0 0 3px var(--pf-ui-focus)!important;
}

/* Consistent flat controls. */
.form-control,.form-select,.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    border-color:var(--pf-ui-border-strong);
    border-radius:var(--pf-ui-radius-sm);
    min-height:42px;
    transition:border-color var(--pf-ui-fast),box-shadow var(--pf-ui-fast),background-color var(--pf-ui-fast);
}
textarea.form-control{min-height:110px}
.form-control::placeholder{color:#98a2b3;opacity:1}
.form-control:disabled,.form-select:disabled{cursor:not-allowed;opacity:.7}

.btn,.pf-btn{
    border-radius:var(--pf-ui-radius-sm)!important;
    font-weight:650;
    letter-spacing:0;
    box-shadow:none!important;
    transition:transform var(--pf-ui-fast),background-color var(--pf-ui-fast),border-color var(--pf-ui-fast),opacity var(--pf-ui-fast)!important;
}
.btn:hover,.pf-btn:hover{transform:translateY(-1px)}
.btn:active,.pf-btn:active{transform:none}

/* Common surfaces: flatter, cleaner, and more predictable. */
.card,.widget,.pf-form-card,.pf-admin-card,.pf-soft-box,.auth-content,
.pf-member-content .card,.pf-member-menu .list-group-item{
    border-color:var(--pf-ui-border)!important;
}
.card,.pf-form-card,.pf-admin-card,.auth-content{
    border-radius:var(--pf-ui-radius-lg)!important;
    box-shadow:var(--pf-ui-shadow)!important;
}
.card-header,.card-footer,.pf-card-header{
    border-color:var(--pf-ui-border)!important;
}
.table{--bs-table-border-color:var(--pf-ui-border)}
.table>thead>tr>th{font-weight:700;color:#475467;vertical-align:middle}
.table>tbody>tr>td{vertical-align:middle}
.table-responsive{border-radius:var(--pf-ui-radius);overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Admin: remove legacy heavy visual weight while retaining hierarchy. */
body.pf-admin-flat .content-wrapper{background:#f6f8fb}
body.pf-admin-flat .main-header{border-bottom:1px solid var(--pf-ui-border)!important;box-shadow:none!important}
body.pf-admin-flat .main-sidebar{box-shadow:none!important;border-right:1px solid rgba(148,163,184,.16)}
body.pf-admin-flat .card,body.pf-admin-flat .pf-form-card,body.pf-admin-flat .pf-admin-card{
    overflow:clip;
}
body.pf-admin-flat .content-header h1,body.pf-admin-flat .pf-admin-page-head h1,
body.pf-admin-flat .pf-admin-page-head h2{letter-spacing:-.025em;font-weight:750}
body.pf-admin-flat .nav-sidebar .nav-link{border-radius:9px;margin:2px 8px;width:auto}

/* Member area. */
body[class*="member-"] .pf-member-content{min-width:0}
body[class*="member-"] .pf-member-menu .list-group-item{transition:background-color var(--pf-ui-fast),border-color var(--pf-ui-fast),transform var(--pf-ui-fast)}
body[class*="member-"] .pf-member-menu .list-group-item:hover{transform:translateY(-1px)}

/* Auth pages are deliberately compact and distraction-free. */
body .auth{max-width:420px;padding:0 14px}
body .auth-content{padding:clamp(20px,4vw,30px)}
body .auth-title{font-size:clamp(27px,6vw,36px);font-weight:750;letter-spacing:-.035em}

/* Public cards and article widgets get only a restrained elevation. */
body:not(.pf-admin-flat) .widget,
body.homepage .pf-news-card,
body.homepage .pf-latest-news-item,
body.article-show .article-content-column>.col-inner{
    border-color:var(--pf-ui-border)!important;
}
body.homepage .pf-news-card,body.homepage .pf-latest-news-item{
    transition:transform var(--pf-ui-fast),box-shadow var(--pf-ui-fast),border-color var(--pf-ui-fast);
}
@media (hover:hover){
    body.homepage .pf-news-card:hover,body.homepage .pf-latest-news-item:hover{
        transform:translateY(-2px);
        box-shadow:var(--pf-ui-shadow-hover);
    }
}

/* Empty states and muted helper copy stay readable. */
.text-muted,.form-text,.help-block,small.text-muted{color:var(--pf-ui-muted)!important}
.alert{border-radius:var(--pf-ui-radius);border-width:1px}
.badge,.pf-pill{letter-spacing:0}

/* Prevent long content from breaking cards/tables on mobile. */
.card,.card-body,.widget,.pf-form-card,.pf-admin-card,.pf-member-content,
.table td,.table th{min-width:0}
.card-body,.widget,.pf-form-card{overflow-wrap:anywhere}

/* Dark mode values are intentionally neutral and compatible with existing theme rules. */
html.dark-mode-site,html[data-theme="dark"]{
    color-scheme:dark;
    --pf-ui-border:#273244;
    --pf-ui-border-strong:#344054;
    --pf-ui-surface:#111827;
    --pf-ui-surface-soft:#0f172a;
    --pf-ui-text:#e5e7eb;
    --pf-ui-muted:#9ca3af;
    --pf-ui-focus:rgba(96,165,250,.3);
    --pf-ui-shadow:0 1px 2px rgba(0,0,0,.16),0 8px 24px rgba(0,0,0,.16);
    --pf-ui-shadow-hover:0 2px 5px rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.2);
}
html.dark-mode-site body.pf-admin-flat .content-wrapper,html[data-theme="dark"] body.pf-admin-flat .content-wrapper{background:#0b1220}
html.dark-mode-site .table>thead>tr>th,html[data-theme="dark"] .table>thead>tr>th{color:#cbd5e1}
html.dark-mode-site .form-control::placeholder,html[data-theme="dark"] .form-control::placeholder{color:#64748b}

/* Motion accessibility. */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:767.98px){
    .btn,.pf-btn{min-height:40px}
    .card,.pf-form-card,.pf-admin-card,.auth-content{border-radius:var(--pf-ui-radius)!important}
    .table-responsive{margin-bottom:0}
}

/* PressFly professional-flat review r3
 * Consolidated flat interaction language, hierarchy and accessibility defaults.
 */

/* Flat means stable: controls no longer jump vertically on hover. */
.btn:hover,.pf-btn:hover,
body[class*="member-"] .pf-member-menu .list-group-item:hover{transform:none}

/* Common Bootstrap/legacy primitives receive one consistent visual language. */
.dropdown-menu{
    border:1px solid var(--pf-ui-border)!important;
    border-radius:var(--pf-ui-radius)!important;
    box-shadow:0 8px 24px rgba(16,24,40,.10)!important;
    padding:.45rem;
}
.dropdown-item{border-radius:var(--pf-ui-radius-sm);padding:.55rem .7rem}
.dropdown-divider{border-color:var(--pf-ui-border)}
.modal-content,.offcanvas,.popover{
    border:1px solid var(--pf-ui-border)!important;
    border-radius:var(--pf-ui-radius-lg)!important;
    box-shadow:0 16px 42px rgba(16,24,40,.14)!important;
}
.modal-header,.modal-footer{border-color:var(--pf-ui-border)!important}
.input-group-text{
    border-color:var(--pf-ui-border-strong);
    background:var(--pf-ui-surface-soft);
    color:var(--pf-ui-muted);
}
.nav-tabs{border-color:var(--pf-ui-border)}
.nav-tabs .nav-link{border-radius:var(--pf-ui-radius-sm) var(--pf-ui-radius-sm) 0 0;font-weight:650}
.pagination{gap:4px;flex-wrap:wrap}
.page-link{
    min-width:36px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--pf-ui-radius-sm)!important;
    border-color:var(--pf-ui-border)!important;
    box-shadow:none!important;
}
.breadcrumb{font-size:.92rem}
.form-label,label.control-label{font-weight:650;color:inherit}
.invalid-feedback,.text-danger{overflow-wrap:anywhere}

/* Make destructive and primary actions easier to use on touch screens. */
button,.btn,[role="button"],input[type="submit"],input[type="button"]{touch-action:manipulation}
@media (pointer:coarse){
    .btn,.pf-btn,.page-link,.dropdown-item{min-height:42px}
}

/* Tables remain readable without heavy decoration. */
.table>:not(caption)>*>*{border-bottom-color:var(--pf-ui-border);padding:.72rem .75rem}
.table-hover>tbody>tr:hover>*{--bs-table-accent-bg:var(--pf-ui-surface-soft)}
.table thead th{white-space:nowrap}

/* Admin/member page framing: clearer structure with lower elevation. */
body.pf-admin-flat .card,
body.pf-admin-flat .pf-form-card,
body.pf-admin-flat .pf-admin-card,
body[class*="member-"] .card{
    box-shadow:var(--pf-ui-shadow)!important;
}
body.pf-admin-flat .card:hover,
body.pf-admin-flat .pf-admin-card:hover{box-shadow:var(--pf-ui-shadow)!important}

/* Better text selection and long URL/code handling in editorial/admin content. */
pre,code,kbd,samp{overflow-wrap:anywhere}
pre{max-width:100%;overflow:auto}
a{overflow-wrap:break-word}

/* High-contrast users get a stronger focus/border signal without changing theme colors. */
@media (prefers-contrast:more){
    :root{--pf-ui-border:#aab4c4;--pf-ui-border-strong:#7d899b;--pf-ui-focus:rgba(37,99,235,.38)}
    .card,.widget,.pf-form-card,.pf-admin-card,.dropdown-menu,.modal-content{border-width:2px!important}
}

@media (max-width:575.98px){
    .dropdown-menu{max-width:calc(100vw - 20px)}
    .modal-dialog{margin:.65rem}
    .card-body{padding:clamp(.9rem,4vw,1.15rem)}
    .table>:not(caption)>*>*{padding:.65rem .6rem}
}