:root {
    --primary-color: #5A67D8; /* Calming Indigo for primary actions */
    --secondary-color: #a8c1ec; /* Deep Charcoal for secondary elements */
    --hover-color:  linear-gradient(135deg, #50E3C2, #4A90E2); /* Gradient for hover states */
    --button-text-color: #FFFFFF; /* Clean White for button text */
    --header-footer-color: #1A202C; /* Rich Dark Gray for header and footer */
    --header-footer-text-color: #E2E8F0; /* Light Gray for header/footer text */
    --background-color: #F7FAFC; /* Soft Gray for main background */
    --text-color: #2C3E50; /* Dark Navy Blue for primary text */
    --border-color: #CBD5E0; /* Subtle Gray for borders */

    --accent-color: #F6AD55; /* Vibrant Orange for accents */
    --background-gradient: linear-gradient(135deg, #667EEA, #F6AD55); /* Creative Blue-to-Orange gradient */
    --table-header-color: #4A5568; /* Neutral Gray for table headers */
    --table-header-text-color: #E2E8F0; /* Bright Gray for table header text */
    --table-row-even-color: #EDF2F7; /* Light Gray Blue for even rows */
    --table-row-odd-color: #FFFFFF; /* Clean White for odd rows */

    --status-complete-color: #48BB78; /* Fresh Green for completed status */
    --status-progress-color: #F6E05E; /* Soft Yellow for progress */
    --status-pending-color: #E53E3E; /* Bold Red for pending tasks */
    --no-task-color: #A0AEC0; /* Neutral Gray for no task */

    --white: #FFFFFF;
    --black: #1A202C; /* Deep Black for high contrast text */
    --bodybg: #F7FAFC; /* Soft Warm Gray for body background */
    --ccit: #E2E8F0; /* Pale Gray for inactive elements */
    --hhff: #4C51BF; /* Deep Indigo for headings */
    --sectt: #2B6CB0; /* Calm Blue for section titles */
    --theddd: #CBD5E0; /* Light Gray for dividers */
    --rredd: #E53E3E; /* Bright Red for errors or warnings */

    --shape-color-1: #F9A825; /* Bright Orange for the first shape */
    --shape-color-2: #424242; /* Dark Gray for the second shape */
    --shape-color-3: #FFC107; /* Soft Yellow for the third shape */

}
.red_text{ color: red !important; } 

/* Background animated shapes
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
} */

/* Background animated shapes */
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.background .shape:nth-child(1) {
    background: var(--shape-color-1); /* Bright Orange */
    border-radius: 20%;
    opacity: 0.8;
    animation: float 6s infinite ease-in-out;
}

.background .shape:nth-child(2) {
    background: var(--shape-color-2); /* Dark Gray */
    border-radius: 20%;
    opacity: 0.6;
    animation: float 8s infinite ease-in-out;
}

.background .shape:nth-child(3) {
    background: var(--shape-color-3); /* Soft Yellow */
    border-radius: 20%;
    opacity: 0.7;
    animation: float 10s infinite ease-in-out;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(15deg);
    }
}
 
.form2  {
     background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    width: 380px;
    padding: 40px; 
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.sub_b{
    display: flex;
    justify-content: space-around;
}
@font-face {
    font-family: 'nn1';
    src: url(./nn1.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1, h2, h3,
h4, h5, h6,
p, a, button, input::placeholder ,input[type="submit"],select,label,input[type="date"] {
    font-family: 'nn1';
    font-weight: bold;
    text-decoration: none;
    text-align: center !important;
    
}
.profilee p{
    font-size: 15px;
    font-weight: lighter;
}
.profile_img{
    width: 50px;
    border-radius: 25px;
}
input::placeholder,textarea::placeholder{
    color: #3a3737da;
}
select{
    width: 100%;
    height: 40px;
    /* background-color: var(--primary-color); */
    color: var(--black);

    text-align: center;
}
table input{
    border: 0;
    background-color: transparent;
    text-align: center !important;
    text-wrap: wrap;
    font-size: 16px;
    font-family: 'nn1';
    font-weight: bold;
}
table input[type='text']{
    width: 80% !important;
    padding: 10px 0;
    background-color: transparent;
}
.tb_column input[type='text'], 
.tb_column input[type='date'], 
.tb_column input[type='number'],
.tb_column select{
    background-color: transparent;
    color: var(--black);
    text-align: center;
}
textarea {
    text-align:center ;
    min-height: 40px;
    width: 100% !important; 
    margin: 0 auto;
    resize: none; 
    overflow: hidden; 
    font-size: 16px;
    font-family: 'nn1';
    font-weight: bold;
    color: #000;
    
}
textarea::placeholder{
    
    color: #000;
}
body {
    direction: rtl;
    font-family: 'nn1', sans-serif;
    font-weight: bold;
    background-color: var(--bodybg);
    color:var(--text-color) ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}
/*  */
header{
    top: 0;
    left: 0;
    
}
footer{
    bottom: 0;
    left: 0;
}
header a, header p, footer p ,header span, footer span{
    background-color: transparent;
    color:var(--white)

}
footer a
{
    background-color: white;
   
}
header img{
 width: 75px;
}
.kamina a{
background-color: transparent;
}
p a{
    background-color: transparent; 
}
/* الأساسيات للترويسة */
header, footer {
    background-color: var(--header-footer-color);
    backdrop-filter: blur(3px);
     
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--black);
    text-align: center;
    position: fixed;
    z-index: 1000;
    font-size: 18px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}
 footer {
    background-color: var(--header-footer-color);
    backdrop-filter: blur(3px);
     
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--black);
    text-align: center;
    position: fixed;
    z-index: 1000;
    font-size: 18px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

header p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

/* البحث افتراضيًا */
header .search-container {
    display: flex;
    align-items: center;
    position: relative;
}

header .search-container #toggle-search {
    background-color: transparent;
    border: none;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    margin-left: 10px;
}

header .search-container #search-form {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: var(--white);
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

header .search-container.active #search-form {
    display: flex;
    position: fixed;
    top: 6%;
    right: 35%;
}

/* حقل الإدخال */
header .search-container #search-form input[type="text"] {
    width: 250px;
    padding: 8px;
    border: 1px solid var(--white);
    border-radius: 5px;
    font-size: 16px;
}

/* زر البحث */
header .search-container #search-form button {
    background-color: var(--primary-color);
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

header .search-container #search-form button:hover {
    background-color: var(--hhff);
}
@media only screen and (max-width: 950px) {
    header .search-container #search-form {
        position: fixed; top: 10%; right: 0;        
        width: 100%;
        opacity: 0;
        transform: scale(0.9); 
        transition: all 0.5s ease-in-out; 
        display: flex; 
        justify-content: center;
        pointer-events: none; 
    }

    header .search-container.active #search-form {
        position: fixed; top: 10%; right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}
@media only screen and (min-width: 951px) {
    header .search-container #search-form {
        position: fixed; top: 13%; right: 0;        
        width: 100%;
        opacity: 0;
        transform: scale(0.9); 
        transition: all 0.5s ease-in-out; 
        display: flex; 
        justify-content: center;
        pointer-events: none; 
    }

    header .search-container.active #search-form {
        position: fixed; top: 13%; right: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
}
.pdf_btn{
    position: fixed;
    top: 6.5rem;
    left: 1rem;
}
.time_container{
    position: fixed;
    bottom: 70px;
    left: 50px;
    font-size: 16px;
    background-color: #fadc85;
    padding: 5px 15px;
    border-radius: 12px;
    /*  #E65100, #FFC107 */
}
/* .time_container:active, .time_container:hover {
    font-size: 16px;
} */
/*  */
h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.5rem;
    color: #2c3e50;
}
button , input[type="submit"]{
    cursor: pointer;
}
input[type="text"]:not(td input[type="text"]),
input[type="number"]:not(td input[type="number"]),
input[type="date"]:not(td input[type="date"]),
textarea:not(td textarea),select
{ 
    border: 1px solid ;
    border-radius: 10px;

}
a:not(header a,footer a){
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-color); /* White */
    background: #389fffcf;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

a:hover:not(header a,footer a, .container a, .container1 a) {
    background: var(--accent-color); /* Darker gold */
    color:white; /* White */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

a:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

form input {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 15px 20px;
   
    border: none;
    border-radius: 8px;
    color: var(--black);
    font-size: 1rem;
    transition: background-color 0.3s;
}
form input[type="submit"] {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 15px 20px;
    background: linear-gradient(135deg, #4A90E2, #50E3C2);
    border: none;
    border-radius: 8px;
    color: var(--black);
    font-size: 1rem;
    transition: background-color 0.3s;
}
 
.container1 {
    display: flex;
        width: 98%;
        margin: 0 auto 20px;
        backdrop-filter: blur(20px);
        padding: 20px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        align-items: stretch;
}
 
/* Main Dashboard Grid */
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns per row */
    gap: 20px; /* Space between items */
    width: 90%;
    max-width: 1200px;
    margin-top: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

.container h1 {
    grid-column: span 2; /* Center the header across both columns */
    text-align: center;
    font-size: 1.8rem;
    color: #34495e;
    margin-bottom: 20px;
}

button, input[type="submit"], .container a, .container1 a, .sub {
    text-decoration: none;
    padding: 15px; /* Adjusted padding for consistent size */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #E65100, #FFC107); /* Deep Orange to Soft Yellow */
    color: #FFFFFF; /* White text for good contrast */
    border: none;
    border-radius: 10px;
    font-size: 16px; /* Consistent font size */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* Smooth transition */
}

button:hover, input[type="submit"]:hover, .container a:hover,.container1 a:hover, .sub:hover {
    background: linear-gradient(135deg, #FFC107, #E65100); /* Reversed gradient for hover effect */
    transform: translateY(-5px); /* Adjusted hover effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

button:active, input[type="submit"]:active, .container a:active,.container1 a:active, .sub:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.container a i, .container1 a i {
    margin-bottom: 10px;
    font-size: 20px;
}

.ffrow{
    display:flex;
}
.ffrow input , .ffrow button{
    margin: 0 5px;
}
.ffrow button{
    width: 30%;
    max-width: 100px;
    background-color: var(--secondary-color);
}
.container button{
    border-radius: 8px;
    border: navajowhite;
    color: var(--black);
}
.section-title {
    color: var(--sectt);
    text-align: center;
    margin-bottom: 20px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}
table th, table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid var(--theddd);
}
table th {
    background-color: var(--table-header-color);
    color: #ecf0f1;
}
table tr:nth-child(even) {
    background-color: var(--table-row-even-color);
}
table tr:nth-child(odd) {
    background-color: var(--table-row-odd-color);
}
.status-cell i {
    margin-left: 8px;
}
.status-complete {
    color: var(--status-complete-color);
}
.status-progress {
    color: var(--status-progress-color);
}
.status-pending {
    color: var(--status-pending-color);
}
.no-tasks {
    text-align: center;
    color: var(--no-task-color);
    margin-top: 20px;
}

.sub, a:not(header a){
    display: block;
    margin-bottom: 10px;
    padding: 8px 10px;
    
    color: var(--black);
    border-radius: 8px;
    /* border: 1px solid; */
    text-align: center;
    font-size: 1rem;
    transition: background-color 0.3s;
}
.sub {display: inline;}

.sub:hover, a:hover:not(header a,header span,footer a,footer span) {
    background-color: var(--hover-color);
}
.foser{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
ul {
    list-style-type: none;
    text-align: center;
}
@media (min-width: 768px) {
    .tb_column {
        display: none;
    }
    .sesub{
        width: 5rem;
        height: 2.5rem;
        background-color: var(--hover-color);
        color: var(--white);
        font-size: 1rem;
        transition: background-color 0.3s;
        border-radius: 8px;
        border: 0;
    }
    .sesub:hover{
        background-color: var(--secondary-color);
    }
}

@media (max-width: 767px) {
.tb_row {
    display: none;
}
.tb_column th,
.tb_column td {
    padding: 8px;
    text-align: center;
}

.tb_column th {
    width: 40%;
    background-color: var(--table-header-color);
}
.tb_column td {
    width: 60%;
}
.setxt{
    width: 10rem;
}
.sesub{
    width: 3rem;
    height: 2.5rem;
    background-color: var(--primary-color);
    color: var(--white);
    font-size: 1rem;
    transition: background-color 0.3s;
    border-radius: 8px;
    border: 0;
}
.sesub:hover{
    background-color: var(--secondary-color);
}
}
#textInput {
    border: 2px solid var(--black);
}

#textInput.invalid {
    border: 2px solid var(--rredd);
}

.space{
    margin: 70px auto;
}