/* Base Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
transition: all 1.75s ease-out
}
@font-face {
font-family: YB_M;
src: url('Assest/Fonts/YB_medium.ttf');
}
@font-face {
font-family: YB_R;
src: url('Assest/Fonts/YB_regular.ttf');
}
body {
font-family: YB_R, sans-serif;
direction: rtl;
background: #121212;
color: #e0e0e0;
margin: 0;
padding: 20px;
line-height: 1.7;
}

.container {
max-width: 1100px;
margin: auto;
padding: 10px;
}
.flexStyler{
  display: flex;
  flex-direction: column;
  align-items: center;
}
h1, h2 {
text-align: center;
font-family: "YB_M";
color: #6293e1;
font-weight: 300;
margin-bottom: 16px;
letter-spacing: 0px;
}
hr{
width: 100%;
border: none;
height: 1px;
margin-bottom: 1rem;
margin-top: 1rem;
background: linear-gradient(to left, #00000000,#666666,#00000000);
}
nav {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 9px 9px;
background: #0000001a;
backdrop-filter: blur(20px);
border-radius: 22px;
border: 1px solid #333;
transition: all 0.3s ease-in-out;
}

nav button {
all: unset;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: rgba(0, 0, 0, 0.2);
color: #e0e0e0;
border-radius: 18px;
cursor: pointer;
font-family: "YB_M";
transition: background 0.3s ease;
}

nav button:hover {
background: #2c2c2c;
}

nav button iconify-icon {
margin-bottom: 4px;
color: #e0e0e0;
}

nav button span {
font-size: 12px;
text-align: center;
}

/* Inputs & Buttons */
input, select {
background: #1e1e1e;
color: #c1c1c1;
border: 1px solid #333;
padding: 7px;
margin: 3px 1px;
height: 3rem;
border-radius: 8px;
width: 100%;
font-family: "YB_M";
max-width: 300px;
}

input::placeholder {
color: #888;
}

button {
background: #507fcb;
color: #fff;
border: none;
padding: 12px 14px;
border-radius: 8px;
cursor: pointer;
font-family: "YB_M";
transition: background 0.2s;
}

button:hover {
background: #1565c0;
}

/* Sections */
section {
display: none;
margin-bottom: 40px;
padding: 36px;
margin-top: 2rem;
background: #1a1a1a;
border-radius: 28px;
}

/* Lists */
ul {
list-style: none;
padding: 0;
}

li {
background: #212121;
margin: 6px 0;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Buttons in List Items */
.remove-btn {
background: none;
color: rgb(207, 59, 59);
padding: 4px 8px;
border: none;
border-radius: 4px;
}

.remove-btn:hover {
color: #b60808;
background: none;
}

.edit-btn {
background: #f9a825;
color: #000;
padding: 4px 8px;
border: none;
border-radius: 4px;
margin-right: 5px;
}

.customer-box {
background: #212121;
padding: 10px;
border-radius: 6px;
margin: 6px 0;
}

.customer-details {
margin-top: 8px;
padding: 8px;
background: #1c1c1c;
border: 1px solid #333;
border-radius: 5px;
}

/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

th, td {
padding: 10px;
text-align: center;
border-left: 1px solid rgb(48, 48, 48);
}

th {
background: #212121;
color: #7a88ee;
}

td {
background: #1a1a1a;
}

/* Invoice Totals */
#totalAmount, #totalProfit {
margin-top: 10px;
font-weight: bold;
color: #81c784;
}
#factor_CTA{
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
#factor_CTA button{
background-color: rgb(43, 43, 43);
}
#factor_CTA button:hover{
background-color: #373737;
}
#factor_CTA button:first-of-type{
border-radius: 0 12px 12px 0;
border-left: 2px solid #1a1a1a;
}
#factor_CTA button:last-of-type{
border-radius: 12px 0 0 12px;
}
#factor_addProduct{
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 6.5rem;
}
#factor_Input{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}


/* Responsive */
@media (max-width: 768px) {
nav {
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
padding: 10px;
width: 19rem;
}
nav button {
width: 50px;
height: 50px;
}
nav button span {
font-size: 8.4px;
}
nav button iconify-icon {
scale: 87%;
margin-bottom: 0;
}

table, thead, tbody, th, td, tr {
display: block;
}

thead {
display: none;
}

tr {
margin-bottom: 15px;
}

td {
text-align: right;
padding: 10px;
position: relative;
}

td::before {
content: attr(data-label);
position: absolute;
right: 10px;
top: 10px;
font-weight: bold;
color: #90caf9;
}
#factor_Input{
flex-direction: column;
}
}

.card {
border-radius: 16px;
padding: 12px;
margin-bottom: 10px;
background-color: #121212;
font-family: "YB_R";
}

.card p {
margin: 6px 0;
}

.card button {

color: white;
border: none;
padding: 10px 12px;
border-radius: 12px;
height: 3rem;
cursor: pointer;
font-family: "YB_R";
}

.card strong{
font-weight: 400;
opacity: 40%;
}

.todoButton{
background-color: #0f9f0a !important;
}


.cheque-confirm {
background-color: #353535; /* سبز کم‌رنگ */
color: white;
border: none;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
transition: all 0.3s ease-in-out;
margin-left: 8px;
}

.cheque-confirm.done {
background-color: #2b9c30; /* سبز پررنگ */
}

.cheque-delete {
background-color: #e53935;
color: white;
border: none;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
transition: background 0.2s ease-in-out;
}

.cheque-delete:hover {
background-color: #c62828;
}



  .mobilescreenNav {
    position: fixed !important;
    top: 50%;
    right: -4rem;
    width: 72px;
    height: 27rem;
    flex-direction: column;
    transform: translateY(-50%);
}

.showNavBtn {
    width: 2rem;
    display: flex;
    position: fixed;
    top: 50%;
    justify-content: center;
    right: 1rem;
    flex-direction: row;
    transform: translateY(-50%);
    align-items: center;
    padding: 18px;
    border-radius: 2rem;
    height: 2rem;
    border: 1px solid #333333;
    background: #00000000;
    backdrop-filter: blur(18px);
}



@media (max-width: 600px) {
.cheque-confirm, .cheque-delete {
width: 100%;
margin: 5px 0;
}
}
@media (min-width: 1170px) {
  .mobilescreenNav {
  display: none;
}
.showNavBtn{
  display: none;
}
}
@media (max-width: 1170px) {
  .widescreenNav {
  display: none;
}
}
@media (max-width: 768px) {
  .card {
    display: flow;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    margin-top: 2rem;
  }

  .card p {
    font-size: 0.9rem;
  }

  .card button {
    width: 100%;
    padding: 10px;
    height: auto;
    font-size: 1rem;
  }

  .card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
  }
}