/* CRM CONTENT PAGES UI
   Knowledgebase / Announcements / Downloads
   Mobile First
*/

:root{
    --crm-primary:#2563eb;
    --crm-primary-dark:#1d4ed8;
    --crm-secondary:#0ea5e9;
    --crm-success:#10b981;
    --crm-warning:#f59e0b;
    --crm-danger:#ef4444;
    --crm-title:#0f172a;
    --crm-text:#475569;
    --crm-muted:#64748b;
    --crm-border:#e2e8f0;
    --crm-bg:#f8fafc;
    --crm-white:#fff;
    --crm-shadow:0 14px 40px rgba(15,23,42,.08);
    --crm-shadow-hover:0 20px 50px rgba(37,99,235,.14);
}

/* Main page */

body.crm-content-page #main-body-holder{
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.08),transparent 380px),
        #f8fafc!important;
}

body.crm-content-page .primary-content{
    overflow:visible!important;
}

body.crm-content-page .primary-content > .card{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:0!important;
}

body.crm-content-page .primary-content > .card > .card-body{
    padding:0!important;
    overflow:visible!important;
}

body.crm-content-page .header-lined{
    display:none!important;
}

.crm-content-shell{
    direction:rtl;
    width:100%;
    max-width:1180px;
    margin:0 auto 35px;
    font-family:inherit;
}

/* Hero */

.crm-content-hero{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    min-height:185px;
    margin:0 0 22px;
    padding:34px 38px;
    border-radius:28px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);
    box-shadow:0 22px 55px rgba(37,99,235,.22);
}

.crm-content-hero:before,
.crm-content-hero:after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.09);
    pointer-events:none;
}

.crm-content-hero:before{
    width:250px;
    height:250px;
    left:-80px;
    top:-115px;
}

.crm-content-hero:after{
    width:150px;
    height:150px;
    right:36%;
    bottom:-115px;
}

.crm-content-hero__main{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:20px;
    min-width:0;
}

.crm-content-hero__icon{
    flex:0 0 76px;
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:25px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
    font-size:35px;
}

.crm-content-hero__text{
    min-width:0;
}

.crm-content-hero h1{
    margin:0 0 9px;
    color:#fff!important;
    font-size:27px;
    line-height:1.6;
    font-weight:900;
}

.crm-content-hero p{
    margin:0;
    max-width:670px;
    color:rgba(255,255,255,.9);
    font-size:14px;
    line-height:2;
}

.crm-content-home{
    position:relative;
    z-index:3;
    flex:0 0 auto;
    min-width:125px;
    padding:12px 18px;
    border-radius:15px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    color:#fff!important;
    text-align:center;
    text-decoration:none!important;
    font-size:13px;
    font-weight:800;
    transition:.25s ease;
}

.crm-content-home:hover{
    transform:translateY(-2px);
    background:#fff;
    color:#2563eb!important;
}

/* Navigation */

.crm-content-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:22px;
}

.crm-content-nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:13px;
    min-height:78px;
    padding:15px 18px;
    background:#fff;
    color:var(--crm-title)!important;
    border:1px solid var(--crm-border);
    border-radius:19px;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
    text-decoration:none!important;
    transition:.25s ease;
}

.crm-content-nav a:hover,
.crm-content-nav a.is-active{
    border-color:rgba(37,99,235,.3);
    box-shadow:var(--crm-shadow-hover);
    transform:translateY(-3px);
}

.crm-content-nav a.is-active{
    background:linear-gradient(135deg,#eff6ff,#f0f9ff);
}

.crm-content-nav__icon{
    flex:0 0 47px;
    width:47px;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    color:#fff;
    font-size:21px;
    background:linear-gradient(135deg,#2563eb,#0ea5e9);
}

.crm-content-nav__text{
    min-width:0;
}

.crm-content-nav strong{
    display:block;
    margin-bottom:4px;
    color:var(--crm-title);
    font-size:14px;
    font-weight:900;
}

.crm-content-nav small{
    display:block;
    color:var(--crm-muted);
    font-size:11px;
    line-height:1.7;
}

/* Search */

.crm-content-page form[action*="search"],
.crm-content-page .kb-search,
.crm-content-page form.mb-4{
    position:relative;
    margin:0 0 22px!important;
    padding:10px!important;
    background:#fff!important;
    border:1px solid var(--crm-border)!important;
    border-radius:20px!important;
    box-shadow:0 10px 30px rgba(15,23,42,.06)!important;
}

.crm-content-page form[action*="search"] .input-group,
.crm-content-page .kb-search .input-group,
.crm-content-page form.mb-4 .input-group{
    display:flex!important;
    width:100%;
    flex-wrap:nowrap!important;
}

.crm-content-page form[action*="search"] .form-control,
.crm-content-page .kb-search .form-control,
.crm-content-page form.mb-4 .form-control{
    height:54px!important;
    width:100%!important;
    padding:0 20px!important;
    color:var(--crm-title)!important;
    background:#f8fafc!important;
    border:1px solid #e5eaf1!important;
    border-radius:14px!important;
    font-size:14px!important;
    box-shadow:none!important;
}

.crm-content-page form[action*="search"] .form-control:focus,
.crm-content-page .kb-search .form-control:focus,
.crm-content-page form.mb-4 .form-control:focus{
    border-color:#60a5fa!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.09)!important;
}

.crm-content-page form[action*="search"] button,
.crm-content-page .kb-search button,
.crm-content-page form.mb-4 button{
    flex:0 0 auto;
    min-width:115px;
    height:54px!important;
    margin-right:8px!important;
    padding:0 20px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
    border:0!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:none!important;
}

/* General cards */

.crm-content-page .card{
    border:1px solid var(--crm-border)!important;
    border-radius:22px!important;
    box-shadow:var(--crm-shadow)!important;
    overflow:hidden;
}

.crm-content-page .card-header{
    padding:20px 23px!important;
    background:#fff!important;
    border-bottom:1px solid #edf2f7!important;
}

.crm-content-page .card-header h3,
.crm-content-page .card-header h4,
.crm-content-page .card-title{
    color:var(--crm-title)!important;
    font-weight:900!important;
}

.crm-content-page .card-body{
    padding:22px!important;
}

/* Knowledgebase categories */

.crm-content-page .kb-category{
    margin-bottom:15px!important;
}

.crm-content-page .kb-category > a,
.crm-content-page a.kb-category,
.crm-content-page .kb-category .card{
    display:block;
    height:100%;
    padding:22px!important;
    background:#fff!important;
    border:1px solid var(--crm-border)!important;
    border-radius:21px!important;
    color:var(--crm-title)!important;
    box-shadow:0 9px 28px rgba(15,23,42,.05)!important;
    text-decoration:none!important;
    transition:.25s ease!important;
}

.crm-content-page .kb-category > a:hover,
.crm-content-page a.kb-category:hover{
    border-color:#93c5fd!important;
    background:#fff!important;
    transform:translateY(-4px);
    box-shadow:var(--crm-shadow-hover)!important;
}

.crm-content-page .kb-category i{
    color:#2563eb!important;
}

.crm-content-page .kb-category h4,
.crm-content-page .kb-category h5,
.crm-content-page .kb-category strong{
    color:var(--crm-title)!important;
    font-weight:900!important;
    line-height:1.8;
}

.crm-content-page .kb-category p,
.crm-content-page .kb-category small{
    color:var(--crm-muted)!important;
    line-height:1.9!important;
}

/* Knowledgebase article lists */

.crm-content-page .kb-article-item{
    position:relative;
    display:block!important;
    margin:0 0 12px!important;
    padding:20px 22px 20px 60px!important;
    background:#fff!important;
    color:var(--crm-title)!important;
    border:1px solid var(--crm-border)!important;
    border-radius:18px!important;
    box-shadow:0 7px 24px rgba(15,23,42,.045);
    text-decoration:none!important;
    line-height:1.9!important;
    transition:.25s ease;
}

.crm-content-page .kb-article-item:after{
    content:"‹";
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#2563eb;
    background:#eff6ff;
    font-size:25px;
    font-family:Arial,sans-serif;
}

.crm-content-page .kb-article-item:hover{
    padding-right:27px!important;
    background:#fff!important;
    border-color:#93c5fd!important;
    box-shadow:var(--crm-shadow-hover);
    transform:translateY(-2px);
}

.crm-content-page .kb-article-item small{
    padding-right:0!important;
    color:var(--crm-muted)!important;
    font-size:12px!important;
    line-height:1.9!important;
}

/* Announcements */

.crm-content-page .announcements .announcement{
    margin-bottom:16px!important;
}

.crm-content-page .announcements .announcement article{
    position:relative;
    margin:0!important;
    padding:25px 26px!important;
    background:#fff!important;
    border:1px solid var(--crm-border)!important;
    border-right:5px solid #2563eb!important;
    border-radius:21px!important;
    box-shadow:0 10px 32px rgba(15,23,42,.055);
    transition:.25s ease;
}

.crm-content-page .announcements .announcement article:hover{
    border-color:#bfdbfe!important;
    border-right-color:#0ea5e9!important;
    transform:translateY(-3px);
    box-shadow:var(--crm-shadow-hover);
}

.crm-content-page .announcements .announcement h2,
.crm-content-page .announcements .announcement h3,
.crm-content-page .announcements .announcement h4{
    margin-top:0!important;
    color:var(--crm-title)!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.9!important;
}

.crm-content-page .announcements .announcement p{
    color:var(--crm-text)!important;
    font-size:14px!important;
    line-height:2.05!important;
}

.crm-content-page .announcements .announcement .label,
.crm-content-page .announcements .announcement small{
    color:var(--crm-muted)!important;
    background:#f1f5f9!important;
    border-radius:10px!important;
    font-size:11px!important;
}

.crm-content-page .announcements .announcement .btn,
.crm-content-page .announcements .announcement a.btn{
    padding:10px 18px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
    border:0!important;
    border-radius:12px!important;
    font-size:12px!important;
    font-weight:900!important;
}

/* Downloads */

.crm-content-page .list-group{
    border:0!important;
    border-radius:0!important;
}

.crm-content-page .list-group-item{
    position:relative;
    margin-bottom:12px!important;
    padding:20px 22px!important;
    background:#fff!important;
    color:var(--crm-title)!important;
    border:1px solid var(--crm-border)!important;
    border-radius:18px!important;
    box-shadow:0 7px 24px rgba(15,23,42,.045);
    line-height:1.9!important;
    transition:.25s ease;
}

.crm-content-page a.list-group-item:hover{
    background:#fff!important;
    border-color:#86efac!important;
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(16,185,129,.12);
}

.crm-content-page .list-group-item i{
    color:#10b981!important;
}

.crm-content-page .list-group-item strong{
    color:var(--crm-title)!important;
    font-weight:900!important;
}

.crm-content-page .list-group-item p,
.crm-content-page .list-group-item small{
    color:var(--crm-muted)!important;
}

.crm-content-page .list-group-item .badge{
    padding:6px 11px!important;
    color:#047857!important;
    background:#ecfdf5!important;
    border:1px solid #a7f3d0!important;
    border-radius:10px!important;
}

/* Article/detail pages */

.crm-content-page .markdown-content,
.crm-content-page .announcement-single,
.crm-content-page article{
    color:#334155;
    font-size:15px;
    line-height:2.15;
}

.crm-content-page .markdown-content{
    max-width:100%;
    padding:27px!important;
    background:#fff;
    border:1px solid var(--crm-border);
    border-radius:22px;
    box-shadow:var(--crm-shadow);
}

.crm-content-page .markdown-content h1,
.crm-content-page .markdown-content h2,
.crm-content-page .markdown-content h3,
.crm-content-page .markdown-content h4{
    color:var(--crm-title)!important;
    font-weight:900!important;
    line-height:1.8!important;
}

.crm-content-page .markdown-content h1{
    font-size:25px!important;
}

.crm-content-page .markdown-content h2{
    margin-top:30px!important;
    font-size:21px!important;
}

.crm-content-page .markdown-content h3{
    margin-top:25px!important;
    font-size:18px!important;
}

.crm-content-page .markdown-content p{
    margin-bottom:18px;
}

.crm-content-page .markdown-content img,
.crm-content-page article img{
    max-width:100%!important;
    height:auto!important;
    margin:18px auto!important;
    border-radius:16px!important;
}

.crm-content-page .markdown-content pre{
    direction:ltr;
    max-width:100%;
    overflow:auto;
    padding:20px!important;
    color:#e2e8f0!important;
    background:#111827!important;
    border:1px solid #1f2937!important;
    border-radius:16px!important;
    font-family:Consolas,Monaco,monospace!important;
    font-size:13px!important;
    line-height:1.85!important;
    text-align:left;
}

.crm-content-page .markdown-content code{
    direction:ltr;
    color:#be123c;
    background:#fff1f2;
    padding:2px 7px;
    border-radius:6px;
    font-family:Consolas,Monaco,monospace;
}

.crm-content-page .markdown-content pre code{
    padding:0;
    color:inherit;
    background:transparent;
}

.crm-content-page .markdown-content blockquote{
    margin:22px 0!important;
    padding:18px 21px!important;
    color:#1e3a8a!important;
    background:#eff6ff!important;
    border:0!important;
    border-right:5px solid #3b82f6!important;
    border-radius:14px!important;
}

.crm-content-page .markdown-content table{
    width:100%!important;
    display:block;
    overflow-x:auto;
    border-radius:13px;
    white-space:nowrap;
}

.crm-content-page .markdown-content a{
    color:#2563eb!important;
    font-weight:700;
}

/* Helpful and related */

.crm-content-page form[action*="knowledgebase"] .btn{
    border-radius:12px!important;
    font-weight:800!important;
}

.crm-content-page .btn-success{
    color:#fff!important;
    background:linear-gradient(135deg,#10b981,#22c55e)!important;
    border:0!important;
}

.crm-content-page .btn-danger{
    color:#fff!important;
    background:linear-gradient(135deg,#ef4444,#f97316)!important;
    border:0!important;
}

/* Alerts */

.crm-content-page .alert{
    margin:15px 0!important;
    padding:18px 20px!important;
    border:1px solid #bae6fd!important;
    border-right:5px solid #0ea5e9!important;
    border-radius:16px!important;
    color:#075985!important;
    background:#f0f9ff!important;
    box-shadow:none!important;
    line-height:1.9!important;
}

/* Pagination */

.crm-content-page .pagination{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:25px;
}

.crm-content-page .pagination .page-link,
.crm-content-page .pagination > li > a,
.crm-content-page .pagination > li > span{
    min-width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px!important;
    color:#334155!important;
    background:#fff!important;
    border:1px solid var(--crm-border)!important;
    border-radius:11px!important;
}

.crm-content-page .pagination .active .page-link,
.crm-content-page .pagination > .active > a,
.crm-content-page .pagination > .active > span{
    color:#fff!important;
    background:#2563eb!important;
    border-color:#2563eb!important;
}

/* Client-side live filter */

.crm-live-filter-empty{
    display:none;
    margin:15px 0;
    padding:24px;
    color:var(--crm-muted);
    background:#fff;
    border:1px dashed #cbd5e1;
    border-radius:18px;
    text-align:center;
    font-size:14px;
    line-height:2;
}

/* Desktop improvements */

@media(min-width:768px){
    .crm-content-page .row > [class*="col-md-"]{
        display:flex;
        flex-direction:column;
    }

    .crm-content-page .row > [class*="col-md-"] > .kb-category,
    .crm-content-page .row > [class*="col-md-"] > a{
        flex:1;
    }
}

/* Tablet */

@media(max-width:991px){
    .crm-content-hero{
        padding:28px;
        border-radius:24px;
    }

    .crm-content-nav a{
        padding:13px;
    }

    .crm-content-nav small{
        display:none;
    }
}

/* Mobile */

@media(max-width:767px){
    body.crm-content-page #main-body-holder{
        background:#f8fafc!important;
    }

    .crm-content-shell{
        margin-bottom:20px;
    }

    .crm-content-hero{
        display:block;
        min-height:auto;
        margin:0 0 14px;
        padding:22px 18px;
        border-radius:20px;
        text-align:center;
    }

    .crm-content-hero__main{
        display:block;
    }

    .crm-content-hero__icon{
        width:62px;
        height:62px;
        margin:0 auto 13px;
        border-radius:20px;
        font-size:29px;
    }

    .crm-content-hero h1{
        margin-bottom:6px;
        font-size:21px;
        line-height:1.7;
    }

    .crm-content-hero p{
        font-size:12px;
        line-height:1.9;
    }

    .crm-content-home{
        display:block;
        width:100%;
        margin-top:16px;
        padding:11px;
    }

    .crm-content-nav{
        grid-template-columns:1fr;
        gap:8px;
        margin-bottom:14px;
    }

    .crm-content-nav a{
        min-height:62px;
        padding:10px 12px;
        border-radius:16px;
    }

    .crm-content-nav a:hover{
        transform:none;
    }

    .crm-content-nav__icon{
        flex-basis:42px;
        width:42px;
        height:42px;
        border-radius:13px;
        font-size:19px;
    }

    .crm-content-nav strong{
        margin:0;
        font-size:13px;
    }

    .crm-content-nav small{
        display:block;
        font-size:10px;
    }

    .crm-content-page form[action*="search"],
    .crm-content-page .kb-search,
    .crm-content-page form.mb-4{
        padding:8px!important;
        border-radius:17px!important;
    }

    .crm-content-page form[action*="search"] .input-group,
    .crm-content-page .kb-search .input-group,
    .crm-content-page form.mb-4 .input-group{
        display:block!important;
    }

    .crm-content-page form[action*="search"] .form-control,
    .crm-content-page .kb-search .form-control,
    .crm-content-page form.mb-4 .form-control{
        height:51px!important;
        font-size:13px!important;
    }

    .crm-content-page form[action*="search"] button,
    .crm-content-page .kb-search button,
    .crm-content-page form.mb-4 button{
        width:100%!important;
        height:49px!important;
        margin:8px 0 0!important;
    }

    .crm-content-page .card{
        border-radius:18px!important;
    }

    .crm-content-page .card-header{
        padding:16px!important;
    }

    .crm-content-page .card-body{
        padding:15px!important;
    }

    .crm-content-page .kb-category > a,
    .crm-content-page a.kb-category,
    .crm-content-page .kb-category .card{
        padding:17px!important;
        border-radius:17px!important;
    }

    .crm-content-page .kb-article-item{
        padding:16px 16px 16px 51px!important;
        border-radius:15px!important;
        font-size:13px!important;
    }

    .crm-content-page .kb-article-item:after{
        left:13px;
        width:29px;
        height:29px;
    }

    .crm-content-page .kb-article-item:hover{
        padding-right:16px!important;
        transform:none;
    }

    .crm-content-page .announcements .announcement article{
        padding:18px 17px!important;
        border-radius:17px!important;
    }

    .crm-content-page .announcements .announcement article:hover{
        transform:none;
    }

    .crm-content-page .announcements .announcement h2,
    .crm-content-page .announcements .announcement h3,
    .crm-content-page .announcements .announcement h4{
        font-size:16px!important;
    }

    .crm-content-page .announcements .announcement p{
        font-size:13px!important;
    }

    .crm-content-page .announcements .announcement .btn,
    .crm-content-page .announcements .announcement a.btn{
        display:block!important;
        width:100%!important;
        margin-top:13px!important;
        text-align:center!important;
    }

    .crm-content-page .list-group-item{
        padding:16px!important;
        border-radius:15px!important;
        font-size:13px!important;
    }

    .crm-content-page .markdown-content{
        padding:18px!important;
        border-radius:18px;
        font-size:14px!important;
        line-height:2.05!important;
    }

    .crm-content-page .markdown-content h1{
        font-size:21px!important;
    }

    .crm-content-page .markdown-content h2{
        font-size:18px!important;
    }

    .crm-content-page .markdown-content h3{
        font-size:16px!important;
    }

    .crm-content-page .markdown-content pre{
        margin-right:-7px;
        margin-left:-7px;
        padding:15px!important;
        border-radius:13px!important;
        font-size:11px!important;
    }

    .crm-content-page .markdown-content table{
        font-size:12px!important;
    }

    .crm-content-page form[action*="knowledgebase"] .btn{
        width:100%;
        margin:4px 0!important;
    }

    .crm-content-page .pull-left,
    .crm-content-page .pull-right,
    .crm-content-page .float-left,
    .crm-content-page .float-right{
        float:none!important;
    }
}

/* Very small phones */

@media(max-width:380px){
    .crm-content-hero{
        padding:19px 14px;
    }

    .crm-content-hero h1{
        font-size:19px;
    }

    .crm-content-nav small{
        display:none;
    }

    .crm-content-page .markdown-content{
        padding:15px!important;
    }
}

/* CRM_ANNOUNCEMENTS_REMOVE_SIDEBAR */

/* حذف Sidebar فقط در صفحات اخبار و مشاهده خبر */
body:has(.crm-content-announcements) .sidebar,
body:has(.crm-content-announcements) aside.sidebar,
body:has(.crm-content-announcements) .secondary-sidebar,
body:has(.crm-content-announcements) #primarySidebar,
body:has(.crm-content-announcements) #secondarySidebar,
body:has(.crm-content-announcements) [class*="sidebar-primary"],
body:has(.crm-content-announcements) [class*="sidebar-secondary"]{
    display:none!important;
}

/* تمام‌عرض شدن ستون اصلی اخبار */
body:has(.crm-content-announcements) .primary-content,
body:has(.crm-content-announcements) #main-body-holder .primary-content,
body:has(.crm-content-announcements) #main-body-holder .col-md-9,
body:has(.crm-content-announcements) #main-body-holder .col-lg-9,
body:has(.crm-content-announcements) #main-body-holder .col-xl-9{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
}

/* جلوگیری از باقی ماندن فضای خالی ستون کناری */
body:has(.crm-content-announcements) #main-body-holder > .container > .row,
body:has(.crm-content-announcements) #main-body-holder .container-fluid > .row{
    justify-content:center!important;
}

/* وسط‌چین و محدود کردن عرض مناسب مطالب */
body:has(.crm-content-announcements) .crm-content-shell{
    width:100%!important;
    max-width:1180px!important;
    margin-right:auto!important;
    margin-left:auto!important;
}

/* تمام‌عرض شدن لیست اخبار */
body:has(.crm-content-announcements) .announcements,
body:has(.crm-content-announcements) .announcement-single,
body:has(.crm-content-announcements) .markdown-content{
    width:100%!important;
    max-width:100%!important;
}

/* موبایل */
@media(max-width:767px){
    body:has(.crm-content-announcements) .primary-content{
        padding-right:0!important;
        padding-left:0!important;
    }
}