*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter, Arial;
}

body{
background:#f1f5f9;
}

/* SIDEBAR */

.sidebar{
position:fixed;
left:0;
top:0;
width:220px;
height:100%;
background:#0f172a;
color:white;
padding:25px;
}

.sidebar h2{
margin-bottom:40px;
}

.sidebar a{
display:block;
color:white;
text-decoration:none;
margin:15px 0;
font-size:15px;
}

.sidebar a:hover{
color:#38bdf8;
}

/* TOPBAR */

.topbar{
margin-left:220px;
height:70px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* MAIN */

.main{
margin-left:220px;
padding:30px;
}

/* CARD */

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
margin-bottom:25px;
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
}

table th,table td{
padding:12px;
border-bottom:1px solid #e2e8f0;
text-align:left;
}

/* BUTTON */

button{
background:#4f46e5;
color:white;
border:none;
padding:10px 16px;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#4338ca;
}

/* INPUT */

input{
padding:8px;
border:1px solid #cbd5e1;
border-radius:6px;
width:100%;
}
/*la langue*/
body.rtl{

direction:rtl;
text-align:right;

}

body.rtl .sidebar{

right:0;
left:auto;

}

body.rtl .main{

margin-right:220px;
margin-left:0;

}
.language-box select{

padding:6px 10px;
border:1px solid #cbd5e1;
border-radius:6px;
background:white;
cursor:pointer;

}
/*reglement d tableaut*/
.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}

/*style new register*/
.register-page{

display:flex;
height:100vh;

}

.register-left{

flex:1;
background:linear-gradient(135deg,#4f46e5,#06b6d4);
color:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:40px;

}

.register-left h1{

font-size:40px;
margin-bottom:10px;

}

.register-left p{

font-size:18px;
opacity:0.9;

}

.register-right{

flex:1;
display:flex;
justify-content:center;
align-items:center;
background:#f8fafc;

}

.register-form{

background:white;
padding:40px;
border-radius:10px;
width:450px;
box-shadow:0 5px 25px rgba(0,0,0,0.1);

}

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}

.register-form input{

padding:10px;
border:1px solid #cbd5e1;
border-radius:6px;

}

.register-form button{

width:100%;
margin-top:20px;
background:#4f46e5;

}

/*pluuuuus*/
.login-page{

height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:linear-gradient(
135deg,
#4f46e5,
#06b6d4,
#9333ea
);

background-size:400% 400%;
animation:gradientMove 12s ease infinite;

}

/* حركة الخلفية */

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* صندوق تسجيل الدخول */

.login-box{

background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
border-radius:12px;
padding:40px;
width:350px;

box-shadow:0 8px 30px rgba(0,0,0,0.2);

color:white;

}

/* العنوان */

.login-box h2{

text-align:center;
margin-bottom:25px;

}

/* الحقول */

.login-box input{

width:100%;
padding:12px;

margin-bottom:15px;

border:none;
border-radius:6px;

}

/* الزر */

.login-box button{

width:100%;
padding:12px;

background:#4f46e5;

border:none;
border-radius:6px;

color:white;

font-weight:bold;

cursor:pointer;

}

.login-box button:hover{

background:#4338ca;

}

/* الرابط */

.login-box a{

display:block;
text-align:center;
margin-top:15px;
color:white;

}

/*الازرار*/
.pdf-btn{
background:#2563eb;
color:white;
padding:6px 10px;
border:none;
border-radius:4px;
cursor:pointer;
margin-right:5px;
}

.send-btn{
background:#16a34a;
color:white;
padding:6px 10px;
border:none;
border-radius:4px;
cursor:pointer;
margin-right:5px;
}

.delete-btn{
background:#ef4444;
color:white;
padding:6px 10px;
border:none;
border-radius:4px;
cursor:pointer;
}
/* أزرار PDF وSEND في جدول الفواتير */
.pdf-btn {
  background: #2563eb; /* أزرق جذاب */
  color: white;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-right: 5px;
}

.pdf-btn:hover {
  background: #1e40af; /* أزرق أغمق عند hover */
  transform: scale(1.05);
}

.send-btn {
  background: #16a34a; /* أخضر جذاب */
  color: white;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.send-btn:hover {
  background: #15803d; /* أخضر أغمق عند hover */
  transform: scale(1.05);
}
/*اضافة زر خروج*/

/* صندوق زر الخروج */
.logout-box{
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

/* زر Déconnexion */





.sidebar{

width:220px;
height:100vh;

background:#1e293b;

color:white;

display:flex;
flex-direction:column;

padding:20px;

}

.menu{

list-style:none;
padding:0;

}

.menu li{

margin:15px 0;

}

.menu a{

color:white;
text-decoration:none;

}

/* صندوق زر الخروج */

.logout-box{

margin-top:auto;

}

/* زر الخروج */

#logoutBtn{

width:100%;

padding:10px;

background:#ef4444;

border:none;

color:white;

border-radius:5px;

cursor:pointer;

}

#logoutBtn:hover{

background:#dc2626;

}





/*fin*/
body{
margin:0;
font-family:Arial;
}

/* SIDEBAR */

.sidebar{

position:fixed;
left:0;
top:0;

width:230px;
height:100vh;

background:#0f172a;
color:white;

display:flex;
flex-direction:column;

padding:20px;

}

/* LOGO */

.logo{

display:flex;
align-items:center;
gap:10px;

font-size:20px;
font-weight:bold;

margin-bottom:40px;

}

.logo i{
color:#38bdf8;
}

/* MENU */

.menu{

list-style:none;
padding:0;
margin:0;

}

.menu li{

margin-bottom:10px;

}

.menu a{

display:flex;
align-items:center;

gap:12px;

padding:10px 12px;

color:#cbd5e1;

text-decoration:none;

border-radius:8px;

transition:0.3s;

}

/* HOVER */

.menu a:hover{

background:#1e293b;
color:white;

}

/* ACTIVE PAGE */

.menu li.active a{

background:#2563eb;
color:white;

}

/* LOGOUT */

.logout{

margin-top:auto;

}

.logout button{

width:100%;

padding:10px;

border:none;

background:#ef4444;

color:white;

border-radius:8px;

cursor:pointer;

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

gap:10px;

transition:0.3s;

}

.logout button:hover{

background:#dc2626;

}

/*تعدييييل شكل زر اللغة*/
/* صندوق اللغة */

.language-box{

margin-top:20px;

display:flex;
justify-content:left;

}

/* زر اللغة */

.language-select{

background:#1e293b;

color:rgb(11, 39, 99);

border:1px solid #334155;

padding:6px 12px;

border-radius:6px;

font-size:10px;

cursor:pointer;

transition:0.3s;

}

/* Hover */

.language-select:hover{

background:#2563eb;

border-color:#2563eb;

}

/* Focus */

.language-select:focus{

outline:none;

box-shadow:0 0 0 2px rgba(37,99,235,0.4);

}
  .category{
    height: 25px;
  }  


  /*pdf/status/actions*/
  .status{
padding:4px 8px;
border-radius:6px;
color:white;
font-size:12px;
}

.status.pending{background:orange;}
.status.sent{background:blue;}
.status.approved{background:green;}

.pdf-btn{background:#2563eb;color:white;}
.delete-btn{background:#ef4444;color:white;}
.send-btn{background:#10b981;color:white;}

button{
border:none;
padding:6px 10px;
border-radius:5px;
cursor:pointer;
margin-right:5px;
}

button:hover{
opacity:0.85;
}

.payment{
    padding:4px 8px;
    border-radius:6px;
    background:#e0f2fe;
    color:#0369a1;
    font-size:12px;
    font-weight:600;
}

/*invoice copie*/


/*invoice-header*/
.invoice-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
background:white;
padding:20px;
border-radius:10px;
margin-bottom:10px;
}

/* LEFT */
.company-left{
width:60%;
font-size:13px;
line-height:1.6;
}

.company-left h2{
margin:0;
font-size:20px;
}

/* RIGHT */
.company-right{
width:35%;
text-align:right;
}

/* LOGO */
.logo{
width:120px;
height:120px;
object-fit:contain;
margin-bottom:10px;
}

/* CLIENT BOX */
/*
.client-box{
border:1px solid #ddd;
padding:10px;
border-radius:6px;
font-size:13px;
}*/

.client-box{
border:1px solid #ddd;
padding:12px;
border-radius:6px;
font-size:13px;
text-align:left; /* 🔥 هذا هو المهم */
line-height:1.8;
}

.client-box p{
margin:5px 0;
}

.client-box strong{
color:#374151;
}

/* META */
.invoice-meta{
display:flex;
justify-content:space-between;
margin:15px 0;
font-weight:bold;
}


/*footer invoice*/
.invoice-footer{
display:flex;
justify-content:flex-end;
margin-top:20px;
}

.totals-box{
width:300px;
background:#f8fafc;
padding:15px;
border-radius:10px;
border:1px solid #ddd;
}

.row{
display:flex;
justify-content:space-between;
margin-bottom:8px;
font-size:14px;
}

.total-final{
font-weight:bold;
font-size:16px;
}
/*num + unit*/
td.num{
text-align:center;
font-weight:bold;
width:50px;
}

input.unit{
width:80px;
text-align:center;
}

/*signature */

.invoice-footer{
display:flex;
justify-content:flex-end;
margin-top:30px;
}

.footer-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:20px;
}

.signature-box{
text-align:center;
}

.signature-box p{
margin-bottom:5px;
font-weight:bold;
}

.signature-img{
width:220px;
height:100px;
object-fit:contain;
border:1px dashed #ccc;
border-radius:6px;
background:#fff;
padding:5px;
}
/*logo login*/
/*.logo-login{margin-bottom:25px;}*/
/*.logo-login img{width:40px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.2);}*/
/*background login*/


#loga{

width:90px;
height: 45px;

}

.app-title{

color:white;
font-size:22px;

}

.loga{
  margin-bottom:25px;
  position:relative;
  text-align: center;
  

}
.loga img{width:130px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.2); background-color: #ffffff;}
h2{margin-bottom:30px; color:#ffffff; letter-spacing:1px; font-weight:700;}



/* ================= REGISTER RESPONSIVE ================= */

/* 📱 MOBILE */
@media (max-width: 768px){

    .register-page{
        flex-direction:column;
        height:auto;
    }

    /* LEFT SECTION */
    .register-left{
        width:100%;
        padding:30px 20px;
        text-align:center;
    }

    .register-left h1{
        font-size:24px;
    }

    .register-left p{
        font-size:14px;
    }

    /* RIGHT SECTION */
    .register-right{
        width:100%;
        padding:20px;
    }

    .register-form{
        width:100%;
        padding:25px;
    }

    /* FORM GRID → COLUMN */
    .form-grid{
        grid-template-columns:1fr;
    }

    /* INPUT */
    .register-form input{
        font-size:14px;
        padding:10px;
    }

    /* BUTTON */
    .register-form button{
        font-size:14px;
        padding:12px;
    }

}

/* 📱 SMALL PHONES */
@media (max-width: 480px){

    .register-left h1{
        font-size:20px;
    }

    .register-form{
        padding:20px;
    }

}

/* ================= INVOICES TABLE RESPONSIVE ================= */

/* wrapper للجدول */
#invoiceContainer{
    width:100%;
    overflow-x:auto;
}

/* الجدول */
#invoicesTable{
    width:100%;
    border-collapse:collapse;
    min-width:600px; /* 🔥 مهم */
}

/* cells */
#invoicesTable th,
#invoicesTable td{
    padding:10px;
    text-align:left;
    white-space:nowrap;
}

/* 📱 MOBILE */
@media (max-width: 768px){

    #invoicesTable{
        min-width:700px; /* نفس my-orders */
    }

    #invoicesTable th,
    #invoicesTable td{
        font-size:12px;
        padding:8px;
    }

    /* buttons داخل الجدول */
    #invoicesTable button{
        padding:5px 6px;
        font-size:11px;
    }

}