*{
    box-sizing:border-box;
    margin:0;padding:0
}
body{
    font-family:var(--font-family);
    background-color:var(--background-color);
    color:var(--text-color);
    line-height:1.7;
    font-size:16px;
    transition:background-color 0.3s,color 0.3s;
    cursor:default
}
body:not(.dark-mode) h1#home-link{
    color:#000000!important
}
body:not(.dark-mode) h1#home-link i{
    color:var(--primary-color)!important
}
body::before{
    content:"";
    position:fixed;
    top:0;left:0;
    width:100vw;height:100vh;z-index:-1;
    background:radial-gradient(circle at 80% 20%,#ffa00033 0%,transparent 60%),
    radial-gradient(circle at 20% 80%,#3949ab33 0%,transparent 60%),
    linear-gradient(135deg,#f5f7fa 0%,#e3e6f3 100%);
    animation:bgMove 12s ease-in-out infinite alternate;
    transition:background 0.5s
}
body.dark-mode::before{
    background:radial-gradient(circle at 80% 20%,#03dac622 0%,transparent 60%),
    radial-gradient(circle at 20% 80%,#3700b322 0%,transparent 60%),
    linear-gradient(135deg,#121212 0%,#1e1e1e 100%)
}
.container{
    max-width:1300px;
    margin:0 auto;
    padding:2rem
}
header{
    background:var(--surface-color);
    color:var(--primary-color);
    padding:1.5rem 0;
    text-align:center;
    box-shadow:var(--shadow-sm);
    border-bottom:1px solid var(--border-color);
    animation:headerFadeIn 1s cubic-bezier(.4,0,.2,1);
    transition:background-color 0.3s,color 0.3s,border-color 0.3s
}
header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem
}
header h1{
    font-size:2.2rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:1rem;
    cursor:pointer;
    margin:0;
    flex-shrink:0
}
header h1 i{
    color:var(--accent-color)
}
#dark-mode-toggle{
    background-color:var(--border-color);
    color:var(--subtle-text-color);
    border:1px solid #fff0
}
#dark-mode-toggle:hover{
    background-color:var(--secondary-color);
    color:#fff
}
.header-nav{
    display:flex;
    align-items:center;
    gap:1rem
}

/*search section */

.search-container{
    position:relative;
    width:250px;
    transition:width 0.3s ease-in-out
}
.search-container:focus-within{
    width:350px
}
.search-container input{
    width:100%;
    padding:.6rem 1.2rem;
    padding-left:3rem;
    border-radius:25px;
    border:1px solid var(--border-color);
    background-color:var(--background-color);
    color:var(--text-color);
    transition:all 0.3s ease-in-out
}
.search-container input:focus{
    background-color:var(--surface-color);
    border-color:var(--secondary-color);
    box-shadow:0 0 0 3px rgb(57 73 171 / .2)
}
.search-container i.fa-search{
    position:absolute;
    left:1.2rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--subtle-text-color);
    pointer-events:none
}
.search-container input{
    background-color:rgba(var(--background-rgb),.7);
    border:1px solid var(--border-color)
}
.search-container input:focus{
    background-color:var(--surface-color);
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2)
}
/* END */

#dark-mode-toggle{background-color:var(--background-color);border:1px solid var(--border-color)}
.search-result-item:hover{background-color:var(--hover-color)}
.search-result-icon{font-size:1.2rem;color:var(--accent-color);margin-left:1rem;flex-shrink:0}
.search-result-info{display:flex;flex-direction:column;gap:6px}
.result-name{font-weight:600;color:var(--text-color)}
.result-details{display:flex;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--subtle-text-color)}
.result-details span{display:flex;align-items:center}
.result-details span i{margin-left:6px}
.search-container{position:relative}
#search-results-dropdown{position:absolute;top:100%;left:0;width:100%;z-index:1000;background-color:var(--surface-color);border:1px solid var(--border-color);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 8px 20px rgb(0 0 0 / .15);overflow-y:auto;max-height:70vh;display:none;box-sizing:border-box}
footer{text-align:center;padding:2.5rem 2rem;margin-top:4rem;background-color:rgba(var(--surface-rgb),.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:var(--subtle-text-color);border-top:1px solid var(--border-color);position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);animation:footerShine 4s linear infinite}
@keyframes footerShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
footer p{margin:.5rem 0}
footer a{color:var(--primary-color);text-decoration:none;font-weight:600;position:relative;padding:.2rem 0}
footer a::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:50%;transform:translateX(-50%);background-color:var(--accent-color);transition:width 0.3s ease}
footer a:hover::after{width:100%}
.footer-credits{margin:1rem 0;font-size:.9rem}
.link-separator{margin:0 .5rem;color:var(--subtle-text-color);opacity:.5}
.view{display:none;animation:fadeIn 0.4s ease-out}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.hero-section{padding:3rem 2rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border-radius:  var(--border-radius);text-align:center;margin-bottom:3rem;animation:heroFadeIn 1.2s cubic-bezier(.4,0,.2,1)}
@keyframes heroFadeIn{0%{opacity:0;transform:scale(.96) translateY(40px)}70%{opacity:1;transform:scale(1.02) translateY(-8px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.hero-section h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem;animation:heroTitlePop 1.2s cubic-bezier(.4,0,.2,1) 0.2s both}
@keyframes heroTitlePop{0%{opacity:0;transform:translateY(30px) scale(.95)}60%{opacity:1;transform:translateY(-6px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
.hero-section p{font-size:1.2rem;max-width:700px;margin:0 auto;opacity:.9;animation:heroTextFade 1.2s cubic-bezier(.4,0,.2,1) 0.5s both}
@keyframes heroTextFade{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.card{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-md);cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease,background-color 0.3s,border-color 0.3s;border:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.card:hover{transform:translateY(-10px);box-shadow:0 16px 32px rgb(0 0 0 / .1)}
.card-content{padding:2rem;text-align:center}
.card-icon-background{width:80px;height:80px;margin:0 auto 1.5rem auto;border-radius:50%;background-color:var(--background-color);display:flex;align-items:center;justify-content:center;transition:background-color 0.3s ease}
.card:hover .card-icon-background{background-color:var(--accent-color)}
.card:hover .card-icon-background i{color:var(--surface-color)}
.card h3{color:var(--primary-color);font-size:1.5rem;margin-bottom:.5rem}
.card-stats{color:var(--subtle-text-color);font-size:1rem;font-weight:600}
.card i{font-size:2.5rem;color:var(--secondary-color);transition:color 0.3s ease}
.card-action{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--background-color);font-weight:700;color:var(--primary-color);transition:background-color 0.3s ease,color 0.3s ease}
.card:hover .card-action{background-color:var(--primary-color);color:#fff}
.btn{background-color:var(--secondary-color);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;font-family:var(--font-family);transition:all 0.2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none}
.btn:hover{background-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15)}
.btn-success:hover{background-color:#2e7d32}.btn-warning{background-color:var(--accent-color);color:var(--primary-color)}
.btn-warning:hover{background-color:#ff8f00}
.btn-sm{padding:.4rem .8rem;font-size:.8rem}
@keyframes breadcrumbPopIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#breadcrumbs-container{margin-bottom:2rem;padding:.75rem 1.5rem;background-color:var(--surface-color);border-radius:var(--border-radius);font-size:.95rem;font-weight:600;box-shadow:var(--shadow-sm);transition:background-color 0.3s,border-color 0.3s;border:1px solid var(--border-color);display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
#breadcrumbs-container>*{opacity:0;animation:breadcrumbPopIn 0.4s ease-out forwards}
#breadcrumbs-container>*:nth-child(1){animation-delay:0.05s}
#breadcrumbs-container>*:nth-child(2){animation-delay:0.1s}
#breadcrumbs-container>*:nth-child(3){animation-delay:0.15s}
#breadcrumbs-container>*:nth-child(4){animation-delay:0.2s}
#breadcrumbs-container>*:nth-child(5){animation-delay:0.25s}
#breadcrumbs-container>*:nth-child(6){animation-delay:0.3s}
#breadcrumbs-container>*:nth-child(7){animation-delay:0.35s}
#breadcrumbs-container a{color:var(--secondary-color);text-decoration:none;transition:color 0.2s;display:inline-flex;align-items:center;gap:.3rem}
#breadcrumbs-container a:hover{color:var(--primary-color);text-decoration:underline}
#breadcrumbs-container .breadcrumb-separator{color:var(--subtle-text-color);opacity:.6}
#breadcrumbs-container .breadcrumb-current{color:var(--text-color);font-weight:700}
header{background:linear-gradient(to bottom,rgba(var(--surface-rgb),.95),rgba(var(--surface-rgb),.85));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);padding:1rem 0;position:sticky;top:0;z-index:990;transition:background 0.3s,border-color 0.3s}
header h1{font-weight:700;text-shadow:1px 1px 3px rgb(0 0 0 / .1)}
.search-container input{background-color:rgba(var(--background-rgb),.7);border:1px solid var(--border-color)}
.search-container input:focus{background-color:var(--surface-color);border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2)}
#dark-mode-toggle{background-color:var(--background-color);border:1px solid var(--border-color)}
#material-details-content{background:transparent;padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow-md);transition:background-color 0.3s}
.details-header{padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:flex-start;transition:border-color 0.3s}
.details-header h2{font-size:2.2rem;color:var(--primary-color);margin-bottom:.5rem}
.details-header p{font-size:1.1rem;color:var(--subtle-text-color)}
.details-grid{display:grid;grid-template-columns:2fr 1fr;gap:2.5rem}
.sidebar h3,.main-content h3{margin-bottom:1rem;color:var(--primary-color);font-size:1.3rem;border-bottom:2px solid var(--accent-color);padding-bottom:.5rem;display:inline-block}
.main-content{min-width:0}.metadata-list{list-style:none;padding:0}
.metadata-list li{display:flex;align-items:center;gap:1rem;padding:.8rem 0;font-size:1rem;border-bottom:1px solid var(--background-color);transition:border-color 0.3s}
.metadata-list li:last-child{border-bottom:none}
.metadata-list i{color:var(--secondary-color);font-size:1.5rem;width:30px;text-align:center}
.metadata-list div{display:flex;flex-direction:column}
.metadata-list span{color:var(--subtle-text-color)}
.share-buttons{display:flex;flex-wrap:wrap;gap:.75rem}
.file-list{max-height:280px;overflow-y:auto;padding-right:10px}
.file-list a{display:flex;align-items:center;gap:1rem;background:var(--background-color);color:var(--text-color);padding:1rem;margin:.5rem 0;border-radius:8px;text-decoration:none;transition:all 0.2s ease;font-weight:600;border:1px solid var(--border-color)}
.file-list a:hover{background-color:var(--success-color);color:#fff;border-color:var(--success-color)}
.image-gallery{display:flex;overflow-x:auto;white-space:nowrap;padding-bottom:1rem;gap:1rem;margin-top:1rem}
.image-gallery img{height:120px;width:auto;max-width:none;object-fit:cover;border-radius:var(--border-radius);cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease;border:1px solid var(--border-color)}
.image-gallery img:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}


#comments-section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color);transition:border-color 0.3s}
.comment{background-color:var(--background-color);padding:1rem 1.5rem;border-radius:var(--border-radius);margin-bottom:1rem;transition:background-color 0.3s}
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:var(--subtle-text-color);font-size:.9rem}
.comment-author{font-weight:700;color:var(--primary-color)}
.comment-body{line-height:1.6}
#comment-form{margin-top:2rem}
#comment-form h4{margin-bottom:1rem}


.rating-container{margin-top:1rem;padding:1rem;background-color:var(--background-color);border-radius:var(--border-radius);text-align:center}
.rating-stars{display:inline-block;direction:rtl;unicode-bidi:bidi-override}
.rating-stars>span{display:inline-block;position:relative;font-size:2.5rem;color:var(--subtle-text-color);cursor:pointer;transition:color 0.2s,transform 0.2s}
.rating-stars:not(.disabled)>span:hover,.rating-stars:not(.disabled)>span:hover~span{color:var(--accent-color)}
.rating-stars>span:hover{transform:scale(1.2)}
.rating-stars span.rated{color:var(--accent-color)}
.rating-stars.disabled{pointer-events:none}
#average-rating{display:block;margin-top:.5rem;font-size:.9rem;color:var(--subtle-text-color)}
.form-container{background:var(--surface-color);padding:3rem;border-radius:var(--border-radius);max-width:500px;margin:3rem auto;box-shadow:var(--shadow-md);transition:background-color 0.3s}
.form-container h2{text-align:center;margin-bottom:2rem;color:var(--primary-color)}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,textarea{width:100%;padding:.8rem 1rem;margin-bottom:1rem;border:1px solid var(--border-color);border-radius:8px;box-sizing:border-box;font-family:var(--font-family);font-size:1rem;transition:border-color 0.3s,box-shadow 0.3s,background-color 0.3s,color 0.3s;background-color:var(--surface-color);color:var(--text-color)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 3px rgb(57 73 171 / .2)}
.error-message{color:var(--danger-color);margin-top:1rem;text-align:center;font-weight:600}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);transition:border-color 0.3s}
.admin-section{background:var(--surface-color);padding:2rem;border-radius:var(--border-radius);margin-bottom:2rem;box-shadow:var(--shadow-md);transition:background-color 0.3s}
.admin-tabs{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:2rem;flex-wrap:wrap;transition:border-color 0.3s}
.tab-link{padding:.8rem 1.5rem;cursor:pointer;border:none;background:none;font-size:1.1rem;font-weight:600;color:var(--subtle-text-color);border-bottom:3px solid #fff0;transition:all 0.3s ease}
.tab-link.active,.tab-link:hover{color:var(--primary-color);border-bottom-color:var(--primary-color)}
.tab-content{display:none}
.tab-content.active{display:block;animation:fadeIn 0.5s}
.admin-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem}
.form-column{grid-column:1 / 2}.list-column{grid-column:2 / 3}
.data-table{width:100%;border-collapse:collapse;font-size:.95rem}
.data-table th,.data-table td{text-align:right;padding:.8rem 1rem;border-bottom:1px solid var(--border-color);transition:border-color 0.3s}
.data-table th{background-color:var(--background-color);font-weight:700;color:var(--primary-color);transition:background-color 0.3s}
.data-table tr:last-child td{border-bottom:none}
.data-table .actions{display:flex;gap:.5rem}
.modal-overlay{position:fixed;top:0;left:0;width:100%;-webkit-backdrop-filter:blur(5px);;height:100%;background:rgb(28 30 33 / .6);backdrop-filter:blur(5px);z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}
.modal-overlay.visible{opacity:1;visibility:visible}
.modal-content{background:var(--surface-color);padding:2.5rem;border-radius:var(--border-radius);width:90%;max-width:500px;text-align:center;position:relative;transform:translateY(20px) scale(.95);transition:transform 0.3s ease,background-color 0.3s}
.modal-overlay.visible .modal-content{transform:translateY(0) scale(1)}
.close-btn{position:absolute;top:1rem;left:1rem;font-size:1.5rem;cursor:pointer;color:var(--subtle-text-color);border:none;background:none;width:30px;height:30px;line-height:30px;border-radius:50%;transition:background-color 0.2s}
.close-btn:hover{background-color:var(--background-color)}
#edit-material-modal .modal-content{max-height:85vh;display:flex;flex-direction:column}
#edit-modal-body{overflow-y:auto;padding-left:15px;text-align:right}
#edit-modal-body::-webkit-scrollbar{width:8px}
#edit-modal-body::-webkit-scrollbar-track{background:var(--background-color);border-radius:10px}
#edit-modal-body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-radius:10px}
#edit-modal-body::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}
.section-item{background:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;margin-bottom:1rem;transition:background-color 0.3s,border-color 0.3s}
.section-header{display:flex;gap:1rem;margin-bottom:1rem}
.link-item{display:flex;gap:1rem;align-items:center;margin-bottom:.5rem}
.link-item input{margin-bottom:0}.link-item .link-inputs{flex-grow:1}
.loader{text-align:center;padding:4rem;font-size:1.2rem;font-weight:600}
@media (max-width:900px){.container{padding:1.5rem}
.cards-container{gap:1.2rem}
.admin-grid{grid-template-columns:1fr;gap:1.5rem}
.form-column,.list-column{grid-column:auto}
.details-grid{grid-template-columns:1fr}}
@media (max-width:768px){header .container{flex-direction:row;flex-wrap:wrap;justify-content:space-between}
header h1{font-size:1.6rem;gap:.75rem}
.search-container{width:160px}
.search-container:focus-within{width:200px}}
@media (max-width:600px){.container{padding:1rem}
header h1{font-size:1.8rem;gap:.5rem;width:100%;justify-content:center;margin-bottom:1rem}
.header-nav{width:100%;justify-content:space-between}
.hero-section{padding:2rem 1rem }
.hero-section h2{font-size:1.8rem}
.cards-container{grid-template-columns:1fr;gap:1rem}
.admin-header{flex-direction:column;gap:1rem;align-items:flex-start}
.admin-tabs{flex-direction:column;gap:.5rem}
.tab-link{width:100%;text-align:right}
.details-header{flex-direction:column;gap:1rem}
.details-header h2{font-size:1.8rem}}
.card.coming-soon{cursor:not-allowed;position:relative}
.card.coming-soon::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(255 255 255 / .5);z-index:1;transition:background-color 0.3s}
.video-modal-content{width:90%;max-width:900px;padding:1rem;background-color:var(--bg-dark);border:1px solid var(--border-dark)}
.video-iframe-container{position:relative;width:100%;padding-top:56.25%}
.video-iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.courses-container{display:grid;gap:2rem}
.course-section-card{background:var(--surface-dark);border:1px solid var(--border-dark);border-radius:var(--border-radius);padding:2rem;text-align:center}
.course-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}
.course-header h2{font-size:1.8rem;margin:0}
.course-actions{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.login-page-wrapper{display:grid;grid-template-columns:1fr 1fr;min-height:80vh;align-items:center}
.login-info-side{padding:3rem;color:var(--surface-light);background:linear-gradient(45deg,var(--accent-light),#1e3a8a);height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.login-info-side .info-content i{font-size:4rem;margin-bottom:1.5rem}
.login-info-side h1{font-family:var(--font-heading);font-size:2.5rem;color:inherit}
.login-info-side p{font-size:1.1rem;max-width:400px;margin:1rem auto 0;opacity:.9}
.login-form-side{display:flex;justify-content:center;align-items:center;padding:2rem}
.login-form{width:100%;max-width:400px;background:none;border:none;box-shadow:none;padding:0}
.login-form .input-group{margin-bottom:1.5rem}.login-form label{display:block;margin-bottom:.5rem;font-weight:600}
.forgot-password{display:block;text-align:left;margin-top:-1rem;margin-bottom:1.5rem;font-size:.9rem;color:var(--subtle-text-light)}
@media (max-width:900px){.login-page-wrapper{grid-template-columns:1fr}
.login-info-side{display:none}}
.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-top:3rem;margin-bottom:3rem}
.chart-title,.table-title{text-align:center;margin-bottom:1.5rem;font-family:var(--font-heading);color:var(--text-dark)}
.form-divider{border:none;height:1px;background-color:var(--border-dark);margin:2rem 0}
#social-links-container h3{margin-bottom:1.5rem}
.link-input-group{margin-bottom:1.5rem}
.link-input-group label{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;font-weight:600}
.link-input-group label i{font-size:1.2rem;color:var(--accent-dark)}
.toggle-switch-wrapper{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem;padding:.5rem 1rem;background-color:var(--bg-dark);border-radius:var(--border-radius)}
.toggle-switch-wrapper span{font-size:.9rem;font-weight:600}
.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#4b5563;-webkit-transition:.4s;transition:.4s;border-radius:28px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%}
input:checked+.slider{background-color:var(--accent-dark)}
input:focus+.slider{box-shadow:0 0 1px var(--accent-dark)}
input:checked+.slider:before{-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px)}
.footer-credits{display:flex;flex-direction:column;align-items:center;gap:1rem}
.footer-social-icons{display:flex;gap:1.5rem}
.footer-social-icons a{font-size:1.5rem;color:var(--subtle-text-dark);transition:color 0.3s,transform 0.3s}
.footer-social-icons a:hover{color:var(--accent-dark);transform:translateY(-3px)}
.number-input-stepper{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.number-input-stepper input[type="number"]{width:80px;text-align:center;font-weight:700;font-size:1.1rem;border-radius:var(--border-radius);margin:0!important;-moz-appearance:textfield;appearance:textfield}
.number-input-stepper input[type="number"]
::-webkit-outer-spin-button,.number-input-stepper input[type="number"]
::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.stepper-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-dark);background-color:var(--surface-dark);color:var(--text-dark);font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
.stepper-btn:hover{background-color:var(--accent-dark);color:var(--bg-dark);border-color:var(--accent-dark)}
.stats-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.stats-header h2{margin:0}
.stats-header .btn{display:inline-flex;align-items:center;gap:.5rem}
.stats-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.stat-card{background-color:var(--background-alt-color);padding:1.5rem;border-radius:var(--border-radius-lg);display:flex;align-items:center;gap:1.5rem;border:1px solid var(--border-color);transition:transform 0.2s ease,box-shadow 0.2s ease}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.stat-card i{font-size:2rem;color:var(--primary-color);background-color:var(--primary-light-color);width:60px;height:60px;display:grid;place-items:center;border-radius:50%}
.stat-info p{margin:0 0 .25rem 0;font-size:.9rem;color:var(--subtle-text-color)}
.stat-info span{font-size:1.75rem;font-weight:700;color:var(--text-color)}
.table-card{overflow-x:auto;/}
.table-card .mini-data-table{width:100%;table-layout:fixed;word-wrap:break-word}
.table-card .mini-data-table th,.table-card .mini-data-table td{padding:.75rem;text-align:right;border-bottom:1px solid var(--border-color);word-break:break-word}
.table-card .mini-data-table th:first-child,.table-card .mini-data-table td:first-child{width:65%}
#stats-tab .table-card .mini-data-table{width:100%;table-layout:fixed;border-collapse:collapse}
#stats-tab .table-card .mini-data-table td,#stats-tab .table-card .mini-data-table th{word-break:break-word;border:1px solid var(--border-color);padding:8px}
#stats-tab .table-card .mini-data-table th:first-child,#stats-tab .table-card .mini-data-table td:first-child{width:60%}
.charts-grid,.tables-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2.5rem}
.chart-card,.table-card{background-color:var(--background-alt-color);padding:1.5rem;border-radius:var(--border-radius-lg);border:1px solid var(--border-color)}
.chart-card h3,.table-card h3{margin-top:0;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color);padding-bottom:.75rem}
.table-card .mini-data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.mini-data-table th,.mini-data-table td{padding:.75rem;text-align:right;border-bottom:1px solid var(--border-color)}
.mini-data-table tbody tr:last-child td{border-bottom:none}
.mini-data-table tbody tr:hover{background-color:var(--background-color)}
.loader-card{display:flex;justify-content:space-around;grid-column:1 / -1}
.loader-card div{width:60px;height:60px;border-radius:50%;background-color:var(--subtle-text-color);opacity:.2;animation:pulse 1.5s infinite ease-in-out}
.loader-card div:nth-child(2){animation-delay:0.2s}
.loader-card div:nth-child(3){animation-delay:0.4s}@keyframes pulse{0%,100%{transform:scale(.8)}50%{transform:scale(1)}}
#stats-tab.processing{position:relative}
#stats-tab.processing::after{content:'جاري المعالجة...';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .5);color:#fff;display:grid;place-items:center;font-size:1.5rem;z-index:10;border-radius:var(--border-radius-lg)}
.form-group{display:flex;flex-direction:column}
.form-group label{margin-bottom:.5rem;font-weight:600;font-size:.9rem}
.form-divider{border:none;border-top:1px solid var(--border-color);margin:2rem 0}
.form-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.file-drop-zone{border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);padding:2rem;text-align:center;cursor:pointer;transition:border-color 0.3s ease,background-color 0.3s ease;margin:1.5rem 0}
.file-drop-zone:hover,.file-drop-zone.is-dragover{border-color:var(--primary-color);background-color:var(--primary-light-color)}.file-drop-zone-prompt i{font-size:3rem;color:var(--primary-color);margin-bottom:1rem}
.file-drop-zone-prompt p{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-color)}
.file-drop-zone-prompt span{font-size:.9rem;color:var(--subtle-text-color)}
.file-drop-zone-input{display:none}
.image-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1rem}
.image-preview-item,.existing-image-item{position:relative;border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--border-color);aspect-ratio:1 / 1}.image-preview-item img,.existing-image-item img{width:100%;height:100%;object-fit:cover}.existing-image-item .delete-image-btn{position:absolute;top:5px;right:5px;background-color:rgb(231 76 60 / .8);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1rem;line-height:24px;text-align:center;cursor:pointer;transition:background-color 0.2s ease}.existing-image-item .delete-image-btn:hover{background-color:#c0392b}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:.5rem;font-weight:600;font-size:.9rem}.form-divider{border:none;border-top:1px solid var(--border-color);margin:2rem 0}.form-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.file-drop-zone{border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);padding:2rem;text-align:center;cursor:pointer;transition:border-color 0.3s ease,background-color 0.3s ease;margin:1.5rem 0}.file-drop-zone:hover,.file-drop-zone.is-dragover{border-color:var(--primary-color);background-color:var(--primary-light-color)}.file-drop-zone-prompt i{font-size:3rem;color:var(--primary-color);margin-bottom:1rem}.file-drop-zone-prompt p{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-color)}.file-drop-zone-prompt span{font-size:.9rem;color:var(--subtle-text-color)}.file-drop-zone-input{display:none}.image-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1rem}.image-preview-item,.existing-image-item{position:relative;border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--border-color);aspect-ratio:1 / 1}.image-preview-item img,.existing-image-item img{width:100%;height:100%;object-fit:cover}.existing-image-item .delete-image-btn{position:absolute;top:5px;right:5px;background-color:rgb(231 76 60 / .8);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1rem;line-height:24px;text-align:center;cursor:pointer;transition:background-color 0.2s ease}.existing-image-item .delete-image-btn:hover{background-color:#c0392b}.section-item{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1rem;margin-bottom:1rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-title-input{flex-grow:1;margin-left:1rem;font-weight:700;border:none;background:#fff0;border-bottom:2px solid var(--primary-color)}.links-container{display:flex;flex-direction:column;gap:.75rem}.link-item{display:flex;align-items:center;gap:.5rem}.link-inputs{display:flex;flex-grow:1;gap:.5rem}.link-title-input,.link-url-input{width:50%}.existing-image-item .delete-image-btn,.image-preview-item .delete-image-btn{position:absolute;top:5px;right:5px;background-color:rgb(231 76 60 / .85);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1.1rem;font-weight:700;line-height:24px;text-align:center;cursor:pointer;transition:background-color 0.2s ease,transform 0.2s ease;z-index:10;display:grid;place-items:center}.header-profile-pic{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-left:.5rem;vertical-align:middle;border:1px solid var(--border-color)}.table-profile-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color)}.table-profile-pic.pending{border-color:var(--warning-color)}.pending-approval-container{display:flex;align-items:center;gap:1rem}.approval-buttons{display:flex;flex-direction:column;gap:.3rem}.profile-page-wrapper{display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem;min-height:80vh}.profile-card{background-color:var(--background-alt-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;overflow:hidden;border:1px solid var(--border-color)}.profile-header{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark-color));color:#fff;text-align:center;padding:2.5rem 1.5rem}.profile-header img{width:120px;height:120px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 15px rgb(0 0 0 / .2);object-fit:cover;margin-bottom:1rem}.profile-header h2{margin:0;font-size:1.75rem}.role-badge{display:inline-block;padding:.3rem .8rem;border-radius:20px;font-size:.85rem;margin-top:.5rem;background-color:rgb(255 255 255 / .2)}.profile-body{padding:2rem}.profile-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;color:var(--text-color)}.profile-info-item i{font-size:1.2rem;color:var(--primary-color);margin-top:4px}.profile-info-item span,.profile-info-item p{margin:0;font-size:1rem;word-break:break-all}.profile-footer{background-color:var(--background-color);padding:1rem;text-align:center;border-top:1px solid var(--border-color)}.social-link{color:var(--subtle-text-color);font-size:1.5rem;margin:0 .75rem;transition:color 0.3s ease}.social-link:hover{color:var(--primary-color)}.user-cell-link{text-decoration:none;color:inherit;display:block;transition:background-color 0.2s ease}.user-cell-link:hover{background-color:rgb(0 0 0 / .03)}.added-by-admin{display:flex;align-items:center;gap:.75rem;margin-top:.25rem}.added-by-admin-pic{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color)}.profile-page-grid{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:flex-start}.profile-sidebar{position:sticky;top:120px}.profile-picture-section{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2rem;text-align:center;box-shadow:var(--shadow-md)}.profile-picture-container{position:relative;width:150px;height:150px;margin:0 auto 1.5rem}#profile-pic-preview{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--surface-color);box-shadow:0 0 0 4px var(--primary-color);transition:transform 0.3s ease}#profile-pic-preview:hover{transform:scale(1.05)}.profile-pic-upload-btn{position:absolute;bottom:5px;right:5px;background-color:var(--primary-color);color:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:3px solid var(--surface-color);transition:transform 0.2s ease,background-color 0.2s ease;box-shadow:var(--shadow-sm)}.profile-pic-upload-btn:hover{transform:scale(1.1);background-color:var(--secondary-color)}.platform-owner-text{font-weight:600;color:yellow;margin-top:1rem;margin-bottom:0;display:inline-flex;align-items:center;gap:.5rem;background-color:var(--background-color);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--border-color)}.profile-main-content .admin-section{padding:2rem}.profile-main-content .admin-section h2{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;margin-top:0;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary-color)}.profile-main-content .form-group{margin-bottom:1.5rem}.profile-main-content .form-group label{font-weight:600;margin-bottom:.5rem;display:block}.link-input-group{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;position:relative}.link-input-group .admin-input{padding-right:2.5rem}.link-input-group i{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--subtle-text-color)}.toggle-switch-wrapper{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--subtle-text-color);background-color:var(--background-color);padding:.5rem 1rem;border-radius:20px}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--success-color)}input:checked+.slider:before{transform:translateX(20px)}@media (max-width:900px){.profile-page-grid{grid-template-columns:1fr}.profile-sidebar{position:static}}.profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.profile-stat-card{background-color:var(--background-color);padding:1.5rem 1rem;border-radius:var(--border-radius);text-align:center;border:1px solid var(--border-color);transition:transform 0.2s ease,box-shadow 0.2s ease}.profile-stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}.profile-stat-card i{font-size:1.75rem;color:var(--primary-color);margin-bottom:.75rem}.profile-stat-card span{display:block;font-size:2rem;font-weight:700}.profile-stat-card p{font-size:.9rem;color:var(--subtle-text-color);margin:0}.fab-container{position:fixed;bottom:25px;right:25px;z-index:999} .fab-option:nth-child(1){transition-delay:0.2s}.fab-container.active .fab-option:nth-child(2){transition-delay:0.1s}.fab-option:hover{background-color:var(--secondary-color);color:#fff;transform:scale(1.1)}.fab-option::before{content:attr(data-tooltip);position:absolute;right:120%;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:.85rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all 0.3s ease}.fab-option:hover::before{opacity:1;visibility:visible}.fab-toggle{width:60px;height:60px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;border:none;border-radius:50%;box-shadow:var(--shadow-md);display:grid;place-items:center;font-size:1.5rem;cursor:pointer;transition:transform 0.3s ease,box-shadow 0.3s ease}.fab-toggle:hover{transform:scale(1.1) rotate(15deg);box-shadow:var(--shadow-lg)}.fab-toggle i{transition:transform 0.3s cubic-bezier(.4,0,.2,1)}.fab-container.active .fab-toggle i{transform:rotate(45deg)}.modal-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .6);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.modal-wrapper.visible{opacity:1;visibility:visible}
.modal-content{background-color:var(--background-color);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);width:90%;max-width:500px;transform:scale(.95);transition:transform 0.3s ease}.modal-wrapper.visible .modal-content{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:1rem;margin-bottom:1.5rem}.modal-header h2{margin:0;font-size:1.5rem}.modal-body .form-group{margin-bottom:1rem}.modal-body .form-group label{display:block;margin-bottom:.5rem;font-weight:600}.profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}* .profile-modal-content{padding:0;max-width:450px;background:#fff0;border-radius:var(--border-radius);overflow:hidden}.profile-card-modal .profile-body{padding:1.5rem 2rem;background-color:var(--surface-color)}.profile-card-modal .profile-info-item{display:flex;align-items:flex-start;gap:1rem;color:var(--text-color);margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.profile-card-modal .profile-info-item i{font-size:1.2rem;color:var(--primary-color);margin-top:4px}.profile-card-modal .profile-info-item p{margin:0;font-size:1rem;line-height:1.6;color:var(--subtle-text-color)}.profile-stats-grid-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.profile-stat-card-modal{text-align:center}.profile-stat-card-modal span{display:block;font-size:1.5rem;font-weight:700}.profile-stat-card-modal p{font-size:.8rem;color:var(--subtle-text-color);margin:0}.profile-footer{background-color:var(--background-color);padding:1rem;text-align:center;border-top:1px solid var(--border-color)}.social-link{color:var(--subtle-text-color);font-size:1.5rem;margin:0 .75rem;transition:color 0.3s ease}.social-link:hover{color:var(--primary-color)}.department-card{position:relative;background:rgba(var(--card-bg-rgb),.1);border-radius:var(--border-radius-xl);overflow:hidden;transition:transform 0.4s ease,box-shadow 0.4s ease;transform-style:preserve-3d;z-index:1}.department-card .card-content{position:relative;z-index:3;background:#fff0;}#user-profile-modal .close-btn{position:absolute;top:2px;right:3px;width:36px;height:36px;background-color:var(--surface-color);color:var(--text-color);border-radius:50%;border:2px solid var(--border-color);box-shadow:var(--shadow-md);font-size:1.5rem;display:grid;place-items:center;cursor:pointer;z-index:10;transition:transform 0.2s ease,background-color 0.2s ease,box-shadow 0.2s ease}.department-card .card-border{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--border-radius-xl);padding:2px;background:linear-gradient(135deg,transparent,var(--primary-color),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:1;opacity:0;transition:opacity 0.4s ease}.department-card:hover .card-border{opacity:1}.department-card .card-aurora{position:absolute;top:50%;left:50%;width:200%;height:200%;background:radial-gradient(circle,rgba(var(--primary-rgb),.3) 0%,rgba(var(--accent-rgb),.2) 30%,transparent 70%);transform:translate(-50%,-50%);animation:aurora-spin 20s linear infinite;z-index:0;opacity:0;transition:opacity 0.5s ease}.department-card:hover .card-aurora{opacity:1}@keyframes aurora-spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}.department-card:hover{transform:perspective(1500px) rotateX(5deg) rotateY(-10deg) scale3d(1.05,1.05,1.05);box-shadow:0 30px 60px rgb(0 0 0 / .3)}.department-card .card-icon-background{-webkit-backdrop-filter:blur(5px);background-color:rgba(var(--card-bg-rgb),.5);backdrop-filter:blur(5px);border:1px solid rgb(255 255 255 / .1)}.department-card h3{text-shadow:0 2px 5px rgb(0 0 0 / .3)}.department-card .card-stats{background-color:rgba(var(--primary-rgb),.9);color:#fff;border-radius:20px;padding:.3rem .8rem;font-size:.8rem;display:inline-block;box-shadow:0 2px 5px rgb(0 0 0 / .2)}@keyframes pulse-animation{0%{transform:scale(1);box-shadow:0 4px 12px rgb(0 0 0 / .2)}50%{transform:scale(1.05);box-shadow:0 8px 25px rgb(187 134 252 / .4)}100%{transform:scale(1);box-shadow:0 4px 12px rgb(0 0 0 / .2)}}#request-material-fab{animation:pulse-animation 2.5s infinite ease-in-out}.image-viewer{position:fixed;top:0;left:0;right:0;bottom:0;background:rgb(0 0 0 / .9);display:none;justify-content:center;align-items:center;flex-direction:column;z-index:9999;transition:opacity 0.3s ease}.image-viewer.visible{display:flex}.viewer-img{max-width:90vw;max-height:70vh;border-radius:10px;margin-bottom:20px}.viewer-controls{display:flex;gap:10px}.viewer-controls button,.viewer-controls a{background:#bb86fc;color:#fff;border:none;padding:10px 15px;font-size:1.2rem;cursor:pointer;border-radius:8px}.viewer-close{position:absolute;top:10px;right:20px;font-size:2rem;color:#fff;cursor:pointer}#image-viewer-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;position:fixed;inset:0;z-index:9999;padding:20px;background-color:rgb(0 0 0 / .85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}#image-viewer-container.visible{opacity:1;visibility:visible}#image-viewer-img{max-width:90%;max-height:75vh;border-radius:12px;box-shadow:0 10px 30px rgb(0 0 0 / .5);object-fit:contain}#download-image-btn{background-color:#4caf50;color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:700;transition:background-color 0.2s ease,transform 0.2s ease}#download-image-btn:hover{background-color:#43a047;transform:scale(1.05)}#close-viewer-btn{position:absolute;top:20px;right:25px;font-size:40px;color:#fff;background:#fff0;border:none;cursor:pointer;line-height:1;padding:0;transition:color 0.2s ease,transform 0.2s ease}#close-viewer-btn:hover{color:#ff5252;transform:scale(1.2)}.embedded-viewer{display:none;margin-top:2rem;padding:1.5rem;background-color:var(--background-alt-color,#f9f9f9);border-radius:var(--border-radius,8px);border:1px solid var(--border-color,#e0e0e0);animation:fadeIn 0.4s ease}.embedded-viewer__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color,#e0e0e0)}.embedded-viewer__header h3{margin:0;font-size:1.2rem;color:var(--text-color,#333)}.embedded-viewer__image{width:100%;max-width:100%;height:auto;border-radius:var(--border-radius,8px);margin-bottom:1rem}.embedded-viewer__actions{text-align:left}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.nav-btn{position:absolute;top:50%;transform:translateY(-50%);font-size:32px;background:rgb(0 0 0 / .4);color:#fff;border:none;padding:12px;cursor:pointer;z-index:10;border-radius:50%;transition:background 0.3s}#prev-image-btn{left:20px}#next-image-btn{right:20px}.nav-btn:hover{background:rgb(0 0 0 / .7)}/* 1. الحالة الافتراضية (مخفية) */
#lightbox-overlay {
    display: flex; /* استخدم flex للتحكم في المحاذاة */
    position: fixed;
    inset: 0; /* اختصار لـ top:0; left:0; right:0; bottom:0; */
    background-color: rgb(0 0 0 / .9);
    
    /* --- بداية التعديل --- */
    opacity: 0;
    visibility: hidden;
    z-index: -1; /*   اجعل قيمته سالبة ليكون في الخلف تماماً   */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* --- نهاية التعديل --- */
}

/* 2. الحالة عند الظهور (عند إضافة كلاس .visible) */
#lightbox-overlay.visible {
    opacity: 1;
    visibility: visible;
    z-index: 9999; /*   هنا فقط نقوم برفع قيمته ليكون في المقدمة   */
}
#lightbox-image{display:block;max-width:90vw;max-height:80vh;border-radius:8px;box-shadow:0 8px 25px rgb(0 0 0 / .5);margin-bottom:1rem;object-fit:contain}.lightbox-close-btn,.lightbox-prev-btn,.lightbox-next-btn{cursor:pointer;position:absolute;color:#fffdfd;font-weight:700;transition:0.3s;-webkit-user-select:none;-ms-user-select:none;user-select:none;z-index:10000}.lightbox-close-btn{top:15px;right:25px;font-size:45px;animation:fadeIn 0.5s ease-out,pulse 3s infinite alternate}.lightbox-prev-btn,.lightbox-next-btn{top:50%;transform:translateY(-50%);font-size:28px;background-color:rgba(67, 0, 250, 0.3);padding:16px;border-radius:8px}.lightbox-prev-btn{left:15px;animation:slideInLeft 0.5s ease-out,pulse 2s infinite alternate}.lightbox-next-btn{right:15px;animation:slideInRight 0.5s ease-out,pulse 2s infinite alternate}.lightbox-close-btn:hover,.lightbox-prev-btn:hover,.lightbox-next-btn:hover{background-color:rgba(2, 131, 252, 0.6);transform:scale(1.1);transition:all 0.3s ease}.lightbox-close-btn:hover{transform:scale(1.1) rotate(90deg)}.lightbox-actions{text-align:center}.lightbox-actions .action-btn{background-color:#bb86fc;color:#fff;padding:10px 20px;border-radius:5px;text-decoration:none;font-size:1rem}.lightbox-loader{width:60px;height:60px;border:5px solid rgb(255 255 255 / .2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;position:absolute;top:calc(50% - 30px);left:calc(50% - 30px);z-index:10001;display:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideInRight{from{transform:translateX(100%) translateY(-50%);opacity:0}to{transform:translateX(0) translateY(-50%);opacity:1}}@keyframes slideInLeft{from{transform:translateX(-100%) translateY(-50%);opacity:0}to{transform:translateX(0) translateY(-50%);opacity:1}}.scrollable-table-container{max-height:280px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--border-radius);padding-right:5px}.profile-grid{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:flex-start}.profile-grid__sidebar{position:sticky;top:2rem}.profile-main-card{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:2rem 1.5rem;text-align:center;border:1px solid var(--border-color)}
.profile-main-card__avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--primary-color);margin:0 auto 1rem;box-shadow:0 5px 15px rgb(0 0 0 / .1)}.profile-main-card__name{font-size:1.75rem;margin:0;font-weight:700}.profile-main-card__role{font-size:1rem;color:var(--primary-color);font-weight:600;margin:.25rem 0 1rem 0}.profile-main-card__email{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;color:var(--subtle-text-color);word-break:break-all}.profile-main-card__social{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color);display:flex;justify-content:center;gap:1rem}.profile-social-link{font-size:1.5rem;color:var(--subtle-text-color);transition:color 0.3s,transform 0.3s}.profile-social-link:hover{color:var(--primary-color);transform:translateY(-3px)}.profile-grid__main-content{display:flex;flex-direction:column;gap:2rem}.profile-content-card{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:1.5rem 2rem;border:1px solid var(--border-color)}.profile-content-card h3{display:flex;align-items:center;gap:.75rem;font-size:1.3rem;margin-top:0;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary-color)}.profile-stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem}.profile-stat{text-align:center}.profile-stat i{font-size:2rem;color:var(--accent-color);margin-bottom:.5rem}.profile-stat span{display:block;font-size:2.25rem;font-weight:700}.profile-stat p{font-size:.9rem;color:var(--subtle-text-color);margin:0}.anim-fade-up{opacity:0;transform:translateY(20px);animation:fadeInUp 0.6s ease-out forwards}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.profile-grid{grid-template-columns:1fr}.profile-grid__sidebar{position:static}}.profile-card-modal{perspective:2000px}.profile-card-modal .profile-header{background:radial-gradient(circle at 50% 0%,rgb(50 50 80 / .8),rgb(30 30 30 / .9) 70%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:2.5rem 1.5rem;text-align:center;border:1px solid rgb(255 255 255 / .1);position:relative;overflow:hidden;border-radius:var(--border-radius);transform-style:preserve-3d;transition:transform 0.6s cubic-bezier(.23,1,.32,1);animation:float-card 10s ease-in-out infinite}@keyframes float-card{0%,100%{transform:rotateX(10deg) rotateY(-10deg) translateZ(0);box-shadow:0 20px 40px rgb(0 0 0 / .4)}50%{transform:rotateX(-10deg) rotateY(10deg) translateZ(30px);box-shadow:0 40px 70px rgb(0 0 0 / .3)}}.profile-card-modal .profile-header::after{content:'';position:absolute;top:-50%;left:-150%;width:200%;height:200%;background:linear-gradient(to right,transparent 0%,rgb(255 255 255 / .1) 48%,rgb(255 255 255 / .25) 50%,rgb(255 255 255 / .1) 52%,transparent 100%);z-index:3;transform:rotate(45deg);animation:shine-effect 6s ease-in-out infinite;pointer-events:none}@keyframes shine-effect{0%{transform:translateX(-150%)}40%{transform:translateX(150%)}100%{transform:translateX(150%)}}.glowing-text{animation:text-glow 2s infinite ease-in-out;will-change:text-shadow}.profile-avatar-container{position:relative;width:120px;height:120px;margin:0 auto 1rem;transform:translateZ(50px)}.profile-avatar-container img{position:relative;z-index:2;border-radius:50%;border:3px solid rgb(255 255 255 / .9);box-shadow:0 10px 30px rgb(0 0 0 / .4)}.profile-avatar-container.is-superadmin::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;z-index:0;background:conic-gradient(from 90deg,#fff0 0%,rgb(187 134 252 / .8) 50%,#fff0 100%);animation:spin-aura 4s linear infinite}@keyframes spin-aura{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}.profile-card-modal .profile-header h2{color:#fff;text-shadow:0 0 10px rgb(255 255 255 / .8),0 0 20px rgb(187 134 252 / .7);font-weight:700;transform:translateZ(30px);animation:text-glow 3s ease-in-out infinite}.profile-card-modal .profile-header .role-badge{-webkit-backdrop-filter:blur(5px);background-color:rgb(255 255 255 / .15);color:#fff;border:1px solid rgb(255 255 255 / .2);backdrop-filter:blur(5px);transform:translateZ(20px);box-shadow:0 0 15px rgb(187 134 252 / .5);animation:text-glow 3s ease-in-out infinite 0.5s}@keyframes text-glow{0%,100%{text-shadow:0 0 5px rgb(255 255 255 / .5),0 0 10px rgb(187 134 252 / .3)}50%{text-shadow:0 0 10px rgb(255 255 255 / .9),0 0 20px rgb(187 134 252 / .7)}}.lightbox-loader-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgb(0 0 0 / .75);z-index:10002;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.lightbox-spinner{width:60px;height:60px;border:5px solid rgb(255 255 255 / .2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.progress-bar-container{width:250px;height:8px;background-color:rgb(255 255 255 / .2);border-radius:4px;margin-top:20px;overflow:hidden}.progress-bar{width:0%;height:100%;background-color:#fff;border-radius:4px;transition:width 0.2s linear}.progress-details{display:flex;justify-content:space-between;width:250px;margin-top:10px;font-size:.9rem;color:#fff;font-weight:500}#lightbox-progress-text{font-weight:700;font-size:1.1rem}#lightbox-speed-text{font-family:monospace}@keyframes spin{to{transform:rotate(360deg)}}.totp-setup-container,.totp-verify-container{background-color:var(--background-alt-color);border-radius:var(--border-radius);padding:2.5rem;max-width:500px;margin:3rem auto;box-shadow:var(--shadow-small);text-align:center}.totp-setup-container h2,.totp-verify-container h2{color:var(--text-color);margin-bottom:1rem;font-size:1.8rem}.totp-setup-container p,.totp-verify-container p{color:var(--subtle-text-color);margin-bottom:1.5rem;line-height:1.6}#qr-code-display img{max-width:200px;height:auto;border:1px solid var(--border-color);padding:10px;border-radius:var(--border-radius);background-color:#fff}#totp-secret-key{background-color:var(--background-color);border:1px dashed var(--border-color);padding:.8rem;border-radius:var(--border-radius);margin-top:1rem;font-size:.9rem;word-break:break-all;color:var(--text-color)}#totp-code-input,#totp-login-code{width:100%;padding:.8rem 1rem;margin-top:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--input-background);color:var(--text-color);font-size:1.2rem;text-align:center;box-sizing:border-box}.profile-picture-section{display:flex;flex-direction:column;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);margin-bottom:1rem}.profile-picture-container{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;margin-bottom:1rem;border:3px solid var(--accent-color);box-shadow:var(--shadow-small)}.profile-picture-container img{width:100%;height:100%;object-fit:cover}.profile-pic-upload-btn{position:absolute;bottom:0;right:0;background-color:var(--accent-color);color:#fff;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-small);transition:background-color 0.2s ease}.profile-pic-upload-btn:hover{background-color:var(--accent-dark)}#profile-pic-status{margin-top:.5rem;font-size:.9rem}#upload-pic-btn{margin-top:1rem}.admin-section{background-color:var(--background-alt-color);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-elevation-2);margin-bottom:2rem;border:1px solid var(--border-color)}.admin-section-header{text-align:center;margin-bottom:2.5rem;position:relative;padding-bottom:1rem}.admin-section-header h2{font-size:2.2rem;color:var(--text-color);margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700}.admin-section-header h2 i{color:var(--text-color);font-size:1.8rem}.section-description{font-size:1rem;color:var(--subtle-text-color);max-width:600px;margin:0 auto;line-height:1.6}.table-scroll-container{max-height:70vh;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);position:relative}.data-table{width:100%;border-collapse:separate;border-spacing:0;color:var(--text-color);min-width:600px}.data-table thead{background-color:var(--primary-color-dark);color:#fff;position:sticky;top:0;z-index:10}.data-table th,.data-table td{padding:1rem 1.2rem;text-align:right;border-bottom:1px solid var(--border-color)}.data-table th{font-weight:600;font-size:.95rem;white-space:nowrap}.data-table tbody tr{transition:background-color 0.2s ease}.data-table tbody tr:nth-child(even){background-color:var(--background-alt-color-light)}.data-table tbody tr:hover{background-color:var(--hover-color)}.badge{display:inline-flex;align-items:center;justify-content:center;padding:.4em .8em;border-radius:9999px;font-size:.8rem;font-weight:600;color:#fff;text-transform:capitalize;min-width:80px;text-align:center}.badge-success{background-color:var(--success-color)}.badge-warning{background-color:var(--warning-color);color:#333}.badge-inactive{background-color:var(--subtle-text-color)}.admin-select{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--text-color);font-size:.95rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');background-repeat:no-repeat;background-position:left .7rem center;background-size:1.2em;cursor:pointer;transition:border-color 0.2s ease,box-shadow 0.2s ease}
.admin-select:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2);outline:none}.info-message{text-align:center;padding:2rem;color:var(--subtle-text-color);font-size:1.1rem;background-color:var(--background-alt-color-light);border-radius:var(--border-radius);margin-top:1rem}.error-message{text-align:center;padding:1.5rem;color:var(--danger-color);font-size:1.1rem;background-color:rgba(var(--danger-rgb),.1);border-radius:var(--border-radius);margin-top:1rem;border:1px solid var(--danger-color)}.loader-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--background-rgb),.8);z-index:100;border-radius:var(--border-radius);transition:opacity 0.3s ease}.loader-spinner{border:4px solid var(--border-color);border-top:4px solid var(--accent-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:10px}.loader-overlay p{color:var(--text-color);font-size:1rem;font-weight:500}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.data-table-responsive:not(:empty) .loader-overlay{opacity:0;pointer-events:none}@media (max-width:768px){.data-table th,.data-table td{padding:.8rem;font-size:.85rem}.admin-section{padding:1.5rem}.admin-section-header h2{font-size:1.8rem}.section-description{font-size:.9rem}}@media (max-width:600px){.data-table-responsive{overflow-x:auto}.data-table{min-width:500px}}.notification-badge{background-color:var(--danger-color);color:#fff;border-radius:50%;padding:.2em .6em;font-size:.75rem;font-weight:700;position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgb(0 0 0 / .2)}.notification-filters{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem;justify-content:center}.notification-filter-btn{background-color:var(--background-alt-color-light);color:var(--text-color);border:1px solid var(--border-color);padding:.6rem 1.2rem;border-radius:var(--border-radius);cursor:pointer;transition:all 0.2s ease}.notification-filter-btn:hover{background-color:var(--hover-color)}.notification-filter-btn.active{background-color:var(--accent-color);color:#fff;border-color:var(--accent-color)}.notifications-list{display:grid;gap:1rem;max-height:65vh;overflow-y:auto;padding-right:5px;position:relative}.notification-item{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1rem 1.2rem;box-shadow:var(--shadow-elevation-1);transition:background-color 0.2s ease}.notification-item.unread{border-left:5px solid var(--accent-color);background-color:var(--background-alt-color-light)}.notification-item.read{opacity:.8}.notification-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.notification-header h3{margin:0;font-size:1.1rem;color:var(--text-color)}.notification-timestamp{font-size:.8rem;color:var(--subtle-text-color)}.notification-message{font-size:.95rem;color:var(--subtle-text-color);line-height:1.5;margin-bottom:1rem;white-space:pre-wrap}.notification-actions{display:flex;gap:.5rem;justify-content:flex-end}.notification-actions .btn{padding:.5rem .8rem;font-size:.8rem}#recent-materials-container{display:flex;flex-direction:column;gap:12px;margin-bottom:2rem}.recent-material-item{display:flex;align-items:center;padding:16px;background-color:var(--card-bg-color);border-radius:12px;border:1px solid var(--border-color);cursor:pointer;transition:transform 0.2s ease-in-out,box-shadow 0.2s ease-in-out;gap:16px}.recent-material-item:hover,.recent-material-item:focus-visible{transform:translateY(-3px);box-shadow:0 4px 20px rgb(0 0 0 / .1);border-color:var(--accent-color)}.recent-material-icon{flex-shrink:0;color:var(--accent-color);font-size:1.5rem;width:40px;text-align:center}.recent-material-info{flex-grow:1;display:flex;flex-direction:column;gap:4px}.recent-material-name{font-weight:600;font-size:1rem;color:var(--text-color)}.recent-material-dept{font-size:.85rem;color:var(--subtle-text-color)}.recent-material-action{margin-right:auto;margin-left:0;font-size:.9rem;color:var(--subtle-text-color);transition:transform 0.2s ease}.recent-material-item:hover .recent-material-action{transform:translateX(-5px)}.modal-wrapper.visible{display:flex;align-items:center;justify-content:center}.modal-content{display:flex;flex-direction:column;max-height:90vh;width:90%;max-width:600px}.modal-header{flex-shrink:0}.modal-body{overflow-y:auto;padding:1rem 1.5rem}#quick-view-body{background-color:var(--background-color)}.quick-view-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--card-bg-color);padding:1rem;border-radius:12px;text-align:center}.stat-item i{font-size:1.5rem;color:var(--accent-color);margin-bottom:.5rem}.stat-item span{font-size:1.75rem;font-weight:700;color:var(--text-color);line-height:1.2}.stat-item label{font-size:.8rem;color:var(--subtle-text-color);text-transform:uppercase}.quick-view-details-list{list-style:none;padding:0;margin:0 0 1.5rem 0}.quick-view-details-list li{display:flex;align-items:center;padding:.75rem 0;font-size:.95rem;border-bottom:1px solid var(--border-color-light)}.quick-view-details-list li:last-child{border-bottom:none}.quick-view-details-list li i{color:var(--subtle-text-color);margin-left:1rem;width:20px;text-align:center}.quick-view-details-list li strong{color:var(--text-color);margin-left:.5rem}.quick-view-details-list li span{color:var(--subtle-text-color);margin-right:auto}.quick-view-section{margin-top:1.5rem}.quick-view-section h4{display:flex;align-items:center;font-size:1.1rem;margin-bottom:1rem;color:var(--text-color)}.quick-view-section h4 i{margin-left:.75rem;color:var(--accent-color)}.quick-view-gallery{display:flex;flex-wrap:wrap;gap:10px}.quick-view-thumb{width:70px;height:70px;object-fit:cover;border-radius:8px;border:2px solid var(--border-color);transition:transform 0.2s,border-color 0.2s}.quick-view-thumb:hover{transform:scale(1.1);border-color:var(--accent-color)}.quick-view-links{list-style:none;padding:0;margin:0}.quick-view-links li{display:flex;align-items:center;background-color:var(--card-bg-color);padding:.75rem 1rem;border-radius:8px;margin-bottom:8px}.quick-view-links li i{color:var(--subtle-text-color);margin-left:1rem}.tab-link[data-tab="notifications-tab"]{position:relative}.notification-badge{position:absolute;top:5px;right:5px;min-width:22px;height:22px;background-color:var(--danger-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;line-height:1;box-shadow:0 2px 5px rgb(0 0 0 / .25);transform:scale(0);transition:transform 0.3s cubic-bezier(.175,.885,.32,1.275)}.notification-badge[style*="display: flex"]{transform:scale(1)}.skeleton{background-color:var(--border-color);border-radius:8px;animation:skeleton-pulse 1.5s infinite ease-in-out}.skeleton-text{height:1em;margin-bottom:.5em}.skeleton-avatar{width:120px;height:120px;border-radius:50%}.comments-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border-color)}.comments-section h3{font-size:1.8rem;color:var(--text-color);margin-bottom:2rem;display:flex;align-items:center;gap:.75rem}.comments-section h3 i{color:var(--primary-color)}.comment-form{background-color:var(--surface-color);padding:1.5rem;border-radius:var(--border-radius);margin-bottom:2.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--border-color);display:grid;gap:1rem}.comment-form input,.comment-form select,.comment-form textarea{width:100%;margin-bottom:0}.comment-form .form-actions{justify-self:end}.comments-list{display:flex;flex-direction:column;gap:1.5rem}.comment-thread{display:flex;flex-direction:column;gap:2rem}.comment{background-color:var(--surface-color);border-radius:var(--border-radius);padding:1.25rem 1.5rem;border-left:4px solid var(--primary-color);box-shadow:var(--shadow-sm);transition:box-shadow 0.2s ease}.comment:hover{box-shadow:var(--shadow-md)}.comment-header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:.25rem 1rem;margin-bottom:.75rem}.comment-author{font-weight:700;font-size:1.05rem}.comment-dept{font-size:.85rem;background-color:var(--background-color);padding:.2rem .6rem;border-radius:20px;color:var(--subtle-text-color);font-weight:600}.comment-date{font-size:.8rem;color:var(--subtle-text-color)}.comment-body{line-height:1.7;color:var(--text-color);padding-left:10px}.comment-actions{display:flex;gap:.5rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--background-color)}.action-btn{background:none;border:none;color:var(--subtle-text-color);cursor:pointer;padding:.5rem .75rem;border-radius:8px;display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;transition:background-color 0.2s,color 0.2s}.action-btn:hover{background-color:var(--background-color);color:var(--primary-color)}.action-btn i{font-size:1rem}.replies-container{position:relative;padding-right:50px;margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.replies-container::before{content:'';position:absolute;top:0;right:20px;bottom:0;width:2px;background-color:var(--border-color);z-index:0}.reply .comment-content::before{content:'';position:absolute;top:20px;right:-30px;width:30px;height:2px;background-color:var(--border-color)}.reply .comment-content::before{content:'';position:absolute;top:20px;right:-30px;width:30px;height:2px;background-color:var(--border-color)}.reply .comment-content{position:relative;background-color:var(--background-color)}.reply-form .form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}
.reply{background-color:var(--background-color);padding:1rem 1.25rem;border-radius:8px;border-left:3px solid var(--secondary-color)}.info-message{text-align:center;padding:2rem;background-color:var(--surface-color);border-radius:var(--border-radius);color:var(--subtle-text-color);font-weight:600}@media (max-width:600px){.replies-container{padding-right:1.5rem}.comment-header{flex-direction:column;align-items:flex-start;gap:.25rem}.comment-date{margin-right:0}}@media (max-width:480px){.comments-section{margin-top:2rem}.comment-form{padding:1rem}.comment,.reply{padding:1rem}.replies-container{padding-right:1rem;margin-right:.75rem}.comment-actions{flex-wrap:wrap;justify-content:flex-start}}.comments-list{display:flex;flex-direction:column;gap:2rem}.comment-thread{position:relative}.comment{display:flex;gap:1rem;align-items:flex-start}.comment-avatar,.comment-avatar-placeholder{width:40px;height:40px;border-radius:50%;flex-shrink:0}.comment-avatar{object-fit:cover}.comment-avatar-placeholder{background-color:var(--background-color);display:grid;place-items:center;font-size:1.2rem;color:var(--subtle-text-color)}.comment-content{background-color:var(--surface-color);border-radius:var(--border-radius);padding:.8rem 1.2rem;flex-grow:1;border:1px solid var(--border-color)}.replies-container{position:relative;padding-right:50px;margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.replies-container::before{content:'';position:absolute;top:-10px;right:20px;bottom:10px;width:2px;background-color:var(--border-color);z-index:0}.reply::before{content:'';position:absolute;top:20px;right:20px;width:30px;height:2px;background-color:var(--border-color)}.reply{position:relative}.show-replies-btn{background:none;border:none;color:var(--primary-color);font-weight:600;cursor:pointer;margin-right:50px;margin-top:.75rem;display:inline-flex;align-items:center;gap:.5rem}.show-replies-btn:hover{text-decoration:underline}.lightbox-overlay{position:fixed!important;inset:0;z-index:9999;background-color:rgb(18 18 18 / .92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0s 0.3s}.lightbox-overlay.visible{display:flex!important;opacity:1!important;visibility:visible!important;transition:opacity 0.3s ease}#lightbox-image{display:block!important;visibility:visible!important;max-width:90vw;max-height:80vh;border-radius:8px;box-shadow:0 10px 30px rgb(0 0 0 / .5);object-fit:contain;transition:opacity 0.3s ease;opacity:0}.lightbox-loader-container{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:center;z-index:10002}.lightbox-close-btn{position:absolute;top:20px;right:20px;background-color:#fff0;color:var(--text-color);border:none;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-small);transition:background-color 0.2s ease,transform 0.2s ease}.lightbox-prev-btn{position:absolute;left:20px;top:50%;transform:translateY(-50%);background-color:#fff0;color:blue;border:none;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-small);transition:background-color 0.2s ease,transform 0.2s ease}.lightbox-next-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%);background-color:white;color:blue;border:none;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:var(--shadow-small);transition:background-color 0.2s ease,transform 0.2s ease}.lightbox-close-btn:hover{background-color:var(--accent-dark);transform:scale(1.05)}.lightbox-prev-btn:hover i,.lightbox-next-btn:hover i{color:var(--text-color);transform:scale(1.1)}.lightbox-loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10000}.lightbox-loader{border:4px solid var(--border-color);border-top:4px solid var(--accent-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.lightbox-loader p{color:var(--text-color);font-size:.9rem;margin-top:10px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.footer-credits{display:flex;justify-content:space-between;align-items:center;background-color:#fff0;color:#000;padding:15px 30px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;border-top:3px solid #3498db;animation:pulseBorder 2.5s infinite ease-in-out}@keyframes pulseBorder{0%{box-shadow:0 -4px 10px -3px rgb(52 152 219 / .3)}50%{box-shadow:0 -4px 20px 2px rgb(52 152 219 / .7)}100%{box-shadow:0 -4px 10px -3px rgb(52 152 219 / .3)}}.footer-credits strong{color:#fff;font-weight:700}.footer-social-icons{display:flex;gap:15px}.social-icon{color:#ecf0f1;font-size:22px;text-decoration:none;transition:color 0.3s ease,transform 0.3s ease}.social-icon:hover{color:#3498db;transform:scale(1.2)}
.site-footer{min-height:80px;display:flex;flex-direction:column;justify-content:center;padding-top:1rem;padding-bottom:1rem}
.pwa-prompt{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:90%;max-width:400px;background-color:var(--surface-dark,#333);color:var(--text-dark,#fff);border-radius:12px;padding:1rem;box-shadow:0 4px 15px rgb(0 0 0 / .3);z-index:1000;animation:fadeInUp 0.5s ease-out}.pwa-prompt-content{display:flex;align-items:center;gap:10px}.pwa-prompt p{margin:0;font-size:.9rem;line-height:1.5}.pwa-prompt .share-icon{width:20px;height:20px;vertical-align:middle}.pwa-prompt-close{position:absolute;top:5px;left:10px;background:none;border:none;color:var(--subtle-text-dark,#ccc);font-size:1.5rem;cursor:pointer}.checkbox-container{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:.9rem}.checkbox-container label{cursor:pointer}.btn:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}
#preloader.hidden{opacity:0;pointer-events:none}.loader-dots{display:flex;justify-content:center;gap:15px}.loader-dots .dot{width:15px;height:15px;background-color:var(--primary-color,#8b5cf6);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loader-dots .dot:nth-child(1){animation-delay:-0.32s}.loader-dots .dot:nth-child(2){animation-delay:-0.16s}@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:20px}
#preloader-text{color:var(--subtle-text-dark,#9ca3af);font-size:1rem;font-weight:600;margin:0;animation:fadeIn 0.5s ease-out}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-dark,#111827);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.5s ease-out}
#preloader.hidden{opacity:0;pointer-events:none}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:25px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}.runner{width:60px;height:80px;position:relative}.runner-body{animation:bob 0.5s infinite ease-in-out;position:relative}.head{width:20px;height:20px;background:var(--primary-color,#8b5cf6);border-radius:50%;position:absolute;top:0;left:20px}.runner-body::before{content:'';width:12px;height:30px;background:var(--primary-color,#8b5cf6);border-radius:6px;position:absolute;top:18px;left:24px}.arm,.leg{width:8px;height:25px;background:var(--primary-color,#8b5cf6);border-radius:4px;position:absolute;top:20px;left:26px}.arm{transform-origin:4px 4px}.leg{top:45px;transform-origin:4px 4px}.arm.front{animation:swing-front 0.5s infinite ease-in-out}.arm.behind{animation:swing-behind 0.5s infinite ease-in-out}.leg.front{animation:swing-front 0.5s infinite ease-in-out}.leg.behind{animation:swing-behind 0.5s infinite ease-in-out}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes swing-front{0%,100%{transform:rotate(45deg)}50%{transform:rotate(-45deg)}}@keyframes swing-behind{0%,100%{transform:rotate(-45deg)}50%{transform:rotate(45deg)}}.pwa-prompt .app-icon{width:48px;height:48px;border-radius:8px}.pwa-prompt-actions{display:flex;gap:10px;margin-top:10px}.pwa-prompt .btn{padding:.5rem 1rem;font-size:.9rem}@media (max-width:768px){.data-table thead{display:none}.data-table tr{display:block;margin-bottom:1rem;border-radius:var(--border-radius-md,8px);border:1px solid var(--border-dark,#374151);padding:1rem;box-shadow:0 2px 5px rgb(0 0 0 / .1)}.data-table td{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:.75rem 0;border-bottom:1px solid var(--border-dark,#374151)}.data-table td:last-child{border-bottom:none}.data-table td::before{content:attr(data-label);font-weight:600;color:var(--subtle-text-dark,#9ca3af);margin-left:1rem;text-align:right}.data-table td.actions{justify-content:center;padding-top:1rem}.data-table td.actions::before{display:none}.admin-section form{padding:1rem}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(17 24 39 / .8);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{background-color:var(--surface-dark,#1f2937);padding:2rem;border-radius:var(--border-radius-lg,12px);border:1px solid var(--border-dark,#374151);box-shadow:0 10px 30px rgb(0 0 0 / .3);width:90%;max-width:500px;transform:scale(.95);transition:transform 0.3s ease}.modal-overlay.visible .modal-content{transform:scale(1)}
.modal-content h2 i{color:var(--text-color)}.checkbox-container{display:flex;align-items:center;gap:12px;margin:1.5rem 0;background-color:rgb(0 0 0 / .2);padding:1rem;border-radius:var(--border-radius-md,8px)}.checkbox-container input[type="checkbox"]{display:none}.checkbox-container label{cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--text-dark,#f9fafb);font-size:.9rem}.checkbox-container label::before{content:'';width:20px;height:20px;border:2px solid var(--border-dark,#374151);border-radius:4px;background-color:var(--bg-dark,#111827);transition:all 0.2s ease;flex-shrink:0}.checkbox-container input[type="checkbox"]:checked+label::before{background-color:var(--primary-color,#8b5cf6);border-color:var(--primary-color,#8b5cf6);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center}.modal-actions{margin-top:1.5rem;text-align:center}
.modal-actions .btn {
    flex-grow: 1; /* ✅ يجعل الأزرار تتمدد لتملأ المساحة المتاحة بالتساوي */
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border-radius: 8px; /* حواف دائرية ناعمة */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.telegram-fab:hover{transform:scale(1.1) rotate(-15deg);box-shadow:0 8px 20px rgb(0 136 204 / .4)}.telegram-fab img{width:100%;height:100%;object-fit:cover}.telegram-fab:hover img{animation:pulse-bot 1.5s infinite ease-in-out}@keyframes pulse-bot{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes fab-fade-in{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.episodes-section{margin-top:2rem;padding:1.5rem;background-color:transparent;border-radius:var(--border-radius);border:1px solid var(--border-color)}.episodes-section h3{display:flex;align-items:center;gap:.5rem;font-size:1.6rem;color:var(--primary-color);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--accent-color)}.episodes-grid{display:flex;overflow-x:auto;gap:1rem;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--surface-color)}.episodes-grid::-webkit-scrollbar{height:8px}.episodes-grid::-webkit-scrollbar-track{background:var(--surface-color);border-radius:10px}.episodes-grid::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:10px;border:2px solid var(--surface-color)}.episode-card{flex:0 0 220px;display:block;text-decoration:none;color:var(--text-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform 0.2s ease-in-out,box-shadow 0.3s ease;background-color:var(--background-color)}.episode-card:hover{transform:scale(1.05)}.episode-card img{width:100%;height:auto;display:block}.episode-card h4{font-size:1rem;font-weight:600;padding:.75rem;margin:0;text-align:center}.episode-card::after{content:'\f144';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.5);font-size:2.5rem;color:#fff;background-color:rgb(0 0 0 / .4);border-radius:50%;width:60px;height:60px;display:grid;place-items:center;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;z-index:10}.episode-card:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}.episode-card img{transition:filter 0.3s ease}.episode-card:hover img{filter:brightness(.6)}.episodes-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.carousel-nav{display:flex;gap:.5rem}.nav-btn{background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);width:40px;height:40px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background-color 0.2s,color 0.2s}.nav-btn:hover{background-color:var(--primary-color);color:#fff}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.info-modal-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;font-size:2.5rem;color:var(--primary-color);background-color:var(--background-color);border-radius:50%;border:2px solid var(--primary-color)}.telegram-fab:hover,.chatbot-toggler:hover{transform:scale(1.1)}.telegram-fab{bottom:25px;background-color:var(--surface-color);overflow:hidden}.telegram-fab img{width:100%;height:100%;object-fit:cover}.chatbot-toggler{bottom:100px;background:linear-gradient(45deg,var(--accent-color),#00bfa5);color:#fff;font-size:1.8rem}#update-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:90%;max-width:500px;border-radius:12px;background-color:#fff;box-shadow:0 10px 25px rgb(0 0 0 / .1),0 5px 10px rgb(0 0 0 / .05);z-index:9999;border:1px solid #e5e7eb;opacity:0;visibility:hidden;transition:opacity 0.5s,visibility 0.5s,transform 0.5s;transform:translateX(-50%) translateY(30px)}#update-notification.update-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}#update-notification.update-hidden{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(30px)}.update-content{display:flex;align-items:center;padding:16px;gap:16px}.update-icon{flex-shrink:0;color:#2563eb}.update-icon svg{width:32px;height:32px}.update-text{flex-grow:1}.update-text h4{margin:0 0 4px 0;font-size:16px;font-weight:600;color:#111827}.update-text p{margin:0;font-size:14px;color:#4b5563;line-height:1.5}#update-now-button{flex-shrink:0;padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background-color:#2563eb;border:none;border-radius:8px;cursor:pointer;transition:background-color 0.3s}#update-now-button:hover{background-color:#1d4ed8}.downloadable{position:relative;overflow:hidden;transition:color 0.4s ease-in-out;-webkit-tap-highlight-color:#fff0}.downloadable.in-progress{color:#fff0;pointer-events:none}.animation-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.runway{position:absolute;bottom:0;left:-100%;width:100%;height:4px;background:#fff;opacity:.6;transition:left 0.4s 0.2s ease-in-out}.downloadable.in-progress .runway{left:0}.plane{position:absolute;font-size:24px;color:#fff;left:-20%;transform:translateY(40px);transition:all 0.8s cubic-bezier(.5,0,.9,1)}.downloadable.in-progress .plane{left:120%;transform:translateY(-80px) rotate(20deg)}.parachute{position:absolute;font-size:28px;color:#fff;opacity:0;transform:translateY(-100px) scale(.5);transition:all 0.6s cubic-bezier(.5,0,.2,1.5);transition-delay:0.8s}.downloadable.in-progress .parachute{opacity:1;transform:translateY(0) scale(1)}.checkmark{position:absolute;font-size:32px;color:#fff;opacity:0;transform:scale(0);transition:all 0.4s ease-in-out;transition-delay:1.5s}.downloadable.in-progress .checkmark{opacity:1;transform:scale(1)}.downloadable.in-progress .parachute.hidden{opacity:0;transform:scale(0)}header .container{position:relative}.pwa-speech-bubble{position:absolute;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;padding:10px 15px;border-radius:8px;box-shadow:0 5px 15px rgb(0 0 0 / .2);z-index:1001;font-size:.9rem;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(10px);animation:bubble-fade-in 0.5s 0.5s ease-out forwards;display:flex;align-items:center;gap:10px}.pwa-speech-bubble::after{content:'';position:absolute;bottom:100%;left:15px;border-width:7px;border-style:solid;border-color:#fff0 #fff0 var(--primary-color) #fff0}@keyframes bubble-fade-in{to{opacity:1;transform:translateY(0)}}.pwa-speech-bubble .close-bubble{background:none;border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.7;padding:0 5px}.pwa-speech-bubble::after{content:'';position:absolute;top:100%;left:var(--arrow-left,10px);border-width:7px;border-style:solid;border-color:#fff0 #fff0 var(--primary-color) #fff0;transform:rotate(180deg);transition:left 0.3s ease;pointer-events:none;opacity:.7}.pwa-speech-bubble .close-bubble:hover{opacity:1}.file-list{display:flex;flex-direction:column;gap:.75rem}.file-item{display:flex;align-items:center;gap:1rem;background-color:var(--background-color);padding:.75rem 1rem;border-radius:var(--border-radius);border:1px solid var(--border-color);transition:all 0.2s ease-in-out}.file-item:hover{border-color:var(--primary-color);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.file-icon{font-size:2rem;width:40px;text-align:center;color:var(--subtle-text-color)}.file-icon.pdf{color:#e53935}.file-icon.word{color:#1e88e5}.file-icon.excel{color:#43a047}.file-icon.powerpoint{color:#fb8c00}.file-icon.image{color:#8e24aa}.file-info{flex-grow:1}
.file-info span{display:block;font-weight:600;color:var(--text-color)}.file-download-action{text-decoration:none;padding:.5rem 1rem}.material-section h3{display:flex;align-items:center;gap:.75rem;font-size:1.6rem;color:var(--primary-color);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--accent-color)}.file-list{display:flex;flex-direction:column;gap:1rem}.file-tile{display:flex;align-items:center;gap:1rem;background:rgb(255, 255, 255);padding:1rem;border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(.25,.8,.25,1)}.file-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 25px rgb(0 0 0 / .1);border-color:var(--primary-color)}.file-tile-icon{font-size:2.5rem;width:50px;text-align:center;flex-shrink:0}.file-tile-icon.pdf{color:#e53935}.file-tile-icon.word{color:#1e88e5}.file-tile-icon.excel{color:#43a047}.file-tile-icon.powerpoint{color:#fb8c00}.file-tile-icon.image{color:#8e24aa}.file-tile-icon.default{color:var(--subtle-text-color)}.file-tile-info{flex-grow:1;text-align:right}.file-tile-info h4{margin:0;font-size:1.1rem;font-weight:700;color:black}.file-tile-info small{font-size:.8rem;color:red}.file-tile-download-btn{margin-right:auto;background-color:var(--background-color);color:var(--primary-color);border:1px solid var(--border-color);width:50px;height:50px;border-radius:50%;font-size:1.2rem;flex-shrink:0;display:grid;place-items:center;text-decoration:none;transition:all 0.3s ease}.file-tile-download-btn:hover{background-color:var(--primary-color);color:#fff;transform:scale(1.1) rotate(15deg);box-shadow:0 4px 15px rgba(var(--primary-rgb),.3)}#notes-modal .modal-body{display:flex;flex-direction:column;gap:1rem}.saved-material-card-profile .card-content{cursor:pointer}.saved-note-preview{font-size:.85rem;color:var(--subtle-text-color);margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.favorite-department-card{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;padding:1.5rem;border-radius:var(--border-radius);margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}.favorite-department-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.favorite-department-card .info h3{margin:0 0 .25rem 0;font-size:1.5rem}.favorite-department-card .info p{margin:0;opacity:.8}.favorite-department-card .action i{font-size:2rem}.favorite-btn{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer;transition:transform 0.2s;z-index:10}.favorite-btn i{color:var(--subtle-text-color);transition:color 0.2s,text-shadow 0.2s}.favorite-btn:hover{transform:scale(1.2)}.favorite-btn.is-favorite i{color:var(--accent-color);text-shadow:0 0 10px rgba(var(--accent-rgb),.7)}.full-page-modal .modal-content{width:95%;max-width:900px;height:90vh;padding:0}.full-page-modal .modal-header{padding:1rem 1.5rem}.full-page-modal .modal-body{padding:1rem 1.5rem;overflow-y:auto}#software-details-modal .modal-content{max-width:550px;padding:0;overflow:hidden;background-color:var(--surface-color)}#software-details-modal .modal-body{padding:0}.details-modal-header{background:var(--background-color);padding:2rem;text-align:center;border-bottom:1px solid var(--border-color)}.details-modal-logo{width:100px;height:100px;object-fit:contain;border-radius:12px;padding:5px;background-color:#fff;box-shadow:var(--shadow-sm)}.details-modal-main{padding:1.5rem 2rem 2rem;text-align:center}.details-modal-main h2{margin-top:0;margin-bottom:.5rem;font-size:1.8rem;color:var(--text-color)}.details-modal-main .platform-badge{margin-bottom:1.5rem;display:inline-block;padding:.3rem .8rem;border-radius:15px;background-color:var(--background-color);font-size:.8rem;font-weight:600;color:var(--subtle-text-color)}.details-modal-main p{line-height:1.7;color:var(--subtle-text-color);margin-bottom:2rem}.details-modal-download-btn{width:100%;padding:.8rem 1rem;font-size:1.1rem;font-weight:700}#software-details-modal{z-index:1001}.view-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.view-title{margin:0;font-size:1.8rem;display:flex;align-items:center;gap:.75rem}.view-search-container{position:relative;min-width:250px;flex-grow:1;max-width:400px}.view-search-container input{width:100%;padding:.7rem 1.5rem .7rem 3rem;border-radius:25px;border:1px solid var(--border-color);background-color:var(--surface-color);color:var(--text-color);transition:all 0.2s ease-in-out}.view-search-container input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);outline:none}.view-search-container i.fa-search{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%);color:var(--subtle-text-color);pointer-events:none}.software-requirements-section{margin-top:1.5rem;text-align:right}.software-requirements-box{background:var(--background-color);padding:1rem;border-radius:8px;white-space:pre-wrap;font-family:var(--font-family);font-size:.9rem;margin-top:.5rem;border:1px solid var(--border-color)}.footer-legal-notice{font-size:.8rem;color:var(--subtle-text-color);margin-top:1rem}.news-ticker-container{background:rgba(var(--surface-rgb),.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-color);padding:0;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid rgba(var(--border-rgb),.2);box-shadow:0 5px 20px rgb(0 0 0 / .1);position:relative}.news-ticker-container::before,.news-ticker-container::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}.news-ticker-container::before{right:0;background:linear-gradient(to right,var(--surface-color),transparent)}.news-ticker-container::after{left:0;background:linear-gradient(to left,var(--surface-color),transparent)}.ticker-label{background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;padding:1rem 1.5rem;font-weight:700;font-size:.9rem;flex-shrink:0;margin-left:1rem;z-index:3;text-shadow:0 1px 3px rgb(0 0 0 / .3);clip-path:polygon(0 0,100% 0,85% 100%,0% 100%)}.ticker-content{flex-grow:1;overflow:hidden;padding:.75rem 0}#ticker-list{list-style:none;margin:0;padding:0;display:flex;white-space:nowrap}#ticker-list.scrolling{animation:scroll-ticker linear infinite}#ticker-list:hover{animation-play-state:paused}#ticker-list li{display:flex;align-items:center}#ticker-list li::before{content:'★';margin:0 1.5rem;color:yellow;text-shadow:0 0 5px var(--accent-color);opacity:.8}#ticker-list a{color:var(--text-color);text-decoration:none;font-weight:600;transition:color 0.3s,text-shadow 0.3s}#ticker-list a:hover{color:var(--primary-color);text-shadow:0 0 8px var(--primary-color)}#ticker-list i{margin-left:.5rem;color:var(--subtle-text-color);vertical-align:middle}@keyframes scroll-ticker{0%{transform:translateX(0%)}100%{transform:translateX(-50%)}}.software-category{margin-bottom:3rem}.software-category-title{font-size:1.8rem;color:var(--primary-color);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--border-color);display:flex;align-items:center;gap:.75rem}.software-card-v2{background:var(--surface-color);border-radius:var(--border-radius);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform 0.3s ease,box-shadow 0.3s ease;overflow:hidden}.software-card-v2:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.software-card-v2__header{background-color:var(--background-color);display:flex;justify-content:center;align-items:center;padding:1.5rem}.software-card-v2__logo{width:80px;height:80px;object-fit:contain}.software-card-v2__body{padding:1rem 1.5rem;flex-grow:1}.software-card-v2__body h3{font-size:1.2rem;margin:0 0 .5rem 0;color:var(--text-color)}.software-card-v2__body .platform-badge{font-size:.8rem;color:var(--subtle-text-color);display:flex;align-items:center;gap:.4rem}.software-card-v2__footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color)}.software-card-v2__footer .btn{width:100%}.lightbox-prev-btn,.lightbox-next-btn{background-color:rgb(0 0 0 / .3);border:none}  #warning-message{
    color : red;
}
 *,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --primary-color: #2e3cd8;
    --secondary-color: #505cac;
    --accent-color: #ffa000;
    --background-color: #f5f7fa;
    --surface-color: #ffffff;
    --text-color: #1a1a1a;      --subtle-text-color: #4a5568;
    --border-color: #e0e0e0;
    --danger-color: #d32f2f;
    --success-color: #388e3c;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;
    --font-family: 'Cairo', sans-serif;
    --gold-color: #FFD700;
    --blue-color: #3498DB;
    --purple-color: #9B59B6;
    --gray-color: #95a5a6;
}

body.dark-mode {
    --primary-color: #bb86fc;
    --secondary-color: #3700b3;
    --accent-color: #d61646;
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --text-color: #EAEAEA;                
    --subtle-text-color: #A0A0A0;          
    --border-color: #2c2c2c;
}
.details-modal-share {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.details-modal-share .share-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 20px;      color: white !important;      border: none;
}

 .share-btn.whatsapp { background-color: #25D366; }
.share-btn.telegram { background-color: #0088cc; }
.share-btn.copy-link { background-color: var(--subtle-text-color); }
 .software-tech-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}
.tech-detail-item {
    text-align: center;
}
.tech-detail-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.tech-detail-item h5 {
    margin: 0 0 0.25rem 0;
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    text-transform: uppercase;
}
.tech-detail-item p {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}
.tab-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
 
#global-announcement-banner {
         position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;      
         background: linear-gradient(45deg, var(--primary-color), var(--accent-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
         transform: translateY(-100%);      transition: transform 0.5s ease-out, opacity 0.5s ease;
    opacity: 0;
}

#global-announcement-banner.is-visible {
    transform: translateY(0);      opacity: 1;
}

#global-announcement-banner p {
    margin: 0;
    font-weight: 600;
    flex-grow: 1;  }



#global-announcement-banner .close-banner-btn:hover {
    opacity: 1;
}
 
.ad-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);      
    z-index: 2000;      
    display: none;      
    justify-content: center;
    align-items: center;
}

.ad-modal-content {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 90%;
    height: 85%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;  }

.ad-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
}

.ad-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.ad-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.ad-modal-body {
    flex-grow: 1;      padding: 0;
    overflow-y: auto;
}

#ad-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

 body.dark-mode .ad-modal-content {
    background-color: #333;
}
body.dark-mode .ad-modal-header {
    background-color: #222;
    border-bottom: 1px solid #444;
}
.countdown-timer-wrapper {
    margin-top: 2rem;
    padding: 1rem;
    background-color: rgba(0,0,0,0.1);
    border-radius: 8px;
}
.countdown-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
.countdown-grid span {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}
 
 #update-notification-modal {
         display: none;      position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    
         background-color: rgba(10, 10, 20, 0.4);      backdrop-filter: blur(10px);      -webkit-backdrop-filter: blur(10px);  
         opacity: 0;
    transition: opacity 0.3s ease;
}

#update-notification-modal.visible {
    display: flex;
    opacity: 1;
}

 #update-notification-modal .modal-content {
    width: 90%;
    max-width: 600px;
    
         background: rgba(45, 45, 60, 0.5);      border: 1px solid rgba(255, 255, 255, 0.2);      border-radius: 16px;      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);      color: #f0f0f0;      
         transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

#update-notification-modal.visible .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

 #update-notification-modal .modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#update-notification-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

 #update-notification-modal .modal-body {
    padding: 1rem 2rem 2rem 2rem;
    font-size: 1.1rem;
    line-height: 1.9;
    white-space: pre-wrap;      max-height: 60vh;      overflow-y: auto;
    color: #e0e0e0;  }

 #update-notification-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}
#update-notification-modal .modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
#update-notification-modal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
#update-notification-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

 #close-update-notification-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#close-update-notification-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
.modal-content p {
    color: var(--text-color, #000000);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 1rem;
}
 body:not(.dark-mode) #update-notification-modal .modal-content {
    background: rgba(250, 250, 250, 0.7);      border: 1px solid rgba(0, 0, 0, 0.1);
    color: #222;
}
body:not(.dark-mode) #update-notification-title,
body:not(.dark-mode) #close-update-notification-btn {
    color: #222;
}
body:not(.dark-mode) #update-notification-modal .modal-body {
    color: #333;
}

 
 #update-notification-modal .modal-content {
    max-width: 650px;
}



 #update-notification-body {
    padding: 1.5rem 2.5rem 2.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

 .changelog-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);      text-align: center;
    margin: 0 0 2rem 0;
}

 .changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;  }

.changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

 .changelog-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: white;
}
.changelog-item-icon.new { background-color: var(--success-color, #4CAF50); }
.changelog-item-icon.improvement { background-color: var(--primary-color, #3B82F6); }
.changelog-item-icon.fix { background-color: var(--danger-color, #F44336); }

 .changelog-item-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--subtle-text-color);  }

.changelog-item-text strong {
    font-weight: 700;
    color: var(--text-color);  }
   
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 260px;
    background-color: #1e293b;      color: #cbd5e1;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.sidebar-title {
    font-size: 1.25rem;
    margin: 0;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.sidebar-toggle {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.sidebar-nav {
    flex-grow: 1;
    padding-top: 1rem;
    overflow-y: auto;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.sidebar-nav .nav-link:hover {
    background-color: #334155;
    color: #ffffff;
}

.sidebar-nav .nav-link.active {
    background-color: var(--primary-color);
    color: #ffffff;
    border-right: 4px solid var(--accent-color);
}

.sidebar-nav .nav-link i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.nav-divider {
    height: 1px;
    background-color: #334155;
    margin: 1rem;
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #334155;
}

.sidebar-footer .btn {
    width: 100%;
    justify-content: center;
}

 .admin-sidebar.collapsed {
    width: 80px;
}

.admin-sidebar.collapsed .sidebar-title,
.admin-sidebar.collapsed .nav-link span,
.admin-sidebar.collapsed .sidebar-footer span {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.admin-sidebar.collapsed .sidebar-toggle {
    transform: rotate(180deg);
}

.admin-sidebar.collapsed .nav-link.active {
    border-right-width: 0;  }

 .admin-content {
    flex-grow: 1;
    background-color:var(--background-color);      padding: 2rem;
    overflow-y: auto;
}

 .tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

 .nav-link {
    position: relative;
}
#notifications-badge {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}
.admin-sidebar.collapsed #notifications-badge {
    right: 50%;
    transform: translate(50%, -50%);
}
 .admin-sidebar.collapsed .nav-link {
    position: relative;  }

.admin-sidebar.collapsed .nav-link::before {
    content: attr(data-title);      position: absolute;
    right: 100%;      top: 50%;
    transform: translateY(-50%);
    background-color: #111827;      color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-right: 15px;
    
         opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;  }

.admin-sidebar.collapsed .nav-link:hover::before {
         opacity: 1;
    visibility: visible;
}
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary-dark, #6b7280);
    margin: 1.5rem 0;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-dark, #d1d5db);
}
.separator:not(:empty)::before { margin-right: .5em; }
.separator:not(:empty)::after { margin-left: .5em; }

.google-login-btn {
    width: 100%;
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.google-login-btn:hover {
    background-color: #f7f7f7;
}
.google-login-btn img {
    width: 20px;
    height: 20px;
}

body.dark-mode .google-login-btn {
    background-color: #424242;
    color: #ffffff;
    border-color: #555;
}
body.dark-mode .google-login-btn:hover {
    background-color: #505050;
}
 .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(28 30 33 / .6);
    backdrop-filter: blur(5px);
    
    /* --- بداية التعديل --- */
    display: none; /*   <-- أهم تغيير: إزالة العنصر من التخطيط بالكامل   */
    justify-content: center;
    align-items: center;
    
    opacity: 0; /* لا يزال مفيداً للتأثيرات الانتقالية */
    z-index: 1000; /* يمكن أن يبقى هنا، لأنه لن يؤثر طالما display: none */
    transition: opacity 0.3s ease;
    /* --- نهاية التعديل --- */
}


.modal-overlay.visible {
    display: flex; /*   <-- إعادة إظهار العنصر   */
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-surface-dark, #333) !important; 
    color: var(--text-primary-dark, #f8f8f8) !important; 
    border-radius: 12px !important;
    padding: 30px !important;
    
    /* ✅ التصحيح الحاسم هنا: يجب إزالة 0px وتعيين قيمة كبيرة */
    width: 95% !important; /* جعل العرض 95% من الشاشة */
    max-width: 1200px !important; /* الحد الأقصى للعرض (يمكنك تغييره) */
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 💡 نصيحة إضافية: لضمان عمل التنسيق ثنائي الأعمدة الذي عملنا عليه سابقاً */
/* قد تحتاج أيضاً إلى رفع قيمة max-width للـ modal-xl-video إذا كانت موجودة */
.modal-content.modal-xl-video {
    max-width: 950px !important; 
}

 .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-dark, #555);
    padding-bottom: 10px;
}

.modal-header h3 {
    margin: 10px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header .close-modal-btn {
    background: none;
    border: none;
    color: var(--text-secondary-dark, #999);
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

.modal-header .close-modal-btn:hover {
    opacity: 1;
}

 .ai-answer {
    background-color: var(--bg-main-dark, #222);
    color: var(--text-primary-dark, #f8f8f8);
    border: 1px solid var(--border-dark, #555);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    white-space: pre-wrap;      overflow-y: auto;
    max-height: 200px;
}

.ai-answer .loader {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--accent-color-dark, #64b5f6);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

 .ai-input-area {
    display: flex;
    gap: 10px;
}

.ai-input-area textarea {
    flex-grow: 1;
    background-color: var(--bg-main-dark, #222);
    color: var(--text-primary-dark, #f8f8f8);
    border: 1px solid var(--border-dark, #555);
    border-radius: 8px;
    padding: 10px;
    font-size: 0.95rem;
    resize: vertical;
}

.ai-input-area textarea:focus {
    outline: none;
    border-color: var(--accent-color-dark, #64b5f6);
    box-shadow: 0 0 0 0.1rem rgba(100, 181, 246, 0.25);
}

.ai-input-area button {
    background-color: var(--accent-color-dark, #64b5f6);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease-in-out;
}

.ai-input-area button:hover {
    background-color: var(--accent-color-hover, #90caf9);
}

.ai-input-area button:disabled {
    background-color: var(--border-dark, #555);
    cursor: not-allowed;
}
   
.ai-chat-window {
    height: 85vh;      max-height: 700px;
    display: flex;
    flex-direction: column;      padding: 0;  }

.ai-chat-window .modal-header {
    padding: 1rem 1.5rem;
    flex-shrink: 0;  }

.ai-chat-history {
    flex-grow: 1;      overflow-y: auto;      padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 12px;  }

 .chat-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.6;
    word-wrap: break-word;
    animation: bubble-pop-in 0.3s ease-out;
}

 .chat-bubble.ai {
    background-color: var(--bg-surface-dark, #3a3a3c);
    color: var(--text-primary-dark, #f1f5f9);
    border-bottom-left-radius: 4px;
    align-self: flex-start;  }

 .chat-bubble.user {
    background-color: #0078d4;      color: #ffffff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;  }

.ai-input-area {
    display: flex;
    gap: 10px;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-dark, #444446);
    background-color: var(--bg-surface-dark, #2c2c2e);
    flex-shrink: 0;  }

.ai-input-area textarea {
    flex-grow: 1;
    background-color: var(--bg-main-dark, #1c1c1e);
    color: var(--text-primary-dark, #ECEFF1);
    border: 1px solid var(--border-dark, #444446);
    border-radius: 20px;
    padding: 10px 15px;
    resize: none;      font-family: inherit;
    font-size: 1rem;
    max-height: 100px;  }

.ai-input-area #ai-submit-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--accent-color-dark, #64b5f6);
}

 .typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #8e8e93;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

@keyframes bubble-pop-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
 .chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.chat-bubble.user {
    flex-direction: row-reverse;  }

.chat-bubble .message-content {
    background-color: #3a3a3c;
    color: #f1f5f9;
    padding: 10px 15px;
    border-radius: 18px;
}

.chat-bubble.user .message-content {
    background-color: #0078d4;
    border-bottom-right-radius: 4px;
}

.chat-bubble.ai .message-content {
    border-bottom-left-radius: 4px;
}
 .chat-bubble-wrapper {
    display: flex;
    flex-direction: column;
}
.chat-bubble-wrapper.user {
    align-items: flex-end;
}
.chat-bubble-wrapper.ai {
    align-items: flex-start;
}
.message-timestamp {
    font-size: 0.75rem;
    color: #8e8e93;
    margin-top: 4px;
    padding: 0 15px;
}
.rate-limit-info {
 font-size: 0.8em;
 color: #8e8e93;
 margin-left: 1rem;
}
 .chat-image-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 12px;
    margin-top: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

 .rate-limit-info {
    font-size: 0.8rem;
    color: #9ca3af;      font-family: monospace;
    background-color: rgba(0,0,0,0.2);
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: auto;      margin-right: 1rem;
}

 pre {
    position: relative;
    background-color: #1e1e1e;
    padding: 1rem;
    border-radius: 8px;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.copy-code-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
pre:hover .copy-code-btn {
    opacity: 1;
}
   
 .ai-image-preview-container {
    padding: 0 1.5rem 10px;      position: relative;
    display: none;      align-self: flex-start;  }

.ai-image-preview-container img {
    max-height: 90px;      width: auto;           border-radius: 8px;
    border: 1px solid var(--border-dark, #444446);
    background-color: var(--bg-main-dark, #1c1c1e);
}

.ai-image-preview-container .remove-preview-btn {
    position: absolute;
    top: -5px;
    left: -5px;      background-color: rgba(0,0,0,0.7);
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

 .chat-image-preview {
    max-width: 100%;      max-height: 250px;      border-radius: 12px;
    margin-top: 5px;
    cursor: pointer;      transition: filter 0.2s;
}

.chat-image-preview:hover {
    filter: brightness(0.8);
}

 .chat-bubble.user .message-content {
    padding: 5px;      background-color: transparent;  }
   
 .katex {
    font-size: 1.2em;      text-align: center;
    padding: 0.5rem;
}

 body.dark-mode .katex {
    color: #f1f5f9;  }

 .katex-inline {
    padding: 0 0.2em;
}

 .katex-display {
    display: block;
    margin: 1em 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.katex {
    direction: ltr;  }
   
.premium-modal-content {
    max-width: 800px;      width: 90%;
    padding: 0;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    border-radius: 16px;
    overflow: hidden;
    display: grid;      grid-template-columns: 1fr 1fr;      max-height: 90vh;  }

 .premium-modal-info {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;  }

.premium-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    background-color: var(--primary-color);
    color: white;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
}

.premium-modal-info h2 {
    font-size: 2.2rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.premium-modal-info p {
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    margin: 0 0 2rem 0;
}

.premium-modal-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
.premium-modal-info li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 500;
}
.premium-modal-info li i {
    color: var(--success-color);
}

 .premium-modal-cta {
    background-color: var(--surface-color);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-left: 1px solid var(--border-color);
}

.price-tag {
    margin-bottom: 1.5rem;
}
.price-tag .amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color);
}
.price-tag .period {
    font-size: 1rem;
    color: var(--subtle-text-color);
}

.premium-modal-cta .go-pro-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    background-color: var(--primary-color);
    color: white;
}
.premium-modal-cta p {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-top: 1rem;
}

 body.dark-mode .premium-modal-cta {
    background-color: var(--bg-main-dark);
}

 @media (max-width: 768px) {
    .premium-modal-content {
        grid-template-columns: 1fr;          display: flex;          flex-direction: column;
    }
    .premium-modal-info {
        overflow-y: visible;      }
}
.premium-modal-content {
    position: relative;
}

 #premium-modal .close-modal-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;  
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#premium-modal .close-modal-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}
   
.chatbot-speech-bubble {
    position: fixed;
    bottom: 100px;      left: 100px;       background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 997;      font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;

         opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.chatbot-speech-bubble.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

 .chatbot-speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--secondary-color) transparent transparent transparent;
}

.close-bubble-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}
.close-bubble-btn:hover {
    opacity: 1;
}
 
 

.profile-v2-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
}

 .profile-v2-card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    text-align: center;
    position: relative;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.profile-v2-cover {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--subtle-background);
}

.profile-v2-avatar-wrapper {
    position: relative;
    margin-top: -60px;      display: inline-block;
}

.profile-v2-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid var(--surface-color);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    object-fit: cover;
}

.profile-v2-role-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: var(--role-color, var(--gray-color));
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    border: 2px solid var(--surface-color);
    box-shadow: var(--shadow-sm);
}

.profile-v2-info {
    padding: 1rem;
}

.profile-v2-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
    color: var(--headings-color);
}

.profile-v2-email {
    font-size: 1rem;
    color: var(--subtle-text-color);
    margin-bottom: 1rem;
}

.profile-v2-socials {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icon-v2 {
    font-size: 1.5rem;
    color: var(--subtle-text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-icon-v2:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

 .profile-v2-grid {
    display: grid;
    gap: 1.5rem;
}

.profile-v2-content-card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}

.card-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--headings-color);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.card-header i {
    color: var(--primary-color);
}

.card-body-text {
    line-height: 1.7;
    color: var(--text-color);
}

 .profile-v2-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-item-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--headings-color);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

 @keyframes swoop-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.anim-swoop-in {
    animation: swoop-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
 .profile-v2-extra-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;      margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background-color: var(--subtle-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    flex-wrap: wrap;  }

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    font-weight: 500;
}

.info-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

 .profile-v2-socials {
    margin-top: 0.5rem;  }
 .profile-v2-key-info {
    width: 100%;
    max-width: 450px;      margin: 1rem auto 1.5rem auto;      display: flex;
    flex-direction: column;      align-items: flex-start;      gap: 0.75rem;      padding: 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.key-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--subtle-text-color);
}

.key-info-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
    width: 20px;      text-align: center;
}

 .profile-v2-socials {
    margin-top: 0.5rem;
}
 
 .profile-v3-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;      animation: fadeInProfile 0.6s ease-out forwards;
}

 @keyframes fadeInProfile {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

 .profile-v3-card {
    background: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

 .profile-v3-avatar-wrapper {
    position: relative;
    flex-shrink: 0;  }

 .profile-v3-avatar {
    width: 100px !important;           height: 100px !important;          border-radius: 50%;
    border: 4px solid var(--surface-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    object-fit: cover !important;  }
 .profile-v3-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;      border: 2px solid var(--surface-color);
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-v3-upload-btn:hover {
    transform: scale(1.1);  }

 .profile-v3-info h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.profile-v3-info p {
    color: var(--subtle-text-color);
    margin: 0.25rem 0 1rem 0;
}

 .profile-v3-details {
    display: flex;
    flex-wrap: wrap;      gap: 1.5rem;
}

 .profile-v3-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

.profile-v3-detail-item i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

 .section-divider {
    text-align: center;
    margin: 1rem 0;
    font-weight: 600;
    color: var(--subtle-text-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

 .section-divider::before,
.section-divider::after {
    content: '';
    flex-grow: 1;      height: 1px;
    background: var(--border-color);
}
 
 .cropper-bg {
    background-image: none !important;      background-color: rgba(0, 0, 0, 0.5) !important;  }

 .cropper-view-box {
    box-shadow: 0 0 0 1px #39f !important;      outline: 1px solid #fff !important;  }

 .cropper-point {
    background-color: #fff !important;
    border: 1px solid #39f !important;
    height: 10px !important;
    width: 10px !important;
    opacity: 1 !important;
}


 
 body {
         background-color: #0D0E1B;
    background-image: radial-gradient(circle at 100% 0%, rgba(126, 92, 238, 0.15) 0%, rgba(13, 14, 27, 0) 25%),
                      radial-gradient(circle at 0% 100%, rgba(30, 107, 224, 0.15) 0%, rgba(13, 14, 27, 0) 25%);
}

 .dashboard-header {
         background: rgba(30, 32, 56, 0.5);      backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;      padding: 2.5rem;
    
         box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), 
                inset 0 0 10px 0 rgba(126, 92, 238, 0.2);      
    text-align: center;
    transition: all 0.3s ease;
}

.dashboard-header:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45), 
                inset 0 0 15px 0 rgba(126, 92, 238, 0.3);
}

 .dashboard-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #EAEAEA, #C0C0C0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dashboard-header p {
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    max-width: 450px;
    margin: 0 auto;  }

 .smart-card {
    border-radius: 20px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease-out;
    border: none;      
         background: linear-gradient(135deg, #5E4AE3 0%, #7B68EE 100%);
    
         box-shadow: 0 10px 25px -5px rgba(94, 74, 227, 0.4);
}

.smart-card:hover {
    transform: scale(1.03);      box-shadow: 0 15px 30px -5px rgba(94, 74, 227, 0.5);
}

.smart-card h3 {
    font-size: 1.8rem;
    color: #FFFFFF;
}

.smart-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

 .btn-secondary {
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    transition: all 0.3s ease;
    padding: 0.8rem 1.5rem;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

 .fab-container .fab-toggle {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #7B68EE, #5E4AE3);
    box-shadow: 0 8px 20px rgba(94, 74, 227, 0.5);
    transition: all 0.3s ease;
}

.fab-container .fab-toggle:hover {
    transform: translateY(-3px) rotate(90deg);      box-shadow: 0 12px 25px rgba(94, 74, 227, 0.6);
}

 .install-app-bar, .chatbot-bar {      background: rgba(30, 32, 56, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
}
 
.site-footer {
    background-color: var(--surface-color);
    color: var(--subtle-text-color);
    padding: 3rem 2rem 0;      border-top: 1px solid var(--border-color);
    margin-top: 3rem;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));      gap: 2.5rem;      max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.footer-logo {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-mission {
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 300px;
}

.footer-heading {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

 .footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-links ul, .footer-legal ul {
    list-style: none;
    padding: 0;
}

.footer-links li, .footer-legal li {
    margin-bottom: 0.8rem;
}

.footer-links a, .footer-legal a {
    color:var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease, padding-right 0.3s ease;
}

.footer-links a:hover, .footer-legal a:hover {
    color: var(--primary-color);
    padding-right: 5px;  }

.developer-info strong {
    font-weight: 700;
    font-size: 1.4em;
    color: #00aaff; /* لون النص */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #00aaff, 0 0 10px #00aaff;
    display: inline-block;
    animation: glowText 2s infinite alternate;
}




.footer-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icon {
    font-size: 1.3rem;
    color: var(--subtle-text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}
 
 .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.settings-header h2 { margin: 0; font-size: 1.8rem; }
.settings-header p { margin: 0.25rem 0 0; color: var(--subtle-text-color); }

.settings-search-container {
    position: relative;
}
.settings-search-container i {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--subtle-text-color);
}
#settings-search-input {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    min-width: 280px;
}





 .settings-card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.settings-card h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
}

 .theme-customizer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}
.color-picker-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.color-picker-group label {
    font-weight: 600;
}
input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 2px solid var(--border-color); border-radius: 50%; }

 .backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.backup-actions .btn, .backup-actions label {
    flex-grow: 1;
}

 .audit-log-card {
    max-height: 500px;  }
#audit-log-container {
    height: 100%;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.audit-log-item {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.audit-log-item:last-child { border-bottom: none; }
.audit-log-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--background-color);
}
.audit-log-content p {
    margin: 0;
    color: var(--text-color);
}
.audit-log-content p strong {
    color: var(--primary-color);
}
.audit-log-timestamp {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}
 
 .link-item-v2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

 .link-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.link-display i {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.link-display .link-title-input {
    flex-grow: 1;      border: none;
    background: none;
    font-weight: 600;
}
.link-display .btn {
    flex-shrink: 0;  }

 .link-upload-new {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.link-upload-new .link-title-input {
    flex-grow: 1;
}
.link-upload-new .trigger-upload-btn {
    flex-shrink: 0;
}

 .upload-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--subtle-text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.upload-status .fa-spinner {
    color: var(--primary-color);
}
 .upload-progress-container {
    width: 100%;
    background-color: var(--border-color);
    border-radius: 5px;
    position: relative;
    height: 25px;
    overflow: hidden;
}

.upload-progress-bar {
    background-color: var(--primary-color);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease-in-out;
    border-radius: 5px;
}

.upload-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
 #dropbox-storage-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.storage-chart {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(
        var(--primary-color) calc(var(--percentage) * 1%), 
        var(--border-color) 0
    );
    animation: fillChart 1s ease-out forwards;
}

.storage-chart::before {
    content: '';
    position: absolute;
    width: 85%;
    height: 85%;
    background: var(--surface-color);
    border-radius: 50%;
}

.chart-inner-text {
    position: relative;
    text-align: center;
    z-index: 1;
}

.chart-inner-text strong {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    color: var(--primary-color);
}

.chart-inner-text span {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.storage-legend {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
}

@keyframes fillChart {
    from { --percentage: 0; }
}
 .upload-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.upload-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;      max-width: 150px;  }

.upload-file-info .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;      font-size: 0.9rem;
}

.upload-progress-container {
    flex-grow: 1;      background-color: var(--border-color);
    border-radius: 5px;
    position: relative;
    height: 25px;
    overflow: hidden;
}

.upload-progress-bar {
    background-color: var(--primary-color);
    height: 100%;
    width: 0%;
    transition: width 0.2s ease, background-color 0.3s ease;
    border-radius: 5px;
}

.upload-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.cancel-upload-btn {
    flex-shrink: 0;
}
   
 @media (max-width: 600px) {

         .upload-item-wrapper {
        flex-direction: column;          align-items: stretch;            gap: 8px;                    }

         .upload-file-info {
        max-width: 100%;          justify-content: space-between;          align-items: center;
    }
    
         .upload-item-wrapper .cancel-upload-btn {
        order: 2;          margin-right: auto;      }
    
    .upload-file-info .file-name {
                 font-size: 0.85rem; 
    }

         .upload-progress-container {
        width: 100%;
        order: 3;      }
}
    
.notifications-container {
    position: relative;
}

#notifications-bell-btn {
    position: relative;
}

 #notifications-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--danger-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: grid;
    place-items: center;
    font-weight: bold;
    border: 2px solid var(--surface-color);
}

 .notifications-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    transform: translateX(-40%);      width: 360px;
    max-height: 450px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: top center;
}

.notifications-panel:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-40%) translateY(0);
}

.notifications-header, .notifications-footer {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.notifications-header h3 {
    margin: 0;
    font-size: 1rem;
}

.notifications-footer {
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    text-align: center;
    justify-content: center;
}

.notifications-footer a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
}

.notifications-list {
    overflow-y: auto;
    flex-grow: 1;
}

.notification-item {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover {
    background-color: var(--background-color);
}

.notification-item.unread {
    background-color: wheat;
}

.notification-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 30px;
    text-align: center;
    margin-top: 4px;
}

.notification-content p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

.notification-content .timestamp {
    font-size: 0.75rem;
    color: var(--subtle-text-color);
    margin-top: 4px;
}

.notification-placeholder {
    padding: 2rem;
    text-align: center;
    color: black;
}
.btn.subscribed {
    background-color: var(--success-color);
    color: var(--subtle-text-color);
}

   
 .site-header-v2 {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
    width: 100%;
}



 .header-logo-v2 a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 1.1rem;  }
.header-logo-v2 i {
    color: var(--primary-color);
}

 .header-search-v2 {
    position: relative;
    flex-grow: 1;
    max-width: 500px;
    min-width: 0; 
}
.header-search-v2 .search-icon-v2 {
    position: absolute;
    top: 50%;
    right: 15px;      transform: translateY(-50%);
    color: var(--subtle-text-color);
    pointer-events: none;  }
#main-search-input-v2 {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: white;
    padding: 0 45px 0 20px;      font-family: 'Cairo', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 1002;
}
#main-search-input-v2:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-transparent);
}
.search-results-panel-v2 {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 1001;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    padding-top: 20px;
}

 .header-actions-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.action-btn-v2 {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #bf03ff;
    font-size: 1.2rem;
    position: relative;
    transition: background-color 0.2s, color 0.2s;
}
.action-btn-v2:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}
.action-badge-v2 {
    position: absolute;
    top: 2px;
    right: 0px;
    background-color: var(--danger-color);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface-color);
}

 .notifications-container-v2 {
    position: relative;
}

.notifications-panel-v2.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);  }

 
@media (max-width: 768px) {
    
    .header-search-v2 {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 10px;
        border-top: 1px solid var(--border-color);
        box-shadow: var(--shadow-md);
    }
    .header-search-v2.mobile-search-active {
        display: block;
          box-sizing: border-box;
    }
    
    .site-header-v2 {
        padding: 0 10px;
    }
    .header-container-v2 {
        gap: 5px;
    }
    .header-logo-v2 a {
        font-size: 1.3rem;
    }
}

 .search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover {
    background-color: var(--hover-color);
}
.search-result-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
    width: 30px;
    text-align: center;
}
.search-result-info {
    display: flex;
    flex-direction: column;
}
.result-name {
    font-weight: 600;
    color: var(--text-color);
}
.result-details {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}
.notifications-panel-v2.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-85%) translateY(0) !important;
}
.notifications-panel-v2 {
    position: absolute;
    top: calc(100% + 15px);      right: 3;      left: 10;
    width: 360px;
    max-width: 95vw;
    z-index: 1001;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    
         opacity: 0;
    visibility: hidden;
    transform: translateY(10px);      pointer-events: none;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
}



.notifications-panel-v2.notifications-panel-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-85%) translateY(0);
}
   
 .notifications-container-v2 {
    position: relative;
}

 .notifications-panel-v2 {
    position: absolute;
    top: calc(100% + 15px);      left: 0;      width: 360px;
    z-index: 1001;
    
         opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease-out;
}

 .notifications-panel-v2.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);      pointer-events: auto;
}
   
.notification-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}
.notification-placeholder.error {
    color: var(--danger-color);
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: var(--hover-color);
}



.notification-icon {
    font-size: 1.1rem;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 30px;
    padding-top: 4px;
    text-align: center;
}

.notification-content p {
    margin: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}
.notification-content p strong {
    color: var(--text-color);
}

.notification-content .timestamp {
    display: block;
    font-size: 0.75rem;
    color: var(--subtle-text-color);
    opacity: 0.8;
    margin-top: 4px;
}

.loader-sm {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}
   
.ad-zone-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-sm);
}

.ad-zone-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.ad-zone-card p {
    color: var(--subtle-text-color);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.ad-management-form .form-group {
    margin-bottom: 1.5rem;
}

.ad-management-form .toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
}
.ad-management-form .toggle-group label {
    margin-bottom: 0;
    font-weight: 600;
}
.top-ad-banner {
    display: block;
    width: 100%;
    background-color: var(--background-color);
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.top-ad-banner img {
    max-width: 100%;
    height: auto;
    max-height: 90px;  }
.chart-wrapper {
    position: relative;      flex-grow: 1;      height: 350px;      width: 100%;
}
 
input[type="datetime-local"] {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    width: 100%;
}

input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(var(--theme-invert));
    font-size: 1.2rem;
}

/* لتحسين المظهر في الوضع الداكن */
body.dark-mode input[type="datetime-local"] {
    color: var(--dark-text-color);
}

 .notifications-page-container {
    max-width: 900px;      margin: 2rem auto;      padding: 0 1rem;      animation: fadeIn 0.5s ease-out;  }

 .notifications-page-container .view-header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.notifications-page-container .view-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.notifications-page-container .view-header h2 i {
    color: var(--primary-color);
    margin-right: 10px;
}

.notifications-page-container .section-description {
    font-size: 1rem;
    color: var(--subtle-text-color);
    max-width: 600px;
    margin: 0 auto;  }

 .notifications-page-container .filters-container {
    display: flex;
    gap: 1rem;      margin-bottom: 2rem;
    align-items: center;
}

 .notifications-page-container .search-wrapper {
    position: relative;
    flex-grow: 1;  }

.notifications-page-container .search-wrapper i {
    position: absolute;
    top: 50%;
    right: 15px;      transform: translateY(-50%);
    color: var(--subtle-text-color);
}

.notifications-page-container #notif-search-input {
    padding-right: 40px;  }

 .full-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;  }

 .notification-item-full {
    display: flex;
    align-items: flex-start;      gap: 1rem;
    padding: 1.25rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;      overflow: hidden;  }

.notification-item-full:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

 .notification-item-full .notification-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;  }

 .notification-item-full .notification-content {
    flex-grow: 1;
}

.notification-item-full .notif-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
}

.notification-item-full .notif-message {
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
}

.notification-item-full .timestamp {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

 .notification-item-full.unread {
    border-left: 4px solid var(--primary-color);      background-color: var(--background-color);  }

 .notification-item-full .unread-dot {
    position: absolute;
    top: 15px;
    left: 15px;      width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(3, 218, 198, 0.2);  }

 @media (max-width: 600px) {
    .notifications-page-container .filters-container {
        flex-direction: column;          align-items: stretch;      }

    .notification-item-full {
        flex-direction: column;          align-items: center;
        text-align: center;
    }

    .notification-item-full .notification-content {
        width: 100%;
    }
}
 .file-drop-zone.is-dragged-over {
    border-color: var(--primary-color);      background-color: rgba(187, 134, 252, 0.05);      border-style: dashed;  }
 .image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

 .image-preview-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

 .image-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;      display: block;
}

 .remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.remove-image-btn:hover {
    background-color: var(--danger-color);
}
 @media (max-width: 768px) {
     .notifications-panel-v2 {
        position: fixed;          top: 80px;                left: 50%;                right: auto;              
                 transform: translateX(-50%) translateY(10px);
    }

    .notifications-panel-v2.is-open {
        transform: translateX(-50%) translateY(0);
    }
         .site-footer {
        padding: 2.5rem 1rem 0;
    }

     .section-header {
        flex-direction: column;          align-items: stretch;            gap: 0.5rem;                 }

    .section-header .section-title-input {
        margin-left: 0;      }

              .file-tile {
        flex-direction: row;               align-items: center;               padding: 0.75rem;                  gap: 0.75rem;                  }

         .file-tile .file-tile-icon {
        font-size: 2rem;
        width: 40px;
    }
    
         .file-tile .file-tile-info {
        flex-grow: 1;                  flex-shrink: 1;                min-width: 0;              }

         .file-tile .file-tile-info h4 {
        font-size: 1rem;
        word-break: break-all;      }
    .file-tile .file-tile-info small {
        font-size: 0.75rem;
    }

         .file-tile .file-tile-download-btn {
        flex-shrink: 0;               width: 44px;
        height: 44px;
        margin: 0;                    align-self: center;
    }

         .footer-container {
        grid-template-columns: 1fr;          gap: 2rem;
    }

         .footer-about,
    .footer-links,
    .footer-legal,
    .footer-developer {
        text-align: center;      }

         .footer-heading::after {
        right: 50%;          transform: translateX(50%);      }

         .developer-info,
    .footer-social-icons {
        justify-content: center;      }

         .footer-links ul,
    .footer-legal ul {
        padding-right: 0;      }
}

@media (max-width: 992px) {
    .admin-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1100;
        /* إخفاء القائمة خارج الشاشة إلى اليمين */
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    /* كلاس يتم إضافته عبر جافاسكريبت لإظهار القائمة */
    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    /* خلفية معتمة تظهر خلف القائمة عند فتحها */
    .admin-layout.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1099;
    }

    .admin-content {
        padding: 1.5rem;
    }

    /* إظهار زر القائمة (الهامبرغر) في المحتوى */
    .admin-content-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
}
.dashboard-v2-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 0;
}

 .dashboard-v2-header {
    text-align: right;
    animation: fadeInDown 0.6s ease-out;
}
.dashboard-v2-header h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--subtle-text-color);
    margin: 0;
}
.dashboard-v2-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

 .dashboard-v2-main-card {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(var(--border-rgb, 255, 255, 255), 0.1);
    animation: fadeInUp 0.6s 0.2s ease-out backwards;
}
.main-card-bg {
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transition: transform 0.4s ease;
z-index: 1;
animation: animatedGradient 5s linear infinite alternate;
background-size: 200% 200%;
}

 @keyframes animatedGradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}

.dashboard-v2-main-card:hover .main-card-bg {
    transform: scale(1.05);
}
.main-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
}
.main-card-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}
.main-card-text h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}
.main-card-text p {
    margin: 0;
    opacity: 0.8;
}
.main-card-arrow {
    margin-right: auto;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
.dashboard-v2-main-card:hover .main-card-arrow {
    transform: translateX(5px);
}

 .quick-access-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);      gap: 1rem;
    animation: fadeInUp 0.6s 0.4s ease-out backwards;
}
.quick-access-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    
         background: rgba(var(--surface-rgb), 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--border-rgb), 0.2);
    
    transition: all 0.2s ease;
}
.quick-access-card:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.5);
    transform: translateY(-5px);
}
.quick-access-card i {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.quick-access-card span {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

 @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
   
.profile-v4-container {
    max-width: 900px;
    margin: 2rem auto;
}

 .profile-v4-header {
    background-color: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.profile-cover-photo {
    height: 220px;
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.profile-avatar-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    margin: -65px auto 0 auto;      border-radius: 50%;
    border: 5px solid var(--surface-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.profile-v4-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

 .edit-profile-btn {
    position: absolute;
    bottom: 10px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}
.edit-profile-btn:hover {
    background-color: rgba(0,0,0,0.7);
}
#edit-cover-btn { right: 10px; }
.profile-avatar-wrapper .edit-profile-btn { right: 0; }

 .profile-v4-info {
    text-align: center;
    padding: 1rem;
}
.profile-v4-info h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}
.profile-v4-info p {
    color: var(--subtle-text-color);
    margin: 0.25rem 0 1rem 0;
}
.profile-v4-details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
}
.profile-v4-details span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.profile-v4-details i {
    color: var(--primary-color);
}

 .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card-mini {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.stat-card-mini .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}
.stat-card-mini .label {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin-top: 0.25rem;
}

 .profile-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.profile-tab-link {
    padding: 0.75rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--subtle-text-color);
    position: relative;
    transition: color 0.2s;
}
.profile-tab-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.profile-tab-link.active, .profile-tab-link:hover {
    color: var(--primary-color);
}
.profile-tab-link.active::after {
    transform: scaleX(1);
}

   
 .radio-label input[type="radio"]:checked + span {
    font-weight: 700;  }

.radio-label input[type="radio"]:checked + span::before {
    content: '\f058';      font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary-color);
    margin-right: 0.5rem;
    transform: scale(1.1);
}

.radio-label input[type="radio"]:checked ~ * {
    border-color: var(--primary-color);      box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.2);  }

 .setting-description {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    margin: -0.5rem 0 1rem 0;
}
.audit-log-item {
    display: grid;
    grid-template-columns: auto 1fr;      gap: 1rem;
    align-items: start;      padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

 .audit-log-content {
    text-align: right;  }

 .audit-log-content p {
    margin: 0;
    color: var(--text-color);
    overflow-wrap: break-word;      word-break: normal;
}

 .audit-log-timestamp {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-top: 0.25rem;
}

   
.search-result-item.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.search-result-item.is-disabled .search-result-icon i {
    color: var(--danger-color);
}

.search-result-item.is-disabled .locked-status-message {
    color: var(--danger-color);
    font-weight: 600;
}


#material-details-content {
    background: transparent;      padding: 0;      box-shadow: none;  }

.details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;      gap: 2rem;
    align-items: flex-start;  }

 .details-header {
    background: var(--surface-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.details-header h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

 .sidebar {
    position: sticky;
    top: 85px;      display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sidebar h3 {
    font-size: 1.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-color);
    margin-bottom: 1rem;
}

 .main-content > h3,
.main-content .material-section,
.main-content .episodes-section {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.main-content > h3 {
    padding: 1rem 1.5rem;  }

 .material-section h3, .episodes-section h3 {
    padding: 0;
    border: none;      margin: 0 0 1.5rem 0;
    font-size: 1.4rem;
}

 .file-tile:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

 .sidebar > .rating-container,
.sidebar > .share-buttons,
.sidebar > .metadata-list {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

 .sidebar .rating-container {
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
}

 #ai-assistant-btn, #save-material-btn, #subscribe-to-material-btn, #report-material-btn {
    margin-top: 0;
}
#report-material-btn {
    background-color: var(--surface-color);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    transition: all 0.2s ease;
}
#report-material-btn:hover {
    background-color: var(--danger-color);
    color: white;
}

 @media (max-width: 900px) {
    .details-grid {
        grid-template-columns: 1fr;      }
    .sidebar {
        position: static;      }
}

   
 #password-confirm-modal.modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(18, 18, 18, 0.6);
}

 #password-confirm-modal .modal-content {
    background-color: var(--surface-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 0;      text-align: center;
    overflow: hidden;  }

 .modal-overlay.visible #password-confirm-modal .modal-content {
    animation: zoomIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


 #password-confirm-modal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
#password-confirm-modal .modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto;      color: var(--text-color);
}
#password-confirm-modal .close-btn {
    color: var(--subtle-text-color);
}

 #password-confirm-modal .modal-body {
    padding: 2rem 1.5rem;
}

 #password-confirm-modal .modal-body > .fa-shield-alt {
    font-size: 3rem;
    color: var(--danger-color);
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 2px solid var(--danger-color);
    margin: 0 auto 1.5rem auto;
    
         box-shadow: 0 0 20px rgba(var(--danger-rgb), 0.3);
}

#password-confirm-modal .modal-body p {
    color: var(--subtle-text-color);
    line-height: 1.7;
    margin: 0 0 1.5rem 0;
}

 #password-confirm-modal .form-group {
    text-align: right;
}
#password-confirm-modal .form-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}
#password-confirm-input {
    text-align: center;      font-size: 1.1rem;
    letter-spacing: 2px;  }
#password-confirm-input:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.2);
}

 #password-confirm-modal .modal-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
}
#password-confirm-modal .modal-actions .btn {
    flex: 1;      padding: 0.8rem 1rem;
    font-weight: 700;
}

 #password-confirm-cancel-btn {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
#password-confirm-cancel-btn:hover {
    background-color: var(--hover-color);
}
   
 .add-software-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;      gap: 2rem;
    align-items: flex-start;
}

 .software-main-details, .software-meta-details .settings-card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.software-meta-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

 .logo-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.logo-uploader img {
    width: 100%;
    max-width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
}
.logo-uploader input[type="file"] {
    display: none;  }
.logo-uploader .btn {
    width: 100%;
}

 .input-with-icon {
    position: relative;
}
.input-with-icon i {
    position: absolute;
    top: 50%;
    right: 1rem;      transform: translateY(-50%);
    color: var(--subtle-text-color);
    pointer-events: none;
}
.input-with-icon .admin-input {
    padding-right: 2.75rem;  }

 .form-actions-footer {
    grid-column: 1 / -1;      margin-top: 1rem;
}
.form-actions-footer .btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

 @media (max-width: 992px) {
    .add-software-layout {
        grid-template-columns: 1fr;      }
}

.platform-badge .fa-android { color: #3DDC84; }  .platform-badge .fa-apple { color: #A2AAAD; }    .platform-badge .fa-linux { color: #FCC624; }    .platform-badge .fa-globe { color: #3498DB; }    .platform-badge .fa-windows { color: #0078D6; }  
   
 #software-details-modal .modal-content {
    max-width: 800px;
    padding: 0;
    overflow: hidden;      background-color: var(--background-color);  }

#software-details-modal .modal-body {
    padding: 0;
}

 .details-v3-grid {
    display: grid;
    grid-template-columns: 300px 1fr;  }

 .details-v3-brand-pane {
    background: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.details-v3-brand-pane .details-modal-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    margin-bottom: 1.5rem;
}
.details-v3-brand-pane h2 {
    font-size: 1.8rem;
    margin: 0 0 1.5rem 0;
}
.details-v3-brand-pane .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}
.details-v3-brand-pane .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

 .details-v3-info-pane {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
}
.details-v3-info-pane h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--subtle-text-color);
    text-transform: uppercase;
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.5px;
}
.details-v3-info-pane p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0 0 2rem 0;
}

 .software-tech-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: var(--border-radius);
}
.tech-detail-item {
    text-align: center;
}
.tech-detail-item i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}
.tech-detail-item h5 {
    margin: 0 0 0.25rem 0;
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    font-weight: 600;
}
.tech-detail-item p {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
}

 .details-modal-download-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: auto;      margin-bottom: 1rem;
}
.details-modal-share {
    justify-content: center;
    gap: 1rem;
}
.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
}

 @media (max-width: 768px) {
    .details-v3-grid {
        grid-template-columns: 1fr;      }
    .details-v3-brand-pane {
        border-radius: 16px 16px 0 0;
    }
}
   
 .department-management-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    position: relative;
    min-height: 200px;  }

 .department-manage-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.department-manage-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

 .department-manage-card .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.department-manage-card .card-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.department-manage-card .card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

 .current-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--subtle-text-color);
}

 .status-toggle-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    background-color: var(--background-color);
    padding: 0.5rem;
    border-radius: 8px;
}
.status-toggle-btn {
    padding: 0.6rem;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--subtle-text-color);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.status-toggle-btn:hover:not(.active) {
    background-color: var(--hover-color);
}

 .status-toggle-btn[data-new-status="active"].active {
    background-color: var(--success-color);
    color: white;
}
.status-toggle-btn[data-new-status="coming_soon"].active {
    background-color: var(--warning-color);
    color: #333;
}
.status-toggle-btn[data-new-status="inactive"].active {
    background-color: var(--subtle-text-color);
    color: white;
}
   
 .add-user-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: flex-start;
}

 .user-credentials-pane,
.user-permissions-pane {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;  }

.user-credentials-pane h4,
.user-permissions-pane h4 {
    margin: 0;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

 .add-user-layout .form-actions-footer {
    grid-column: 1 / -1;  }
.add-user-layout .form-actions-footer .btn {
    width: 100%;
}

 .status-message {
    margin-top: 1rem;
    font-weight: 600;
    text-align: center;
}

   
 .user-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    position: relative;
    min-height: 200px;
}

 .user-manage-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

 .user-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--background-color);
}
.user-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}
.user-card-info {
    flex-grow: 1;
}
.user-card-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    text-decoration: none;
}
.user-card-name:hover {
    text-decoration: underline;
}
.user-card-email {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin: 0;
}
.delete-user-btn {
    flex-shrink: 0;
}

 .pending-photo-approval {
    padding: 1rem 1.5rem;
    background-color: rgba(var(--warning-rgb), 0.1);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.pending-photo-approval h4 {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: var(--warning-color);
    font-weight: 700;
}
.pending-photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--warning-color);
    margin-bottom: 1rem;
}
.approval-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

 .user-card-permissions {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.user-card-permissions .form-group {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 1rem;
}
.user-card-permissions .form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    color: var(--subtle-text-color);
    margin: 0;
}
   
 .ad-management-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

 .ad-zone-card-v2 {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.ad-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color);
}
.ad-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ad-card-description {
    padding: 0 1.5rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

 .ad-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--subtle-text-color);
    transition: background-color 0.3s ease;
}
.status-dot.active {
    background-color: var(--success-color);
}

 .ad-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1.5rem;
}

.ad-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

 .ad-preview h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 700;
}
.preview-box {
    width: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
}
.preview-box img {
    max-width: 100%;
    height: auto;
    max-height: 90px;
    object-fit: contain;
}

 .ad-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
}
.ad-analytics {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}
.ad-analytics .stat-item i {
    margin-left: 0.5rem;
}

 @media (max-width: 900px) {
    .ad-card-body {
        grid-template-columns: 1fr;      }
}

   
 .faq-management-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;      gap: 2rem;
    align-items: flex-start;
}

.faq-form-pane, .faq-list-pane {
    height: 100%;  }

.faq-form-pane h3, .faq-list-pane h3 {
    margin-top: 0;
}

 .faqs-list-container {
    max-height: 500px;      overflow-y: auto;
    padding-right: 10px;  }
.faq-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}
.faq-list-item.active {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.1);
}
.faq-item-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}
.faq-order {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
    background-color: var(--surface-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.faq-question {
    margin: 0;
    font-weight: 600;
}
.faq-item-actions {
    display: flex;
    gap: 0.5rem;
}

 #faq-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#faq-form .form-group {
    margin-bottom: 0;  }
#faq-form .form-actions-footer {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
#faq-form .form-actions-footer .btn {
    flex-grow: 1;
}

 @media (max-width: 992px) {
    .faq-management-layout {
        grid-template-columns: 1fr;      }
}
   
.material-details-v3-container {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    animation: fadeIn 0.5s ease-out;
}

 .details-v3-title-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.details-v3-title-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    line-height: 1.3;
}

 .details-v3-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-bottom: 2rem;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    font-weight: 600;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.meta-item i {
    color: var(--primary-color);
}

 .details-v3-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}
.details-v3-main-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.content-section h3 {
    font-size: 1.5rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

 .details-v3-sidebar {
    position: sticky;
    top: 85px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sidebar-card {
    background-color: rgba(var(--surface-rgb), 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}
.sidebar-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

 @media (max-width: 992px) {
    .details-v3-grid {
        grid-template-columns: 1fr;
    }
    .details-v3-sidebar {
        position: static;
    }
}
@media (max-width: 600px) {
    .material-details-v3-container {
        padding: 1.5rem;
    }
    .details-v3-title-header h1 {
        font-size: 1.8rem;
    }
    .details-v3-meta-bar {
        gap: 1rem;
    }
}
   
 .details-v3-meta-bar .meta-item {
    background-color: var(--background-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;      border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.details-v3-meta-bar .meta-item:hover {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
}

 .content-section h3 {
    border-bottom: none;      position: relative;
    padding-left: 1.5rem;  }
.content-section h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

 .file-tile {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.file-tile:hover {
    transform: translateY(-5px);      box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.file-tile .file-tile-download-btn {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.file-tile:hover .file-tile-download-btn {
    background-color: var(--success-color);
    color: white;
    transform: scale(1.1);
}

 .sidebar-card {
    border: 1px solid rgba(var(--border-rgb), 0.5);           box-shadow: var(--shadow-sm), inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
}

 .action-buttons-v2 .btn:active {
    transform: scale(0.97);      transition: transform 0.1s ease;
}
   
 .details-v3-sidebar {
    position: sticky;
    top: 85px;
}

.sidebar-v4 {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

 .sidebar-section {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-section:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.sidebar-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--subtle-text-color);
    text-transform: uppercase;
    margin: 0 0 1rem 0;
}

 .average-rating-text {
    font-size: 0.85rem;
    text-align: center;
    color: var(--subtle-text-color);
    margin-top: 0.75rem;
}

 .primary-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.btn-primary-action {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    justify-content: flex-start;      background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.btn-primary-action:hover {
    background-color: var(--hover-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.btn-primary-action.subscribed {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
    border-color: var(--success-color);
}

 .sidebar-footer {
    text-align: center;
}
.report-link-btn {
    background: none;
    border: none;
    color: var(--subtle-text-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}
.report-link-btn:hover {
    color: var(--danger-color);
    text-decoration: underline;
}
   
 #copy-link-btn {
background-color: var(--secondary-color);
}

#qr-code-share-btn {
    background-color: var(--accent-color);
}

 .share-buttons-v2 .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: var(--shadow-xs);
    font-size: 0.9rem;
}

.share-buttons-v2 .btn i {
    margin-inline-start: 0.5rem;
    font-size: 1rem;
}
.share-buttons-v2 .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
 .share-buttons-v2 .whatsapp-btn:hover {
    background-color: #2ecc71;
}
.share-buttons-v2 .whatsapp-btn {
    background-color: #25D366;
}
.share-buttons-v2 .telegram-btn:hover {
    background-color: #3498db;
}
.share-buttons-v2 .telegram-btn {
background-color: #0088CC;
}
#copy-link-btn:hover {
    background-color: #4a627a;
}
#qr-code-share-btn:hover {
    background-color: #40566b;
}

 .share-buttons-v2 .btn:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xxs);
}
   
 .qr-code-wrapper {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin: 1rem auto;
    display: inline-block;      box-shadow: var(--shadow-sm);
}

#qrcode-container img {
    display: block;
    border-radius: 8px;  }

 .qr-code-instructions {
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    max-width: 300px;
    margin: 1rem auto 1.5rem auto;
    line-height: 1.7;
}

 .download-qr-btn {
    width: 100%;
    max-width: 300px;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.8rem;
}
.share-buttons-v2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 0.75rem;
}

 .department-manage-card .card-header .edit-dept-btn {
    margin-right: auto;      background-color: var(--background-color);
}

.auth-btn {
    position: relative;      overflow: hidden;        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

 .auth-btn .loader-icon {
    display: none;      animation: spin 1s linear infinite;
}

 .auth-btn .btn-text {
    transition: opacity 0.2s ease;
}

 .auth-btn.loading .btn-text {
    opacity: 0;
}
.auth-btn.loading .loader-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

 .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-effect 0.6s linear;
    pointer-events: none;  }

@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


 #main-search-input-v2:focus,
#mobile-search-input:focus {
     box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);

     border-color: rgba(0, 123, 255, 0.4);

     outline: none; 
}



 
   
 

 #search-results-panel-v2 {
    position: absolute;      top: 100%;      left: 0;
    right: 0;      width: 100%;      background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;      box-shadow: var(--shadow-lg);
    z-index: 1000;      max-height: 400px;      overflow-y: auto;      margin-top: 2px;  }

 .search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;  }

.search-result-item:hover {
    background-color: var(--hover-color);
}

.search-result-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-left: 15px;  }

.search-result-info {
    display: flex;
    flex-direction: column;
}

.result-name {
    font-weight: 600;
    color: var(--text-color);
}

.result-details {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    display: flex;
    gap: 1rem;
    margin-top: 4px;
}

.result-details span {
    display: flex;
    align-items: center;
    gap: 5px;
}
 
   
 @media (max-width: 768px ) {
    .container {
        padding: 1rem;
    }
    .admin-section {
        padding: 1.5rem;
    }
}

 
.desktop-search {
    display: flex;  }

.mobile-search-bar input {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .header-container-v2 {
        gap: 10px;
    }
    .header-logo-v2 span {
        display: none;      }
    .desktop-search {
        display: none;      }
    
   
}

 @media (max-width: 600px) {
    .cards-container {
        grid-template-columns: 1fr;          gap: 1rem;
    }
}

 @media (max-width: 768px) {
    .data-table thead {
        display: none;      }
    .data-table tr {
        display: block;
        margin-bottom: 1rem;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        padding: 1rem;
        box-shadow: var(--shadow-sm);
    }
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    .data-table td:last-child {
        border-bottom: none;
    }
    .data-table td::before {
        content: attr(data-label);          font-weight: 600;
        color: var(--subtle-text-color);
        margin-right: 1rem;
        text-align: right;
    }
    .data-table td.actions {
        justify-content: center;
        padding-top: 1rem;
    }
    .data-table td.actions::before {
        display: none;
    }
}

 @media (max-width: 900px) {
    .details-grid, .profile-page-grid, .admin-grid, .faq-management-layout {
        grid-template-columns: 1fr;      }
    .sidebar, .profile-sidebar {
        position: static;      }
}

   
 .site-header-v2 {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}

.header-container-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 65px;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

 .header-logo-v2 a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;  }
.header-logo-v2 i {
    color: var(--primary-color);
}

 .search-wrapper-v2 {
    flex-grow: 1;      display: flex;
    justify-content: center;
    min-width: 0;      position: relative;
}

.search-icon-inside {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--subtle-text-color);
    pointer-events: none;
}
#main-search-input-v2 {
    flex-grow: 1;
    border-radius: 0 8px 8px 0;
    border-left: none;
    padding-right: 40px;
    height: 42px;
    border: 1px solid var(--border-color);
}
#full-search-btn {
    border-radius: 8px 0 0 8px;
    height: 42px;
    margin: 0;
    white-space: nowrap;
}

 .header-actions-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.action-btn-v2 {
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.2rem;
    position: relative;
    transition: background-color 0.2s;
}
.action-btn-v2:hover {
    background-color: var(--hover-color);
}
.action-badge-v2 {
    position: absolute;
    top: 2px;
    right: 0px;
    background-color: var(--danger-color);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface-color);
}

 .mobile-only-v2 { display: none; }


@media (max-width: 900px) {
    .desktop-only-text {
        display: inline !important;      }
}
@media (max-width: 900px) {
         .search-wrapper-v2 {
        justify-content: flex-end;      }
}

@media (max-width: 768px) {
    /* 
       إخفاء حاوية البحث بشكل افتراضي على الهواتف.
       هذه القاعدة موجودة لديك بالفعل.
    */
    .search-wrapper-v2 {
        display: none;
        position: absolute;
        top: 65px; /* أو ارتفاع الهيدر الخاص بك */
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        z-index: 998; /* للتأكد من ظهوره فوق المحتوى */
    }

    /* 
       ✅ --- هذا هو الكود الجديد الذي يجب إضافته --- ✅
       هذه القاعدة تقوم بإظهار حاوية البحث عندما يتم إضافة كلاس .mobile-search-active
    */
    .search-wrapper-v2.mobile-search-active {
        display: block; /*   <-- هذا السطر هو الحل   */
        animation: slideDown 0.3s ease-out; /* إضافة حركة هبوط ناعمة */
    }

    /* 
       (اختياري) تعريف حركة الهبوط إذا لم تكن موجودة
    */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
    


 .mobile-search-bar {
    display: none;
    padding: 10px 15px;
    background-color: var(--surface-color);
    border-top: 1px solid var(--border-color);
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    z-index: 998;
}
#mobile-search-bar:not([hidden]) {
    display: flex;
    gap: 10px;
}
#mobile-search-input {
    flex-grow: 1;
    height: 40px;
}

   
 .site-header {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
}

 .header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

 .logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-color);
}
.logo-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

 .search-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}
.search-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--subtle-text-color);
}
#desktop-search-input {
    width: 100%;
    height: 42px;
    border-radius: 21px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    padding: 0 45px 0 20px;
    transition: all 0.2s ease;
}
#desktop-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

 .action-button {
    background: none;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--subtle-text-color);
    font-size: 1.3rem;
    position: relative;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
}
.action-button:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}
.badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--danger-color);
    color: white;
    width: 18px;
    height: 25px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface-color);
}

 .mobile-only { display: none; }

@media (max-width: 900px) {
    .logo-text {
        display: none;      }
}

@media (max-width: 768px) {
    .header-center {
        display: none;      }
    .mobile-only {
        display: grid;      }
}

 .mobile-search-container {
    background-color: var(--surface-color);
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
#mobile-search-input {
    flex-grow: 1;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 15px;
}
.close-mobile-search {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--subtle-text-color);
    cursor: pointer;
}

   


 .search-input-with-button .search-icon-inside {
    position: absolute;
    top: 50%;
    right: 15px;      transform: translateY(-50%);
    color: var(--subtle-text-color);
    pointer-events: none;
    z-index: 2;
}


   
 .search-input-with-button {
    display: flex;      align-items: center;      position: relative;      width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

 .search-input-with-button .search-icon-inside {
    position: absolute;
    top: 50%;
    right: 15px;      transform: translateY(-50%);
    color: var(--subtle-text-color);
    pointer-events: none;
    z-index: 2;
}

 .search-input-with-button input[type="search"] {
    flex-grow: 1;      min-width: 0;      height: 44px;
    border: 1px solid var(--border-color);
    border-left: none;      border-radius: 0 8px 8px 0;      padding-right: 40px;  }

 .search-input-with-button .btn {
    flex-shrink: 0;      height: 44px;
    margin: 0;
    border-radius: 8px 0 0 8px;      white-space: nowrap;  }

   
 .mobile-only-v2 {
    display: none;
}

 @media (max-width: 768px) {
    
         .search-wrapper-v2 {
        display: none;          position: absolute;
        top: 65px;          left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        z-index: 998;          animation: slideDown 0.3s ease-out;      }

         .search-wrapper-v2.mobile-search-active {
        display: block;
    }

         .mobile-only-v2 {
        display: grid;      }

          }

 @keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.site-header-v2 {
    position: sticky;      top: 0;                left: 0;
    width: 100%;           z-index: 999;          
         background-color: var(--surface-color);
    box-shadow: var(--shadow-sm);
}   
 .image-gallery-v2 {
    display: flex;      overflow-x: auto;      gap: 1rem;      padding-bottom: 1rem;      
         scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--surface-color);
}


 .gallery-thumbnail {
    width: 100%;      aspect-ratio: 1 / 1;      object-fit: cover;      border-radius: 8px;      border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 10%;
}

 .gallery-thumbnail:hover {
    transform: scale(1.05);      box-shadow: var(--shadow-md);
}
.image-gallery img, .image-gallery-v2 .gallery-thumbnail {
    height: 150px;      width: auto;        max-width: 200px;  border: 3px solid var(--text-color);  }
.details-v3-main-content {
    min-width: 0;
}

   
.notifications-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.notification-card-v2 {
    display: flex;
    align-items: stretch; /* ✅ <--- تعديل مهم: اجعل الأبناء يتمددون لملء الارتفاع */
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 80px; /* ✅ <--- إضافة مهمة: حد أدنى للارتفاع */
}

.notification-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.notification-card-v2.is-read {
    opacity: 0.7;
    background-color: var(--background-color);
}

 .notification-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background-color: var(--subtle-text-color);
}
.notification-card-v2.card-type-report::before { background-color: var(--danger-color); }
.notification-card-v2.card-type-request::before { background-color: var(--warning-color); }
.notification-card-v2.card-type-general::before { background-color: var(--primary-color); }



.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.card-header i {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}



.notification-details-table > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.notification-details-table span:first-child {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--subtle-text-color);
}
.notification-details-table span:last-child,
.notification-details-table p {
    font-size: 1rem;
    color: var(--text-color);
    margin: 0;
}
.details-full-width {
    grid-column: 1 / -1;
}

.card-actions-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--background-color);
    padding: 0.5rem;
    border-right: 1px solid var(--border-color);
}
.btn-icon {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--subtle-text-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn-icon:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
}
.btn-icon.delete-notification-btn:hover {
    color: var(--danger-color);
}






   
.ad-zone-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: var(--shadow-sm);
}

.ad-zone-card h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.ad-zone-card p {
    color: var(--subtle-text-color);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.ad-management-form .form-group {
    margin-bottom: 1.5rem;
}

.ad-management-form .toggle-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
}
.ad-management-form .toggle-group label {
    margin-bottom: 0;
    font-weight: 600;
}
.top-ad-banner {
    display: block;
    width: 100%;
    background-color: var(--background-color);
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.top-ad-banner img {
    max-width: 100%;
    height: auto;
    max-height: 90px;  }
.chart-wrapper {
    position: relative;      flex-grow: 1;      height: 350px;      width: 100%;
}
 
 .notifications-page-container {
    max-width: 900px;      margin: 2rem auto;      padding: 0 1rem;      animation: fadeIn 0.5s ease-out;  }

 .notifications-page-container .view-header {
    text-align: center;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.5rem;
}

.notifications-page-container .view-header h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.notifications-page-container .view-header h2 i {
    color: var(--primary-color);
    margin-right: 10px;
}

.notifications-page-container .section-description {
    font-size: 1rem;
    color: var(--subtle-text-color);
    max-width: 600px;
    margin: 0 auto;  }

 .notifications-page-container .filters-container {
    display: flex;
    gap: 1rem;      margin-bottom: 2rem;
    align-items: center;
}

 .notifications-page-container .search-wrapper {
    position: relative;
    flex-grow: 1;  }

.notifications-page-container .search-wrapper i {
    position: absolute;
    top: 50%;
    right: 15px;      transform: translateY(-50%);
    color: var(--subtle-text-color);
}

.notifications-page-container #notif-search-input {
    padding-right: 40px;  }

 .full-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;  }

 .notification-item-full {
    display: flex;
    align-items: flex-start;      gap: 1rem;
    padding: 1.25rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;      overflow: hidden;  }

.notification-item-full:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

 .notification-item-full .notification-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;  }

 .notification-item-full .notification-content {
    flex-grow: 1;
}

.notification-item-full .notif-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
}

.notification-item-full .notif-message {
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    margin: 0 0 0.75rem 0;
    line-height: 1.6;
}

.notification-item-full .timestamp {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

 .notification-item-full.unread {
    border-left: 4px solid var(--primary-color);      background-color: var(--background-color);  }

 .notification-item-full .unread-dot {
    position: absolute;
    top: 15px;
    left: 15px;      width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(3, 218, 198, 0.2);  }

 @media (max-width: 600px) {
    .notifications-page-container .filters-container {
        flex-direction: column;          align-items: stretch;      }

    .notification-item-full {
        flex-direction: column;          align-items: center;
        text-align: center;
    }

    .notification-item-full .notification-content {
        width: 100%;
    }
}
 .file-drop-zone.is-dragged-over {
    border-color: var(--primary-color);      background-color: rgba(187, 134, 252, 0.05);      border-style: dashed;  }
 .image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}

 .image-preview-wrapper {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

 .image-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;      display: block;
}

 .remove-image-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.remove-image-btn:hover {
    background-color: var(--danger-color);
}
   @media (max-width: 992px) {
         .admin-sidebar {
        width: 80px;      }

         .admin-sidebar .sidebar-title,
    .admin-sidebar .nav-link span,
    .admin-sidebar .sidebar-footer span {
        display: none;      }

         .admin-sidebar .sidebar-toggle {
        display: none;
    }

         .admin-sidebar .nav-link {
        justify-content: center;
    }
}


   
.notifications-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.notification-card-v2 {
    display: flex;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.notification-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.notification-card-v2.is-read {
    opacity: 0.7;
    background-color: var(--background-color);
}

 .notification-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background-color: var(--subtle-text-color);
}
.notification-card-v2.card-type-report::before { background-color: var(--danger-color); }
.notification-card-v2.card-type-request::before { background-color: var(--warning-color); }
.notification-card-v2.card-type-general::before { background-color: var(--primary-color); }




.notification-card-v2 .card-header i {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.notification-card-v2 .card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}


.notification-details-table > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.notification-details-table span:first-child {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--subtle-text-color);
}
.notification-details-table span:last-child,
.notification-details-table p {
    font-size: 1rem;
    color: var(--text-color);
    margin: 0;
    word-break: break-word;
}
.details-full-width {
    grid-column: 1 / -1;
}

.card-actions-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--background-color);
    padding: 0.5rem;
    border-right: 1px solid var(--border-color);
}
.btn-icon {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--subtle-text-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn-icon:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
}
.btn-icon.delete-notification-btn:hover {
    color: var(--danger-color);
}


 @media (max-width: 768px) {
     .notifications-panel-v2 {
        position: fixed;          top: 80px;                left: 50%;                right: auto;              
                 transform: translateX(-50%) translateY(10px);
    }

    .notifications-panel-v2.is-open {
        transform: translateX(-50%) translateY(0);
    }
         .site-footer {
        padding: 2.5rem 1rem 0;
    }

     .section-header {
        flex-direction: column;          align-items: stretch;            gap: 0.5rem;                 }

    .section-header .section-title-input {
        margin-left: 0;      }

              .file-tile {
        flex-direction: row;               align-items: center;               padding: 0.75rem;                  gap: 0.75rem;                  }

         .file-tile .file-tile-icon {
        font-size: 2rem;
        width: 40px;
    }
    
         .file-tile .file-tile-info {
        flex-grow: 1;                  flex-shrink: 1;                min-width: 0;              }

         .file-tile .file-tile-info h4 {
        font-size: 1rem;
        word-break: break-all;      }
    .file-tile .file-tile-info small {
        font-size: 0.75rem;
    }

         .file-tile .file-tile-download-btn {
        flex-shrink: 0;               width: 44px;
        height: 44px;
        margin: 0;                    align-self: center;
    }

         .footer-container {
        grid-template-columns: 1fr;          gap: 2rem;
    }

         .footer-about,
    .footer-links,
    .footer-legal,
    .footer-developer {
        text-align: center;      }

         .footer-heading::after {
        right: 50%;          transform: translateX(50%);      }

         .developer-info,
    .footer-social-icons {
        justify-content: center;      }

         .footer-links ul,
    .footer-legal ul {
        padding-right: 0;      }
}

.file-tile-info {
    /* تحسينات على محاذاة النص والمسافات */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem; /* مسافة بسيطة بين اسم الملف والتفاصيل */
}

.file-tile-info h4 {
    line-height: 1.3; /* تحسين ارتفاع السطر لأسماء الملفات الطويلة */
}

.file-tile-info small {
    font-weight: 500; /* جعل الخط أثقل قليلاً ليكون أوضح */
}

/* =============================================== */
/*   تصميم بطاقة "أضيفت بواسطة" في الشريط الجانبي   */
/* =============================================== */

.uploader-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--surface-color);
    padding: 12px;
    border-radius: var(--border-radius);
    text-decoration: none;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}

.uploader-profile-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.uploader-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--primary-color);
}

.uploader-info {
    display: flex;
    flex-direction: column;
}

.uploader-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color);
}

.uploader-role {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    text-transform: capitalize;
}
/* =============================================== */
/*   تصميم قسم التفاصيل في بطاقة إدارة المستخدمين   */
/* =============================================== */

.user-card-details {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color);
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين للتفاصيل */
    gap: 0.75rem;
}

.user-card-details .detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
}

.user-card-details .detail-item i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

/* تعديل بسيط على قسم الصلاحيات ليتناسق مع التصميم الجديد */
.user-card-permissions {
    padding: 1.5rem;
    gap: 1rem; /* تقليل المسافة بين حقول الصلاحيات */
}

.user-card-permissions .form-group {
    grid-template-columns: 80px 1fr; /* تعديل عرض الليبل */
    gap: 0.75rem;
}


/* =============================================== */
/*   NEW Software Library Design (v3) Styles     */
/* Prefix: "sw-lib-"                             */
/* =============================================== */

/* --- 1. Main Layout & Header --- */
.sw-lib-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sw-lib-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.sw-lib-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sw-lib-header-title h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-color);
}

.sw-lib-header-title i {
    font-size: 2rem;
    color: var(--primary-color);
}

.sw-lib-search-box {
    position: relative;
    min-width: 300px;
}

.sw-lib-search-box i {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--subtle-text-color);
}

#sw-lib-search-input {
    width: 100%;
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
}

/* --- 2. Main Content Layout (Sidebar + Grid) --- */
.sw-lib-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: flex-start;
}

/* --- 3. Sidebar Styling --- */
.sw-lib-sidebar {
    position: sticky;
    top: 85px; /* Adjust based on your header height */
    background: rgba(var(--surface-rgb), 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.sw-lib-sidebar h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.sw-lib-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sw-lib-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--subtle-text-color);
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sw-lib-category-item span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sw-lib-category-item:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

.sw-lib-category-item.active {
    background-color: var(--primary-color);
    color: white;
}

.sw-lib-badge {
    background-color: var(--background-color);
    color: var(--subtle-text-color);
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-weight: 700;
}

.sw-lib-category-item.active .sw-lib-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* --- 4. Content Grid & Card Styling --- */
.sw-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.sw-lib-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sw-lib-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

.sw-lib-card__header {
    background-color: var(--background-color);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sw-lib-card__logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.sw-lib-card__platform {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--surface-color);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.sw-lib-card__body {
    padding: 1rem 1.5rem;
    flex-grow: 1;
}

.sw-lib-card__body h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.sw-lib-card__body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
}

.sw-lib-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--primary-color);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sw-lib-card:hover .sw-lib-card__footer {
    background-color: var(--primary-color);
    color: white;
}

/* --- 5. Responsive Adjustments --- */
@media (max-width: 900px) {
    .sw-lib-main {
        grid-template-columns: 1fr; /* Stack sidebar and content on smaller screens */
    }
    .sw-lib-sidebar {
        position: static; /* Unstick the sidebar */
    }
}

@media (max-width: 600px) {
    .sw-lib-header {
        flex-direction: column;
        align-items: stretch;
    }
    .sw-lib-search-box {
        min-width: auto;
    }
    .sw-lib-grid {
        grid-template-columns: 1fr; /* Single column for cards on mobile */
    }
}
/* =============================================== */
/*   Responsive Modal Styles   */
/* =============================================== */

/* 1. الخلفية الشفافة (Overlay) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(28 30 33 / .6);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none; /* ✅ تم إصلاح السطر هنا */
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Class to show the modal */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* 2. حاوية المحتوى الرئيسية */
.modal-content {
    background-color: var(--surface-color, #ffffff);
    color: var(--text-color, #1a1a1a);
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04));
    width: 100%;
    max-width: 600px;
    
    /*   الأهم: تحديد أقصى ارتفاع واستخدام flexbox عمودي */
    max-height: 90vh; /* لن تتجاوز النافذة 90% من ارتفاع الشاشة */
    display: flex;
    flex-direction: column;
    
    /* transition for showing/hiding */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-content {
    transform: scale(1);
}

/* 3. رأس وتذييل النافذة (غير قابلين للتمرير) */
.modal-header, .modal-actions {
    padding: 1.25rem 1.5rem;
    flex-shrink: 0; /* يمنعهما من التقلص */
}

.modal-header {
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-actions {
    display: flex; /* ✅ تفعيل Flexbox لتوزيع الأزرار بمرونة */
    flex-direction: row-reverse; /* ✅ ترتيب الأزرار من اليمين لليسار (الزر الرئيسي يظهر أقصى اليمين) */
    gap: 12px; /* ✅ مسافة موحدة وأنيقة بين الأزرار */
    padding: 16px 24px; /* هوامش داخلية مريحة */
    background-color: var(--secondary-bg-color, #f5f5f5); /* خلفية بلون مختلف قليلاً */
    border-top: 1px solid var(--border-color, #e0e0e0);
    border-bottom-left-radius: 16px; /* لمطابقة حواف النافذة */
    border-bottom-right-radius: 16px;
}
.modal-actions .btn:hover {
    transform: translateY(-2px); /* يرتفع الزر قليلاً */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 480px) {
    .modal-actions {
        flex-direction: column; /* ✅ تغيير اتجاه التوزيع إلى عمودي */
        gap: 10px; /* تقليل المسافة بين الأزرار العمودية */
    }

    /* في الشاشات الصغيرة، لا نحتاج لأن تتمدد الأزرار */
    .modal-actions .btn {
        flex-grow: 0; 
        width: 100%; /* هنا نعود لاستخدام العرض الكامل كما طلبت */
    }
}
.modal-actions .btn {
    width: 100%; /* جعل الزر يملأ المساحة */
    padding: 0.8rem 1rem;
    font-size: 1rem;
}


/* 4. الجزء الأهم: جعل المحتوى قابلاً للتمرير */
.modal-body {
    padding: 1.5rem;
    overflow-y: auto; /*   هذا السطر يضيف شريط تمرير عند الحاجة   */
    line-height: 1.7;
}

.modal-body p {
    margin: 0 0 1rem 0;
}

/* 5. تحسينات إضافية على مربع الاختيار */
.checkbox-container {
    margin-top: 1.5rem;
    background-color: var(--background-color, #f9f9f9);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.checkbox-container label {
    font-size: 0.9rem;
    color: var(--subtle-text-color, #4a5568);
}

/* 6. استجابة للهواتف الصغيرة */
@media (max-width: 600px) {
    .modal-content {
        padding: 0;
    }
    .modal-header {
        padding: 1rem;
    }
     .modal-header h2 {
        font-size: 1.2rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-actions {
        padding: 1rem;
    }
}

/* ========================================================== */
/*   NEW: Multi-Line File Tile Design (V2)  */
/* ========================================================== */

/* 1. الحاوية الرئيسية للبطاقة */
.file-tile-v2 {
    display: flex;
    align-items: flex-start; 
    gap: 1rem;
    padding: 1rem;
    background-color: var(--surface-color);
    border: 3px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.file-tile-v2:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* 2. أيقونة نوع الملف */
.tile-icon {
    font-size: 2rem;
    padding-top: 0.25rem;
    color:red;
}
.tile-icon.pdf { color: #e53935; }
.tile-icon.word { color: #1e88e5; }
.tile-icon.excel { color: #43a047; }
.tile-icon.powerpoint { color: #fb8c00; }
.tile-icon.image { color: #8e24aa; }
.tile-icon.default { color: var(--subtle-text-color); }


/* 3. حاوية المحتوى (العنوان + التفاصيل) */
.tile-content {
    flex-grow: 1;
    min-width: 0; /* مهم لمنع تجاوز المحتوى */
    display: flex;
    flex-direction: column; /* لترتيب المحتوى بشكل عمودي */
    gap: 0.75rem; /* مسافة بين سطر العنوان وسطر التفاصيل */
}

/* 4. السطر العلوي: العنوان الرئيسي */
.tile-main-info .tile-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
    word-break: break-all; /* يضمن التفاف الأسماء الطويلة */
}

/* 5. السطر السفلي: التفاصيل وزر التحميل */
.tile-meta {
    display: flex;
    justify-content: space-between; /* لوضع التفاصيل في جهة والزر في الجهة الأخرى */
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة جداً */
    gap: 1rem;
}

.tile-details {
    font-size: 0.85rem;
    color: #57009d;
    font-weight: 600;
    box-shadow: #388e3c;
}

/* 6. زر التحميل المطور */
.tile-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-weight: 700;
}

.tile-download-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

::-webkit-scrollbar {
    width: 10px;  /* عرض الشريط العمودي */
    height: 10px; /* ارتفاع الشريط الأفقي */
}

/* تصميم مسار شريط التمرير (الخلفية) */
::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 10px;
}

/* تصميم الجزء المتحرك من شريط التمرير (المقبض) */
::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
    /* إضافة حدود بسيطة تعطي إحساسًا بالعمق */
    border: 2px solid var(--background-color); 
}

/* تغيير لون المقبض عند مرور الماوس فوقه */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}


/* -- 2. للمتصفحات مثل Firefox -- */
/* هذه الطريقة أبسط ولكنها أقل قابلية للتخصيص */
* {
  scrollbar-width: thin; /* يمكن أن تكون 'auto', 'thin', أو 'none' */
  scrollbar-color: var(--secondary-color) var(--background-color); /* (لون المقبض) (لون المسار) */
}

.image-preview-wrapper {
    position: relative;
    overflow: hidden; /* لإخفاء أي زوائد */
}

/* 2. تصميم شريط التقدم كطبقة فوق الصورة */
.upload-progress-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* للتحكم في الظهور والإخفاء */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

/* حالة الظهور عند بدء الرفع */
.image-preview-wrapper.is-uploading .upload-progress-overlay {
    opacity: 1;
    visibility: visible;
}

/* 3. تصميم شريط التقدم نفسه */
.upload-progress-bar-container {
    width: 80%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.upload-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--success-color, #388e3c);
    border-radius: 4px;
    transition: width 0.2s linear;
}

/* 4. نص النسبة المئوية */
.upload-progress-text {
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* 5. أيقونة اكتمال الرفع أو الفشل */
.upload-status-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}
.image-preview-wrapper.is-complete .upload-status-icon.success {
    opacity: 1;
    color: var(--success-color, #4CAF50);
}
.image-preview-wrapper.is-failed .upload-status-icon.error {
    opacity: 1;
    color: var(--danger-color, #d32f2f);
}
.image-preview-wrapper.is-complete .upload-progress-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* تعتيم الخلفية عند الاكتمال */
}
.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    padding: 1rem;
    background-color: #1E1E1E; /* خلفية داكنة مناسبة للفيديو */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
}

/* حاوية مشغل الفيديو لجعلها متجاوبة 16:9 */
.video-iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* نسبة العرض إلى الارتفاع 16:9 */
    height: 0;
    background-color: #000;
}

.video-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* تعديل زر الإغلاق ليتناسب مع الخلفية الداكنة */
.video-modal-content .close-btn {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
}
.notifications-list-v2 {
   
    max-height: 2000px;

   
    overflow-y: auto;

    padding-right: 8px; 
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ad-card-body {
    display: grid;
    grid-template-columns: 2fr 1fr; /* تقسيم النموذج إلى جزئين */
    gap: 2rem;
}

.ad-analytics-pane {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.analytics-grid {
    display: flex;
    gap: 1.5rem;
    text-align: center;
}

@media (max-width: 768px) {
    .ad-card-body {
        grid-template-columns: 1fr; /* عمود واحد في الشاشات الصغيرة */
    }
}

.settings-tabs-container {
    margin-top: 1.5rem;
}

.settings-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.settings-tabs .tab-link {
    padding: 0.8rem 1.5rem;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--subtle-text-color);
    transition: all 0.2s ease-in-out;
}

.settings-tabs .tab-link:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

.settings-tabs .tab-link.active {
    background-color: var(--background-color-2);
    border-color: var(--border-color);
    border-bottom: 2px solid var(--background-color-2);
    color: var(--primary-color);
    transform: translateY(2px);
}

.settings-tab-content .tab-pane {
    display: none; /* إخفاء كل الأجزاء افتراضيًا */
    animation: fadeIn 0.4s ease;
}

.settings-tab-content .tab-pane.active {
    display: grid; /* إظهار الجزء النشط فقط */
    gap: 1.5rem;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#install-pwa-btn {
    transition: opacity 0.3s ease;
}

.pwa-install-wrapper {
    position: relative; /* أهم خاصية: لجعلها مرجعًا للفقاعة */
    display: inline-block;
}

/* تصميم الفقاعة (مبسط) */
.pwa-speech-bubble {
    position: absolute;
    bottom: 125%; /* ضعها فوق الزر مباشرة */
    left: 50%;
    transform: translateX(-50%); /* للتوسيط الأفقي */
    
    width: max-content; /* اجعل عرضها يناسب المحتوى */
    background-color: var(--primary-color);
    color: #121212;
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    font-weight: 600;
    z-index: 100;
    
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pwa-speech-bubble.visible {
    opacity: 1;
    pointer-events: auto;
}

/* السهم الصغير */
.pwa-speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%; /* اجعل السهم يلامس الفقاعة من الأسفل */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--primary-color);
}

.pwa-speech-bubble .close-bubble {
    background: none;
    border: none;
    color: #121212;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.notification-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 1rem;
    color: var(--subtle-text-color);
}

.notification-login-prompt i {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.7;
}

.notification-login-prompt p {
    margin: 0;
    font-weight: 600;
}

.upload-progress-bar.indeterminate {
    width: 100% !important; /* اجعله يملأ المساحة بالكامل */
    background-color: var(--primary-color);
    opacity: 0.3;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}
.details-v3-title-header .title-and-badge {
    display: flex;
    align-items: center; /* محاذاة عمودية في المنتصف */
    gap: 1rem; /* مسافة بين العنوان والشارة */
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
}

/* تصميم الشارة نفسها */
.course-badge {
    background-color: var(--primary-color); /* استخدام اللون الأساسي للمنصة */
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 15px; /* حواف دائرية */
    font-size: 0.9rem;   /* حجم خط أصغر قليلاً من العنوان */
    font-weight: 600;
    white-space: nowrap; /* لمنع كسر النص داخل الشارة */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    align-self: center; /* تأكيد المحاذاة العمودية */
}

/* تعديل بسيط على الحاوية الرئيسية للعنوان لضمان التجاوب */
.details-v3-title-header {
    display: flex;
    justify-content: space-between; /* تباعد بين العنوان وزر التعديل */
    align-items: center;
    gap: 1rem;
}
.card-main-content {
    flex-grow: 1;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column; /* ✅ <--- تعديل مهم: اجعل المحتوى يترتب عموديًا */
    justify-content: center; /* ✅ <--- إضافة مهمة: توسيط المحتوى عموديًا داخل المساحة */
    gap: 1rem;
}

/* 2. رأس البطاقة (العنوان والوقت) */
.notification-card-v2 .card-header {
    display: flex;
    justify-content: space-between; /* لوضع الوقت في أقصى اليسار */
    align-items: flex-start; /* محاذاة العناصر للأعلى */
    gap: 1rem;
    width: 100%;
    padding-bottom: 0.75rem; /* إضافة خط سفلي للمسافة */
    border-bottom: 1px solid var(--border-color);
}

.notification-card-v2 .card-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1; /* السماح للعنوان بأخذ المساحة المتاحة */
}

.notification-card-v2 .card-header-title i {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-top: 2px; /* محاذاة دقيقة مع النص */
}

.notification-card-v2 .card-header-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4; /* تحسين قراءة العناوين الطويلة */
}

.card-timestamp {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    white-space: nowrap; /* منع كسر الوقت إلى سطر جديد */
    flex-shrink: 0; /* منع الوقت من التقلص */
}

/* 3. رسالة الإشعار العامة */
.notification-message {
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
    margin: 0;
}

/* 4. جدول تفاصيل البلاغات والطلبات */
.notification-details-table {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
/* ========================================================== */
/* ✅ --- NEW: Final Responsive Admin Layout (FIXED) --- ✅ */
/* ========================================================== */

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 260px;
    background-color: #1e293b;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, transform 0.3s ease-in-out; /* إضافة transform */
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #334155;
}

.sidebar-title {
    font-size: 1.25rem;
    margin: 0;
    white-space: nowrap;
}

.sidebar-nav {
    flex-grow: 1;
    padding-top: 1rem;
    overflow-y: auto;
}

.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.sidebar-nav .nav-link:hover { background-color: #334155; color: #ffffff; }
.sidebar-nav .nav-link.active { background-color: var(--primary-color); color: #ffffff; }
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 24px; text-align: center; }

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #334155;
}
.sidebar-footer .btn { width: 100%; justify-content: center; }

.admin-content {
    flex-grow: 1;
    background-color: var(--background-color);
    padding: 2rem;
    overflow-y: auto;
}

.admin-content-header {
    display: none; /* مخفي على الكمبيوتر */
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-content-header h2 { margin: 0; font-size: 1.5rem; }
.mobile-only-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
}

/* --- قواعد الشاشات الصغيرة (أقل من 992 بكسل) --- */
@media (max-width: 992px) {
  

    .admin-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1100;
        transform: translateX(100%); /* إخفاء القائمة إلى اليمين */
    }

    .admin-sidebar.is-open {
        transform: translateX(0); /* إظهار القائمة */
    }

    /* إضافة خلفية معتمة عند فتح القائمة */
    .admin-layout.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1099;
    }

    .admin-content {
        padding: 1.5rem;
    }

    .admin-content-header {
        display: flex; /* إظهار رأس المحتوى على الهاتف */
    }
}
.sidebar-nav .nav-link[data-tab="notifications-tab"] {
    position: relative; /*   هذا هو السطر الأهم   */
}

/* 2. تصميم الشارة نفسها */
#notifications-badge {
    position: absolute;
    top: 10px; /* تعديل المسافة من الأعلى */
    right: 12px; /* تعديل المسافة من اليمين */
    
    min-width: 20px;
    height: 20px;
    padding: 2px; /* إضافة حشوة داخلية بسيطة */
    
    background-color: var(--danger-color);
    color: white;
    
    border-radius: 50%;
    border: 2px solid #1e293b; /* إضافة حدود بنفس لون خلفية القائمة */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 0.75rem;
    font-weight: 700;
    
    /* التأكد من أن الشارة لا يتم إخفاؤها */
    opacity: 1 !important;
    width: auto !important; /* السماح للعرض بالتمدد حسب الرقم */
    
    /* تأثير بسيط للظهور */
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* إخفاء الشارة إذا كان عدد الإشعارات صفرًا */
#notifications-badge[style*="display: none"] {
    transform: scale(0);
}

/* 3. تعديل موضع الشارة عندما تكون القائمة مصغرة على الكمبيوتر */
.admin-sidebar.collapsed .nav-link[data-tab="notifications-tab"] #notifications-badge {
    top: 5px;
    right: 8px;
}
/* الأنماط الخاصة بشريط الإعلانات العام */
#global-announcement-banner {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform: translateY(-100%);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

#global-announcement-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

#global-announcement-banner p {
    margin: 0;
    font-weight: 500;
    flex-grow: 1;
}

#global-announcement-banner .close-banner-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.3s;
}

#global-announcement-banner .close-banner-btn:hover {
    opacity: 1;
}

.radio-group-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: var(--card-bg-color);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--subtle-text-color);
    box-shadow: var(--shadow-sm);
}

.radio-label:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.radio-label input[type="radio"] {
    display: none;
}

.radio-label i {
    font-size: 1.2rem;
    color: var(--subtle-text-color);
    transition: color 0.2s;
    width: 20px; 
    text-align: center; 
}


.radio-label.active {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.2);
}

.radio-label.active i {
    color: var(--primary-color);
}

.radio-label.active i.fa-check-circle {
    color: var(--success-color);
}

.radio-label.active i.fa-times-circle {
    color: var(--danger-color);
}


/* الأنماط الخاصة بالرسالة المنبثقة من زر الـ FAB */
.fab-message {
    position: absolute;
    bottom: 75px; /* يظهر فوق الزر */
    right: 50%;
    transform: translateX(50%) translateY(10px);
    background-color: var(--primary-color);
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
    z-index: 1000;
}

.fab-message.visible {
    opacity: 1;
    transform: translateX(50%) translateY(0);
}

/* تأثير الاهتزاز على زر الـ FAB */
.fab-toggle.pulse-animation {
    animation: pulse-fab 1.5s infinite;
}

@keyframes pulse-fab {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}




/* الأنماط العامة للبروفايل */
.profile-v2-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Cairo', sans-serif; /* استخدام خط عربي جميل */
    color: var(--text-color);
}

.profile-v2-card {
    background-color: var(--card-background);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
    overflow: hidden;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 2rem; /* مسافة إضافية للمحتوى أسفل الصورة */
}

.profile-v2-cover {
    height: 200px;
    background-color: var(--primary-color-dark); /* لون افتراضي للغلاف */
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 5px solid var(--primary-color); /* شريط لوني مميز */
}

.profile-v2-avatar-wrapper {
    position: absolute;
    top: 120px; /* ليظهر جزء من الصورة فوق الغلاف */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column; /* لترتيب الزر أسفل الصورة */
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.profile-v2-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--card-background); /* إطار حول الصورة */
    object-fit: cover;
    box-shadow: var(--shadow-medium);
    transition: transform 0.3s ease;
}

.profile-v2-avatar:hover {
    transform: scale(1.05); /* تأثير تكبير عند التحويم */
}

.profile-v2-info {
    text-align: center;
    margin-top: 80px; /* لترك مساحة كافية للصور */
    padding: 0 1.5rem;
}

.profile-v2-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
    position: relative;
}

.profile-v2-name::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--accent-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

.profile-v2-email {
    color: var(--text-color-light);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.profile-v2-role-badge {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--role-color, #3498db); /* لون دور المستخدم */
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: var(--shadow-small);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    top: auto; /* إعادة تعيين قيمة top */
    bottom: -20px; /* لوضعه أسفل الصورة الشخصية */
}

.profile-v2-details {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color-light);
    font-size: 1rem;
}

.detail-item i {
    color: var(--primary-color);
}

.profile-v2-socials {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icon-v2 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--button-background);
    color: var(--button-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icon-v2:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}

.profile-v2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.profile-v2-content-card {
    background-color: var(--card-background);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
    padding: 1.5rem;
}

.card-header {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.8rem;
}

.card-body-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.profile-v2-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}

.stat-item-v2 {
    text-align: center;
    flex: 1;
    min-width: 120px;
    padding: 1rem 0.5rem;
    border-radius: 10px;
    background-color: var(--background-color-light);
    box-shadow: var(--shadow-x-small);
    transition: transform 0.3s ease;
}

.stat-item-v2:hover {
    transform: translateY(-5px);
    background-color: var(--background-color);
}

.stat-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.2rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-color-light);
}

/* زر تغيير الصورة */
.change-photo-btn {
    margin-top: 10px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.change-photo-btn:hover {
    background-color: var(--primary-color-dark);
}

/* أنماط الـ Tooltips */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

[data-tooltip]:hover::before {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-v2-cover {
        height: 150px;
    }
    .profile-v2-avatar-wrapper {
        top: 80px;
    }
    .profile-v2-avatar {
        width: 120px;
        height: 120px;
    }
    .profile-v2-name {
        font-size: 1.8rem;
    }
    .profile-v2-details {
        flex-direction: column;
        gap: 0.8rem;
    }
    .profile-v2-grid {
        grid-template-columns: 1fr;
    }
    .profile-v2-info {
        margin-top: 60px;
    }
}


#main-search-input-v2::placeholder {
    /* --- بداية التعديلات --- */
    color: #888; /* لون النص المؤقت */
    transition: opacity 0.2s ease-in-out; /* انتقال ناعم للون الشفافية */
    /* --- نهاية التعديلات --- */
}

/* هذا الكود يضيف المؤشر الوامض (الكاريت) */
#main-search-input-v2 {
    position: relative; /* ضروري لتحديد موقع الكاريت */
}

/* إنشاء عنصر وهمي ليكون هو المؤشر */
#main-search-input-v2:focus::after,
#main-search-input-v2.typing::after { /* سنضيف كلاس 'typing' عبر JS */
    content: '|';
    position: absolute;
    right: 15px; /* اضبط هذه القيمة لتناسب تصميمك */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    animation: blink 1s infinite;
    font-weight: 100;
    font-size: 1.2em;
}

/* تعريف الأنيميشن الخاص بالوميض */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


/* Outdated Material Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
    z-index: 1000;
}

.modal-overlay.visible {
    visibility: visible;
    opacity: 1;
}

.modal-wrapper {
    background: var(--bg-color-dark);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
    max-width: 500px;
    width: 90%;
}

.modal-overlay.visible .modal-wrapper {
    transform: scale(1);
}

.modal-content {
    color: var(--text-color);
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--subtle-text-color);
    cursor: pointer;
}

.modal-icon {
    margin-bottom: 1.5rem;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
}


.outdated-warning-icon {
    display: inline-block; /* ضروري لتطبيق التحريك */
    margin-right: 8px; /* مسافة بينها وبين اسم المادة */
    color: #ffc107; /* لون أصفر تحذيري */
    cursor: pointer; /* تغيير شكل المؤشر للإشارة إلى أنها قابلة للنقر */
    animation: pulse-warning 2s infinite; /* تطبيق التحريك */
}

/* تعريف التحريك (Animation) */
@keyframes pulse-warning {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25); /* تكبير الأيقونة */
        opacity: 0.75;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* تأثير بسيط عند مرور الماوس فوق الأيقونة */
.outdated-warning-icon:hover {
    animation-play-state: paused; /* إيقاف التحريك مؤقتًا */
    transform: scale(1.3); /* تكبير إضافي */
    color: #ffa000; /* لون أغمق قليلاً */
}


/* نمط مفتاح التحكم المستقل في نموذج إضافة المواد */
.form-group.toggle-group-standalone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color-offset);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    border: 1px solid var(--border-color);
}

.toggle-group-standalone label:first-child {
    flex-grow: 1;
    margin-left: 1rem;
    font-weight: 600;
}

.toggle-group-standalone label:first-child i {
    color: var(--warning-color);
    margin-left: 8px;
}

.toggle-group-standalone label:first-child small {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin-top: 4px;
}
/* 
==============================================
مؤشر المادة القديمة في جدول الإدارة
==============================================
*/
.outdated-indicator {
    color: var(--warning-color);
    margin-right: 8px; /* مسافة بينه وبين شارة الحالة */
    font-size: 0.9em;
    display: inline-block;
    vertical-align: middle; /* لمحاذاة الأيقونة مع النص بشكل أفضل */
}

/* تعديل بسيط على عمود الحالة لضمان ظهور العناصر بشكل جيد */
.data-table td:nth-child(8) { /* العمود الثامن هو عمود الحالة */
    white-space: nowrap; /* لمنع التفاف النص والأيقونات */
}
/* 
==============================================
قائمة المساهمين في النافذة المنبثقة
==============================================
*/
.contributors-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contributors-list li {
    background-color: var(--background-color-offset);
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contributors-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contributors-list li i {
    color: var(--primary-color);
    margin-left: 12px; /* في العربية، margin-left يعطي مسافة على اليمين */
    font-size: 1.1rem;
}
.episode-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.episode-card img {
    width: 100%;
    height: auto;
    display: block;
}

.episode-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    box-sizing: border-box;
}

.video-duration-tag {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.episode-info-overlay h4 {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card {
    position: relative;
}

.incomplete-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer; /* تغيير شكل المؤشر للإشارة إلى أنه قابل للنقر */
    display: inline-flex; /* لترتيب الأيقونة والنص بشكل صحيح */
    align-items: center;
    gap: 6px; /* مسافة بين الأيقونة والنص */
    transition: all 0.3s ease, transform 0.2s ease; /* إضافة transition للتأثيرات */
}

/* تنسيقات إضافية للنافذة المنبثقة */
#incomplete-content-modal .modal-content {
    max-width: 600px;
}

#incomplete-modal-title {
    color: var(--warning-color);
}

#incomplete-modal-title i {
    margin-left: 0.5rem;
}

.toggle-container-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.toggle-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
/* ===============================================
   Advanced Glowing Tag for Incomplete Content
   =============================================== */

.incomplete-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(45deg, #ff416c, #ff4b2b); /* تدرج لوني جذاب */
    border-radius: 50px; /* حواف دائرية بالكامل */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4); /* ظل ناعم */
    
    /* --- الأنيميشن --- */
    animation: pulse-glow 2.5s infinite ease-in-out;
    
    /* تحسينات إضافية */
    z-index: 2;
    transform: rotate(-5deg); /* زاوية خفيفة لمظهر حيوي */
    transition: all 0.3s ease;
}

/* تأثير عند مرور الماوس (اختياري) */
.course-card:hover .incomplete-tag {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
}

/* تعريف الأنيميشن */
@keyframes pulse-glow {
    0% {
        transform: rotate(-5deg) scale(1);
        box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
        opacity: 1;
    }
    50% {
        transform: rotate(-5deg) scale(1.03); /* تكبير طفيف */
        box-shadow: 0 6px 25px rgba(255, 65, 108, 0.7); /* ظل أكثر إشراقًا */
        opacity: 0.85;
    }
    100% {
        transform: rotate(-5deg) scale(1);
        box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
        opacity: 1;
    }
}

/* تعديل بسيط على بطاقة الكورس لتناسب التصميم الجديد */
.course-card {
    position: relative; /* ضروري لتحديد موضع الوسم بشكل صحيح */
    overflow: hidden; /* يمنع أي تجاوزات من الأنيميشن */
}
.incomplete-tag:hover {
    transform: rotate(-5deg) scale(1.1); /* تكبير أكثر عند المرور */
    background: linear-gradient(45deg, #ff4b2b, #ff416c); /* عكس التدرج اللوني */
}

/* تأثير عند النقر */
.incomplete-tag:active {
    transform: rotate(-5deg) scale(1.05); /* تصغير طفيف عند النقر */
    box-shadow: 0 2px 10px rgba(255, 65, 108, 0.5);
}

/* ===============================================
   Empty State Container Styling
   =============================================== */

.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background-color: var(--card-bg-color);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    margin: 2rem auto;
    max-width: 600px;
}

.empty-state-icon {
    font-size: 3.5rem; /* 56px */
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.empty-state-message {
    font-size: 1rem; /* 16px */
    color: var(--subtle-text-color);
    line-height: 1.6;
    max-width: 450px;
    margin-bottom: 2rem;
}

.empty-state-container .btn {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
}


/* ===============================================
   Responsive Modal Fixes (خاص بإصلاحات النوافذ)
   =============================================== */

/* 
   القاعدة الأساسية للنافذة على الشاشات الكبيرة (سطح المكتب)
   هذه القاعدة تضمن أن النافذة لا تكون عريضة جدًا على الشاشات الكبيرة.
*/
.modal-content {
    max-width: 550px; /* عرض مناسب لسطح المكتب */
    width: 95%; /* عرض مرن كقاعدة أساسية */
    margin: 1rem; /* هامش بسيط من كل الجهات */
}

/* 
   استعلام الوسائط (Media Query) للشاشات الصغيرة (الهواتف)
   هذه القواعد سيتم تطبيقها فقط إذا كان عرض الشاشة 768 بكسل أو أقل.
*/
@media (max-width: 768px) {
    .modal-wrapper .modal-content {
        width: 92%; /* اجعل النافذة تستغل معظم عرض الشاشة */
        max-width: none; /* إزالة الحد الأقصى للعرض على الهواتف */
        margin: 0; /* إزالة الهوامش الجانبية للسماح بالتمدد */
        padding: 1.5rem; /* إضافة حشوة داخلية لراحة العين */
    }

    /* تعديل حجم الخطوط داخل النافذة على الهواتف لتكون أوضح */
    .modal-wrapper .modal-header h2 {
        font-size: 1.25rem; /* تكبير طفيف لعنوان النافذة */
    }

    .modal-wrapper .modal-body .section-description,
    .modal-wrapper .modal-body .form-group label {
        font-size: 0.95rem; /* تكبير طفيف للنصوص والشروحات */
    }
}
/* ===============================================
   Centering for Empty State Container
   =============================================== */

/* 
   هذه القاعدة يتم تطبيقها على حاوية المواد بشكل عام
   لتهيئتها للتوسيط عند الحاجة.
*/
#materials-card-container {
    display: flex;
    flex-direction: column; /* ترتيب العناصر بشكل عمودي كقاعدة أساسية */
    width: 100%;
    min-height: 50vh; /* إعطاء الحاوية ارتفاعًا أدنى لتوسيط المحتوى عموديًا */
}

/* 
   هذه القاعدة السحرية تعمل فقط عندما تكون الحاوية فارغة
   وتحتوي على عنصر الحالة الفارغة بداخلها.
   :has() هي ميزة CSS حديثة وقوية.
*/
#materials-card-container:has(.empty-state-container) {
    justify-content: center; /* توسيط عمودي */
    align-items: center;    /* توسيط أفقي */
}

/* 
   تعديل بسيط على عنصر الحالة الفارغة نفسه
   لإزالة أي هوامش قد تؤثر على التوسيط.
*/
.empty-state-container {
    margin: 0; /* إزالة الهامش التلقائي لضمان التوسيط الدقيق */
}
/* ===============================================
   Badge Styling for Statuses
   =============================================== */

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* حواف دائرية قليلاً */
}

.badge-success {
    background-color: var(--success-color, #28a745);
}

.badge-warning {
    background-color: var(--warning-color, #ffc107);
    color: #212529; /* لون نص أغمق ليتناسب مع الخلفية الصفراء */
}

.badge-danger {
    background-color: var(--danger-color, #dc3545);
}

.badge-inactive {
    background-color: var(--subtle-text-color, #6c757d);
}

/* تنسيق حاوية الحالة في بطاقة إدارة الأقسام */
.current-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.current-status:last-of-type {
    border-bottom: none;
}
/* ===============================================
   Ribbon Styling for Department Cards (V2 - More Specific)
   =============================================== */

.department-manage-card {
    position: relative;
    overflow: hidden;
}

.department-manage-card .ribbon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.department-manage-card .ribbon::before,
.department-manage-card .ribbon::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
}

.department-manage-card .ribbon::before {
    top: 0;
    left: 0;
}

.department-manage-card .ribbon::after {
    bottom: 0;
    right: 0;
}

/* 
   هذا هو المحدد الأكثر دقة الذي سيفرض تطبيق التنسيق.
   لقد استهدفنا الشريط داخل البطاقة مباشرة.
*/
.department-manage-card .ribbon.badge-warning,
.department-manage-card .ribbon.badge-danger {
    position: absolute;
    display: block;
    width: 0px;
    padding: 0px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(45deg) translateY(-20px);
    
    /* التعديلات المطلوبة لحجم الخط */
    font-size: 0.75rem; 
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* تطبيق الألوان المختلفة */
.department-manage-card .ribbon.badge-warning {
    background: var(--warning-color, #ffc107);
    color: #212529;
}

.department-manage-card .ribbon.badge-danger {
    background: var(--danger-color, #dc3545);
}

/* ===============================================
   Ribbon Styling (Final Corrected Version)
   =============================================== */

.department-manage-card {
    position: relative;
    overflow: hidden;
}

/* 
   حاوية الشريط: يجب أن تكون شفافة وبدون لون خلفية.
   وظيفتها فقط تحديد الموضع والشكل.
*/
.department-manage-card .ribbon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* لا يوجد background-color هنا */
}

/* 
   النص الداخلي (span): هذا هو العنصر الذي يجب أن يحمل اللون والتنسيق.
*/
.department-manage-card .ribbon span {
    position: absolute;
    display: block;
    width: 170px;
    padding: 10px 0;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(45deg) translateY(-20px);
    
    /* التنسيقات الصحيحة لحجم الخط */
    font-size: 0.75rem; 
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* --- بداية التعديل الأهم --- */
    /* لون الخلفية الافتراضي (يمكن تغييره لاحقًا) */
    background: var(--subtle-text-color, #6c757d); 
    /* --- نهاية التعديل الأهم --- */
}

/* 
   تطبيق الألوان المختلفة على الـ span بناءً على الكلاس الموجود في الحاوية.
*/
.department-manage-card .ribbon.badge-warning span {
    background: var(--warning-color, #ffc107);
    color: #212529;
}

.department-manage-card .ribbon.badge-danger span {
    background: var(--danger-color, #dc3545);
    color: #fff;
}

/* 
   هذه الأجزاء اختيارية ولكنها تضيف لمسة جمالية للشريط.
   (لا تؤثر على المشكلة الحالية)
*/
.department-manage-card .ribbon::before,
.department-manage-card .ribbon::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
}

.department-manage-card .ribbon::before {
    top: 0;
    left: 0;
}

.department-manage-card .ribbon::after {
    bottom: 0;
    right: 0;
}



/* ===============================================
   NEW: Modern Material Card Design (V5)
   =============================================== */

.material-grid-v5 {
    display: grid;
    /* عرض 3 بطاقات في كل سطر على الشاشات الكبيرة */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.material-card-v5 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.material-card-v5:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.card-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background-color: var(--background-color);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.material-card-v5:hover .card-icon-wrapper {
    background-color: var(--primary-color);
    color: white;
}

.card-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
}

.card-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin-top: 0.5rem;
}

.card-stats {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-stats i {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.card-action {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--subtle-text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.material-card-v5:hover .card-action {
    color: var(--primary-color);
    transform: translateX(5px);
}

/* Responsive adjustments for mobile screens */
@media (max-width: 600px) {
    .material-card-v5 {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .card-content-wrapper {
        width: 100%;
        text-align: center;
        order: 2;
    }
    
    .card-icon-wrapper {
        order: 1;
        margin-bottom: 1rem;
    }

    .card-meta {
        justify-content: center;
        margin-top: 1rem;
        order: 3;
    }
    
    .card-action {
        display: none; /* إخفاء أيقونة السهم في الهواتف */
    }
}


/* ===============================================
   NEW: Modern Material Card Design (V5) with Enhanced Animations
   =============================================== */

.material-grid-v5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.material-card-v5 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 12px);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    /* إضافة transition شامل لتأثيرات أكثر سلاسة */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* تأثير Easing أفضل */
    position: relative; /* للسماح بتأثير الظل ثلاثي الأبعاد */
}

.material-card-v5:hover {
    transform: translateY(-10px) scale(1.02); /* حركة أعلى وتكبير أكبر */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* ظل أعمق وأوضح */
    border-color: var(--primary-color);
    z-index: 10; /* لضمان ظهور البطاقة فوق الأخرى عند التكبير */
}

.card-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background-color: var(--background-color);
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--primary-color);
    /* انتقال سلس لتغيير الخلفية واللون */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.material-card-v5:hover .card-icon-wrapper {
    background-color: var(--primary-color);
    color: white;
    transform: rotate(10deg) scale(1.1); /* دوران بسيط وتكبير للأيقونة */
}

.card-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.card-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.material-card-v5:hover .card-title {
    color: var(--primary-color); /* تغيير لون العنوان عند التمرير */
}

.card-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin-top: 0.5rem;
}

.card-stats {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-stats i {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.card-action {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--subtle-text-color);
    /* انتقال سلس لتغيير اللون والتحرك */
    transition: color 0.3s ease, transform 0.3s ease;
}

.material-card-v5:hover .card-action {
    color: var(--accent-color, #007bff); /* لون مميز للسهم */
    transform: translateX(10px) scale(1.2); /* حركة أكبر وتكبير للسهم */
}

/* Responsive adjustments for mobile screens */
@media (max-width: 600px) {
    .material-card-v5 {
        flex-direction: column;
        align-items: flex-start;
        transform: none !important; /* إلغاء تأثير التحريك والتكبير في الهواتف */
        box-shadow: var(--shadow-sm) !important; /* الحفاظ على ظل خفيف */
    }
    
    .card-content-wrapper {
        width: 100%;
        text-align: center;
        order: 2;
    }
    
    .card-icon-wrapper {
        order: 1;
        margin-bottom: 1rem;
        transform: none !important; /* إلغاء تأثير الأيقونة في الهواتف */
    }

    .card-meta {
        justify-content: center;
        margin-top: 1rem;
        order: 3;
    }
    
    .card-action {
        display: none; /* إخفاء أيقونة السهم في الهواتف */
    }
}

/* ===============================================
   NEW: Course Card Design (Grid-based)
   =============================================== */

.cards-container {
    display: grid;
    /* عرض 3 بطاقات في كل سطر على الشاشات الكبيرة */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.card.course-card {
    position: relative;
    overflow: hidden;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.card-icon-background {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s ease;
}

.card.course-card:hover .card-icon-background {
    background-color: var(--primary-color);
    transform: rotate(10deg);
}

.card-icon-background i {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.card.course-card:hover .card-icon-background i {
    color: white;
    transform: scale(1.1);
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.card.course-card:hover .card-content h3 {
    color: var(--primary-color);
}

.card-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--background-color);
    font-weight: 600;
    color: var(--subtle-text-color);
    border-top: 1px solid var(--border-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card.course-card:hover .card-action {
    background-color: var(--primary-color);
    color: white;
}

.card-action i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.card.course-card:hover .card-action i {
    transform: translateX(5px);
}


/* =============================================== */
/* IMPROVEMENTS FOR MOBILE VIEW (تحسينات للهاتف)   */
/* =============================================== */

/* --- 1. General & Typography Adjustments (تعديلات عامة للخطوط) --- */
@media (max-width: 768px) {
    body {
        font-size: 15px; /* تحسين حجم الخط الأساسي للقراءة */
        -webkit-text-size-adjust: 100%; /* منع التكبير التلقائي للنصوص في iOS */
    }

    .container {
        padding: 1rem; /* تقليل الهوامش الجانبية على الشاشات الصغيرة */
    }
}

/* --- 2. Admin Layout Enhancements (تحسينات لوحة التحكم) --- */
@media (max-width: 992px) {
    /* عند فتح القائمة الجانبية، أضف خلفية معتمة للمحتوى */
    .admin-layout.sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1099;
    }

    /* إظهار رأس المحتوى على الهاتف (يحتوي على زر فتح القائمة) */
    .admin-content-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .admin-content-header h2 {
        margin: 0;
        font-size: 1.5rem;
    }

    /* تعديل القائمة الجانبية لتظهر بشكل صحيح من اليمين */
    .admin-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        z-index: 1100;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .admin-sidebar.is-open {
        transform: translateX(0);
    }
}

/* --- 3. Responsive Data Tables (جداول متجاوبة) --- */
@media (max-width: 768px) {
    .data-table thead {
        display: none; /* إخفاء رأس الجدول التقليدي */
    }
    .data-table tr {
        display: block;
        margin-bottom: 1rem;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        padding: 1rem;
        box-shadow: var(--shadow-sm);
    }
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    .data-table td:last-child {
        border-bottom: none;
    }
    .data-table td::before {
        content: attr(data-label); /* إضافة عنوان الحقل بجانبه */
        font-weight: 600;
        color: var(--subtle-text-color);
        margin-right: 1rem;
        text-align: right;
    }
    .data-table td.actions {
        justify-content: center;
        padding-top: 1rem;
    }
    .data-table td.actions::before {
        display: none;
    }
}

/* --- 4. Modal & Forms on Small Screens (النوافذ المنبثقة والنماذج) --- */
@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    .modal-header h2 {
        font-size: 1.25rem;
    }
    .add-software-layout,
    .add-user-layout,
    .faq-management-layout {
        grid-template-columns: 1fr; /* جعل النماذج ذات العمودين تظهر كعمود واحد */
    }
}

/* --- 5. Header & Search Refinements (تحسينات الهيدر والبحث) --- */
@media (max-width: 768px) {
    .search-wrapper-v2.mobile-search-active {
        display: block;
        position: absolute;
        top: 65px; /* أسفل الهيدر مباشرة */
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        padding: 1rem;
        box-shadow: var(--shadow-md);
        z-index: 1000; 
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* --- iOS PWA Install Prompt Styles --- */
#ios-install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 450px;
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    padding: 1.25rem;
    animation: fadeInUp 0.5s ease-out;
}

.pwa-prompt-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pwa-prompt-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
}

.pwa-prompt-content p {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.pwa-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.pwa-prompt-instructions {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.pwa-prompt-instructions .share-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 4px;
}

.pwa-prompt-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--subtle-text-color);
    cursor: pointer;
}


@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
}


/* =================================================== */
/* === NEW STYLES FOR MANAGE MATERIALS TAB (V2) === */
/* =================================================== */

/* Filter & Toolbar */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--card-bg-color);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.admin-search {
    flex-grow: 1;
    min-width: 250px;
}
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}
.bulk-actions {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.view-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.materials-count {
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    margin-left: 1rem;
}
.view-mode-btn {
    background-color: var(--card-bg-color);
    color: var(--text-color);
}
.view-mode-btn.active {
    background-color: var(--primary-color);
    color: #fff;
}

/* Main Container */
.materials-display-container {
    position: relative;
    min-height: 300px;
}
.materials-display-container.is-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.materials-display-container.is-list-view {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Grid View: Material Card */
.material-manage-card {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.material-manage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.card-selection { text-align: left; }
.card-title {
    font-size: 1.1rem;
    margin: 0;
    color: var(--heading-color);
}
.card-subtitle {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin: 0.25rem 0 0 0;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}
.meta-item { display: flex; align-items: center; gap: 0.4rem; }
.card-status-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pushes to the bottom */
}
.card-actions { display: flex; gap: 0.5rem; }
.btn-icon { background: none; border: none; color: var(--subtle-text-color); cursor: pointer; font-size: 1rem; padding: 0.5rem; border-radius: 50%; }
.btn-icon:hover { background-color: var(--hover-bg-color); color: var(--primary-color); }

/* List View: Material Row */
.material-manage-row {
    background-color: var(--card-bg-color);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}
.material-manage-row:hover { background-color: var(--hover-bg-color); }
.row-title { font-size: 1rem; margin: 0; font-weight: 600; }
.row-subtitle { font-size: 0.8rem; margin: 0.1rem 0 0 0; color: var(--subtle-text-color); }
.row-status, .row-date, .row-actions { color: var(--subtle-text-color); font-size: 0.9rem; }
.row-actions { display: flex; justify-content: flex-end; }

/* Common Status Badges */
.status-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.status-badge.approved {
    background-color: rgba(3, 218, 198, 0.1);
    color: #03dac6;
}
.status-badge.pending {
    background-color: rgba(255, 180, 0, 0.1);
    color: #ffb400;
}

/* Styles for Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 0.5rem;
}
.pagination-btn {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination-btn:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: #fff;
}
.pagination-btn.active {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: bold;
}
.pagination-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* General Layout for Tutorials Page */
.tutorials-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 3 parts for video, 1 part for playlist */
    gap: 1.5rem; /* Space between video and playlist */
    padding: 1rem; /* Padding around the whole section */
    background-color: var(--background-color); /* Match your theme's background */
    border-radius: 12px;
    box-shadow: var(--shadow-small);
}

/* Video Player Area */
.video-player-area {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--shadow-extra-small);
}

.video-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (for YouTube videos) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Black background while loading */
    border-radius: 6px;
    margin-bottom: 1rem; /* Space below the video iframe */
}
.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove iframe default border */
}

.video-details {
    padding: 1rem 0;
}
.video-details h3 {
    margin-top: 0;
    font-size: 1.75rem;
    color: var(--text-color-dark);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}
.video-details p {
    font-size: 1rem;
    color: var(--text-color-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Tutorial Actions (Like Button and Count) */
.tutorial-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.tutorial-actions .btn {
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
}
.tutorial-actions .btn i {
    font-size: 1rem;
}
.tutorial-actions .btn.liked {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.likes-count {
    font-size: 1rem;
    color: var(--text-color-medium);
    font-weight: 500;
}


/* Video Playlist Area */
.video-playlist-area {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--shadow-extra-small);
}
.video-playlist-area h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tutorial-playlist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: calc(100vh - 250px); /* Adjust max-height based on your header/footer */
    overflow-y: auto;
    padding-right: 5px; /* For scrollbar */
}
.playlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--background-color-light);
    border-radius: 6px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    color: var(--text-color-dark);
}
.playlist-item:hover {
    background-color: var(--hover-bg-color);
}
.playlist-item.active {
    background-color: var(--hover-bg-color);
    border-left-color: var(--primary-color);
    font-weight: bold;
    color: var(--primary-color);
}
.playlist-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .tutorials-layout {
        grid-template-columns: 1fr; /* Stack video and playlist on smaller screens */
    }
    .tutorial-playlist {
        max-height: 400px; /* Adjust max-height for mobile */
    }
}

/* =================================================== */
/* === IMPROVED ADMIN FORM STYLES === */
/* =================================================== */

/* تنسيق الحاوية لكل حقل (Label + Input) */
.form-group {
    margin-bottom: 1.25rem; /* زيادة المسافة بين الحقول */
}

/* تنسيق العناوين (Labels) فوق الحقول */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

/* تنسيق موحد لجميع حقول الإدخال */
.admin-input,
.admin-select {
    width: 100%; /* اجعل جميع الحقول تأخذ العرض الكامل */
    padding: 0.8rem 1rem;
    background-color: var(--background-color); /* لون خلفية أغمق قليلاً */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* تأثير عند التركيز على الحقل */
.admin-input:focus,
.admin-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.2); /* ظل خفيف بلون الثيم */
}

/* إصلاح خاص لحقل الأرقام (الترتيب) لإزالة الأسهم وجعله بالعرض الكامل */
input[type="number"].admin-input {
    appearance: textfield;       /* الخاصية القياسية */
    -moz-appearance: textfield;  /* لمتصفح Firefox */
    -webkit-appearance: textfield; /* لمتصفح Chrome و Safari */
}

input[type="number"].admin-input::-webkit-inner-spin-button,
input[type="number"].admin-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* أضف هذا الكود داخل وسم <style> */
.profile-name {
    display: none; /* إخفاؤه بشكل افتراضي */
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 8px;
    white-space: nowrap; /* لمنع التفاف الاسم الطويل */
    color: var(--text-color);
}

#profile-link-v2.is-logged-in {
    background-color: var(--subtle-bg-color);
    border-radius: 8px;
    padding: 4px;
}

#profile-link-v2.is-logged-in .profile-icon {
    display: none;
}
/* -->> انسخ والصق هذا الكود الجديد بالكامل <<-- */

/* 1. ضبط الحاوية الرئيسية للأيقونات */
.header-actions-v2 {
    display: flex;
    align-items: center;
    gap: 12px; /* تعديل المسافات بين العناصر */
}

/* 2. إعادة ضبط تنسيق رابط الملف الشخصي */
#profile-link-v2 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    padding: 5px;
    /* إعادة تعيين الأبعاد ليتمدد مع حجم الاسم */
    width: auto !important;
    height: auto !important;
    min-width: 36px;
}

/* 3. تنسيق اسم المستخدم */
.profile-name {
    display: none; /* إخفاؤه افتراضيًا */
    font-weight: 600;
    font-size: 15px;
    color: var(--text-color);
    white-space: nowrap; /* لمنع التفاف النص */
    padding: 0 5px;
}

/* 4. تنسيق أيقونة المستخدم */
.profile-icon {
    font-size: 20px;
}

/* === منطق التبديل عند تسجيل الدخول === */

/* إخفاء الأيقونة عند تسجيل الدخول */
#profile-link-v2.is-logged-in .profile-icon {
    display: none !important;
}

/* إظهار الاسم عند تسجيل الدخول */
#profile-link-v2.is-logged-in .profile-name {
    display: inline-block !important;
}

/* إضافة خلفية للاسم عند تسجيل الدخول */
#profile-link-v2.is-logged-in {
    background-color: var(--subtle-bg-color);
}


.admin-fab:hover {
    transform: scale(1.05);
    background-color: var(--accent-color);
}
/* ✅ أضف هذا الكود داخل وسم <style> */

/* إخفاء الزر بشكل افتراضي وقوي */
.admin-only {
    display: none !important; 
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* إظهار الزر عند إضافة كلاس .visible له */
.admin-only.visible {
    display: flex !important;
    opacity: 1;
    transform: scale(1);
}

/* أضف هذا الكود داخل وسم <style> في ملف index.html */

/* تعديل الشريط الرئيسي ليحتوي العداد بشكل أفضل */
#global-announcement-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
}

/* حاوية العداد (الرسالة + الأرقام) */
#countdown-timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* رسالة العد التنازلي (مثل: "الوقت المتبقي:") */
#countdown-message {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

/* حاوية أرقام الوقت */
.timer-segments {
    display: flex;
    gap: 20px;
    text-align: center;
    color: #ffffff;
}

/* كل جزء من أجزاء الوقت (يوم، ساعة ..الخ) */
.timer-segments > div {
    display: flex;
    flex-direction: column;
}

/* الأرقام نفسها */
.timer-segments span {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

/* العناوين (يوم، ساعة ..الخ) */
.timer-segments label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.8;
}
/* أضف هذا الكود في نهاية ملف style.css */

/* حاوية العداد (الرسالة + الأرقام) */
#countdown-timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* رسالة العد التنازلي (مثل: "الوقت المتبقي:") */
#countdown-message {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

/* حاوية أرقام الوقت */
.timer-segments {
    display: flex;
    gap: 20px;
    text-align: center;
    color: #ffffff;
}

/* كل جزء من أجزاء الوقت (يوم، ساعة ..الخ) */
.timer-segments > div {
    display: flex;
    flex-direction: column;
}

/* الأرقام نفسها */
.timer-segments span {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

/* العناوين (يوم، ساعة ..الخ) */
.timer-segments label {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.8;
}
/* تنسيقات جديدة للعداد النصي */
#global-announcement-banner .countdown-paragraph {
    margin: 0;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.5px;
}

#global-announcement-banner .countdown-paragraph .countdown-number {
    font-weight: 700;
    font-size: 1.2em;
    margin: 0 0.2ch;
}

#global-announcement-banner .countdown-paragraph label {
    font-weight: 400;
    font-size: 0.9em;
    opacity: 0.9;
}

/* تصميم الأرقام في تبويبات لوحة التحكم */
.sidebar-nav .nav-link {
    position: relative; /* ضروري لتحديد موقع الرقم */
}

.nav-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px; /* لتحديد مكانه على يسار التبويب */
    
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    
    background-color: var(--danger-color, #dc3545);
    color: white;
    
    border-radius: 11px; /* يجعله دائريًا أو بشكل حبة الدواء */
    border: 2px solid #1e293b; /* نفس لون خلفية القائمة لمظهر احترافي */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 0.75rem; /* حجم خط صغير ومناسب */
    font-weight: 700;
    line-height: 1;
    
    transform: translateY(-50%) scale(1);
    transition: transform 0.2s ease-in-out;
}

/* إخفاء الرقم بشكل جميل إذا كان 0 */
.nav-badge[style*="display: none"] {
    transform: translateY(-50%) scale(0);
}

/* تعديل بسيط عند تصغير القائمة الجانبية */
.admin-sidebar.collapsed .nav-badge {
    top: 10px;
    left: 10px;
    transform: none; /* إلغاء التحريك العمودي */
}


/* ===============================================
   Admin Tutorial Modal & Help Buttons
   =============================================== */

/* 1. زر المساعدة بجانب العناوين */
.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem; /* تعديل الهامش ليتناسب مع التصميم الجديد */
}

.admin-section-header h2 {
    margin: 0;
}

.help-btn {
    background: none;
    border: none;
    color: var(--subtle-text-color);
    font-size: 1.3rem; /* حجم الأيقونة */
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.help-btn:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

/* 2. تصميم النافذة المنبثقة للشرح */
.modal-content.tutorial-modal {
    max-width: 800px; /* نافذة أعرض لتناسب الفيديو */
}

.tutorial-modal .modal-body {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tutorial-modal #tutorial-modal-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--subtle-text-color);
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
}

/* 3. حاوية الفيديو المتجاوبة */
.video-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* نسبة العرض للارتفاع 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 8px;
     z-index: 10;  
}

.fab-container {
    pointer-events: none; /*   <-- هذا السطر يجعله شفافاً للنقرات   */
}

/*   نعيد تفعيل النقرات على الأزرار الفعلية داخل الحاوية   */
.fab-container > * {
    pointer-events: auto;
}

/* ======================================================= */
/* === ✅ FINAL FIX: Allow Clicks to Pass to IFrame    === */
/* ======================================================= */

/* 
   استهداف حاوية الفيديو المضمن (IFrame) لجعلها "شفافة" للنقرات،
   مما يسمح للنقرات بالوصول مباشرة إلى مشغل YouTube نفسه.
*/
.video-embed-container {
    pointer-events: none; /*   <-- هذا هو السطر السحري الذي سيحل كل شيء   */
}

/* 
   (اختياري ولكن موصى به) إعادة تفعيل النقرات على الـ IFrame نفسه
   لضمان التوافق مع جميع المتصفحات.
*/
.video-embed-container iframe {
    pointer-events: auto;
}

.video-embed-container {
    /* 
       هذه الخاصية تجبر المتصفح على إنشاء "سياق تكديس" جديد للعنصر.
       هذا يعزل الطبقات الداخلية لمشغل يوتيوب (الفيديو والأزرار)
       عن باقي عناصر الصفحة، ويمنع حدوث التضارب الذي يسبب المشكلة.
    */
    isolation: isolate;
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===============================================
   Admin Tutorials Management & Display
   =============================================== */

/* Layout for the management tab */
.faq-management-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* List on left, editor on right */
    gap: 2rem;
    align-items: flex-start;
}

/* Style for the list of tutorials */
.faqs-list-container .faq-list-item {
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.faqs-list-container .faq-list-item:hover {
    background-color: var(--hover-color);
}

.faqs-list-container .faq-list-item.active {
    background-color: var(--primary-light-color);
    border-color: var(--primary-color);
    font-weight: bold;
}

/* Quill.js Editor Styles */

/* 1. تنسيق شريط الأدوات العلوي */
.ql-toolbar {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-color: var(--border-color) !important;
    
    /* لضمان توسيط شريط الأدوات */
    margin: 0 auto !important; 
    max-width: 600px; /* يجب أن يتطابق مع min-width في .ql-container أو أقل قليلاً */
}

/* 2. تنسيق حاوية المحرر الرئيسية */
.ql-container {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: var(--border-color) !important;
    min-height: 250px;
    
    /* ✅ التوسيط (يجب أن يعمل هذا الآن مع min-width) */
    min-width: 600px;
    margin: 0 auto !important; /* توسيط الحاوية الأفقية */
}

/* 3. تنسيق منطقة الكتابة الفعلية */
.ql-editor {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.7;
    
    /* ✅ أهم تغيير: جعل الكتابة من اليمين لليسار */
    direction: rtl !important; 
    text-align: right !important; /* محاذاة النص لليمين */
}

/* ================================================================= */
/* إصلاح تداخل الأرقام في محرر Quill.js (للاتجاه RTL) */
/* ================================================================= */

/* تستهدف منطقة الكتابة الفعلية */
.ql-editor {
    /* 1. تفعيل الاتجاه من اليمين لليسار (إذا لم تكن مفعلة بالفعل) */
    direction: rtl !important; 
    text-align: right !important;
}

/* 2. استهداف القوائم المرقّمة (Ordered Lists) التي يولدها Quill */
.ql-editor ol {
    /* إلغاء المسافة البادئة الافتراضية اليسرى */
    padding-left: 0 !important; 
    /* ✅ إضافة مسافة بادئة كبيرة على اليمين لمنح الأرقام مساحة كافية */
    padding-right: 40px !important; 
    /* يمكن زيادة القيمة (40px) إذا كان التداخل لا يزال موجوداً. */
}

/* 3. استهداف عناصر القائمة المرقّمة */
.ql-editor li {
    /* هذا يضمن إزاحة عنصر القائمة قليلاً عن علامته (الرقم) */
    margin-right: 1.5em !important; 
}

/* ================================================================= */
/* تنسيقات عرض محتوى Quill.js (وصف الفيديو) */
/* ================================================================= */

/* 1. تحديد الحاوية التي تعرض الوصف النهائي */
.video-description-content {
    /* ضمان أن اتجاه النص في الحاوية الرئيسية هو RTL */
    direction: rtl !important;
    text-align: right !important;
    line-height: 1.7; /* لتحسين قراءة النص */
    padding: 10px; /* مسافة داخلية بسيطة */
}

/* 2. إصلاح القوائم المرقّمة (Ordered Lists - OL) */
.video-description-content ol {
    list-style-type: decimal !important; /* التأكد من أن الترقيم عشري (1, 2, 3) */
    
    /* إلغاء المسافة البادئة اليسرى الافتراضية */
    padding-left: 0 !important; 
    
    /* ✅ إضافة مسافة بادئة كبيرة على اليمين لفسح المجال للأرقام */
    padding-right: 40px !important; 
    
    /* ضمان عدم وجود تداخل هوامش */
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* 3. إصلاح عناصر القائمة (List Items - LI) */
.video-description-content li {
    /* ضمان ظهور مؤشر القائمة (الرقم) بشكل صحيح خارج النص */
    list-style-position: outside !important; 
    
    /* مسافة بسيطة بين الأرقام والنص */
    margin-right: 1em !important; 
}

/* 4. إصلاح قوائم النقاط (Unordered Lists - UL) إذا كنت تستخدمها */
.video-description-content ul {
    list-style-type: disc !important; /* شكل نقطي */
    padding-left: 0 !important;
    padding-right: 25px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* Styles for the tutorial content display in the modal */
.tutorial-content-display {
    line-height: 1.8;
    color: var(--text-color);
}

.tutorial-content-display h1,
.tutorial-content-display h2,
.tutorial-content-display h3 {
    color: var(--primary-color);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.tutorial-content-display img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.tutorial-content-display ul,
.tutorial-content-display ol {
    padding-right: 20px;
}
/* ===============================================
   NEW: Collapsible Admin Sidebar Menu
   =============================================== */
.sidebar-nav .nav-group > .nav-group-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    text-align: right;
    padding: 0.85rem 1.5rem;
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.sidebar-nav .nav-group > .nav-group-toggle:hover {
    background-color: #334155;
    color: #ffffff;
}

.sidebar-nav .nav-group > .nav-group-toggle span {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-arrow {
    transition: transform 0.3s ease;
}

/* Submenu styles */
.nav-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #111827; /* Darker background for nested items */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.nav-submenu .nav-link {
    padding-right: 2.5rem !important; /* Indentation for child items */
    font-size: 0.9em;
}

/* Open state for the submenu */
.nav-group.is-open > .nav-group-toggle {
    background-color: #334155;
}

.nav-group.is-open > .nav-submenu {
    max-height: 500px; /* A large enough value to show all items */
    transition: max-height 0.4s ease-in;
}

.nav-group.is-open > .nav-group-toggle .nav-arrow {
    transform: rotate(180deg);
}
.dev-mode-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--warning-color, #ffc107);
    color: #1a1a1a;
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 9999;
    display: none; /* مخفي بشكل افتراضي */
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.dev-mode-indicator.visible {
    display: flex;
}
.page-fab {
    transition: transform 0.2s ease-out;
}

/* =============================================== */
/* ✅ --- IMPROVEMENTS FOR MOBILE HEADER (تحسينات هيدر الهاتف) --- ✅ */
/* =============================================== */

/* 1. إخفاء النص الطويل بجانب الشعار على الشاشات الأصغر */
@media (max-width: 900px) {
    .header-logo-v2 .desktop-only-text {
        display: none;
    }
}

/* 2. إخفاء اسم المستخدم الطويل وإظهار الأيقونة فقط على الهواتف */
@media (max-width: 768px) {
    #profile-link-v2.is-logged-in .profile-name {
        display: none; /* إخفاء الاسم */
    }

    #profile-link-v2.is-logged-in .profile-icon {
        display: inline-block; /* إظهار أيقونة المستخدم */
    }

    /* إزالة الخلفية والهوامش الزائدة عند عرض الأيقونة فقط */
    #profile-link-v2.is-logged-in {
        background-color: transparent;
        padding: 0;
    }
}

/* =============================================== */
/* ✅ --- FIX: Adjust Header Logo Font Size (تصغير حجم خط الشعار) --- ✅ */
/* =============================================== */

.header-logo-v2 a span.desktop-only-text {
    font-size: 1rem; /* يمكنك تغيير هذه القيمة إلى 0.9rem مثلاً إذا أردت تصغيره أكثر */
    vertical-align: middle; /* لتحسين المحاذاة العمودية مع الأيقونة */
}

/* =================================================== */
/* === FIX: Smooth Transition for Floating Buttons === */
/* =================================================== */

.page-fab {
    /* يخبر المتصفح بأن يجعل الحركة على خاصية "bottom" و "transform" سلسة   */
    transition: bottom 0.3s ease-out, transform 0.3s ease-out;
}

/* =================================================== */
/* === ✅ NEW: Android App Download Page Styles === */
/* =================================================== */
.app-download-page {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.app-download-page section {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.app-logo {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
}
.app-header-info h1 {
    font-size: 2.2rem;
    margin: 0 0 0.5rem 0;
}
.app-version {
    color: var(--subtle-text-color);
    margin-bottom: 1.5rem;
}
.main-download-btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.app-features h2, .app-screenshots h2, .install-steps h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 2rem;
}
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.feature-item i {
    font-size: 2rem;
    color: var(--primary-color);
    background-color: var(--background-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.feature-item h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}
.screenshots-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}
.screenshots-grid img {
    height: 400px;
    width: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.install-steps {
    background-color: rgba(var(--warning-rgb), 0.1);
    border-color: var(--warning-color);
}
.install-steps ol {
    list-style: none;
    padding: 0;
    counter-reset: steps-counter;
}
.install-steps li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.install-steps li span {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background-color: var(--warning-color);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
}

/* =================================================== */
/* === ✅ NEW: Download Button Pulse Animation === */
/* =================================================== */
.pulse-animation {
    /* تطبيق الأنيميشن على الزر */
    animation: pulse-effect 2s infinite ease-in-out;
}

@keyframes pulse-effect {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* =============================================== */
/* ✅ --- NEW: Animation for Header App Button --- ✅ */
/* =============================================== */

/* 1. تعريف حركة الاهتزاز نفسها (Keyframes) */
@keyframes shake-animation {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-10deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(10deg);
  }
}

/* 2. تطبيق الحركة على الزر المحدد باستخدام الـ ID الخاص به */
#android-app-btn {
  /* - اسم الحركة: shake-animation
     - مدة الحركة: 0.82 ثانية
     - التأخير قبل البدء مرة أخرى: 3 ثوانٍ
     - التكرار: لا نهائي (infinite)
  */
  animation: shake-animation 0.82s cubic-bezier(.36,.07,.19,.97) 3s infinite;
  transform-origin: center; /* لضمان أن الاهتزاز يكون من منتصف الزر */
}

/* 3. (اختياري) تأثير إضافي عند مرور الماوس لإيقاف الاهتزاز وتكبير الزر */
#android-app-btn:hover {
  animation-play-state: paused; /* إيقاف الحركة المتقطعة عند التحويم */
  transform: scale(1.1); /* تكبير بسيط للزر */
}
/* =================================================== */
/* === ✅ NEW: Stronger Animation for App Button === */
/* =================================================== */

/* 1. تعريف حركة النبض المضيء (أقوى) */
@keyframes pulse-glow-strong {
  0% {
    /* الظل في البداية: لا يوجد امتداد، شفافية 70% */
    box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.7);
  }
  70% {
    /* الظل في الذروة: امتداد 20 بكسل، شفافية 0% (يختفي تمامًا) */
    box-shadow: 0 0 0 20px rgba(187, 134, 252, 0);
  }
  100% {
    /* عودة الظل إلى الحالة الأولية لإعادة الحركة بسلاسة */
    box-shadow: 0 0 0 0 rgba(187, 134, 252, 0);
  }
}

/* 2. تطبيق الحركة الجديدة على الزر */
#android-app-btn {
  /* تطبيق الأنيميشن ليعمل بشكل مستمر كل ثانيتين */
  animation: pulse-glow-strong 2s infinite;
  
  /* تأكد من أن الزر دائري تمامًا ليتناسب مع الهالة */
  border-radius: 50%;
  
  /* إزالة أي تحويلات قديمة قد تتعارض مع الأنيميشن الجديد */
  transform: none;
  
  /* إضافة انتقال بسيط لتأثير التحويم */
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* 3. تأثير تفاعلي عند مرور الماوس */
#android-app-btn:hover {
  /* إيقاف الأنيميشن مؤقتًا عند التحويم لإعطاء شعور بالاستجابة */
  animation-play-state: paused;
  
  /* تغيير لون الخلفية ليكون أكثر وضوحًا */
  background-color: var(--primary-color);
  
  /* تكبير بسيط للزر لجذب الانتباه أكثر */
  transform: scale(1.1);
}
/* =================================================== */
/* === ✅ NEW: STRONGEST Animation for App Button === */
/* =================================================== */

/* 1. تعريف حركة "Tada" القوية والمعقدة */
@keyframes tada-strong-animation {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, 5deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.2, 1.2, 1.2) rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

/* 2. تطبيق الحركة الجديدة على الزر */
#android-app-btn {
  /* تطبيق الأنيميشن ليعمل مرة كل 5 ثوانٍ */
  animation: tada-strong-animation 1s 5s infinite;
  
  /* التأكد من أن الزر دائري تمامًا */
  border-radius: 50%;
  
  /* إزالة أي ظلال قديمة قد تتعارض */
  box-shadow: none;
  
  /* إضافة انتقال بسيط لتأثير التحويم */
  transition: transform 0.2s ease-in-out;
}

/* 3. تأثير تفاعلي عند مرور الماوس */
#android-app-btn:hover {
  /* إيقاف الأنيميشن المتقطع عند التحويم */
  animation: none;
  
  /* تكبير بسيط لتأكيد التفاعل */
  transform: scale(1.1);
}

/* =================================================== */
/* === ✅ NEW: App Version & Meta Info Styles      === */
/* =================================================== */

.app-meta-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
    gap: 0.5rem 1rem; /* مسافات بين العناصر (عمودي | أفقي) */
    color: var(--subtle-text-color);
    background-color: var(--background-color);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.app-meta-info .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.app-meta-info .meta-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.app-meta-info .meta-separator {
    color: var(--border-color);
    font-weight: 100;
}

/* إخفاء الفاصل على الشاشات الصغيرة جدًا إذا التف النص */
@media (max-width: 480px) {
    .app-meta-info {
        flex-direction: column;
        gap: 0.75rem;
    }
    .app-meta-info .meta-separator {
        display: none;
    }
}
.custom-alert {
    position: fixed; /* تثبيتها في الشاشة أثناء التمرير */
    top: 20px; /* مسافة من الأعلى */
    left: 50%; /* توسيط أفقي */
    transform: translateX(-50%); /* تصحيح التوسيط الأفقي بدقة */
    padding: 1rem 2rem; /* حشوة داخلية لراحة العين */
    border-radius: 8px; /* حواف دائرية */
    color: white; /* لون النص أبيض */
    z-index: 9999; /* للتأكد من أنها تظهر فوق كل العناصر الأخرى */
    font-weight: 600; /* خط عريض وواضح */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* ظل ناعم لإعطاء عمق */
    opacity: 0; /* تبدأ شفافة لتظهر بحركة جميلة */
    
    /* تطبيق الأنيميشن الذي سيتحكم في ظهورها واختفائها */
    animation: showAlertAnimation 4s ease-out forwards;
}

/* تنسيق رسائل النجاح (مثل رسالة الشكر) */
.custom-alert.success {
    background-color: var(--success-color, #28a745); /* اللون الأخضر للنجاح */
}

/* تنسيق رسائل الخطأ */
.custom-alert.error {
    background-color: var(--danger-color, #dc3545); /* اللون الأحمر للخطأ */
}

/* تعريف حركة الظهور والاختفاء */
@keyframes showAlertAnimation {
    0% {
        opacity: 0;
        top: 0; /* تبدأ الحركة من الأعلى وهي شفافة */
    }
    20% {
        opacity: 1;
        top: 20px; /* تنزل إلى مكانها وتصبح مرئية بالكامل */
    }
    80% {
        opacity: 1;
        top: 20px; /* تبقى ظاهرة لعدة ثوانٍ */
    }
    100% {
        opacity: 0;
        top: 0; /* تختفي تدريجيًا وتصعد للأعلى */
    }
}

/* =================================================== */
/* === ✅ NEW: Notification Image Preview Styles   === */
/* =================================================== */

.image-preview-notification {
    max-width: 100%; /* تأكد من أن الصورة لا تتجاوز عرض الحاوية */
    max-height: 200px; /* حد أقصى للارتفاع */
    margin-top: 1rem; /* مسافة فوق المعاينة */
    border-radius: 8px; /* حواف دائرية */
    border: 1px solid var(--border-color); /* إطار بسيط */
    object-fit: contain; /* اعرض الصورة بالكامل دون تشويه */
    background-color: var(--background-color); /* خلفية بسيطة */
}

/* ===============================================
   NEW: Video Player Meta Data Styles
   =============================================== */
.video-details {
    padding-top: 1rem; /* إضافة مسافة فوق العنوان */
}

.video-meta-data {
    display: flex;
    justify-content: space-between; /* لوضع الوصف في جهة والعداد في الجهة الأخرى */
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color); /* خط فاصل أنيق */
    color: var(--subtle-text-color);
}

.video-meta-data p {
    margin: 0;
    font-size: 1rem;
}

#tutorial-views {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

#tutorial-views i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* تحسين شكل عدد المشاهدات في قائمة التشغيل */
.playlist-item small {
    color: var(--subtle-text-color);
    font-size: 0.8em;
    font-weight: normal;
    margin-right: 5px; /* مسافة على اليمين باللغة العربية */
}

.playlist-item.active small {
    color: var(--primary-color);
}

/* =================================================== */
/* === ✅ IMPROVED: Modern Playlist Viewer Styles === */
/* =================================================== */

.playlist-viewer-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 2rem;
    color: var(--text-color);
}

/* --- Player Area --- */
.playlist-viewer__player .video-embed-container {
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}
.playlist-viewer__player .video-details {
    padding: 1.5rem 0.5rem;
}
.playlist-viewer__player .video-details h3 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}
.video-meta-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.video-meta-data p {
    font-size: 1rem;
    color: var(--subtle-text-color);
    margin: 0;
}
.video-meta-data .meta-item {
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Playlist Area --- */
.playlist-viewer__list {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.playlist-viewer__list h4 {
    margin: 0 0 1rem 0;
    padding: 0 0.5rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.2rem;
}
.playlist-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0 0.5rem;
}

.playlist-section h5 {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem 0;
}
.playlist-section:first-child h5 { margin-top: 0; }

/* --- Individual Playlist Item (V2 - IMPROVED) --- */
.playlist-item-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    background-color: var(--background-color);
    margin-bottom: 0.75rem; /* مسافة بين الفيديوهات */
}
.playlist-item-v2:hover {
    border-color: var(--primary-color);
}
.playlist-item-v2.active {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
}

.item-thumbnail {
    position: relative;
    width: 100px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.item-thumbnail img {
    width: 100%;
    display: block;
    aspect-ratio: 16/9; /* لضمان أبعاد الصورة صحيحة */
    object-fit: cover;
}
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.playlist-item-v2:hover .play-icon-overlay,
.playlist-item-v2.active .play-icon-overlay {
    opacity: 1;
}

.item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.item-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-color);
}
.playlist-item-v2.active .item-title {
    color: var(--primary-color);
}
.item-duration {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    font-weight: 500;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
    .playlist-viewer-layout {
        grid-template-columns: 1fr;
    }
    .playlist-viewer__list {
        max-height: 450px;
    }
}
.playlist-viewer__list {
    /* 1. تحديد أقصى ارتفاع للحاوية */
    /* هذا هو المفتاح: يجب أن يكون ارتفاعاً يسمح بعرض 4-5 عناصر فقط */
    max-height: 400px; 
    /* يمكنك تعديل القيمة (400px) لتناسب ارتفاع العناصر لديك */
    
    /* 2. تفعيل التمرير العمودي (Scroll) عند تجاوز الارتفاع المحدد */
    overflow-y: auto; 
    
    /* 3. تحسين مظهر شريط التمرير (اختياري ولكنه يحسن تجربة المستخدم) */
    padding-left: 5px; /* مسافة داخلية لتجنب تداخل شريط التمرير مع العناصر */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--primary-color) var(--bg-surface-dark, #333); /* Firefox */
}

/* تحسين مظهر شريط التمرير في متصفحات Webkit (Chrome, Safari) */
.playlist-viewer__list::-webkit-scrollbar {
    width: 8px;
}

.playlist-viewer__list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color, #007bff);
    border-radius: 4px;
}

.playlist-viewer__list::-webkit-scrollbar-track {
    background: var(--bg-surface-light, #444);
}
/* =================================================== */
/* === ✅ NEW: Advanced Video Form Modal Styles === */
/* =================================================== */

.modal-video-form {
    max-width: 700px;
}

.video-form-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: flex-start;
}

.video-thumbnail-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#video-thumbnail-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--background-color);
    border: 1px dashed var(--border-color);
}

#video-thumbnail-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.change-thumbnail-btn {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#video-thumbnail-preview-container:hover .change-thumbnail-btn {
    opacity: 1;
}

#video-thumbnail-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.video-details-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 600px) {
    .video-form-grid {
        grid-template-columns: 1fr;
    }
    .video-thumbnail-section {
        align-items: center;
    }
    #video-thumbnail-preview-container {
        width: 240px;
    }
}

/* =================================================== */
/* === ✅ NEW: Modern Playlist Card Styles         === */
/* =================================================== */

.playlist-card-v2 {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.playlist-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.card-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--background-color);
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.playlist-card-v2:hover .card-thumbnail img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
     pointer-events: none;
}

.playlist-card-v2:hover .play-overlay {
    opacity: 1;
}

.play-overlay i {
    font-size: 2.5rem;
    color: white;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.playlist-card-v2:hover .play-overlay i {
    transform: scale(1);
}

.video-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.card-info {
    padding: 1rem 1.25rem;
}

.card-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}

.card-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
    /* قص النص الطويل وإضافة "..." */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر المسموح بها */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* إزالة تنسيقات قديمة قد تتعارض */
.playlist-cover {
    /* هذا الكلاس لم يعد مستخدمًا في التصميم الجديد، ولكن من الأفضل إزالة أي تنسيقات قديمة له */
    display: none;
}

/* =================================================== */
/* === ✅ NEW: Modern Playlist Card Styles         === */
/* =================================================== */

.playlist-card-v2 {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.playlist-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.card-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--background-color);
}

.card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.playlist-card-v2:hover .card-thumbnail img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-card-v2:hover .play-overlay {
    opacity: 1;
}

.play-overlay i {
    font-size: 2.5rem;
    color: white;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.playlist-card-v2:hover .play-overlay i {
    transform: scale(1);
}

.video-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.card-info {
    padding: 1rem 1.25rem;
}

.card-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}

.card-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
    /* قص النص الطويل وإضافة "..." */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر المسموح بها */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =================================================== */
/* === ✅ FIX: Grid Layout for Cards Container     === */
/* =================================================== */

.cards-container {
    display: grid;
    /* هذا السطر هو الأهم:
       - repeat: كرر النمط التالي.
       - auto-fill: املأ المساحة المتاحة بأكبر عدد ممكن من الأعمدة.
       - minmax(320px, 1fr): اجعل عرض كل عمود 320 بكسل على الأقل، ووزع المساحة المتبقية بالتساوي.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem; /* المسافة بين البطاقات */
    margin-top: 2rem; /* مسافة فوق حاوية البطاقات */
}

/* =================================================== */
/* === ✅ NEW: YouTube-Inspired Playlist Viewer   === */
/* =================================================== */
.share-icon.telegram { background-color: #0088cc; }
.playlist-viewer-layout-yt {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); /* Responsive columns */
    gap: 1.5rem;
    align-items: flex-start;
}

/* --- Player Column --- */
.player-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.video-primary-info {
    padding: 0.5rem;
}

.video-title-yt {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    color: var(--text-color);
}

.video-actions-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align items to the end (left in RTL) */
    padding-bottom: 1rem;
     justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.video-secondary-info {
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--subtle-text-color);
}

/* --- Playlist Column --- */
.playlist-column {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 85px; /* Adjust based on your header's height */
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.playlist-header-yt {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.playlist-header-yt h4 {
    margin: 0;
    font-size: 1.1rem;
}
#playlist-progress {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    font-weight: 600;
}

.playlist-scroll-area {
    overflow-y: auto;
    padding: 0.5rem;
}

/* --- Playlist Item (Re-styled for YouTube look) --- */
.playlist-item-v2 {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}
.playlist-item-v2:hover {
    background-color: var(--hover-color);
}
.playlist-item-v2.active {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}

.item-number {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    width: 20px;
    text-align: center;
    align-self: center;
}
.playlist-item-v2.active .item-number {
    font-weight: 700;
    color: var(--primary-color);
}

.item-thumbnail {
    width: 120px;
    flex-shrink: 0;
    position: relative;
}
.item-thumbnail img {
    width: 100%;
    border-radius: 6px;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.item-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 6px;
    font-size: 0.7rem;
    border-radius: 4px;
}

.item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.item-subtitle {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .playlist-viewer-layout-yt {
        grid-template-columns: 1fr; /* Stack layout on smaller screens */
    }
    .playlist-column {
        position: static;
        max-height: 450px; /* Limit height when stacked */
    }
}

/* =================================================== */
/* === ✅ NEW: Share Button & Modal Styles       === */
/* =================================================== */

.share-button {
    background-color: var(--background-color);
    color: var(--text-color);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.share-button:hover {
    background-color: var(--hover-color);
    color: var(--primary-color);
}
.share-button i {
    font-size: 1rem;
}

/* --- Share Modal --- */
.share-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.share-modal.active {
    opacity: 1;
    visibility: visible;
}

.share-modal-content {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeInScale 0.3s ease forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.share-modal-content h3 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.share-modal-title {
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    margin-bottom: 1.5rem;
    font-weight: 500;
    max-height: 3.5rem; /* Limit height for long titles */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show up to 2 lines */
    -webkit-box-orient: vertical;
}

.close-button {
    position: absolute;
    top: 15px;
    left: 15px; /* Adjust for RTL */
    color: var(--subtle-text-color);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-button:hover {
    color: var(--text-color);
}

.share-options {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.share-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.share-icon.facebook { background-color: #3b5998; }
.share-icon.twitter { background-color: #00acee; }
.share-icon.whatsapp { background-color: #25d366; }

.share-link-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

#share-link-input-yt {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 0.9rem;
    direction: ltr; /* Ensure link displays LTR */
    text-align: left; /* Align link text to left */
}

.copy-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.copy-button:hover {
    background-color: var(--primary-dark-color);
}

.copy-feedback {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    height: 1.2rem; /* Reserve space to prevent layout shift */
}

/* Responsive adjustments for modal */
@media (max-width: 600px) {
    .share-modal-content {
        padding: 1.5rem;
        border-radius: 12px;
    }
    .share-modal-content h3 {
        font-size: 1.3rem;
    }
    .share-options {
        gap: 1rem;
    }
    .share-icon {
        width: 45px;
        height: 45px;
        font-size: 1.6rem;
    }
    .share-link-container {
        flex-direction: column;
        gap: 0.8rem;
    }
    .copy-button {
        width: 100%;
        justify-content: center;
    }
}


/* =================================================== */
/* === ✅ NEW: "Watched" Video Indicator Styles  === */
/* =================================================== */

/* 1. جعل عنصر الصورة المصغرة مرجعًا للشريط */
.item-thumbnail {
    position: relative;
    overflow: hidden; /* ضروري لإخفاء أي زوائد من الشريط */
}

/* 2. تصميم شريط التقدم الأحمر (مثل يوتيوب) */
.playlist-item-v2.is-watched .item-thumbnail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* اجعل الشريط يملأ عرض الصورة */
    height: 4px; /* ارتفاع الشريط */
    background-color: #ff0000; /* اللون الأحمر المميز ليوتيوب */
}

/* 3. تخفيف لون العنصر الذي تمت مشاهدته ليبدو أقل بروزًا */
.playlist-item-v2.is-watched {
    opacity: 0.85; 
}

.playlist-item-v2.is-watched .item-title {
    color: var(--subtle-text-color); /* تغيير لون العنوان ليكون باهتًا قليلاً */
}
.video-details .video-main-description {
  margin-top: 8px; /* إضافة مسافة فوق الوصف */
  font-size: 0.9rem;
  color: #a0a0a0; /* لون أفتح قليلاً */
  line-height: 1.5;
}

.video-details .video-section-info {
  display: block; /* جعل اسم الفصل في سطر منفصل */
}

/* -- Styles for YouTube-like Description -- */

.description-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-top: 10px;
}

.video-description-content {
    max-height: 80px; /* تحديد الارتفاع الأقصى المبدئي للوصف */
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
    line-height: 1.6;
    font-size: 0.9rem;
    color: #ccc;
}

/* حالة الوصف عندما يكون مفتوحاً */
.description-wrapper.expanded .video-description-content {
    max-height: 1000px; /* ارتفاع كبير للسماح بعرض كل المحتوى */
}

/* تنسيق الروابط داخل الوصف */
.video-description-content a {
    color: var(--accent-color); /* استخدام اللون المميز للمنصة */
    text-decoration: none;
    font-weight: 500;
}

.video-description-content a:hover {
    text-decoration: underline;
}

/* تنسيق خاص بالطوابع الزمنية */
.video-timestamp-link {
    cursor: pointer;
    background-color: rgba(3, 218, 198, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
}

/* تنسيق زر "عرض المزيد" */
.show-more-btn {
    background: none;
    border: none;
    color: var(--accent-color);
    font-weight: bold;
    cursor: pointer;
    padding: 8px 0 0 0;
    margin-top: 5px;
    display: block;
}
/* -- Updated Styles for Video Edit Modal (v2) -- */

.video-form-layout {
    display: grid;
    /* عمود للصورة المصغرة وعمود لباقي الحقول */
    grid-template-columns: 220px 1fr;
    gap: 25px; /* زيادة المسافة للمزيد من التنظيم */
    align-items: flex-start;
}

/* --- الجزء الأيسر: الصورة واللودر --- */
.thumbnail-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #2c2c2e;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.video-form-loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* للسماح بالتفاعل مع ما تحته */
}

.video-form-loader.visible {
    opacity: 1;
}

.video-form-loader::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- الجزء الأيمن: حقول الإدخال --- */
.form-fields-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px; /* المسافة بين كل حقل */
}

/* تنسيق الحقول المزدوجة (المدة والترتيب) */
.form-grid-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* تنسيق الأيقونات داخل حقول الإدخال */
.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    top: 50%;
    right: 15px; /* تم تغييرها إلى اليمين لتناسب اللغة العربية */
    transform: translateY(-50%);
    color: #8e8e93;
    font-size: 0.9em;
}

.input-with-icon .admin-input {
    padding-right: 40px; /* إضافة مساحة داخلية للأيقونة */
    padding-left: 15px;
}

/* لجعل التصميم متجاوباً مع الشاشات الصغيرة */
@media (max-width: 650px) {
    .video-form-layout {
        grid-template-columns: 1fr; /* تحويله إلى عمود واحد */
    }
    .thumbnail-preview {
        max-width: 300px;
        margin: 0 auto 20px; /* توسيط الصورة */
    }
}

/* -- Styles for Quill.js Editor in Modal -- */

#video-description-editor {
    background-color: #1e1e1e; /* لون خلفية داكن للمحرر */
    color: #fff;
    border-radius: 6px;
    border: 1px solid #444;
}

/* تنسيق شريط الأدوات */
.ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid #444;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* تنسيق منطقة الكتابة */
.ql-container.ql-snow {
    border: none;
    min-height: 120px;
    font-size: 1rem;
}

/* تغيير لون أيقونات شريط الأدوات لتكون واضحة على الخلفية الداكنة */
.ql-snow .ql-stroke {
    stroke: #b0b0b0;
}
.ql-snow .ql-fill {
    fill: #b0b0b0;
}
.ql-snow .ql-picker-label {
    color: #b0b0b0;
}
/* -- Styles for Playlist & Section Modals -- */

.playlist-form-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 25px;
    align-items: flex-start;
}

.cover-image-preview-wrapper {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #2c2c2e;
}

.cover-image-preview-wrapper label:first-of-type {
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
}

.cover-image-preview-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-image-preview-wrapper .upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cover-image-preview-wrapper:hover .upload-overlay {
    opacity: 1;
}

.upload-overlay i {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

@media (max-width: 650px) {
    .playlist-form-layout {
        grid-template-columns: 1fr;
    }
}
 .title-and-icon-wrapper {
            display: flex; /* يجعل العناصر تصطف في صف واحد */
            align-items: center; /* محاذاة عمودية في المنتصف */
            gap: 8px; /* لإضافة مسافة بسيطة بين العنوان والأيقونة */
            margin-bottom: 5px; /* لإضافة مسافة فصل بين العنوان وحقل الإدخال */
        }
        
        .visibility-icon-fix {
            /* تنسيق الأيقونة (اختياري) */
            font-size: 1.1em; 
            color: var(--subtle-text-color, #999);
            cursor: pointer;
        }
/* الحل الجديد لمشكلة محاذاة العين */
.label-and-icon-row {
    /* 1. تطبيق Flexbox على الصف الذي يحتوي العنوان والأيقونة */
    display: flex; 
    
    /* 2. الأهم: محاذاة عمودية في المنتصف */
    align-items: center; 
    
    /* 3. توزيع المساحة: دفع الأيقونة إلى اليسار (الجهة الأخرى في RTL) */
    justify-content: space-between; 
    
    /* إذا كانت الأيقونة ملاصقة للعنوان، استخدم 'gap' بدلاً من 'justify-content: space-between;' 
    
    /* يمكنك استخدام 'gap: 8px;' إذا كنت تريد أن يكون العنوان والأيقونة متلاصقين. */
    gap: 8px; /* استخدم هذا إذا كانت الأيقونة تلي العنوان مباشرة */
    
    /* تأكد من أن هذا الصف يأخذ عرض 100% داخل الـ form-group */
    width: 100%;
    
    /* قد تحتاج إلى إزالة الهامش السفلي الافتراضي للـ label */
    margin-bottom: 5px;
}

.visibility-icon-fix {
    /* تنسيق الأيقونة (يمكنك إضافة أيقونة أكثر وضوحاً إذا لزم الأمر) */
    font-size: 1.1em;
    color: var(--primary-color); /* استخدام لون واضح */
    cursor: pointer;
    /* تأكد من عدم وجود أي هوامش ترفع أو تنزل الأيقونة */
    margin: 0; 
    padding: 0;
}

/* تعديل بسيط على form-group لتطبيق layout جديد إذا لزم الأمر */
.title-with-icon-group {
    /* يمكن أن يبقى display: block; لضمان تدفق طبيعي */
}

/* ================================================================= */
/* تنسيق قسم لقطات التطبيق (App Screenshots Section) */
/* ================================================================= */

.app-screenshots {
    padding: 60px 20px; /* مسافة داخلية (Padding) حول القسم */
    text-align: center; /* توسيط المحتوى */
    background-color: var(--background-color-light, #f8f9fa); /* خلفية فاتحة للتميز */
}

.app-screenshots h2 {
    font-size: 2.2em;
    color: var(--text-color, #333);
    margin-bottom: 40px; /* مسافة أسفل العنوان */
    position: relative;
}

/* خط تزييني أسفل العنوان */
.app-screenshots h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color, #007bff); /* استخدام اللون الأساسي */
    border-radius: 2px;
}

/* حاوية الشبكة لصور لقطات الشاشة */
.screenshots-grid {
    display: grid;
    /* تخطيط الشبكة: عمودان افتراضياً على الشاشات الكبيرة والمتوسطة */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* المسافة بين الصور */
    max-width: 1200px; /* تحديد أقصى عرض للحاوية */
    margin: 0 auto; /* توسيط الحاوية في الصفحة */
}

/* تنسيق صور لقطات الشاشة */
.screenshots-grid img {
    width: 100%; /* الصورة تأخذ عرض العمود بالكامل */
    height: auto;
    display: block;
    border-radius: 12px; /* حواف مستديرة جميلة */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.1), /* ظل خفيف */
        0 10px 20px rgba(0, 0, 0, 0.05); /* ظل أعمق */
    
    /* تأثير طفيف عند تمرير الماوس */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: zoom-in; /* إشارة إلى إمكانية التكبير */
}

.screenshots-grid img:hover {
    transform: translateY(-5px) scale(1.02); /* رفع وتكبير خفيف عند التمرير */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* التجاوب (Media Query) للشاشات الصغيرة */
@media (max-width: 768px) {
    .app-screenshots {
        padding: 40px 15px;
    }
    
    .app-screenshots h2 {
        font-size: 1.8em;
    }

    /* في الشاشات الصغيرة، اجعل الشبكة بعمود واحد فقط لتظهر الصور بشكل أكبر */
    .screenshots-grid {
        grid-template-columns: 1fr;
    }
}



/* تنسيقات زر المشاركة في معلومات الفيديو */
.video-meta-data {
    display: flex; /* للتأكد من أن العناصر جنباً إلى جنب */
    align-items: center;
    gap: 15px; /* مسافة بين زر المشاهدات وزر المشاركة */
}

.share-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--text-primary-dark, #f8f8f8); /* استخدام لون النص الأساسي */
    transition: color 0.2s, background-color 0.2s;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-btn:hover {
    color: var(--primary-color, #007bff); /* تغيير اللون عند التمرير */
}

.share-btn i {
    font-size: 1.1em;
}

/* تنسيق عام لعناصر الميتا */
.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary-dark, #aaa);
}

/* تنسيق حقل المرحلة الجديد في بطاقة قائمة التشغيل */
.playlist-stage-level {
    font-size: 0.9em;
    color: var(--text-secondary-dark, #aaa); /* لون ثانوي خفيف */
    margin-top: 5px;
    margin-bottom: 5px; /* مسافة بسيطة قبل الوصف */
    display: flex;
    align-items: center;
    gap: 8px;
}

.playlist-stage-level i {
    color: var(--primary-color, #007bff); /* أيقونة باللون الأساسي */
}

.playlist-stage-level strong {
    font-weight: 700;
    color: var(--text-primary-dark, #f8f8f8); /* إبراز اسم المرحلة */
}

/* تعديل بسيط لعنوان البطاقة لضمان التباعد */
.playlist-card .card-info .card-title {
    margin-bottom: 0;
}

/* =============================================== */
/* ==      Styles for New Quiz Interface (V2)   == */
/* =============================================== */

/* --- Main Page Layout --- */
.quiz-page-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* --- Header and Progress Bar --- */
.quiz-header-v2 {
    margin-bottom: 2rem;
}

.quiz-progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--background-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.quiz-progress-bar {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.quiz-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

/* --- Question Card --- */
.quiz-card-v2 {
    background-color: var(--background-paper);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.quiz-question-text-v2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* --- Options Styling --- */
.quiz-options-v2 {
    display: grid;
    gap: 1rem;
}

.quiz-option-v2 {
    display: block;
    position: relative;
}

.quiz-option-v2 input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.quiz-option-v2 .option-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-secondary);
    transition: all 0.2s ease;
}

.quiz-option-v2 .option-letter {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-weight: bold;
    color: var(--subtle-text-color);
}

.quiz-option-v2 .option-content p {
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
}

/* --- Hover and Checked States for Options --- */
.quiz-option-v2 input[type="radio"]:hover + .option-content {
    border-color: var(--primary-color-light);
    background-color: var(--background-tertiary);
}

.quiz-option-v2 input[type="radio"]:checked + .option-content {
    border-color: var(--primary-color);
    background-color: var(--primary-color-translucent);
    box-shadow: 0 0 10px var(--primary-color-translucent);
}

.quiz-option-v2 input[type="radio"]:checked + .option-content .option-letter {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.quiz-option-v2 input[type="radio"]:checked + .option-content p {
    color: var(--text-primary);
}

/* --- Footer and Button --- */
.quiz-footer-v2 {
    margin-top: auto; /* Pushes the footer to the bottom */
    padding-top: 2rem;
    text-align: center;
}

#next-question-btn.btn-lg {
    width: 100%;
    max-width: 400px;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
}

#next-question-btn:disabled {
    background-color: var(--subtle-text-color);
    cursor: not-allowed;
}

/* --- Results Page Styling --- */
.quiz-results-page-v2 {
    display: grid;
    place-items: center;
    height: 100%;
    text-align: center;
    padding: 1rem;
     width: 100%; 
    margin: 0 auto; 
}

.results-card-v2 {
    background-color: var(--background-paper);
    padding: 2rem 3rem;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    max-width: 450px;
    width: 100%;
}

.results-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: white;
}

.results-icon.success { background: linear-gradient(135deg, var(--success-color), #00c9a7); }
.results-icon.failure { background: linear-gradient(135deg, var(--danger-color), #ff7e5f); }

.results-card-v2 h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.results-summary {
    color: var(--subtle-text-color);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.final-score {
    font-size: 5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.final-score span {
    font-size: 2rem;
    font-weight: 600;
    color: var(--subtle-text-color);
    margin-left: 0.25rem;
}

.results-details {
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.results-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
/* --- أنماط حقل الإجابة النصية --- */
.quiz-text-answer-area {
    margin-top: 1rem;
}
.text-answer-input {
    width: 100%;
    padding: 1rem;
    font-family: 'Courier New', Courier, monospace; /* خط مناسب للكود */
    font-size: 1rem;
    background-color: var(--background-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    resize: vertical;
    direction: ltr; /* لضمان محاذاة الكود لليسار */
    text-align: left;
}

/* --- أنماط مراجعة النتائج --- */
.results-details-list {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    background-color: var(--background-paper);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.results-details-list h3 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.result-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.result-item:last-child {
    border-bottom: none;
}
.result-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
}
.result-item-header .fas {
    font-size: 1.5rem;
}
.result-item.correct .fa-check-circle { color: var(--success-color); }
.result-item.incorrect .fa-times-circle { color: var(--danger-color); }

.result-comparison {
    margin-top: 1rem;
    padding-left: 2.25rem; /* محاذاة مع نص السؤال */
}
.result-comparison pre {
    background-color: var(--background-secondary);
    padding: 0.75rem;
    border-radius: 6px;
    white-space: pre-wrap; /* لضمان التفاف النص الطويل */
    word-break: break-all;
    direction: ltr;
    text-align: left;
}
.result-comparison .show-answer-btn {
    margin-top: 0.5rem;
}
/* --- أنماط إضافية لواجهة بناء الاختبار --- */
.options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.option-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-wrapper input[type="radio"] {
    flex-shrink: 0;
}

.option-wrapper .option-input {
    flex-grow: 1;
}

.remove-option-btn {
    padding: 0.5rem 0.7rem !important;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.question-header h5 {
    flex-grow: 1;
}
/*
  قاعدة عامة لجميع العناصر التي تستخدم dir="auto"
  لضمان أن محاذاة النص تتبع الاتجاه المحدد تلقائيًا.
*/
[dir="auto"] {
    text-align: start;
}

/* 
   تخصيص إضافي لحقول إدخال الكود لتبدو أفضل
   (هذا يضمن أن الكود دائمًا محاذاته لليسار حتى لو كان السؤال بالعربي)
*/
.text-answer-input, 
.correct-text-input,
.result-comparison pre code {
    direction: ltr;
    text-align: left;
}
/* --- أنماط إضافية للكود المضمن في الأسئلة --- */

.quiz-question-text-v2 {
    /* ضمان أن اتجاه السؤال الأساسي هو من اليمين لليسار */
    direction: rtl;
    text-align: start; /* start ستعني right هنا */
}

code.inline-code {
    direction: ltr; /* ✅ فرض اتجاه اليسار لليمين على الكود */
    text-align: left; /* ✅ فرض محاذاة اليسار على الكود */
    
    background-color: var(--background-tertiary); /* لون خلفية مميز */
    color: var(--accent-color); /* لون نص مميز للكود */
    padding: 0.2em 0.5em;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace; /* خط مناسب للكود */
    font-size: 0.9em; /* أصغر قليلاً من النص المحيط */
    
    /* يمنع المتصفح من كسر الكود من المنتصف بشكل غريب */
    unicode-bidi: embed; 
}
.page-fab {
    /* ✅ أهم سطر: يجعل الحركة سلسة بدلاً من القفز المفاجئ */
    transition: bottom 0.3s ease-out;
}
/* =================================================== */
/* === ✅ NEW: Smart Subscribe Button (V2) Styles === */
/* =================================================== */

/* 1. حاوية العنوان والزر */
.video-title-and-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* محاذاة لبداية السطر */
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.video-title-yt {
    flex-grow: 1; /* اجعل العنوان يأخذ المساحة المتاحة */
}

/* 2. تصميم الزر الأساسي */
.subscribe-btn-v2 {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border-radius: 25px; /* حواف دائرية بالكامل */
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    flex-shrink: 0; /* امنع الزر من التقلص */
    
    /* الحالة الافتراضية (غير مشترك) */
    background-color: var(--primary-color);
    color: white;
    
    /* تأثيرات انتقال سلسة */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. تصميم الأيقونة والنص داخل الزر */
.subscribe-btn-v2 .bell-icon {
    transition: transform 0.3s ease;
}

.subscribe-btn-v2 .text {
    transition: all 0.3s ease;
}

/* 4. تأثير التحويم (Hover) */
.subscribe-btn-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

/* 5. الحالة عند الاشتراك (الأهم) */
.subscribe-btn-v2.subscribed {
    /* تغيير لون الخلفية إلى لون محايد */
    background-color: var(--background-color);
    color: var(--subtle-text-color);
    box-shadow: none;
}

.subscribe-btn-v2.subscribed:hover {
    background-color: rgba(var(--danger-rgb), 0.1); /* خلفية حمراء خفيفة عند التحويم */
    color: var(--danger-color); /* لون نص أحمر */
    box-shadow: 0 4px 15px rgba(var(--danger-rgb), 0.2);
}

/* تغيير النص عند التحويم فوق زر "مشترك" */
.subscribe-btn-v2.subscribed:hover .text {
    content: 'إلغاء'; /* هذه الخدعة لا تعمل مباشرة مع span، سنستخدم JS */
}

/* حركة الأيقونة عند الاشتراك */
.subscribe-btn-v2.subscribed .bell-icon {
    transform: rotate(15deg);
}

/* 6. التجاوب مع الشاشات الصغيرة */
@media (max-width: 600px) {
    .video-title-and-actions {
        flex-direction: column; /* اجعل العنوان فوق الزر */
        align-items: flex-start;
        gap: 1rem;
    }
    .subscribe-btn-v2 {
        align-self: flex-start; /* محاذاة الزر لبداية السطر */
    }
}
.video-title-and-actions {
    display: flex;
    justify-content: space-between; /* لوضع العنوان في جهة والزر في الجهة الأخرى */
    align-items: flex-start; /* محاذاة العناصر لبداية السطر */
    gap: 1.5rem; /* مسافة بين العنوان والزر */
    margin-bottom: 1rem; /* مسافة أسفل هذا الصف */
}

.video-title-yt {
    flex-grow: 1; /* اجعل العنوان يأخذ كل المساحة المتاحة */
    margin: 0; /* إزالة أي هوامش افتراضية */
}

.subscribe-btn-v2 {
    flex-shrink: 0; /* امنع الزر من التقلص إذا كان العنوان طويلاً */
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 600px) {
    .video-title-and-actions {
        flex-direction: column; /* اجعل العنوان فوق الزر */
        align-items: flex-start; /* محاذاة الكل لليمين */
        gap: 1rem;
    }
}

.quiz-results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-result-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-right: 5px solid; /* شريط لوني على اليمين */
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.quiz-result-card.success {
    border-right-color: var(--success-color);
}
.quiz-result-card.failure {
    border-right-color: var(--danger-color);
}

.quiz-result-icon {
    font-size: 2rem;
}
.quiz-result-card.success .quiz-result-icon {
    color: var(--success-color);
}
.quiz-result-card.failure .quiz-result-icon {
    color: var(--danger-color);
}

.quiz-result-info {
    flex-grow: 1;
}

.quiz-result-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.quiz-result-playlist {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    margin: 0 0 0.75rem 0;
}

.quiz-result-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}
.quiz-result-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-result-score {
    font-size: 2rem;
    font-weight: 800;
}
.quiz-result-card.success .quiz-result-score {
    color: var(--success-color);
}
.quiz-result-card.failure .quiz-result-score {
    color: var(--danger-color);
}

/* =================================================== */
/* === ✅ NEW: "Watched" Video Indicator Styles  === */
/* =================================================== */

/* 1. إخفاء المؤشر بشكل افتراضي */
.playlist-item-v2 .watched-indicator {
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success-color); /* استخدام لون النجاح من الثيم */
    align-items: center;
    gap: 0.4rem; /* مسافة بين الأيقونة والنص */
    margin-top: 4px;
}

/* 2. إظهار المؤشر فقط إذا كان العنصر الأب يحتوي على كلاس .is-watched */
.playlist-item-v2.is-watched .watched-indicator {
    display: inline-flex;
}

/* 3. (اختياري) جعل عنوان الفيديو المشاهد باهتًا قليلاً للتمييز */
.playlist-item-v2.is-watched .item-title {
    color: var(--subtle-text-color);
}

/* ============================================= */
/* ==  CSS for Developed Share Button & Menu  == */
/* ============================================= */

/* 1. الحاوية الرئيسية لزر المشاركة والقائمة */
/*    - نستخدم position: relative لجعلها مرجعًا للقائمة المنسدلة. */
.share-menu-container {
    position: relative;
    display: inline-block; /* للسماح بوضعها بجانب العناصر الأخرى */
}

/* 2. تصميم زر المشاركة الرئيسي */
/*    - هذا هو الزر الذي يظهر دائمًا. */
#share-video-btn {
    /* يمكنك تعديل هذه القيم لتناسب تصميمك */
    background-color: var(--secondary-bg-color);
    color: var(--primary-text-color);
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#share-video-btn:hover {
    background-color: var(--hover-bg-color);
    transform: scale(1.05);
}

/* 3. تصميم القائمة المنسدلة (Dropdown) */
/*    - تكون مخفية بشكل افتراضي وتظهر عند إضافة كلاس 'visible'. */
.share-options-dropdown {
    position: absolute;
    top: 110%; /* تظهر أسفل الزر مباشرة مع مسافة صغيرة */
    left: 50%;
    transform: translateX(-50%); /* توسيط القائمة أسفل الزر */
    background-color: black; /* لون خلفية يتناسب مع النوافذ المنبثقة */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    width: 200px; /* عرض مناسب للقائمة */
    z-index: 100; /* للتأكد من ظهورها فوق العناصر الأخرى */
    
    /* إعدادات الإخفاء والظهور مع تأثير سلس */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px); /* تبدأ من الأعلى قليلاً */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* 4. حالة الظهور للقائمة المنسدلة */
/*    - عند إضافة كلاس 'visible'، تصبح القائمة مرئية. */
.share-options-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* تعود إلى مكانها الطبيعي */
}

/* 5. تصميم كل خيار داخل القائمة */
.share-option {
    display: flex;
    align-items: center;
    gap: 12px; /* مسافة بين الأيقونة والنص */
    padding: 12px 16px;
    color: var(--primary-text-color);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease;
}

/* 6. تأثير المرور (Hover) على خيارات القائمة */
.share-option:hover {
    background-color: var(--hover-bg-color);
}

/* 7. تصميم أيقونات الخيارات */
.share-option i {
    color: var(--subtle-text-color); /* لون خافت للأيقونات */
    width: 20px; /* توحيد عرض الأيقونات للمحاذاة */
    text-align: center;
}

/* 8. إزالة الحواف الدائرية من أول وآخر عنصر لمظهر متكامل */
.share-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.share-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* 9. (اختياري) إضافة فاصل بين الخيارات */
.share-option:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

/* 10. حاوية الأزرار الرئيسية في شريط العنوان للتأكد من محاذاتها بشكل صحيح */
.video-main-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* مسافة بين زر المشاركة وزر الاشتراك */
}




.scanned-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: rgba(3, 218, 198, 0.1); /* لون أخضر شفاف */
    color: var(--success-color); /* لون أخضر */
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem; /* مسافة بينه وبين عنوان الملف */
}

.scanned-badge i {
    font-size: 0.8rem;
}

.tile-main-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* =============================================== */
/* == News & Announcements Page Styles == */
/* =============================================== */

/* -- حاوية الصفحة الرئيسية للأخبار -- */
.news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* -- حاوية قائمة الأخبار (Grid Layout) -- */
.news-list-container {
    display: grid;
    /* عمود واحد في الشاشات الصغيرة جدًا */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* المسافة بين البطاقات */
}

/* -- بطاقة الخبر الواحدة -- */
.news-item-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.news-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* -- صورة الغلاف للخبر -- */
.news-card-cover {
    height: 220px;
    background-size: cover;
    background-position: center;
    background-color: var(--subtle-bg-color);
}

/* -- محتوى بطاقة الخبر -- */
.news-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* لجعل المحتوى يملأ المساحة المتاحة */
}

/* -- تاريخ النشر -- */
.news-card-date {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* -- عنوان الخبر -- */
.news-card-title {
    font-size: 1.25rem;
    margin: 0 0 0.75rem 0;
    color: var(--heading-color);
    line-height: 1.4;
}

/* -- المقتطف -- */
.news-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    flex-grow: 1; /* يدفع "قراءة المزيد" إلى الأسفل */
    margin-bottom: 1rem;
}

/* -- الجزء السفلي للبطاقة (قراءة المزيد) -- */
.news-card-footer {
    margin-top: auto; /* يدفع هذا العنصر إلى أسفل البطاقة */
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.news-card-footer span {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.news-item-card:hover .news-card-footer span {
    gap: 0.8rem; /* زيادة المسافة عند المرور بالفأرة */
}

/* =============================================== */
/* == Responsive Design (التصميم المتجاوب) == */
/* =============================================== */

/* -- للشاشات المتوسطة (مثل الأجهزة اللوحية) -- */
@media (min-width: 768px) {
    .news-list-container {
        /* عرض عمودين */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- للشاشات الكبيرة (مثل شاشات الكمبيوتر) -- */
@media (min-width: 1024px) {
    .news-list-container {
        /* عرض ثلاثة أعمدة */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================== */
/* == News Detail Page Styles (صفحة تفاصيل الخبر) == */
/* =============================================== */
.news-detail-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--card-bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.news-detail-header h1 {
    font-size: 2.5rem;
    color: var(--heading-color);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.news-detail-meta {
    display: flex;
    gap: 1rem;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.news-detail-cover {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.news-detail-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
}

.news-detail-content p,
.news-detail-content h2,
.news-detail-content h3,
.news-detail-content ul,
.news-detail-content ol {
    margin-bottom: 1.5rem;
}

.news-detail-content a {
    color: var(--primary-color);
    text-decoration: underline;
}
/* =============================================== */
/* == News Comments Section Styles == */
/* =============================================== */

.comments-section {
    margin-top: 2rem;
}

.comments-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

.comment-item {
    background-color: var(--subtle-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color-light);
}

.comment-author {
    font-weight: 600;
    color: var(--heading-color);
}

.comment-date {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

.comment-body {
    font-size: 1rem;
    line-height: 1.7;
}

.comment-form-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--subtle-bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.comment-form-container h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}
/* =============================================== */
/* == Fix for Admin Data Table Badges == */
/* =============================================== */

/* -- تنسيق عام للشارات لضمان ظهور النص -- */
.badge {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* 6px */
    color: #fff; /* ✅ الأهم: اجعل لون النص أبيض دائمًا */
}

/* -- ألوان خلفية مختلفة لكل حالة -- */
.badge.badge-success {
    background-color: var(--success-color, #28a745);
}

.badge.badge-warning {
    background-color: var(--warning-color, #ffc107);
    color: #212529; /* نص أسود على الخلفية الصفراء لوضوح أفضل */
}

.badge.badge-info {
    background-color: var(--primary-color, #007bff);
}

.badge.badge-danger {
    background-color: var(--danger-color, #dc3545);
}

/* -- تنسيق خاص للصفوف المخفية لجعلها باهتة -- */
tr.is-hidden-row {
    opacity: 0.6;
    background-color: rgba(255, 255, 255, 0.05); /* لون خفيف جدًا لتمييزها */
}

tr.is-hidden-row:hover {
    opacity: 1; /* إظهار الصف بوضوح عند مرور الفأرة */
}


/* --- تنسيق خيارات رفع صورة الغلاف --- */
.image-upload-options {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background-color: var(--background-color);
}

.image-upload-options .option {
    margin-bottom: 1rem;
}

.image-upload-options .option:last-child {
    margin-bottom: 0;
}

.image-upload-options .option label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.option-separator {
    text-align: center;
    margin: 1rem 0;
    color: var(--subtle-text-color);
    font-weight: bold;
}

.image-preview-container {
    margin-top: 1rem;
    max-width: 300px;
}

#news-image-preview {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px dashed var(--border-color);
    object-fit: cover;
}
/* اجعل صور الغلاف القابلة للنقر تظهر كمؤشر يد */
.thread-cover-image-full.clickable {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thread-cover-image-full.clickable:hover {
    transform: scale(1.02); /* تأثير تكبير بسيط عند المرور */
}
/* =============================================== */
/* == News Item Cover Image Styling == */
/* =============================================== */

.thread-cover-image-full {
    display: block;
    width: 100%;
    
    /* تحديد أقصى ارتفاع لجعلها تبدو كبانر وليس كخلفية كاملة */
    max-height: 400px; 
    height: 40vw; /* ارتفاع مرن يعتمد على عرض الشاشة */
    
    /* التأكد من ملء الصورة للحجم المحدد دون تشويه */
    object-fit: cover; /* تم التغيير من contain إلى cover لتجنب المساحات الفارغة */
    object-position: center;
    
    /* تنسيق جمالي */
    border-radius: 12px;
    margin-bottom: 2rem; /* مسافة كافية أسفل الصورة قبل المحتوى */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- تأثيرات إضافية عند التمرير (إذا كانت قابلة للنقر) --- */
.thread-cover-image-full.clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thread-cover-image-full.clickable:hover {
    transform: scale(1.01); /* تأثير تكبير أصغر ليكون مناسبًا للجداول */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* =============================================== */
/* == Responsive Adjustments (V2) == */
/* =============================================== */

/* --- للشاشات الصغيرة (الهواتف) --- */
@media (max-width: 767px) {
    .thread-view-container {
        padding: 0; 
    }

    .thread-header-full {
        padding: 0;
    }

    .thread-cover-image-full {
        width: 100%;
        max-height: none; /* إزالة الحد الأقصى للارتفاع على الهواتف */
        height: auto;
        border-radius: 0; 
        margin-bottom: 1rem;
        border-left: none;  /* إزالة الحدود الجانبية لتتمدد الصورة بالكامل */
        border-right: none;
    }

    .thread-header-full h1,
    .thread-meta-bar,
    .thread-body-content {
        padding: 0 1rem;
    }
}

/* --- تأثيرات إضافية عند التمرير (إذا كانت قابلة للنقر) --- */
.thread-cover-image-full.clickable {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.thread-cover-image-full.clickable:hover {
    transform: scale(1.015); /* تأثير تكبير طفيف */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* ظل لإعطاء عمق */
}


/* =============================================== */
/* == Responsive Adjustments for Cover Image == */
/* =============================================== */

/* --- للشاشات المتوسطة (Tablets) --- */
@media (max-width: 992px) {
    .thread-cover-image-full {
        height: 300px; /* تقليل الارتفاع قليلاً */
        border-radius: 10px;
    }
}

/* --- للشاشات الصغيرة (الهواتف) --- */
@media (max-width: 767px) {
    .thread-view-container {
        /* إزالة الحشو الداخلي للحاوية الرئيسية للسماح للصورة بالتمدد */
        padding: 0; 
    }

    .thread-header-full {
        /* إزالة الحشو من رأس الخبر أيضًا */
        padding: 0;
    }

    .thread-cover-image-full {
        width: 100%; /* اجعل الصورة تمتد بعرض الشاشة بالكامل */
        height: 250px; /* ارتفاع مناسب للهواتف */
        
        /* إزالة الحواف الدائرية من الأعلى فقط لتبدو متصلة بحافة الشاشة */
        border-radius: 0; 
        margin-bottom: 1rem;
    }

    /* إعادة الحشو للعناصر التي أزلناه منها في الأعلى */
    .thread-header-full h1,
    .thread-meta-bar,
    .thread-body-content {
        padding: 0 1rem; /* إضافة حشو جانبي للمحتوى النصي فقط */
    }
}


/* =============================================== */
/* == News Banner Styles (أنماط بانر الأخبار) == */
/* =============================================== */

.news-banner-container {
    background-color: var(--surface-color);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.news-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.news-banner-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.news-banner-header h3 i {
    color: var(--primary-color);
}

.news-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.news-banner-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: var(--background-color);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-banner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.banner-card-img {
    height: 150px;
    background-size: cover;
    background-position: center;
}

.banner-card-content {
    padding: 1rem;
}

.banner-card-date {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-bottom: 0.5rem;
    display: block;
}

.banner-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    /* قص النص الطويل لسطرين */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================== */
/* == Card Share Button & Menu Styles == */
/* =============================================== */

/* حاوية البطاقة لجعلها مرجعًا للزر */
.news-banner-card-wrapper,
.news-item-card-wrapper {
    position: relative;
}

/* زر المشاركة */
.card-share-btn {
    position: absolute;
    top: 12px;
    left: 12px; /* في العربية، left تعني اليمين */
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3; /* ليكون فوق صورة الغلاف */
    opacity: 0; /* يبدأ مخفيًا */
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* إظهار الزر عند مرور الماوس فوق الحاوية */
.news-banner-card-wrapper:hover .card-share-btn,
.news-item-card-wrapper:hover .card-share-btn {
    opacity: 1;
    transform: scale(1);
}

.card-share-btn:hover {
    background-color: var(--primary-color);
}

/* 
   استخدام نفس تنسيقات قائمة المشاركة التي أنشأناها سابقًا
   مع التأكد من أنها تعمل بشكل صحيح مع هذا السياق الجديد.
*/
#card-share-menu {
    position: absolute; /* الأهم: لتحديد موضعها بدقة */
    transform: none; /* إلغاء أي تحويلات سابقة */
    margin: 0;
    /* بقية التنسيقات من .share-options-dropdown تعمل هنا */
}

/* =============================================== */
/* == Search Result Type Badge Styles == */
/* =============================================== */

.result-details {
    align-items: center; /* محاذاة الشارة مع النص */
}

.result-type-badge {
    background-color: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* =============================================== */
/* == Styles for Single Notification Delete Button == */
/* =============================================== */

/* 1. الحاوية الرئيسية لكل إشعار */
.notification-item-wrapper {
    position: relative; /* ضروري لتحديد موضع زر الحذف */
}

/* 2. تصميم زر الحذف */
.delete-notification-btn {
    position: absolute;
    top: 50%;
    left: 12px; /* في العربية، left تعني اليمين */
    transform: translateY(-50%);
    
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background-color: var(--hover-color);
    color: var(--subtle-text-color);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    font-size: 0.9rem;
    
    /* إخفاء الزر بشكل افتراضي */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 3. إظهار الزر عند مرور الماوس فوق الحاوية */
.notification-item-wrapper:hover .delete-notification-btn {
    opacity: 1;
    visibility: visible;
}

/* 4. تأثير عند مرور الماوس فوق الزر نفسه */
.delete-notification-btn:hover {
    background-color: var(--danger-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
}


/* =============================================== */
/* ==  ULTRA CTA Button Animation (V2)          == */
/* =============================================== */

/* 1. تصميم الزر الأساسي مع تحديد الموضع */
.btn.cta-special {
    position: relative; /* ضروري لتحديد موضع العناصر الوهمية (الهالة والبريق) */
    overflow: hidden;   /* لإخفاء أي أجزاء من الأنيميشن تتجاوز حدود الزر */
    
    /* تدرج لوني أكثر حيوية */
    background: linear-gradient(45deg, #00C9FF, #92FE9D);
    color: #1a1a1a; /* لون نص داكن للتباين مع الخلفية الفاتحة */
    font-weight: 700;
    border: none;
    
    /* ظل أساسي */
    box-shadow: 0 5px 20px rgba(0, 201, 255, 0.4);
    
    /* تطبيق أنيميشن الاهتزاز عند التحميل */
    animation: cta-intro-shake 0.8s 0.5s ease-out;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. تصميم الهالة المضيئة (الطبقة الأولى) */
.btn.cta-special::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit; /* استخدام نفس استدارة الزر */
    
    /* تطبيق أنيميشن النبض */
    animation: pulse-aura 2s infinite;
    
    z-index: -1; /* وضع الهالة خلف محتوى الزر */
}

/* 3. تصميم البريق اللامع (الطبقة الثانية) */
.btn.cta-special::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    
    /* تدرج لوني للبريق */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    
    /* تطبيق أنيميشن حركة البريق */
    animation: shine-effect 4s infinite linear;
    
    transform: rotate(20deg);
    z-index: 1; /* وضع البريق فوق خلفية الزر ولكن تحت النص */
    pointer-events: none; /* السماح بالنقر من خلاله */
}

/* 4. تأثيرات التحويم (Hover) */
.btn.cta-special:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 201, 255, 0.5);
}

/* 5. أيقونة الزر */
.btn.cta-special i {
    position: relative;
    z-index: 2; /* للتأكد من ظهور الأيقونة فوق البريق */
    transition: transform 0.3s ease;
}

.btn.cta-special:hover i {
    transform: rotate(15deg);
}

/* 6. نص الزر */
.btn.cta-special span {
    position: relative;
    z-index: 2; /* للتأكد من ظهور النص فوق البريق */
}

/* =============================================== */
/* ==  Keyframe Animations                      == */
/* =============================================== */

/* أنيميشن الهالة المضيئة */
@keyframes pulse-aura {
    0% {
        width: 100%;
        height: 100%;
        background-color: rgba(146, 254, 157, 0.2);
    }
    100% {
        width: 150%;
        height: 150%;
        background-color: rgba(146, 254, 157, 0);
    }
}

/* أنيميشن البريق اللامع */
@keyframes shine-effect {
    0% {
        transform: translateX(-100%) rotate(20deg);
    }
    100% {
        transform: translateX(100%) rotate(20deg);
    }
}

/* أنيميشن الاهتزاز عند التحميل */
@keyframes cta-intro-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-5px) rotate(-2deg); }
    40% { transform: translateX(5px) rotate(2deg); }
    60% { transform: translateX(-3px) rotate(-1deg); }
    80% { transform: translateX(3px) rotate(1deg); }
    100% { transform: translateX(0); }
}


/* =============================================== */
/* === ✅ FIX: Responsive & Aligned Header (V3) === */
/* =============================================== */

/* 1. الحاوية الرئيسية للهيدر */
.site-header-v2 {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0 15px; /* تقليل الهوامش الجانبية قليلاً للهواتف */
    height: 65px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: var(--shadow-sm);
}

/* 2. حاوية Flexbox الداخلية (الأهم) */
.header-container-v2 {
    display: flex;
    align-items: center; /*   محاذاة عمودية مثالية لجميع العناصر   */
    justify-content: space-between; /* توزيع المساحة بين الأطراف */
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 15px; /* مسافة موحدة بين المجموعات (اليمين، الوسط، اليسار) */
}

/* 3. مجموعة العناصر اليمنى واليسرى */
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; /*   منع هذه المجموعات من التقلص   */
}

/* 4. حاوية البحث في المنتصف (لتأخذ المساحة المتبقية) */
.header-center {
    flex-grow: 1; /*   هذا هو السطر السحري: اجعل هذا العنصر يتمدد ليملأ الفراغ   */
    display: flex;
    justify-content: center;
    min-width: 0; /*   مهم جداً: للسماح للعنصر بالتقلص عند الحاجة   */
}

/* 5. تعديل بسيط على رابط الملف الشخصي لضمان المحاذاة */
#profile-link-v2 {
    display: inline-flex;
    align-items: center;
}

/* 6. إخفاء نص الشعار الطويل على الشاشات الأصغر للحصول على مساحة */
@media (max-width: 900px) {
    .header-logo-v2 .desktop-only-text {
        display: none;
    }
}

/* 7. إخفاء شريط البحث بالكامل على الهواتف لإفساح المجال للأيقونات */
@media (max-width: 768px) {
    .header-center {
        display: none; /* إخفاء حاوية البحث بالكامل */
    }
    .header-container-v2 {
        gap: 5px; /* تقليل المسافة بين الأيقونات على الهاتف */
    }
}


/* =============================================== */
/* === ✅ NEW: File Tile Action Buttons Styles   === */
/* =============================================== */

/* 1. حاوية الأزرار الجديدة */
.tile-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* مسافة بسيطة بين زر المشاركة والتحميل */
    flex-shrink: 0; /* منع الحاوية من التقلص */
}

/* 2. تنسيق موحد لأزرار الإجراءات */
.tile-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
    padding: 0; /* إزالة الحشوة الزائدة */
    text-decoration: none;
    transition: all 0.2s ease;
}

/* 3. تنسيق زر المشاركة */
.share-file-btn {
    background-color: var(--background-color);
    color: var(--secondary-color);
    border: 1px solid var(--border-color);
}

.share-file-btn:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: scale(1.1);
}

/* 4. تنسيق زر التحميل (للتوافق مع التصميم الجديد) */
.tile-download-btn {
    background-color: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.tile-download-btn:hover {
    background-color: var(--primary-dark-color);
    transform: scale(1.1);
}

/* =============================================== */
/* === ✅ NEW: Glowing Logo Preloader (V4)      === */
/* =============================================== */

/* 1. الحاوية الرئيسية (تبقى كما هي) */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 2. حاوية المحتوى الداخلي */
.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* زيادة المسافة بين الشعار والنص */
}

/* 3. تصميم اللودر الجديد (حاوية الشعار) */
.glowing-logo-loader {
    width: 100px; /* حجم مناسب للشعار */
    height: 100px;
    position: relative; /* ضروري لتحديد موضع الهالة */
    display: grid;
    place-items: center;
}

/* 4. تصميم الشعار نفسه */
.glowing-logo-loader img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative; /* لضمان ظهوره فوق الهالة */
    z-index: 2;
    /* تطبيق أنيميشن الظهور */
    animation: logo-fade-in 1.5s ease-out;
     border-radius: 50%;
}

/* 5. تصميم الهالة المضيئة النابضة (العنصر الوهمي) */
.glowing-logo-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color, #bb86fc);
    border-radius: 50%; /* جعل الهالة دائرية */
    z-index: 1;
    
    /* تطبيق أنيميشن النبض */
    animation: glowing-pulse 2s infinite ease-in-out;
}

/* 6. نص التحميل */
#preloader-text {
    color: var(--subtle-text-color, #A0A0A0);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0;
    /* تطبيق أنيميشن الظهور بتأخير */
    animation: fade-in-text 1s 0.5s ease-out forwards;
}

/* 7. تعريف الحركات (Keyframes) */
@keyframes logo-fade-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-in-text {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes glowing-pulse {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.7);
    }
    70% {
        transform: scale(1.2);
        box-shadow: 0 0 20px 30px rgba(187, 134, 252, 0);
    }
    100% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(187, 134, 252, 0);
    }
}

/* حاوية الإشعارات الجانبية */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999; /* قيمة عالية جداً لضمان الظهور فوق كل شيء */
    max-width: 380px;
    width: 100%;
}

/* بطاقة الإشعار الأساسية مع الشفافية */
.toast-notification {
    /* تطبيق لون شبه شفاف للخلفية */
    background-color: rgba(var(--card-bg-rgb), 0.95); 
    color: var(--text-color);
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1.25), opacity 0.4s ease;
    border-right: 6px solid;
    position: relative;
    border: 1px solid rgba(var(--border-color-rgb), 0.2);
    
    /* تأثير طمس الخلفية (Aero Glass effect) لتحقيق مظهر أكثر شفافية */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
}

.toast-notification.visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.hide {
    transform: translateX(120%);
    opacity: 0;
}

/* الألوان حسب النوع (تُركت كما هي للحفاظ على التمييز) */
.toast-notification.info { border-color: var(--info-color); }
.toast-notification.success { border-color: var(--success-color); }
.toast-notification.error { border-color: var(--danger-color); }
.toast-notification.warning { border-color: var(--warning-color); }

.toast-notification.info .toast-icon { color: var(--info-color); }
.toast-notification.success .toast-icon { color: var(--success-color); }
.toast-notification.error .toast-icon { color: var(--danger-color); }
.toast-notification.warning .toast-icon { color: var(--warning-color); }

.toast-icon {
    font-size: 22px; 
    flex-shrink: 0;
}

.toast-content {
    flex-grow: 1;
}

.toast-title {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.toast-message {
    margin: 0;
    font-size: 0.95rem; 
    color: var(--subtle-text-color);
    line-height: 1.4;
}

.toast-close-btn {
    background: none;
    border: none;
    color: var(--subtle-text-color);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toast-close-btn:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    #toast-container {
        right: 10px;
        bottom: 10px;
        left: 10px;
        max-width: none;
    }
}

/* =============================================== */
/* == تحسين صفحة تفاصيل الخبر (renderForumThreadView) == */
/* =============================================== */

/* الحاوية الرئيسية لتوسيط المحتوى */
.thread-view-container {
    max-width: 900px; /* تحديد أقصى عرض للخبر */
    margin: 0 auto;   /* توسيط الحاوية */
    padding: 1rem;
}

/* تنسيق صورة الغلاف الرئيسية */
.thread-cover-image-full {
    display: block;
    width: 100%;
    
    /* 1. تحديد أقصى ارتفاع (لجعلها تبدو كبانر وليس كخلفية كاملة) */
    max-height: 400px; 
    height: 40vw; /* ارتفاع مرن يعتمد على عرض الشاشة */
    
    /* 2. التأكد من ملء الصورة للحجم المحدد دون تشويه */
    object-fit: cover; 
    object-position: center;
    
    /* 3. تنسيق جمالي */
    border-radius: 12px;
    margin-bottom: 2rem; /* مسافة كبيرة أسفل الصورة قبل بداية المحتوى */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تحسين المحتوى داخل الـ <header> للتجاوب */
.thread-header-full {
    padding: 1rem 0;
}

/* تنسيق المحتوى النصي للتأكد من المحاذاة */
.thread-body-content {
    /* يجب أن يكون هذا العنصر جزءاً من تدفق المستند العادي ليتم التمرير فوقه */
    line-height: 1.8;
    font-size: 1.1rem;
    padding-bottom: 2rem;
}

/* --- التجاوب مع شاشات الهواتف (أقل من 768 بكسل) --- */
@media (max-width: 767px) {
    .thread-view-container {
        padding: 0; /* إزالة الهوامش الجانبية للسماح بالامتداد */
    }
    .thread-cover-image-full {
        /* تثبيت الارتفاع على الهواتف */
        height: 250px; 
        max-height: 250px;
        border-radius: 0; /* إزالة الحواف الدائرية ليملأ العرض بالكامل */
        margin-bottom: 1rem;
    }
    
    /* إعادة الحشو للعناصر النصية بعد إزالته من الحاوية الرئيسية */
    .thread-header-full h1,
    .thread-meta-bar,
    .thread-body-content {
        padding: 0 1rem; 
    }
}
/* =============================================== */
/* == NEW: Thread Detail Page Styles (Final V3) == */
/* =============================================== */

/* 1. الحاوية الرئيسية والتوسيط */
.thread-view-container {
    max-width: 900px; 
    margin: 2rem auto; 
    padding: 0 1rem;
}

/* 2. البطاقة الرئيسية التي تحوي كل شيء */
.news-article-final-v3 {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* 3. شريط العنوان/البانر العلوي (Hero Header) */
.article-hero-header-v3 {
    width: 100%;
    /* تحديد الارتفاع لمنع الصور الطويلة جداً */
    max-height: 350px; 
    height: 40vw; /* ارتفاع مرن يعتمد على العرض */
    
    background-size: cover;
    background-position: center;
    background-color: #212121; /* لون احتياطي داكن */
    
    position: relative;
    display: flex;
    align-items: flex-end; /* وضع المحتوى في الأسفل */
    padding: 20px;
}

/* 4. طبقة التعتيم/التدرج فوق الصورة */
.header-content-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: white;
}

/* 5. تنسيق العنوان داخل البانر */
.article-title-v3 {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* 6. شريط الميتا (Meta Bar) */
.article-meta-v3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.9rem;
}
.article-meta-v3 .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.article-meta-v3 i {
    color: var(--accent-color);
}
.share-article-btn-v3 {
    margin-right: auto;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.share-article-btn-v3:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

/* 7. محتوى المقالة النصي */
.thread-body-content-v3 {
    padding: 2rem 2.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
}
.thread-body-content-v3 p,
.thread-body-content-v3 ul,
.thread-body-content-v3 ol {
    margin-bottom: 1.5rem;
}

.source-credit-text {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    font-style: italic;
}
.source-credit-text i {
    color: var(--primary-color);
}


/* --- التجاوب مع الهواتف --- */
@media (max-width: 768px) {
    .article-hero-header-v3 {
        max-height: 200px;
        height: 50vw;
        border-radius: 0;
    }
    .article-title-v3 {
        font-size: 1.8rem;
    }
    .thread-body-content-v3 {
        padding: 1.5rem;
    }
    .news-article-final-v3 {
        border-radius: 0;
        margin-top: -1px; /* لإلغاء أي مسافة بينه وبين البانر */
    }
}

/* =============================================== */
/* == Styles for Inline Images within News Content == */
/* =============================================== */

/* استهداف جميع الصور المدرجة داخل محتوى الخبر */
.thread-body-content-v3 img {
    /* 1. الحجم الأقصى: لا تتجاوز عرض الحاوية */
    max-width: 100%;
    /* 2. الارتفاع التلقائي للحفاظ على نسبة الأبعاد */
    height: auto;
    /* 3. تنسيق جمالي */
    display: block; /* لضمان أخذها لسطر كامل */
    margin: 1.5rem auto; /* توسيطها وإعطائها هامش علوي وسفلي */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* تأثير بسيط عند المرور */
.thread-body-content-v3 img:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* لتجنب التداخل مع أيقونات Lightbox (إذا كانت الصور قابلة للتكبير) */
.thread-body-content-v3 img.clickable {
    cursor: zoom-in;
}

/* =============================================== */
/* == NEW: Thread Detail Page Styles (Mobile Focus) == */
/* =============================================== */

/* 1. إزالة الهوامش الكبيرة من الحاوية الرئيسية على الهواتف */
@media (max-width: 768px) {
    .thread-view-container {
        /* الهوامش الجانبية تصبح أصغر على الهاتف */
        padding: 0; 
        margin: 1rem auto; 
    }

    /* 2. البطاقة الرئيسية (Article Card) */
    .news-article-final-v3 {
        /* إزالة الحواف الدائرية لإعطاء شعور بالامتداد على كامل الشاشة */
        border-radius: 0; 
        border-left: none;
        border-right: none;
        box-shadow: none; /* إزالة الظلال الكبيرة */
        
        /* التأكد من أن الهوامش السفلية والعلوية معقولة */
        margin-top: -1px; 
    }

    /* 3. شريط العنوان/البانر (Hero Header) */
    .article-hero-header-v3 {
        /* تحديد ارتفاع مناسب لشاشات الهاتف */
        max-height: 250px;
        height: 50vw; 
        
        /* إزالة الحواف الدائرية لتتناسب مع امتداد البطاقة */
        border-radius: 0;
        padding: 15px; /* تقليل الحشو */
    }

    /* 4. تنسيق العنوان في البانر */
    .article-title-v3 {
        font-size: 1.6rem; /* تصغير حجم الخط ليتناسب مع الشاشة */
        margin-bottom: 5px;
    }

    /* 5. شريط الميتا (Meta Bar) */
    .article-meta-v3 {
        font-size: 0.8rem;
        gap: 0.8rem;
    }
    
    /* 6. زر المشاركة على الهاتف */
    .share-article-btn-v3 {
        padding: 0.5rem 0.8rem !important; /* تصغير حجم الزر */
        font-size: 0.8rem !important;
        /* يمكن دفعه لليمين بشكل واضح */
        margin-right: 0 !important; 
    }

    /* 7. محتوى المقالة النصي */
    .thread-body-content-v3 {
        /* تقليل الحشو الداخلي لزيادة مساحة النص */
        padding: 1rem; 
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* 8. صور داخل المحتوى (لضمان تجاوزها عرض الشاشة بشكل صحيح) */
    .thread-body-content-v3 img {
        margin: 1rem 0;
        border-radius: 0;
    }
}

/* =============================================== */
/* == Styles for Related News Section == */
/* =============================================== */

.related-news-section {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--background-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.related-news-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.related-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.related-news-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.related-news-card .card-icon-wrapper {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--primary-color);
    color: white;
    font-size: 1.2rem;
}

.related-news-card .card-content {
    flex-grow: 1;
}

.related-news-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.related-news-card .card-date {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-top: 0.25rem;
    display: block;
}

/* =============================================== */
/* == NEW: Forum Main View Styles (V3) == */
/* =============================================== */

/* 1. التخطيط الرئيسي: Sidebar + Main Content */
.news-page-layout {
    display: grid;
    /* على الأجهزة الكبيرة: 1 جزء للشريط الجانبي، 3 أجزاء للمحتوى */
    grid-template-columns: minmax(250px, 1fr) 3fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    align-items: flex-start;
}

/* 2. الشريط الجانبي (Sidebar) - للمرشحات */
.news-sidebar {
    position: sticky;
    top: 85px; /* تثبيته أسفل الهيدر */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 3. حاوية القائمة الرئيسية للأخبار */
.news-main-content {
    display: flex;
    flex-direction: column;
}

.news-list-container {
    display: grid;
    /* عرض عمودين للبطاقات بجانب بعضها */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 4. تصميم بطاقة الخبر الجديدة (v2) */
.news-item-card-wrapper {
    position: relative;
    transition: transform 0.3s ease;
}

.news-item-card-v2 {
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--border-color);
    height: 100%; /* لضمان تساوي ارتفاع البطاقات في الشبكة */
}

.news-item-card-v2:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.news-card-cover {
    height: 160px; /* ارتفاع قياسي لصورة الغلاف */
    background-size: cover;
    background-position: center;
    background-color: var(--background-color);
}

.news-card-content-v2 {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-card-date {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    margin-bottom: 0.5rem;
}

.news-card-title {
    font-size: 1.15rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.4;
}

.news-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--subtle-text-color);
    margin-bottom: 1rem;
    flex-grow: 1; /* يدفع شريط الإحصائيات للأسفل */
}

/* ✅ 5. تصميم عداد المشاهدات والقراءة (Stats & Footer) */
.news-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.views-count-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--hover-color);
    padding: 4px 8px;
    border-radius: 15px;
}

.views-count-badge i {
    font-size: 0.9rem;
}

.read-more-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--subtle-text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.news-item-card-v2:hover .read-more-link {
    color: var(--accent-color);
}


/* --- التجاوب مع شاشات الهواتف --- */
@media (max-width: 900px) {
    .news-page-layout {
        grid-template-columns: 1fr; /* جعل الشريط الجانبي والمحتوى في عمود واحد */
    }
    .news-sidebar {
        position: static;
    }
    .news-list-container {
        grid-template-columns: 1fr; /* عمود واحد للبطاقات على الهواتف */
    }
}

/* =============================================== */
/* == NEW: Hide Download Button in Native Mode == */
/* =============================================== */

/* إخفاء أي عنصر يحمل هذا الكلاس بشكل قسري */
.hidden-in-native {
    display: none !important; 
    visibility: hidden !important;
}

/* استهداف أزرار التحميل في صفحات التفاصيل */
.tile-download-btn, #download-video-btn {
    /* للحفاظ على سلاسة الحركة عند إخفائه، نستخدم opacity قبل أن يُخفى */
    transition: opacity 0.3s;
}

/* في ملف style.css أو في وسم <style> بملف index.html */

/* --- 1. التصميم الأساسي للحاوية والأزرار العائمة (FABs) --- */
.fab-container {
    position: fixed;
    bottom: 80px; /* المسافة من الأسفل */
    right: 25px; /* المسافة من اليمين (في وضع RTL) */
    z-index: 900;
    display: flex;
    flex-direction: column-reverse; /* لعرض الخيارات من الأسفل للأعلى */
    align-items: center;
    transition: all 0.3s ease;
}

/* 💡 الأزرار العائمة الفردية (Admin FAB, Telegram FAB, Chatbot Toggler) */
.fab-toggle, .admin-fab, .telegram-fab, .chatbot-toggler {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* تظليل واضح */
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
    margin-top: 10px; /* فاصل بين الأزرار */
}

/* --- 2. تخصيص الألوان والتأثيرات لكل زر --- */

/* الزر الرئيسي (Toggle FAB) */
.fab-toggle {
    background: var(--primary-color); /* اللون الأساسي للمنصة */
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.5);
    z-index: 910;
}
.fab-toggle:hover {
    transform: scale(1.05) rotate(90deg); /* تأثير جميل عند التمرير */
}
.fab-toggle.active {
    transform: rotate(135deg); /* تحويل علامة + إلى X */
}

/* زر المشرف (Admin FAB) */
#admin-add-material-fab {
    background-color: #38C172; /* لون أخضر للمحتوى الجديد */
}
#admin-add-material-fab:hover {
    box-shadow: 0 4px 10px rgba(56, 193, 114, 0.6);
}

/* زر التليجرام (Video/GIF FAB) */
.telegram-fab {
    background: none; /* إزالة الخلفية العادية ليتناسب مع الفيديو */
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.telegram-fab video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* زر الشات بوت (Chatbot Toggler) */
.chatbot-toggler {
    background-color: #6D28D9; /* لون مميز للذكاء الاصطناعي */
}

/* --- 3. تصميم الخيارات المنبثقة (Options) --- */


/* تنسيقات شاشة تحميل الفيديو الاحترافية */
.video-loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #ccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.video-loader .spinner {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.video-loader p {
    margin-top: 15px;
    font-size: 1rem;
    letter-spacing: 1px;
    opacity: 0.8;
}

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

/* تنسيق جديد لجعل القائمة "مشغولة" أثناء التحميل */
.playlist-scroll-area.playlist-loading {
    opacity: 0.6;
    pointer-events: none; /* يمنع أي نقرات أخرى */
    cursor: wait; /* يغير شكل المؤشر إلى مؤشر الانتظار */
}

/* ملاحظة هامة: تأكد من وجود هذا التنسيق للحاوية الرئيسية */
.video-embed-container {
    position: relative;
}

.custom-end-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.custom-end-screen:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.custom-end-screen.hidden {
    display: flex; /* نبقيها flex لتجنب "القفزة" عند الإظهار */
}

.end-screen-content, .playlist-finished-message {
    color: white;
}

.next-video-info {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: right;
}

#next-video-thumbnail {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 4px;
}

#next-video-title {
    margin: 0;
    font-size: 1rem;
}

.end-screen-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.playlist-finished-message h3 {
    margin-bottom: 20px;
}


/* تنسيقات القائمة المنسدلة (Accordion) */
.playlist-section-accordion .accordion-header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    padding: 12px 15px;
    text-align: right;
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    margin-top: 5px;
}

.playlist-section-accordion .accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.playlist-section-accordion .accordion-icon {
    transition: transform 0.3s ease;
}

.playlist-section-accordion.active .accordion-icon {
    transform: rotate(180deg);
}

.playlist-section-accordion .accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0 10px; /* لإضافة مساحة داخلية عند الفتح */
}

.playlist-section-accordion.active .accordion-panel {
    /* قيمة كبيرة لتتسع لجميع الفيديوهات، يمكنك زيادتها إذا لزم الأمر */
    max-height: 1000px; 
    padding: 10px;
}

/* =============================================== */
/* == REDESIGN V2: Modern Floating Action Buttons == */
/* =============================================== */

/* --- 1. التصميم الأساسي الموحد لجميع الأزرار العائمة --- */
.fab-container, .telegram-fab, .chatbot-toggler, .admin-fab {
    position: fixed;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 998;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s;
    
    /* أنيميشن الدخول عند تحميل الصفحة */
    opacity: 0;
    transform: scale(0.8);
    animation: fab-enter-animation 0.5s ease-out forwards;
}

/* --- 2. تحديد مواضع الأزرار --- */
/* أزرار الإجراءات على اليسار */
.telegram-fab {
    bottom: 25px;
    left: 25px;
    animation-delay: 0.2s; /* تأخير الأنيميشن لتأثير متتابع */
}

.chatbot-toggler {
    bottom: 95px; /* 25px (bottom) + 56px (height) + 14px (gap) */
    left: 25px;
    animation-delay: 0.1s;
}

#admin-add-material-fab.admin-fab {
    bottom: 165px; /* فوق زر المساعد الذكي */
    left: 25px;
    animation-delay: 0s;
}

/* زر القائمة الرئيسي على اليمين */



.telegram-fab {
    background-color: var(--surface-color);
    padding: 0;
    overflow: hidden;
}

.telegram-fab video {
    width: 100%; height: 100%; object-fit: cover;
}

.chatbot-toggler {
    background: linear-gradient(45deg, #00BFA6, var(--accent-color));
    color: white;
}

#admin-add-material-fab.admin-fab {
    background-color: #38C172; /* لون أخضر للإشارة للإضافة */
    color: white;
}

/* --- 4. تأثيرات التحويم والتلميحات (Tooltips) --- */
.telegram-fab:hover, .chatbot-toggler:hover, .admin-fab:hover, .fab-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* تصميم التلميح الذي يظهر عند التحويم */
.telegram-fab::before, .chatbot-toggler::before, .admin-fab::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 70px; /* تحديد مكان ظهور التلميح على يمين الزر */
    top: 50%;
    transform: translateY(-50%);
    background-color: #2c2c2e;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.telegram-fab:hover::before, .chatbot-toggler:hover::before, .admin-fab:hover::before {
    opacity: 1;
}

/* --- 5. إعادة تصميم خيارات القائمة الرئيسية --- */
.fab-container .fab-options {
    position: absolute;
    bottom: 120%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.fab-container.active .fab-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-container .fab-option {
    width: 48px;
    height: 48px;
    background-color: var(--surface-color);
    color: var(--secondary-color);
    box-shadow: var(--shadow-md);
    position: relative;
    opacity: 1;
    transform: none;
    visibility: visible;
}

.fab-option:hover {
    background-color: var(--secondary-color);
    color: #fff;
    transform: scale(1.1);
}

/* --- 6. تعريف حركة الأنيميشن --- */
@keyframes fab-enter-animation {
    to {
        opacity: 1;
        transform: scale(1);
    }
}




/* =============================================== */
/* == NEW: Unified Floating Action Buttons (FABs) == */
/* =============================================== */

/* --- 1. التصميم الأساسي الموحد لجميع الأزرار --- */
.page-fab {
    position: fixed;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    z-index: 998;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s;

    /* أنيميشن الدخول عند تحميل الصفحة */
    opacity: 0;
    transform: scale(0.8);
    animation: fab-enter-animation 0.5s ease-out forwards;
}

/* --- 2. تحديد مواضع الأزرار --- */
/* الزر الرئيسي (القائمة) على اليمين */
.fab-container {
    right: 25px;
    bottom: 25px;
    animation-delay: 0.3s;
}

/* الأزرار الأخرى مكدسة على اليسار */
.telegram-fab {
    left: 25px;
    bottom: 25px;
    animation-delay: 0.2s;
}

.chatbot-toggler {
    left: 25px;
    bottom: 95px; /* 25px (bottom) + 56px (height) + 14px (gap) */
    animation-delay: 0.1s;
}

#admin-add-material-fab.admin-fab {
    left: 25px;
    bottom: 165px; /* فوق زر المساعد الذكي */
    animation-delay: 0s;
}

/* --- 3. تخصيص تصميم كل زر --- */
.fab-toggle {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

.telegram-fab {
    background-color: var(--surface-color);
    padding: 0;
    overflow: hidden;
}
.telegram-fab video {
    width: 100%; height: 100%; object-fit: cover;
}

.chatbot-toggler {
    background: linear-gradient(45deg, #00BFA6, var(--accent-color));
}

#admin-add-material-fab.admin-fab {
    background-color: #38C172; /* لون أخضر للإشارة للإضافة */
}

/* --- 4. تأثيرات التحويم والتلميحات (Tooltips) --- */
.page-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.fab-toggle.active {
    transform: rotate(135deg);
}

/* --- 5. تصميم خيارات القائمة المنبثقة --- */
.fab-options {
    position: absolute;
    bottom: 120%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

.fab-container.active .fab-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.fab-option {
    width: 48px;
    height: 48px;
    background-color: var(--surface-color);
    color: var(--secondary-color);
    box-shadow: var(--shadow-md);
    position: relative;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.fab-option:hover {
    background-color: var(--secondary-color);
    color: #fff;
    transform: scale(1.1);
}

/* Tooltip styling */
.fab-option[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.9rem;
}

/* --- 6. تعريف حركة الدخول --- */
@keyframes fab-enter-animation {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =============================================== */
/* ==  Admin FAB Visibility Control             == */
/* =============================================== */

/* 1. إخفاء الزر بشكل افتراضي */
#admin-add-material-fab.admin-fab {
    display: none; /* إخفاء الزر بالكامل */
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2. إظهار الزر فقط عند إضافة كلاس .visible له عبر جافاسكريبت */
#admin-add-material-fab.admin-fab.visible {
    display: grid; /* إعادة إظهاره */
    opacity: 1;
    transform: scale(1);
}




/* =============================================== */
/* ==   NEW: Quiz Results Page Redesign (V3)    == */
/* =============================================== */

/* 1. الحاوية الرئيسية للصفحة (للتوسيط المثالي) */
.quiz-results-page-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80vh; /* تأخذ معظم ارتفاع الشاشة */
    padding: 1rem;
    box-sizing: border-box;
}

/* 2. البطاقة الرئيسية للنتائج */
.results-card-v3 {
    width: 100%;
    max-width: 420px;
    background-color: var(--surface-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: center;
    animation: zoomIn 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. الجزء العلوي الملون من البطاقة */
.results-summary-v3 {
    padding: 2.5rem 1.5rem;
    color: white;
}
.results-summary-v3.success {
    background: linear-gradient(135deg, #28a745, #228B22);
}
.results-summary-v3.failure {
    background: linear-gradient(135deg, #dc3545, #b22222);
}

/* 4. أيقونة النتيجة (الكأس أو إعادة المحاولة) */
.summary-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background-color: rgba(255, 255, 255, 0.15);
    display: grid;
    place-items: center;
    font-size: 1.8rem;
}

.summary-title {
    font-size: 1.8rem;
    margin: 0;
    font-weight: 700;
}

.summary-subtitle {
    font-size: 1rem;
    opacity: 0.8;
    margin: 0.25rem 0 1rem 0;
}

/* 5. النتيجة النهائية (النسبة المئوية) */
.final-score-v3 {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
}
.final-score-v3 span {
    font-size: 1.5rem;
    opacity: 0.8;
}

.summary-details {
    margin: 1rem 0 0 0;
    font-size: 1rem;
}

/* 6. الجزء السفلي (الأزرار) */
.results-actions-v3 {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--background-color);
}

.results-actions-v3 .btn {
    flex: 1; /* لجعل الزرين بنفس العرض */
    justify-content: center;
    padding: 0.8rem;
    font-size: 1rem;
}

.results-actions-v3 .btn-secondary {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.results-actions-v3 .btn-secondary:hover {
    background-color: var(--hover-color);
}

/* أنيميشن بسيط لظهور البطاقة */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =============================================== */
/* ==   NEW: Elegant Quiz Page Design (V3)      == */
/* =============================================== */

/* 1. الحاوية الرئيسية للصفحة */
.quiz-page-v3 {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    min-height: 85vh; /* لضمان أن الزر السفلي يظهر في الأسفل */
}

/* 2. رأس الاختبار (شريط التقدم والمعلومات) */
.quiz-header-v3 {
    margin-bottom: 2rem;
    flex-shrink: 0;
}

.quiz-header-info-v3 {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    margin-bottom: 0.75rem;
    padding: 0 5px;
}

.quiz-progress-bar-container-v3 {
    width: 100%;
    height: 10px;
    background-color: var(--background-color);
    border-radius: 5px;
    overflow: hidden;
}

.quiz-progress-bar-v3 {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

/* 3. جسم الاختبار (السؤال والإجابات) */
.quiz-body-v3 {
    flex-grow: 1; /* لجعل هذا الجزء يملأ المساحة المتاحة */
}

.quiz-question-text-v3 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: var(--text-color);
}

/* 4. خيارات الإجابة (الأهم لتحسين تجربة الهاتف) */
.quiz-options-v3 {
    display: grid;
    gap: 1rem;
}

.quiz-option-v3 input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.option-content-v3 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--surface-color);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-sm);
}

.option-letter-v3 {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-weight: 700;
    color: var(--subtle-text-color);
    transition: all 0.2s ease-in-out;
}

.option-content-v3 p {
    margin: 0;
    font-weight: 600;
    color: var(--text-color);
}

/* تأثيرات عند الاختيار والتحويم */
.quiz-option-v3:hover .option-content-v3 {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.quiz-option-v3 input[type="radio"]:checked + .option-content-v3 {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
}

.quiz-option-v3 input[type="radio"]:checked + .option-content-v3 .option-letter-v3 {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 5. الجزء السفلي (زر التأكيد) */
.quiz-footer-v3 {
    padding-top: 2rem;
    text-align: center;
    flex-shrink: 0;
}

#next-question-btn {
    width: 100%;
    max-width: 450px;
}

/* ======================================================= */
/* === ✅ FINAL FIX V2: Playlist Viewer Mobile Align === */
/* ======================================================= */

/* سيتم تطبيق هذا الكود فقط على شاشات الهاتف والأجهزة اللوحية */
@media (max-width: 1024px) {

    /* 1. إزالة أي هوامش داخلية من الحاوية الرئيسية للصفحة */
    .playlist-viewer-layout-yt {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%; 
        box-sizing: border-box;
    }

    /* 2. ضمان أن عمود الفيديو يأخذ العرض الكامل بدون هوامش إضافية */
    .player-column {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
    }
}
/* =============================================== */
/* ==   NEW: Homepage Gateway Cards Design      == */
/* =============================================== */

.quick-access-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودان على الشاشات الكبيرة */
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.gateway-card-v2 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gateway-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.gateway-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background-color: rgba(var(--primary-rgb), 0.1);
    border-radius: 50%;
    font-size: 1.8rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.gateway-card-v2:hover .gateway-icon {
    background-color: var(--primary-color);
    color: white;
    transform: rotate(10deg);
}

.gateway-text {
    flex-grow: 1;
}

.gateway-text h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
}

.gateway-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    line-height: 1.6;
}

.gateway-arrow {
    font-size: 1.5rem;
    color: var(--subtle-text-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.gateway-card-v2:hover .gateway-arrow {
    transform: translateX(-5px); /* تحريك السهم لليسار في RTL */
    color: var(--primary-color);
}

/* تعديل التصميم للشاشات الصغيرة (الهواتف) */
@media (max-width: 768px) {
    .quick-access-grid-v2 {
        grid-template-columns: 1fr; /* عمود واحد فقط على الهواتف */
    }
}

/* =============================================== */
/* ==   Styles for Hiding Floating Buttons      == */
/* =============================================== */

.page-fab {
    /* تعديل بسيط على القاعدة الحالية لإضافة تأثيرات الشفافية */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s, opacity 0.3s ease-out;
}

.page-fab.fab-hidden {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none; /* لمنع النقر على الأزرار وهي مخفية */
}

/* =============================================== */
/* ==   NEW: Playlist Skeleton Loader Styles    == */
/* =============================================== */

/* 1. تصميم بطاقة الهيكل العظمي */
.playlist-card-skeleton {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* 2. العنصر الوهمي العام (الذي سيحمل الحركة) */
.skeleton {
    background-color: var(--background-color);
    position: relative;
    overflow: hidden;
}

/* 3. إنشاء حركة التوهج اللامعة (Shimmer Effect) */
.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* يبدأ من خارج العنصر */
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08), /* لون التوهج في الوضع الداكن */
        transparent
    );
    /* تطبيق الأنيميشن */
    animation: shimmer-animation 1.5s infinite;
}

body:not(.dark-mode) .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.04), /* لون التوهج في الوضع الفاتح */
        transparent
    );
}

/* 4. تحديد أبعاد الأجزاء الوهمية */
.skeleton-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.skeleton-info {
    padding: 1rem 1.25rem;
}

.skeleton-text {
    height: 20px;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.skeleton-text.short {
    width: 60%; /* جعل السطر الثاني أقصر */
    margin-bottom: 0;
}

/* 5. تعريف حركة الأنيميشن */
@keyframes shimmer-animation {
    100% {
        left: 150%; /* يتحرك إلى نهاية العنصر */
    }
}

/* =============================================== */
/* ==   🎨 ELEGANT Announcement Modal (V4)      == */
/* =============================================== */

/* 1. تصميم النافذة الرئيسي */
.modal-sleek-announce {
    position: relative;
    max-width: 550px;
    text-align: center;
    padding: 0; /* سنقسم المحتوى داخليًا لتثبيت الرأس والأزرار */
    color: #f0f0f0;
    background: radial-gradient(circle at 50% 0%, #4a5494, #1e1e2e 70%);
    border: 1px solid #5a64a7;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 15px rgba(187, 134, 252, 0.1);
    animation: fadeInUp 0.6s ease-out forwards;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* لا تتجاوز الشاشة */
    overflow: hidden; /* لمنع خروج العناصر الثابتة */
}

/* الوضع الفاتح */
body:not(.dark-mode) .modal-sleek-announce {
    background: linear-gradient(145deg, #fdfdff, #e6e9f5);
    border-color: #d1d9e6;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 🔹 محتوى قابل للتمرير فقط */
.modal-scrollable-content {
    overflow-y: auto;
    padding: 3rem 2.5rem 1rem;
    flex: 1; /* الجزء الأوسط القابل للتمرير */
    scrollbar-width: thin;
    scrollbar-color: rgba(187, 134, 252, 0.5) rgba(0, 0, 0, 0.2);
}
.modal-scrollable-content::-webkit-scrollbar {
    width: 8px;
}
.modal-scrollable-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.modal-scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(187, 134, 252, 0.6);
    border-radius: 8px;
    transition: background 0.3s ease;
}
.modal-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: rgba(187, 134, 252, 0.9);
}
body:not(.dark-mode) .modal-scrollable-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}
body:not(.dark-mode) .modal-scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(90, 100, 167, 0.4);
}
body:not(.dark-mode) .modal-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 100, 167, 0.6);
}

/* أيقونة */
.announce-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 15px rgba(187, 134, 252, 0.8);
    animation: float-animation 3s infinite ease-in-out;
}

/* العنوان */
.announce-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #fff;
}
body:not(.dark-mode) .announce-title {
    color: #1a1a1a;
}

/* النص التوضيحي */
.announce-subtitle {
    font-size: 1.05rem;
    color: #d1d9e6;
    margin-bottom: 2rem;
    line-height: 1.7;
}
body:not(.dark-mode) .announce-subtitle {
    color: #555;
}

/* 🔹 الرابط الجديد */
.announce-new-link {
    background: rgba(0,0,0,0.25);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin: 1.5rem 0 2.5rem 0;
    font-family: monospace;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body:not(.dark-mode) .announce-new-link {
    background: rgba(0,0,0,0.05);
    border-color: #ddd;
}
.announce-new-link a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: bold;
}

/* 🔸 الرابط القديم */
.announce-old-link {
    background: rgba(255, 255, 255, 0.07);
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-family: monospace;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.8;
    transition: all 0.3s ease;
}
.announce-old-link:hover {
    opacity: 1;
    transform: scale(1.02);
    box-shadow: 0 0 10px rgba(187, 134, 252, 0.2);
}
.announce-old-link strong {
    color: #c8c8d0;
    display: block;
    margin-bottom: 0.3rem;
}
.announce-old-link a {
    color: #a5b0ff;
    text-decoration: none;
    font-weight: bold;
}
.announce-old-link a:hover {
    text-decoration: underline;
    color: #c3c9ff;
}
body:not(.dark-mode) .announce-old-link {
    background: rgba(0, 0, 0, 0.04);
    border-color: #ddd;
    color: #444;
    opacity: 0.9;
}
body:not(.dark-mode) .announce-old-link a {
    color: #4b56a1;
}
body:not(.dark-mode) .announce-old-link a:hover {
    color: #303a82;
}

/* الأزرار */
.announce-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 2rem;
    background: rgba(0, 0, 0, 0.15);
}
.announce-actions .btn-primary {
    background: var(--accent-color);
    color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}
.announce-actions .btn-secondary {
    background: none;
    border: none;
    color: #999;
    text-decoration: underline;
    box-shadow: none;
}
body:not(.dark-mode) .announce-actions .btn-secondary {
    color: #777;
}
.announce-actions .btn-secondary:hover {
    background: rgba(0,0,0,0.1);
}

/* زر الإغلاق */
.sleek-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.sleek-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}
body:not(.dark-mode) .sleek-close-btn {
    background-color: rgba(0, 0, 0, 0.05);
    color: #555;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* الحركات */
@keyframes float-animation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* =============================================== */
/* ==   ✨ V5: Elegant & Minimal Audio Player   == */
/* =============================================== */

/* 1. الحاوية الرئيسية للمشغل */
.audio-player-v5 {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--surface-color);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}

.audio-player-v5:hover {
    box-shadow: var(--shadow-md);
}

/* 2. زر التشغيل/الإيقاف الدائري */
.player-button-v5 {
    flex-shrink: 0; /* منع الزر من التقلص */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

.player-button-v5:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.4);
}

/* 3. الحاوية الرئيسية للمعلومات وشريط التقدم */
.player-main-v5 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0; /* مهم لمنع العناصر الداخلية من تجاوز الحاوية */
}

/* 4. معلومات المقطع الصوتي (العنوان والشارة) */
.player-info-v5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.player-title-v5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* قص النص الطويل وإضافة "..." */
}

/* 5. تصميم جديد ومميز لشارة الذكاء الاصطناعي */
.ai-badge-v5 {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0; /* منع الشارة من التقلص */
}

/* 6. حاوية شريط التقدم والوقت */
.player-timeline-v5 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-current-v5,
.time-total-v5 {
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--subtle-text-color);
}

.progress-container-v5 {
    flex-grow: 1;
    height: 5px;
    background-color: var(--background-color);
    border-radius: 2.5px;
    cursor: pointer;
    position: relative;
}

.progress-bar-v5 {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 2.5px;
}

/* 7. إخفاء مشغل الصوت الأصلي */
.audio-player-v5 audio {
    display: none;
}

/* 8. تصميم متجاوب للهواتف الصغيرة */
@media (max-width: 480px) {
    .player-title-v5 {
        font-size: 1rem; /* تصغير حجم الخط قليلًا */
    }
    /* إخفاء المدة الإجمالية لتوفير مساحة */
    .time-total-v5 {
        display: none;
    }
}


/* =============================================== */
/* ==   ✨ PREMIUM Search Dropdown Styles       == */
/* =============================================== */

/* 1. تحسين الحاوية الرئيسية للقائمة */
#search-results-panel-v2 {
    padding-top: 0; /* إزالة الحشوة العلوية القديمة */
    border-radius: 12px; /* حواف أكثر استدارة */
    max-height: 70vh; /* زيادة الارتفاع الأقصى */
}

/* 2. تصميم رأس كل مجموعة (مواد، أخبار.. الخ) */
.search-group-header {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--subtle-text-color);
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    position: sticky; /* تثبيت الرأس عند التمرير */
    top: 0;
    z-index: 1;
}

/* 3. تحسين تصميم كل عنصر نتيجة */
.search-result-item {
    padding: 0.8rem 1rem;
    gap: 1rem;
}

.search-result-item:hover {
    background-color: var(--hover-color);
    /* تحريك بسيط للأمام عند التمرير */
    transform: translateX(-5px); 
}

/* 4. إبراز النص المتطابق */
.result-name strong {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.1);
    padding: 2px 0;
    border-radius: 3px;
}

/* 5. تصميم الجزء السفلي (زر عرض الكل) */
.search-dropdown-footer {
    padding: 0.75rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
    position: sticky; /* تثبيت الجزء السفلي */
    bottom: 0;
    background-color: var(--surface-color);
    z-index: 1;
}

.search-dropdown-footer a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.search-dropdown-footer a:hover {
    background-color: var(--hover-color);
}


/* =============================================== */
/* ==   ✨ Styles for Locked Search Results     == */
/* =============================================== */

/* 1. جعل العنصر المقفل يبدو معطلاً */
.search-result-item.is-locked {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 2. تغيير لون أيقونة القفل إلى الأحمر */
.search-result-item.is-locked .search-result-icon i {
    color: var(--danger-color);
}

/* 3. إزالة تأثير التحويم من على العنصر المقفل */
.search-result-item.is-locked:hover {
    background-color: var(--surface-color);
    transform: none;
}

/* 4. تصميم شارة "غير متاح حالياً" */
.accessibility-badge.locked {
    color: var(--danger-color);
    background-color: rgba(var(--danger-rgb), 0.1);
    border: 1px solid rgba(var(--danger-rgb), 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 0.5rem; /* في RTL، هذا يعادل margin-left */
}

/* =============================================== */
/* ==   ✨ Styles for Search Keyboard Navigation == */
/* =============================================== */

.search-result-item.active {
    background-color: var(--primary-color);
    color: white;
}

.search-result-item.active .result-name,
.search-result-item.active .result-details,
.search-result-item.active .search-result-icon i {
    color: white;
}

.search-result-item.active .result-name strong {
    background-color: rgba(255, 255, 255, 0.2);
}
/* =============================================== */
/* ==   ✨ IMPROVEMENT: Search Hover Effect     == */
/* =============================================== */

/* 1. تعريف متغيرات لون التحويم للوضع الفاتح والداكن */
:root {
    --hover-color: #f0f2f5; /* لون رمادي فاتح جدًا للوضع النهاري */
}

body.dark-mode {
    --hover-color: #2c2c2e; /* لون رمادي أغمق قليلاً للوضع الليلي */
}

/* 2. إضافة انتقال سلس لعنصر النتيجة */
.search-result-item {
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* 3. تطبيق لون الخلفية الجديد وتأثير بسيط عند مرور الماوس */
.search-result-item:hover {
    background-color: var(--hover-color);
    transform: translateX(5px); /* تحريك بسيط لليمين لمزيد من التفاعل */
}

/* 4. تغيير لون النص المحدد عند التحويم ليظل واضحًا */
.search-result-item.active,
.search-result-item.active:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateX(5px);
}

/* =============================================== */
/* ==   ✨ IMPROVEMENT: Scrollable Audio List  == */
/* =============================================== */

.audio-files-list {
    /* 1. تحديد أقصى ارتفاع للحاوية (ما يعادل 3 عناصر تقريبًا) */
    max-height: 380px;
    
    /* 2. تفعيل شريط التمرير العمودي فقط عند الحاجة */
    overflow-y: auto;
    
    /* 3. إضافة مسافة على اليمين لإبعاد المحتوى عن شريط التمرير */
    padding-right: 10px;
}

/* =============================================== */
/* ==   ✨ Styles for New Audio Share Button    == */
/* =============================================== */

/* تعديل بسيط على الحاوية الرئيسية لإفساح المجال للزر الجديد */
.audio-player-v5 {
    gap: 1.25rem;
}

/* تصميم زر المشاركة الجديد */
.share-audio-btn-v5 {
    flex-shrink: 0; /* منع الزر من التقلص */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--subtle-text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.share-audio-btn-v5:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* =============================================== */
/* ==   ✅ FIX: Responsive Audio Player Titles  == */
/* =============================================== */

@media (max-width: 480px) {
    /* 1. تغيير تخطيط حاوية المعلومات إلى عمودي */
    .player-info-v5 {
        flex-direction: column; /* جعل العناصر مكدسة فوق بعضها */
        align-items: flex-start; /* محاذاة كل العناصر لليمين */
        gap: 0.5rem; /* تقليل المسافة بين العنوان والشارة */
    }

    /* 2. السماح للعنوان بالالتفاف إلى سطر جديد */
    .player-title-v5 {
        white-space: normal; /* <-- هذا هو السطر الأهم */
        overflow: visible;
        text-overflow: clip;
    }
}

/* New Shared Audio Player System (v7) */
.shared-player-container-v7 {
    background-color: var(--secondary-bg-color);
    border-radius: 8px;
    overflow: hidden;
    margin: 15px 0;
}

/* 1. Shared Player Bar */
.shared-player-v7 {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    background-color: rgba(0, 0, 0, 0.2);
}

.shared-player-v7 .player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.shared-player-v7 .player-info i {
    color: var(--subtle-text-color);
}

.shared-player-v7 .player-current-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-player-v7 .player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.shared-player-v7 .player-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.2s ease;
}
.shared-player-v7 .player-btn:hover {
    color: var(--primary-color);
}
.shared-player-v7 .play-pause-btn {
    font-size: 2rem;
}

.shared-player-v7 .player-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shared-player-v7 .current-time,
.shared-player-v7 .total-time {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

.shared-player-v7 .progress-container {
    flex-grow: 1; height: 5px; background-color: rgba(255,255,255,0.2); border-radius: 5px; cursor: pointer; direction: ltr;
}
.shared-player-v7 .progress-bar {
    width: 0; height: 100%; background-color: #fff; border-radius: 5px; position: relative;
}
.shared-player-v7 .progress-thumb {
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: #fff; border-radius: 50%;
}


/* 2. Playlist Tracks */
.audio-playlist-v7 {
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
}

.playlist-track-v7 {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.playlist-track-v7:hover {
    background-color: var(--hover-bg-color);
}

.playlist-track-v7 .track-status-icon {
    width: 20px;
    text-align: center;
    color: var(--subtle-text-color);
    position: relative;
}
.playlist-track-v7 .track-status-icon .track-number { display: block; }
.playlist-track-v7 .track-status-icon i { display: none; }

.playlist-track-v7:hover .track-status-icon .track-number { display: none; }
.playlist-track-v7:hover .track-status-icon i { display: block; }

.playlist-track-v7 .track-info {
    flex-grow: 1;
    min-width: 0;
}
.playlist-track-v7 .track-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-track-v7 .track-duration {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
}

/* Active/Playing Track */
.playlist-track-v7.is-playing {
    background-color: var(--primary-color-translucent);
    color: var(--primary-color);
}
.playlist-track-v7.is-playing .track-title,
.playlist-track-v7.is-playing .track-duration {
    color: var(--primary-color);
}
.playlist-track-v7.is-playing .track-status-icon .track-number { display: none; }
.playlist-track-v7.is-playing .track-status-icon i { 
    display: block;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23bb86fc'%3E%3Cpath d='M6 7l-3 2v6l3 2v-10zm1 0v10l9-5-9-5zm11.029 1.483l-3.029 1.817 3.029 1.714v-3.531zm-3.029 5.714l3.029 1.714v-3.531l-3.029 1.817z'/%3E%3C/svg%3E");
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .shared-player-v7 {
        grid-template-columns: 1fr;
        padding-bottom: 5px;
    }
    .shared-player-v7 .player-timeline {
        order: 1; /* Move timeline to the top */
        width: 100%;
    }
    .shared-player-v7 .player-info {
        order: 2; /* Move info below */
        justify-content: center;
        margin-top: 10px;
    }
    .shared-player-v7 .player-controls {
        order: 3; /* Move controls to the bottom */
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

/* ============================================= */
/* == New Audio Player Design (Glassmorphism) == */
/* ============================================= */

/* 1. Main Container (The "Glass" Effect) */
.shared-player-container-v7 {
    background: rgba(45, 45, 60, 0.5); /* لون زجاجي شبه شفاف */
    backdrop-filter: blur(12px); /* التأثير الضبابي للزجاج */
    -webkit-backdrop-filter: blur(12px); /* لدعم متصفح Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 15px 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 2. The Player Bar Itself */
.shared-player-v7 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
}

.shared-player-v7 .player-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shared-player-v7 .player-info {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    flex-grow: 1;
}

.shared-player-v7 .player-info i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.shared-player-v7 .player-current-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shared-player-v7 .player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.shared-player-v7 .player-btn {
    background: none;
    border: none;
    color: var(--subtle-text-color);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.shared-player-v7 .player-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.shared-player-v7 .play-pause-btn {
    font-size: 1.5rem; /* حجم أيقونة التشغيل */
    color: #000;
    background-color: #fff;
    width: 50px;
    height: 50px;
}
.shared-player-v7 .play-pause-btn:hover {
    transform: scale(1.05);
    color: #000;
}

.shared-player-v7 .player-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.shared-player-v7 .current-time,
.shared-player-v7 .total-time {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    width: 40px;
    text-align: center;
}

.shared-player-v7 .progress-container {
    flex-grow: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.shared-player-v7 .progress-bar {
    width: 0;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.shared-player-v7 .progress-thumb {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: -7px;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.shared-player-v7 .progress-container:hover .progress-thumb {
    transform: scale(1);
}
.shared-player-v7 .progress-bar:not([style*="width: 0%"]) .progress-thumb {
    transform: scale(1);
}

/* 3. Playlist Tracks */
.audio-playlist-v7 {
    max-height: 280px;
    overflow-y: auto;
    padding: 0 10px 10px 10px; /* Padding for scrollbar and spacing */
}

/* Custom Scrollbar for the playlist */
.audio-playlist-v7::-webkit-scrollbar {
  width: 6px;
}
.audio-playlist-v7::-webkit-scrollbar-track {
  background: transparent;
}
.audio-playlist-v7::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
.audio-playlist-v7::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.playlist-track-v7 {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 12px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease;
}

.playlist-track-v7:last-child {
    border-bottom: none;
}

.playlist-track-v7:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.playlist-track-v7 .track-status-icon {
    font-size: 0.8rem;
    color: var(--subtle-text-color);
    text-align: center;
    position: relative;
}

.playlist-track-v7 .track-status-icon .track-number { display: block; }
.playlist-track-v7 .track-status-icon i { display: none; font-size: 0.9rem; }

.playlist-track-v7:hover .track-status-icon .track-number { display: none; }
.playlist-track-v7:hover .track-status-icon i { display: block; }

.playlist-track-v7 .track-info {
    min-width: 0;
}

.playlist-track-v7 .track-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.playlist-track-v7 .track-duration {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    font-variant-numeric: tabular-nums;
}

/* 4. Active/Playing Track Style */
.playlist-track-v7.is-playing {
    background-color: var(--primary-color-translucent);
}

.playlist-track-v7.is-playing .track-title {
    color: var(--primary-color);
    font-weight: 600;
}

.playlist-track-v7.is-playing .track-status-icon .track-number {
    display: none;
}

.playlist-track-v7.is-playing .track-status-icon i { 
    display: block;
    color: var(--primary-color);
    /* Animated sound bars icon */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%23bb86fc'%3E%3Crect x='4' y='8' width='4' height='12' rx='2'%3E%3Canimate attributeName='height' values='12;4;12' begin='0s' dur='1.2s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='8;16;8' begin='0s' dur='1.2s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='10' y='4' width='4' height='16' rx='2'%3E%3Canimate attributeName='height' values='16;4;16' begin='0.2s' dur='1.2s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='4;16;4' begin='0.2s' dur='1.2s' repeatCount='indefinite' /%3E%3C/rect%3E%3Crect x='16' y='10' width='4' height='10' rx='2'%3E%3Canimate attributeName='height' values='10;4;10' begin='0.4s' dur='1.2s' repeatCount='indefinite' /%3E%3Canimate attributeName='y' values='10;16;10' begin='0.4s' dur='1.2s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/svg%3E");
}


/* 5. Responsive adjustments for the accordion header itself */
.accordion-header {
    background-color: rgba(45, 45, 60, 0.7) !important;
}

.accordion-panel {
    padding: 0 !important;
    background-color: transparent !important;
}

.audio-chapter-accordion {
    border: none;
    background-color: transparent;
}

/* --- Updated Timeline CSS --- */
.shared-player-v7 .player-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.shared-player-v7 .progress-container {
    position: relative; /* مهم جداً لوضع الدائرة */
    flex-grow: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
}

.shared-player-v7 .progress-bar {
    width: 0;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;
    position: absolute; /* يوضع فوق الخلفية */
    top: 0;
    left: 0;
}

.shared-player-v7 .progress-thumb {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0; /* يبدأ من اليسار وسيتم تحريكه بواسطة JS */
    transform: translate(-50%, -50%); /* يضمن توسيط الدائرة على الخط */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.shared-player-v7 .progress-container:hover .progress-thumb {
    opacity: 1; /* إظهار الدائرة عند مرور الماوس */
}

.shared-player-v7 .progress-bar:not([style*="width: 0%"]) + .progress-thumb {
    opacity: 1; /* إظهار الدائرة دائماً إذا كان المشغل يعمل */
}
/* --- New CSS for Interactive Visualizer --- */

/* 1. Make the player a positioning container */
.shared-player-v7 {
    position: relative; /* VERY IMPORTANT for the canvas */
    overflow: hidden;   /* Keeps the visualizer inside the rounded corners */
}

/* 2. Style the canvas itself */
.audio-visualizer-v7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place it in the background */
    pointer-events: none; /* Make it unclickable so buttons above work */
    opacity: 0.6; /* Make it a bit subtle */
}

/* 3. Ensure all other player content is on top of the canvas */
.shared-player-v7 .player-info,
.shared-player-v7 .player-controls,
.shared-player-v7 .player-timeline {
    position: relative;
    z-index: 1;
}

/* --- New CSS For Player Loading State --- */

.player-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 40, 0.7);
    z-index: 10;
    display: none; /* مخفي بشكل افتراضي */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

/* Spinner Animation */
.player-loader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* When the player is loading */
.shared-player-v7.is-loading .player-loader {
    display: flex; /* إظهار مؤشر التحميل */
}

.shared-player-v7.is-loading .player-info,
.shared-player-v7.is-loading .player-controls,
.shared-player-v7.is-loading .player-timeline {
    opacity: 0.4; /* جعل بقية العناصر باهتة */
    pointer-events: none; /* منع الضغط عليها أثناء التحميل */
}

/* --- Outdated Badge for Search Results --- */
.outdated-badge-search {
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(255, 193, 7, 0.2); /* لون أصفر شفاف */
    color: #ffc107; /* لون أصفر */
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 8px; /* مسافة عن العنوان */
    vertical-align: middle; /* لمحاذاة الشارة مع النص */
}

.outdated-badge-search i {
    margin-left: 4px;
}

/* --- Deployment Status Indicator CSS --- */
.status-indicator {
    display: none; /* Hidden by default */
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 6px;
    margin-top: 15px;
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.status-indicator .status-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d; /* Default gray color */
    flex-shrink: 0;
}

.status-indicator .status-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text-color);
}

/* Building State */
.status-indicator.building .status-light {
    background-color: #f1c40f; /* Yellow */
    animation: pulse 1.5s infinite;
}

/* Ready State (Green Light) */
.status-indicator.ready .status-light {
    background-color: var(--success-color); /* Green */
    box-shadow: 0 0 8px var(--success-color);
}
.status-indicator.ready .status-text {
    color: var(--success-color);
}

/* Error State */
.status-indicator.error .status-light {
    background-color: var(--danger-color); /* Red */
}
.status-indicator.error .status-text {
    color: var(--danger-color);
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.7; }
}

/* New styles for the unified app download page */
.app-download-page-v2 {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
}

.app-header-v2 {
    text-align: center;
    margin-bottom: 3rem;
}

.app-logo-v2 {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.download-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.download-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.download-card .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.download-card .card-icon {
    font-size: 3rem;
}
.download-card.windows .card-icon { color: #0078D4; }
.download-card.android .card-icon { color: #3DDC84; }

.download-card .card-title h3 {
    margin: 0;
    font-size: 1.5rem;
}
.download-card .card-title span {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.features-list li .fa-check {
    color: var(--success-color);
}

.download-btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.download-counter {
    text-align: center;
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

@media (max-width: 768px) {
    .download-cards-container {
        grid-template-columns: 1fr;
    }
}

/* =============================================== */
/* == ✨ V4: FUTURISTIC App Download Page (STATIC) == */
/* =============================================== */

.app-download-page-v3 {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 1rem;
    color: #fff;
}

.page-header-v3 {
    text-align: center;
    margin-bottom: 3rem;
}
.page-header-v3 h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #A78BFA, #7DD3FC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-header-v3 p {
    font-size: 1.1rem;
    color: var(--subtle-text-color);
    max-width: 500px;
    margin: 0 auto;
}

.download-grid-v3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.platform-card-v3 {
    position: relative;
    padding: 2px;
    border-radius: 16px;
    background: conic-gradient(from 180deg at 50% 50%, #7DD3FC 0deg, #A78BFA 180deg, #7DD3FC 360deg);
    transition: transform 0.3s ease;
}

.platform-card-v3:hover {
    transform: scale(1.03);
}

.platform-card-v3 .card-content {
    position: relative;
    background: #11141d;
    padding: 2rem;
    border-radius: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
}

/* --- تم إزالة حركة الدوران من هنا --- */
.card-aurora {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 40%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.platform-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.platform-card-v3.windows .platform-icon { color: #00A1F1; }
.platform-card-v3.android .platform-icon { color: #A4C639; }

.platform-title h3 {
    font-size: 1.8rem;
    margin: 0;
}
.platform-title span {
    font-size: 0.9rem;
    color: var(--subtle-text-color);
}

.features-list-v3 {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    flex-grow: 1;
    text-align: right;
}
.features-list-v3 li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.features-list-v3 li i {
    color: green;
}

.btn-download-v3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-download-v3:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
    background-color: rgba(var(--primary-rgb), 0.1);
}

.install-guide-v3 {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem;
    background: rgba(30, 32, 56, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.install-guide-v3 h3 {
    margin: 0 0 0.5rem 0;
}
.install-guide-v3 p {
    margin: 0;
    color: var(--subtle-text-color);
}

@media (max-width: 768px) {
    .download-grid-v3 {
        grid-template-columns: 1fr;
    }
    .page-header-v3 h1 {
        font-size: 2.2rem;
    }
}
/* =============================================== */
/* ==   ✨ V5: Detailed Installation Guides     == */
/* =============================================== */

.install-guides-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.install-steps-column {
    background: rgba(30, 32, 56, 0.5); /* نفس لون الخلفية الشفافة */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
}

.install-steps-column h3 {
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.install-steps-column ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.install-steps-column li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.step-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    background-color: var(--primary-color);
    color: white;
}

.install-steps-column p {
    margin: 0;
    line-height: 1.7;
    color: var(--subtle-text-color);
    font-size: 0.95rem;
}

.install-steps-column p strong {
    color: #fff;
}

.smartscreen-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 1rem;
    border-radius: 8px;
}

.smartscreen-warning .step-icon {
    background-color: #F59E0B;
}

@media (max-width: 768px) {
    .install-guides-container {
        grid-template-columns: 1fr;
    }
}
/* Styling for the Graduation Research Ad Modal */
.graduation-ad-card {
    background-color: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 0;
    max-width: 480px;
    width: 90%;
    animation: fadeIn 0.3s ease-out;
}

.graduation-ad-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.graduation-ad-content {
    padding: 1.5rem 2rem 2rem;
    text-align: center;
}

.graduation-ad-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.graduation-ad-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.graduation-ad-content .btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1.1rem;
}

/* =============================================== */
/* ==        تنسيق قسم الواجبات الدراسية        == */
/* =============================================== */

/* حاوية قائمة الواجبات في صفحة تفاصيل المادة */
.assignments-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* مسافة بين كروت الواجبات */
    margin-top: 1rem;
}

/* كرت الواجب الواحد */
.assignment-card {
    background-color: var(--card-bg-color);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 5px solid var(--accent-color); /* شريط جانبي لتمييز الواجب */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.assignment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* رأس الكرت الذي يحتوي على العنوان */
.assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.assignment-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--heading-color);
}

.assignment-title i {
    color: var(--accent-color);
    font-size: 1.5rem;
}

.assignment-title h4 {
    margin: 0;
    font-size: 1.3rem;
}

/* جسم الكرت (الوصف والملفات) */
.assignment-body p {
    margin: 0;
    line-height: 1.7;
    color: var(--main-text-color);
}

.assignment-body h5 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--subtle-text-color);
}

/* حاوية الملفات المرفقة بالواجب */
.file-list-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* تصميم الملف المرفق الواحد */
.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--hover-bg-color);
    padding: 0.5rem 1rem;
    border-radius: 50px; /* شكل دائري */
    text-decoration: none;
    color: var(--main-text-color);
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.file-chip:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.file-chip i {
    font-size: 1.1rem;
}

/* ذيل الكرت (معلومات إضافية) */
.assignment-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- تنسيقات إضافية لنموذج الإدارة --- */

/* فاصل بين حقول الواجب في لوحة التحكم */
#assignments-container .section-item {
    border: 1px solid var(--border-color);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background-color: var(--background-color);
}

/* حقل وصف الواجب في لوحة التحكم */
.assignment-description-input {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}
/* =============================================== */
/* ==   واجهة الهيكل العظمي (Skeleton Screen)    == */
/* =============================================== */

/* التأثير اللامع (Shimmer Effect) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton-material-details {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* عنصر الهيكل الأساسي (الخطوط الرمادية) */
.skeleton-line {
  background-color: var(--hover-bg-color);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* تطبيق الأنيميشن على كل العناصر */
.skeleton-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 100%);
  animation: shimmer 2s infinite;
}

/* أحجام مختلفة للخطوط */
.skeleton-line.title {
  height: 40px;
  width: 70%;
  margin-bottom: 1.5rem;
}
.skeleton-line.short {
  height: 16px;
  width: 30%;
}
.skeleton-line.medium {
  height: 16px;
  width: 50%;
}
.skeleton-line.long {
  height: 16px;
  width: 90%;
  margin-bottom: 0.75rem;
}

/* صندوق رمادي كبير (بديل للصور أو الأقسام) */
.skeleton-box {
  background-color: var(--hover-bg-color);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.skeleton-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  animation: shimmer 2s infinite;
}
.skeleton-box.short {
    height: 150px;
}

/* محاكاة تخطيط صفحة تفاصيل المادة */
.skeleton-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

.skeleton-main .skeleton-box {
    height: 200px;
    margin-top: 2rem;
}

@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
}

/* تنسيق معرض صور الواجب */
.assignment-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.assignment-thumbnail {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.assignment-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* تنسيق عنصر الملف مع زر المعاينة */
.file-item-with-preview {
    display: flex;
    align-items: center;
    background-color: var(--hover-bg-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    gap: 0.75rem;
    width: 100%;
}

.file-item-with-preview span {
    flex-grow: 1;
    font-weight: 500;
}

.file-item-with-preview .file-actions {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.file-item-with-preview .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
}

/* تنسيق نافذة عرض PDF */
#pdf-viewer-modal .modal-content.modal-large {
    width: 90vw;
    max-width: 1200px;
    height: 90vh;
}

#pdf-modal-body {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

#pdf-modal-body iframe {
    border: none;
    width: 100%;
    height: 100%;
}

/* =============================================== */
/* ==      التصميم المطور لقسم الواجبات         == */
/* =============================================== */

/* الكرت الرئيسي للواجب */
.assignment-card-v2 {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid;
    border-image: linear-gradient(to right, var(--primary-color), var(--accent-color)) 1;
}

/* رأس الكرت (العنوان) */
.assignment-header-v2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background-color: var(--hover-bg-color);
    color: var(--heading-color);
}

.assignment-header-v2 i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.assignment-header-v2 h4 {
    margin: 0;
    font-size: 1.4rem;
}

/* جسم الكرت (الوصف) */
.assignment-body-v2 {
    padding: 1.5rem;
    padding-bottom: 0;
}

.assignment-body-v2 p {
    margin: 0;
    line-height: 1.8;
    color: var(--main-text-color);
}

/* قسم المرفقات */
.assignment-attachments {
    padding: 1.5rem;
        margin-top: -4.5rem;
}

.assignment-attachments h4 {
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--subtle-text-color);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

/* معرض الصور المصغرة */
.attachment-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.attachment-thumbnail-v2 {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10; /* نسبة عرض إلى ارتفاع الصور */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.attachment-thumbnail-v2:hover {
    transform: scale(1.05);
}

.attachment-thumbnail-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* قائمة الملفات */
.attachment-file-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.file-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--hover-bg-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.file-item-icon {
    font-size: 1.75rem;
}

.file-item-info {
    flex-grow: 1;
}

.file-item-title {
    font-weight: 600;
    display: block;
    color: var(--main-text-color);
}

.file-item-meta {
    font-size: 0.85rem;
    color: var(--subtle-text-color);
}

.file-item-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;

}

/* =============================================== */
/* ==   تنسيق زر المشاركة في بطاقات القوائم      == */
/* =============================================== */

.playlist-card-v2 .card-thumbnail {
    position: relative; /* ضروري لتحديد موضع الزر */
}

/* تصميم زر الإجراء (المشاركة) */
.card-action-btn {
    position: absolute;
    top: 10px;
    left: 10px; /* يمكنك تغييره إلى left: 10px لوضعه على اليسار */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s, transform 0.2s;
    opacity: 0; /* يكون مخفيًا بشكل افتراضي */
    transform: scale(0.8);
}

/* إظهار الزر عند مرور الماوس فوق الصورة المصغرة */
.playlist-card-v2:hover .card-action-btn {
    opacity: 1;
    transform: scale(1);
}

.card-action-btn:hover {
    background-color: var(--primary-color);
    transform: scale(1.1);
}

/* =============================================== */
/* ==   تطوير تصميم قسم الواجبات (مع التاريخ)    == */
/* =============================================== */

/* تعديل على الكرت الرئيسي ليدعم الختم */
.assignment-card-v2 {
    position: relative; /* ضروري لتحديد موضع الختم */
    overflow: hidden; /* لإخفاء أجزاء الختم الزائدة */
}

/* تصميم حالة الواجب المنتهي */
.assignment-card-v2.is-past-due {
    opacity: 0.7;
    filter: grayscale(60%); /* تأثير لوني باهت */
}

/* تصميم شريط معلومات تاريخ التسليم */
.due-date-info {
    margin-right: auto; /* يدفعه إلى أقصى اليسار */
    margin-left: 1rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
    border-radius: 20px;
    white-space: nowrap;
}

.is-past-due .due-date-info {
    background-color: #444;
    color: #aaa;
}

/* تصميم ختم "انتهى" */
.expired-stamp {
    position: absolute;
     top: -9px;
    right: 7px;
    background-color: var(--danger-color);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.8rem 2.5rem;
    transform: rotate(45deg) translate(28%, -50%);
    transform-origin: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 1px;
}

/* تعديل بسيط على رأس الكرت ليتناسب مع العناصر الجديدة */
.assignment-header-v2 {
    padding: 1rem 1.5rem; /* تعديل الحشو قليلاً */
}

/* في ملف التنسيق الرئيسي */
.section-item .section-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.section-item .section-header .assignment-title-input,
.section-item .section-header .section-title-input {
    flex-grow: 1; /* يجعل حقل العنوان يأخذ المساحة المتبقية */
}

.section-item .section-header .assignment-duedate-input {
    flex-shrink: 0; /* يمنع حقل التاريخ من الانكماش */
}

/* ========================================= */
/* ==   تنسيق حقل التاريخ في نموذج الواجب   == */
/* ========================================= */

/* الحاوية الرئيسية (العنوان، التاريخ، زر الحذف) */
.section-item .section-header {
    display: flex;
    gap: 0.75rem; /* زيادة المسافة بين العناصر */
    align-items: center;
    margin-bottom: 0.75rem; /* إضافة مسافة سفلية قبل حقل الوصف */
}

/* اجعل حقل العنوان مرنًا ليأخذ المساحة المتاحة */
.section-item .section-header .assignment-title-input {
    flex-grow: 1; /* هذا هو السطر الأهم، يجعل الحقل يتمدد */
    min-width: 150px; /* حد أدنى للعرض لمنع الانضغاط الزائد */
}

/* تنسيق حقل التاريخ والوقت */
.section-item .section-header .assignment-duedate-input {
    /* تخصيص حجم مناسب لحقل التاريخ */
    flex-basis: auto; 
    flex-shrink: 0; /* منعه من الانكماش */
    
    /* تحسين المظهر ليتناسب مع التصميم */
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    padding: 0.6rem;
    border-radius: 6px;
    color: var(--main-text-color);
}

/* تأكد من أن زر الحذف لا ينكمش ويأخذ حجمه الطبيعي */
.section-item .section-header .remove-section-btn {
    flex-shrink: 0;
}
/* ========================================= */
/* ==   تنسيق متقدم لحقل تاريخ الواجب      == */
/* ========================================= */

/* الحاوية الجديدة لتغليف الحقل والأيقونة */
.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* يمنع الحاوية من الانكماش */
}

/* الأيقونة المخصصة */
.date-input-wrapper .date-input-icon {
    position: absolute;
    right: 12px; /* تحديد موقع الأيقونة على اليمين */
    color: var(--subtle-text-color);
    pointer-events: none; /* يسمح بالنقر "عبر" الأيقونة للوصول إلى حقل التاريخ */
}

/* تعديل حقل التاريخ نفسه */
.section-item .section-header .assignment-duedate-input {
    flex-basis: auto;
    padding-right: 2.5rem; /* إضافة مساحة داخلية على اليمين للأيقونة */
    background-color: var(--background-color); /* تغيير الخلفية لتتناسب مع التصميم */
    -webkit-appearance: none; /* إزالة المظهر الافتراضي في بعض المتصفحات */
    -moz-appearance: none;
    appearance: none;
}

/* إخفاء أيقونة التقويم الافتراضية للمتصفح */
.assignment-duedate-input::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer; /* مع ذلك، يبقى الجزء الخاص بالأيقونة قابلاً للنقر */
    width: 100%; /* اجعل منطقة النقر تغطي الحقل بالكامل */
}

/* ========================================= */
/* ==   تنسيق شريط أدوات قسم الواجبات      == */
/* ========================================= */

.section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.section-toolbar h3 {
    margin: 0;
}

.sort-dropdown-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--subtle-text-color);
}

/* استخدام نفس تنسيق .admin-select الموجود لديك */
.sort-dropdown-container .admin-select {
    background-color: var(--hover-bg-color);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* ========================================= */
/* ==   سكرول عمودي لقائمة الواجبات         == */
/* ========================================= */

.assignments-list {
    /* تحديد أقصى ارتفاع للقائمة */
    max-height: 600px; /* يمكنك تعديل هذا الرقم ليناسب تصميمك */

    /* تفعيل السكرول العمودي عند الحاجة فقط */
    overflow-y: auto;

    /* إضافة حشو على اليسار لإفساح المجال للسكرول */
    padding-left: 10px;
    padding-right: 5px;
}

/* --- تنسيق شكل السكرول (اختياري لكن يفضل) --- */

.assignments-list::-webkit-scrollbar {
    width: 8px;
}

.assignments-list::-webkit-scrollbar-track {
    background: var(--hover-bg-color);
    border-radius: 10px;
}

.assignments-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 2px solid var(--hover-bg-color);
}

.assignments-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color);
}

/* ========================================= */
/* ==      تنسيق حاوية قسم الواجبات        == */
/* ========================================= */

.assignments-container-wrapper {
    background-color: var(--card-bg-color); /* لون خلفية أغمق قليلاً */
    border: 1px solid var(--border-color);
    border-radius: 16px; /* حواف دائرية */
    padding: 1.5rem; /* حشوة داخلية لإعطاء مساحة */
    margin-top: 1rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* ظل ناعم */
}

/* تعديل بسيط على شريط الأدوات ليتناسب مع الحاوية الجديدة */
.assignments-container-wrapper .section-toolbar {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* إزالة الهوامش الخارجية من العنوان داخل الحاوية */
.assignments-container-wrapper .section-toolbar h3 {
    margin: 0;
}

/* تنسيق شريط الأدوات ليحتوي على القائمتين */
.section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
    gap: 1rem;
}

.section-toolbar h3 {
    margin: 0;
    flex-shrink: 0; /* لمنع العنوان من الانكماش */
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* مسافة بين قائمة الترتيب وقائمة الانتقال */
}

.sort-dropdown-container,
.jump-dropdown-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--subtle-text-color);
}

/* تنسيق تأثير التوهج عند الانتقال السريع */
@keyframes highlight-fade {
    from { background-color: rgba(var(--primary-color-rgb), 0.3); }
    to { background-color: transparent; }
}

.assignment-card-v2.highlight {
    animation: highlight-fade 1.5s ease-out;
}

/* ========================================= */
/* ==   تنسيق بسيط لأزرار التحكم بالتقريب   == */
/* ========================================= */

.lightbox-controls-zoom {
    /* 1. تحديد الموقع في منتصف الجزء السفلي من الشاشة */
    position: absolute;
    bottom: 670px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002; /* للتأكد من أنها فوق الصورة */

    /* 2. تصميم الحاوية */
    background-color: rgba(0, 0, 0, 0.6); /* خلفية شبه شفافة */
    padding: 8px;
    border-radius: 25px; /* حواف دائرية (شكل حبة الدواء) */
    display: flex;
    gap: 8px; /* مسافة بين الأزرار */
    backdrop-filter: blur(5px); /* تأثير زجاجي (اختياري) */
}

/* 3. تصميم الأزرار بداخل الحاوية */
.lightbox-controls-zoom button {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem; /* حجم الأيقونة */
    width: 40px;
    height: 20px;
    border-radius: 50%; /* جعل الزر دائريًا */
    cursor: pointer;
    display: flex; /* لتوسيط الأيقونة داخل الزر */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s; /* تأثير ناعم عند مرور الماوس */
}

/* 4. تأثير عند مرور الماوس فوق الزر */
.lightbox-controls-zoom button:hover {
    background-color: rgba(255, 255, 255, 0.2);

}

/* ========================================= */
/* ==   تنسيق جديد لرأس صفحة تفاصيل المادة  == */
/* ========================================= */

/* الحاوية الرئيسية للهيدر */
.details-v3-title-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem; /* مسافة بين العناصر */
}

/* حاوية العنوان والشارة */
.title-and-badge {
    display: flex;
    align-items: baseline; /* محاذاة على خط الأساس للنصوص */
    gap: 1rem; /* مسافة بين العنوان والشارة */
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
}

/* تنسيق العنوان الرئيسي (H1) */
.details-v3-title-header h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem); /* حجم خط متجاوب */
    color: var(--heading-color);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

/* --- ✨ التصميم الأنيق للشارة (Badge) --- */
.course-badge {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 20px; /* حواف دائرية */
    
    /* خلفية متدرجة جذابة */
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: white;

    /* تأثير ظل ناعم لإبراز الشارة */
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);

    /* تأثير حركة بسيط عند التحميل */
    transform: translateY(-2px);
    animation: fadeInBadge 0.5s ease-out;
    white-space: nowrap; /* لمنع التفاف النص داخل الشارة */
}

/* أنيميشن لظهور الشارة */
@keyframes fadeInBadge {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(-2px); 
    }
}

/* ========================================= */
/* ==   تنسيق جديد لشريط معلومات المادة     == */
/* ========================================= */

/* الحاوية الرئيسية للشريط */
.details-v3-meta-bar {
    display: flex;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
    align-items: center;
    gap: 0.75rem 1.5rem; /* مسافات رأسية وأفقية بين العناصر */
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    
    /* خلفية ناعمة وحدود دائرية */
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* كل عنصر معلومات داخل الشريط (مثل المشاهدات، التاريخ، ..) */
.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem; /* مسافة بين الأيقونة والنص */
    font-size: 0.9rem;
    color: var(--subtle-text-color);
    font-weight: 500;
    
    /* إزالة الخلفيات والحدود القديمة */
    background: none;
    border: none;
    padding: 0;
}

/* تنسيق الأيقونات داخل الشريط */
.meta-item i {
    color: var(--primary-color);
    font-size: 1rem;
    width: 20px; /* توحيد عرض الأيقونات */
    text-align: center;
}

/* إضافة فاصل أنيق بين العناصر */
.meta-item:not(:first-child)::before {
    content: "•";
    color: var(--border-color);
    margin-left: 1.5rem; /* مسافة قبل الفاصل (لأن التصميم من اليمين لليسار) */
    font-size: 1.2rem;
}
/* ========================================= */
/* ==   تنسيق أزرار المشاركة في صفحة التطبيق   == */
/* ========================================= */

.platform-share-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
}

.share-icons-wrapper {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.share-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
}

.share-icon-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.share-icon-btn.whatsapp:hover {
    background-color: #25D366;
}

.share-icon-btn.telegram:hover {
    background-color: #0088cc;
}

.share-icon-btn.copy-link:hover {
    background-color: var(--primary-color);
}

/* تنسيق تأثير التوهج عند الانتقال السريع */
@keyframes highlight-fade {
    from { 
        background-color: rgba(var(--primary-color-rgb), 0.4); 
        box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.5);
    }
    to { 
        background-color: transparent; 
        box-shadow: none;
    }
}

.highlight {
    animation: highlight-fade 2.5s ease-out;
    /* لجعل التوهج يبدو أفضل على البطاقات */
    border-radius: 12px; 
    transition: background-color 0.3s;
}

.pulse-animation {
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(3, 218, 198, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 10px 20px rgba(3, 218, 198, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(3, 218, 198, 0);
    }
}

/* تنسيق رأس بطاقة الواجب */
.assignment-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.assignment-header-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1;
}

.assignment-header-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0; /* يمنع العناصر من الانكماش */
    color: var(--subtle-text-color);
}

/* تنسيق عداد التحميل الجديد */
.assignment-downloads {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.assignment-downloads i {
    color: var(--accent-color);
}

/* ============================================= */
/* ==   Styles for Tabbed Edit Material Modal   == */
/* ============================================= */

/* Tab Navigation Bar */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto; /* For mobile scrolling */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.modal-tabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.tab-link {
    background-color: transparent;
    border: none;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--subtle-text-color);
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-link:hover {
    color: var(--primary-color);
}

.tab-link.active {
    color: var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
}

/* Tab Content Panes */
.modal-tab-content .tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.modal-tab-content .tab-pane.active {
    display: block;
}

/* Grouping sections inside tabs */
.tab-pane .admin-section {
    background-color: var(--surface-color-darker);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.tab-pane .admin-section h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

/* Persistent Footer for Actions */
.modal-actions-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--surface-color);
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 1rem;
    margin: 1.5rem -1.5rem -1.5rem -1.5rem; /* Extend to edges */
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Full width grid for material name */
.form-grid .grid-full-width {
    grid-column: 1 / -1;
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    .tab-link {
        font-size: 0.9rem;
        padding: 0.7rem 0.9rem;
    }
    .tab-link span {
        display: none; /* Hide text on small screens */
    }
    .tab-pane .admin-section {
        padding: 1rem;
    }
}

/* ================================================== */
/* ==   Voice Search Button Styles (FIXED VERSION)   == */
/* ================================================== */

/* 1. الحاوية الرئيسية (تبقى كما هي) */
.search-input-with-button.has-voice-btn {
    position: relative;
}

/* 2. زر البحث الصوتي (تعديل الموضع بشكل صحيح) */
.voice-search-btn {
    position: absolute;
    /* تحديد الموضع من اليمين، بجانب أيقونة البحث (العدسة).
       أيقونة البحث على بعد 15px، لذلك سنضع هذه على بعد 45px.
    */
    right: 45px; 
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--subtle-text-color);
    font-size: 1.2rem;
    padding: 0 8px;
    z-index: 3; /* للتأكد من أنه قابل للنقر فوق حقل الإدخال */
}

.voice-search-btn:hover {
    color: var(--primary-color);
}

/* 3. تعديل الحشوة الداخلية لحقل البحث (الأهم) */
/* زيادة الحشوة اليمنى لإفساح المجال لأيقونة البحث والمايكروفون معًا.
*/
.has-voice-btn #main-search-input-v2 {
    padding-right: 75px; 
}

/* 4. تصميم حالة "الاستماع" (يبقى كما هو) */
.voice-search-btn.is-listening i {
    color: #e94560; /* لون أحمر للإشارة إلى التسجيل */
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* ---  بداية تنسيق زر البحث الصوتي --- */

.voice-mic-button {
    /* 1. التموضع داخل شريط البحث */
    position: absolute;
    top: 50%;
    left: -40px; /* يمكنك تعديل هذه القيمة لضبط المسافة من الحافة اليسرى */
    transform: translateY(-50%);
        z-index: 9999; 

    /* 2. المظهر الأساسي للزر */
    background-color: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* لجعله دائريًا */
    cursor: pointer;
    
    /* 3. تنسيق الأيقونة الداخلية */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--subtle-text-color);
    font-size: 1.2rem;
    
    /* 4. تأثيرات انتقالية ناعمة */
    transition: all 0.3s ease;
}

/* تأثير عند مرور الماوس فوق الزر */
.voice-mic-button:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

/* ✨ التأثير الخاص بوضع الاستماع (عندما يعمل الميكروفون) ✨ */
.voice-mic-button.is-listening {
    color: #ffffff;
    background-color: #d93025; /* أحمر جوجل */
    box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.5);
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.7);
    }
    70% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 10px rgba(217, 48, 37, 0);
    }
    100% {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 48, 37, 0);
    }
}

/* ---  نهاية تنسيق زر البحث الصوتي --- */