@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root{
    --primary:#008f89;
    --primary-dark:#007d78;
    --navy:#092b3c;
    --text:#10264b;
    --muted:#7184a4;
    --border:#d9e5ed;
    --bg:#f3fafc;
    --card:#ffffff;
    --sidebar:#08293a;
}

*{box-sizing:border-box}
html,body{min-height:100%;font-family:'Vazirmatn',Tahoma,Arial,sans-serif;font-size:12px}
body{margin:0;color:var(--text);background:var(--bg)}
a{text-decoration:none}
button,input{font-family:inherit}

.btn-rasad{
    background:linear-gradient(135deg,#009b95,#00847f);
    border:0;color:#fff;border-radius:9px;
    font-weight:600;box-shadow:0 5px 12px rgba(0,137,132,.10);
}
.btn-rasad:hover,.btn-rasad:focus{background:var(--primary-dark);color:#fff}
.form-control{
    border:1px solid #cfdae5;border-radius:8px;
    min-height:33px;color:var(--text);
    box-shadow:none!important;

}
.form-control:focus{border-color:#7cc8c3}
.form-control::placeholder{color:#8090aa}

.sidebar{
    position:fixed;z-index:1030;top:0;bottom:0;left:0;width:245px;
    background:linear-gradient(180deg,#0a2c3d,#071f2d);
    color:#fff;display:flex;flex-direction:column;
}
.sidebar-logo{text-align:center;padding:18px 15px 12px}
.sidebar-logo img{width:145px;height:auto}
.sidebar-nav{padding:15px 14px 0;flex:1}
.sidebar-link{
    display:flex;align-items:center;gap:18px;color:#eef5f8;
    padding:13px 16px;margin:3px 0;border-radius:9px;
    font-size:16px;transition:.2s;
}
.sidebar-link i{font-size:23px;width:28px;text-align:center}
.sidebar-link:hover{background:rgba(0,151,145,.25);color:#fff}
.sidebar-link.active{background:linear-gradient(135deg,#087d82,#006f70);color:#fff}
.sidebar-bottom{padding:0 14px 22px}
.profile-box{
    border-top:1px solid rgba(255,255,255,.25);
    border-bottom:1px solid rgba(255,255,255,.25);
    padding:24px 10px;margin-bottom:12px;
    display:flex;align-items:center;gap:12px;
}
.profile-box img{width:56px;height:56px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.profile-box strong{font-size:16px}
.profile-box small{display:block;color:#aebfc8;margin-top:2px}

.admin-main{margin-left:245px;min-height:100vh;padding:0 20px 25px}
.topbar{
    height:67px;border-bottom:1px solid #e1ebf0;
    display:flex;align-items:center;justify-content:flex-start;
    padding:0 8px;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:25px}
.topbar .divider{height:30px;width:1px;background:#dce5ea}
.user-mini{display:flex;align-items:center;gap:12px}
.user-mini img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.notification{position:relative;font-size:24px}
.notification::after{content:'';position:absolute;top:1px;right:-2px;width:8px;height:8px;background:#ed2939;border-radius:50%;border:1px solid #fff}

.breadcrumb-card,.settings-card{
    background:var(--card);border:1px solid #e1edf2;border-radius:14px;
    box-shadow:0 3px 18px rgba(30,70,100,.035);
}
.breadcrumb-card{margin-top:12px;padding:24px 28px}
.breadcrumb-title{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.breadcrumb-title i{font-size:30px;color:var(--primary)}
.breadcrumb-title h1{font-size:24px;font-weight:800;margin:0}
.breadcrumb-sub{color:var(--muted);font-size:14px;text-align:right;margin-top:4px}
.breadcrumb-trail{display:flex;align-items:center;gap:25px;color:var(--text);font-size:14px;margin-top:-28px;justify-content: flex-end;text-align: left;}
.breadcrumb-trail i{color:#7186a5}

.settings-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:16px}
.settings-card{padding:22px;margin-top:10px}
.card-head{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.card-head i{font-size:28px;color:var(--primary)}
.card-head h2{font-size:20px;font-weight:800;margin:0}
.card-description{text-align:right;color:var(--muted);font-size:13px;margin:4px 0 16px}
.field-row{display:grid;grid-template-columns:1fr 115px;gap:15px;align-items:center;margin:14px 0}
.field-row label{text-align:right;order:2;font-size:15px}
.field-row .field{order:1}
.personal-content{min-height:360px;display:grid;grid-template-columns:145px 1fr;gap:25px;align-items:start}
.avatar-area{text-align:center;padding-top:35px}
.avatar-wrap{position:relative;display:inline-block}
.avatar-wrap img{width:134px;height:134px;border-radius:50%;object-fit:cover}
.camera-btn{
    position:absolute;right:-2px;bottom:2px;width:39px;height:39px;
    border-radius:50%;border:3px solid #fff;background:var(--primary);
    color:#fff;display:grid;place-items:center;font-size:17px;
}
.avatar-area a{display:block;color:#6d80a0;font-size:13px;margin-top:9px}
.personal-form{padding-top:15px}
.personal-form .field-row{grid-template-columns:1fr 105px}
.personal-card .save-row{margin-top:75px}
.save-row{text-align:left}

.small-card{margin-bottom:16px}
.small-card:last-child{margin-bottom:0}
.small-card .field-row{grid-template-columns:1fr 100px;margin-top:14px}
.small-card .btn{min-width:185px}
.password-row{position:relative}
.password-row .toggle-pass{position:absolute;left:12px;top:50%;transform:translateY(-50%);border:0;background:none;color:#7184a4;font-size:19px}
.password-row input{padding-left:43px}

.permission-card{margin-top:16px}
.permission-layout{display:grid;grid-template-columns:1fr 415px;gap:12px;margin-top:14px}
.permissions{
    border:1px solid #e2edf2;border-radius:9px;padding:22px 30px;
    display:grid;grid-template-columns:1fr 1fr;gap:18px 55px;
}
.form-check{display:flex;align-items:center;gap:10px;padding-right:0}
.form-check-input{margin:0!important;width:23px;height:23px;float:none!important}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-label{font-size:15px}
.admin-note{background:#edf7ff;border-radius:8px;padding:18px 20px;color:#4e6d97}
.admin-note strong{display:block;color:#0875d1;margin-bottom:8px}

.mobile-menu{display:none}

/* Login page */
.login-page{
    min-height:100vh;background:#edf5f7;padding:15px;
}
.login-shell{
    min-height:calc(100vh - 30px);max-width:1505px;margin:auto;
    display:grid;grid-template-columns:1.55fr 1fr;
    border-radius:20px;overflow:hidden;background:#fff;
    box-shadow:0 10px 40px rgba(12,50,65,.12);
}
.hero-panel{background:#063f42;position:relative;min-height:calc(100vh - 30px);overflow:hidden}
.hero-panel img{width:100%;height:100%;object-fit:cover;display:block}
.login-panel{
    background:#fff;display:flex;justify-content:center;
    padding:70px 68px 40px;direction:rtl;
}
.login-inner{width:100%;max-width:465px;text-align:right}
.login-logo{display:block;width:205px;margin:15px auto 38px}
.login-title{text-align:center;font-size:30px;font-weight:800;line-height:1.5;margin:0 0 22px}
.login-sub{text-align:center;color:#7586a2;font-size:16px;margin-bottom:32px}
.login-field{position:relative;margin-bottom:20px}
.login-field .form-control{height:59px;border-radius:15px;padding-right:52px;padding-left:50px;font-size:15px}
.login-field>i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:23px;color:#657792;z-index:2}
.login-field .toggle-pass{position:absolute;left:15px;top:50%;transform:translateY(-50%);border:0;background:none;color:#657792;font-size:21px;z-index:3}
.login-options{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;font-size:14px}
.remember{display:flex;align-items:center;gap:8px;color:#71809a}
.remember input{width:20px;height:20px}
.forgot{color:#0087c5}
.login-btn{width:100%;height:59px;border-radius:15px;font-size:17px;margin-bottom:25px}
.or-divider{display:flex;align-items:center;gap:15px;color:#70819b;margin:4px 0 25px}
.or-divider::before,.or-divider::after{content:'';height:1px;background:#d7e1e7;flex:1}
.google-btn{
    width:100%;height:59px;border:1px solid #d4e0e7;border-radius:15px;
    background:#fff;font-size:16px;font-weight:600;color:#1e2630;
    display:flex;align-items:center;justify-content:center;gap:14px;
}
.google-g{font-family:Arial,sans-serif;font-weight:700;font-size:27px;color:#4285f4}
.signup{text-align:center;margin-top:65px;color:#71809a}
.signup a{color:var(--primary);font-weight:700}

@media(max-width:1100px){
    .sidebar{width:220px}
    .admin-main{margin-left:220px}
    .settings-grid{grid-template-columns:1fr}
    .personal-card{grid-column:auto}
    .personal-card .save-row{margin-top:30px}
}
@media(max-width:900px){
    .sidebar{display:none}
    .admin-main{margin-left:0;padding:0 12px}
    .mobile-menu{display:block}
    .settings-grid{display:block}
    .settings-card{margin-bottom:14px}
    .permission-layout{grid-template-columns:1fr}
    .breadcrumb-trail{margin-top:10px}
    .personal-content{grid-template-columns:1fr}
    .avatar-area{padding-top:5px}
    .personal-form{padding-top:0}
}
@media(max-width:991px){
    .login-page{padding:0}
    .login-shell{min-height:100vh;border-radius:0;display:block}
    .hero-panel{display:none}
    .login-panel{min-height:100vh;padding:35px 24px}
    .login-logo{margin:5px auto 30px;width:180px}
    .login-title{font-size:25px}
}
@media(max-width:575px){
    .field-row,.personal-form .field-row,.small-card .field-row{grid-template-columns:1fr}
    .field-row label{order:1;text-align:right;margin-bottom:-8px}
    .field-row .field{order:2}
    .permissions{grid-template-columns:1fr;padding:18px}
    .topbar{height:58px}
    .breadcrumb-card{padding:18px}
    .breadcrumb-title h1{font-size:20px}
}





.loding {
    position: relative;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: loading-spin 0.7s linear infinite;
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}



label.required::after {
    content: " *";
    color: red;
}






.form-table{

    width:100%;
}

.form-table td , 
.form-table th{

padding:5px;

}

.avatar-span{
    display:inline-block;
    position:relative;
    margin:10px;
}

.avatar-span img{

    border-radius: 100%;
    width:120px;
    height:120px;
    border:solid 1px #ccc;
}

.avatar-span a{
position:absolute;
bottom:6px;
right:6px;
color:#fff;
display:flex;
align-items: center;
justify-content: center;
border:solid 2px #fff;
border-radius:100%;
font-size:20px;
width:40px;
height:40px;

background-color: #00847f;
}






.file-uploader {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-uploader-box {
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: #f8f9fa;
    overflow: hidden;
}

.file-uploader-add {
    border: 2px dashed #adb5bd;
    background: #fff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .15s;
}

.file-uploader-add:hover,
.file-uploader-add.dragover {
    border-color: #0d6efd;
    background: #f8fbff;
}

.file-uploader-add span {
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    color: #6c757d;
}

/* input واقعی */

.file-uploader-input {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;

    z-index: 10;
}

/* thumbnail */

.file-uploader-preview {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.file-uploader-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* فایل غیر تصویری */

.file-uploader-extension {
    font-size: 28px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* نام فایل */

.file-uploader-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 4px 6px;

    background: rgba(0, 0, 0, .65);
    color: #fff;

    font-size: 11px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    z-index: 5;
}

/* دکمه حذف */

.file-uploader-remove {
    position: absolute;
    top: 5px;
    right: 5px;

    width: 26px;
    height: 26px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, .65);
    color: #fff;

    font-size: 18px;
    line-height: 24px;

    cursor: pointer;

    z-index: 20;
}

.file-uploader-remove:hover {
    background: #dc3545;
}



.flex-rcl {
    display: flex;
    align-items: center;
    width: 100%;
    margin:5px;
    padding:5px;
    border-radius: 5px;
}

.flex-rcl-r {
    /* سمت راست */
}

.flex-rcl-c {
    margin-right: 15px;
    font-weight: bold;
}

.flex-rcl-l {
    margin-right: auto;
}
.no-checked{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    width:20px;
    height:20px;
    border-radius: 3px;
    background-color: var(--primary-dark);
    color:#fff;
   
}
.is-checked{
    display:inline-flex;
    align-items: center;
    justify-content: center;
    width:20px;
    height:20px;
    border-radius: 3px;
    background-color: var(--primary-dark);
    color:#fff;
   
}

.is-checked::before{
     content:"✔";
      display:inline-block;
      font-size:18px;
      margin-top:3px;
}


.table thead th{
    background-color: #f7f7f7;
}


.input-has-icon{
    position:relative;
}

.input-has-icon i{
position:absolute;
bottom:3px;
left:18px;
color:#6f6f6f;
font-size:15px;
font-weight: bold;

}