/* =========================================================
   BANCA DI ASTI - GLOBAL RESPONSIVE STYLE
   Version moderne
========================================================= */


/* =========================
   IMPORT FONT
========================= */

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


/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#f4f6fb;
    color:#1c1c1c;
    overflow-x:hidden;

}


a{
    text-decoration:none;
    color:inherit;
}


button,
input,
select,
textarea{

    font-family:inherit;

}


/* =========================
   VARIABLES
========================= */

:root{

    --primary:#7b0f1a;
    --primary-dark:#3b0a10;
    --secondary:#b22234;

    --gold:#d4af37;
    --gold-light:#f5d76e;

    --white:#ffffff;

    --background:#f4f6fb;

    --text:#1c1c1c;

    --success:#15803d;
    --danger:#dc2626;
    --warning:#f59e0b;

    --shadow:
    0 10px 30px rgba(0,0,0,.06);

    --radius:15px;

}


/* =========================================================
   SIDEBAR
========================================================= */


.sidebar{

  width:260px;
  height:100vh;

  position:fixed;

  top:0;
  left:0;

  background:
  linear-gradient(
      180deg,
      var(--primary),
      var(--primary-dark)
  );

  color:white;

  padding:25px 20px;

  display:flex;
  flex-direction:column;

  z-index:1000;

  overflow-y:auto;

  transition:.35s ease;
}



.logo{

    font-size:18px;

    font-weight:700;

    text-align:center;

    margin-bottom:35px;

}



.client-info{

    text-align:center;

    margin-bottom:40px;

}


.client-info h3{

    font-size:15px;

}


.client-info p{

    font-size:12px;

    opacity:.7;

}



/* =========================
   MENU
========================= */


.menu ul{

    list-style:none;

}



.menu li{

    margin:12px 0;

}



.menu a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    border-radius:12px;

    color:white;

    transition:.3s;

}



.menu a:hover{

    background:rgba(255,255,255,.15);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */


.menu-toggle{

    display:none;

    position:fixed;

    top:15px;

    left:15px;

    z-index:2000;

    border:none;

    background:var(--primary);

    color:white;

    width:45px;

    height:45px;

    border-radius:12px;

    font-size:22px;

    cursor:pointer;

}



/* =========================================================
   MAIN CONTENT
========================================================= */


.main{

    margin-left:260px;

    padding:30px;

    min-height:100vh;

}



h1{

    font-size:28px;

    margin-bottom:25px;

}


h2{

    margin-bottom:15px;

}


h3{

    margin-bottom:10px;

}



/* =========================================================
   CARDS GENERALES
========================================================= */


.balance-card{

    background:white;

    padding:25px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    margin-bottom:20px;

    transition:.3s;

}



.balance-card:hover{

    transform:translateY(-3px);

}


/* =========================================================
   DASHBOARD GRID
========================================================= */


.stats-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}


.actions-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

}



/* =========================================================
   GOLD BANK CARD
========================================================= */


.card-bank{

    width:350px;

    max-width:100%;

    height:200px;

    border-radius:20px;

    padding:25px;

    color:white;

    background:
    linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light),
        #b8860b
    );

    box-shadow:
    0 20px 40px rgba(0,0,0,.25);

    position:relative;

    overflow:hidden;

}


.card-bank > div{

    position:relative;

    z-index:2;

}


.card-bank::before{

    content:"";

    position:absolute;

    width:200%;

    height:200%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.25),
        transparent
    );

    transform:rotate(25deg);

}

/* =========================================================
   TABLEAUX / TRANSACTIONS
========================================================= */


.transactions{

  margin-top:30px;

  background:white;

  padding:25px;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  overflow:hidden;

}


.table-container{

  width:100%;

  overflow-x:auto;

}


table{

  width:100%;

  border-collapse:collapse;

}


th{

  text-align:left;

  font-weight:600;

  background:#fafafa;

}


td,
th{

  padding:14px;

  border-bottom:1px solid #eee;

}


tr:last-child td{

  border-bottom:none;

}



.plus{

  color:var(--success);

  font-weight:600;

}


.minus{

  color:var(--danger);

  font-weight:600;

}


.attesa{

  color:var(--warning);

  font-style:italic;

}


.rifiutato{

  color:var(--danger);

  font-style:italic;

}


.eseguito{

  color:var(--success);

  font-weight:600;

}



/* =========================================================
 STATUS
========================================================= */


.status{

  font-weight:600;

}


.status.active{

  color:var(--success);

}



/* =========================================================
 BUTTONS
========================================================= */


.btn-bonifico{

  width:100%;

  padding:16px;

  margin-top:20px;

  border:none;

  border-radius:14px;

  background:
  linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
  );

  color:white;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:.3s;

  box-shadow:
  0 8px 20px rgba(139,30,45,.25);

}



.btn-bonifico:hover{

  transform:translateY(-2px);

}



.btn-bonifico:active{

  transform:scale(.98);

}



.btn-bonifico:disabled{

  background:#bbb;

  cursor:not-allowed;

}



/* =========================================================
 LOGOUT BUTTON
========================================================= */



.logout-btn{

  width:90%;

  margin:25px auto 10px auto;

  padding:12px;

  border:none;

  border-radius:12px;


  background:
  linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
  );


  color:white;

  font-size:15px;

  font-weight:600;


  cursor:pointer;


  flex-shrink:0;

}


.logout-btn:hover{

  transform:translateY(-2px);

}



/* =========================================================
 CONTI PAGE
========================================================= */


.accounts-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(300px,1fr));

  gap:20px;

}



.cards-list{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:20px;

}



.mini-card{

  background:#fafafa;

  border:1px solid #eee;

  padding:20px;

  border-radius:15px;

  transition:.3s;

}



.mini-card:hover{

  transform:translateY(-3px);

  box-shadow:var(--shadow);

}



.info-box{

  margin-top:20px;

  background:#fff8e8;

  border-left:5px solid var(--gold);

  padding:18px;

  border-radius:12px;

}



/* =========================================================
 FORMS / BONIFICO
========================================================= */


.form-container{

  background:white;

  padding:30px;

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  max-width:700px;

}



.form-group{

  margin-bottom:20px;

}



.form-group label{

  display:block;

  margin-bottom:8px;

  font-weight:500;

}



.form-group input,
.form-group select,
.form-group textarea{


  width:100%;


  padding:14px;


  border:1px solid #ddd;


  border-radius:12px;


  outline:none;


  transition:.3s;


}



.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{


  border-color:var(--primary);


}



/* =========================================================
 POPUP
========================================================= */


.popup{

  position:fixed;

  inset:0;

  background:rgba(0,0,0,.45);

  display:none;

  justify-content:center;

  align-items:center;

  z-index:9999;

}



.popup-content{

  background:white;

  padding:35px;

  border-radius:18px;

  min-width:320px;

  max-width:90%;

  text-align:center;

  box-shadow:
  0 15px 40px rgba(0,0,0,.25);

}



/* =========================================================
 LOADER
========================================================= */


.loader{

  width:60px;

  height:60px;


  border:6px solid #eee;


  border-top:6px solid var(--primary);


  border-radius:50%;


  margin:auto;


  animation:rotation 1s linear infinite;


}



@keyframes rotation{


  from{

      transform:rotate(0deg);

  }


  to{

      transform:rotate(360deg);

  }


}



#popupMessage{

  margin-top:20px;

  font-size:18px;

  font-weight:bold;

}



.success{

  color:var(--success);

}



/* =========================================================
 LOADING DOTS
========================================================= */


.loading-dots{

  display:flex;

  justify-content:center;

  gap:5px;

  margin-top:5px;

}



.loading-dots span{

  width:7px;

  height:7px;

  border-radius:50%;

  background:var(--warning);

  animation:dots 1.2s infinite;

}



.loading-dots span:nth-child(2){

  animation-delay:.2s;

}



.loading-dots span:nth-child(3){

  animation-delay:.4s;

}



@keyframes dots{


  0%,80%,100%{

      opacity:.3;

      transform:scale(.8);

  }


  40%{

      opacity:1;

      transform:scale(1.3);

  }


}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */


/* =========================
   TABLETTE
========================= */


@media screen and (max-width:1024px){


  .sidebar{

      width:230px;

  }


  .main{

      margin-left:230px;

      padding:25px;

  }


  .balance-card{

      padding:20px;

  }


  .card-bank{

      width:320px;

  }


}



/* =========================
 MOBILE
========================= */


@media screen and (max-width:768px){



  body{

      overflow-x:hidden;

  }



  /* MENU BUTTON */

  .menu-toggle{

      display:flex;

      justify-content:center;

      align-items:center;

  }



  /* SIDEBAR MOBILE */


  .sidebar{


      left:-280px;


      width:260px;


      transition:.35s ease;


      box-shadow:
      5px 0 20px rgba(0,0,0,.25);


  }



  .sidebar.active{

      left:0;

  }




  /* MAIN */


  .main{


      margin-left:0;


      padding:80px 15px 20px;


  }



  h1{

      font-size:22px;

  }



  h2{

      font-size:19px;

  }



  h3{

      font-size:16px;

  }



  /* CARDS */


  .stats-container,
  .actions-container{


      grid-template-columns:1fr;


  }



  .balance-card{


      width:100%;


      padding:18px;


  }




  /* GOLD CARD */


  .card-bank{


      width:100%;


      height:auto;


      min-height:200px;


  }



  /* TABLE */


  .transactions{


      padding:15px;


  }



  .table-container{


      overflow-x:auto;


  }



  table{


      min-width:650px;


  }




  /* CONTI */


  .accounts-grid{


      grid-template-columns:1fr;


  }



  .cards-list{


      grid-template-columns:1fr;


  }




  /* FORMULAIRES */


  .form-container{


      padding:20px;


  }



  .popup-content{


      min-width:auto;


      width:90%;


  }



}




/* =========================
 PETITS TELEPHONES
========================= */


@media screen and (max-width:480px){



  .main{


      padding-left:10px;


      padding-right:10px;


  }



  .logo{


      font-size:16px;


  }



  .client-info h3{


      font-size:14px;


  }



  .balance-card{


      border-radius:12px;


  }



  .card-bank{


      padding:18px;


  }



  .btn-bonifico{


      font-size:14px;


  }



}



/* =========================================================
 UTILITIES
========================================================= */


.text-center{

  text-align:center;

}


.mt-20{

  margin-top:20px;

}


.mt-30{

  margin-top:30px;

}


.hidden{

  display:none;

}



/* =========================================================
 ANIMATIONS
========================================================= */


.fade-in{


  animation:fadeIn .5s ease;


}



@keyframes fadeIn{


  from{

      opacity:0;

      transform:translateY(10px);

  }


  to{

      opacity:1;

      transform:translateY(0);

  }


}



/* =========================================================
 ACCESSIBILITY
========================================================= */


button:focus,
input:focus,
select:focus,
textarea:focus{


  outline:2px solid rgba(123,15,26,.3);


}



/* =========================================================
 IMAGES
========================================================= */


img{

  max-width:100%;

  height:auto;

}

/* =========================================================
   COMPONENTS GENERAUX
========================================================= */


/* CARTE SIMPLE */

.card{

  background:white;

  border-radius:var(--radius);

  padding:25px;

  box-shadow:var(--shadow);

}



/* GRILLE GENERALE */

.grid{

  display:grid;

  gap:20px;

}



.grid-2{

  grid-template-columns:
  repeat(2,1fr);

}



.grid-3{

  grid-template-columns:
  repeat(3,1fr);

}



/* BADGES */

.badge{

  display:inline-block;

  padding:5px 12px;

  border-radius:20px;

  font-size:12px;

  font-weight:600;

}



.badge-success{

  background:#dcfce7;

  color:#15803d;

}



.badge-warning{

  background:#fef3c7;

  color:#b45309;

}



.badge-danger{

  background:#fee2e2;

  color:#dc2626;

}



/* =========================================================
 TRANSACTIONS MOBILE
========================================================= */


.transaction-card{

  display:none;

}



@media(max-width:600px){


  .desktop-table{

      display:none;

  }



  .transaction-card{


      display:block;


      background:white;


      padding:15px;


      margin-bottom:12px;


      border-radius:12px;


      box-shadow:var(--shadow);


  }



  .transaction-card div{


      display:flex;


      justify-content:space-between;


      margin-bottom:8px;


  }



}



/* =========================================================
 NAV ACTIVE
========================================================= */


.menu a.active{


  background:rgba(255,255,255,.18);


}



/* =========================================================
 SMOOTH EFFECTS
========================================================= */


button,
.card,
.balance-card{


  -webkit-tap-highlight-color:transparent;


}




/* =========================================================
 PRINT
========================================================= */


@media print{


  .sidebar,
  .menu-toggle,
  .logout-btn{


      display:none!important;


  }



  .main{


      margin:0;


      padding:0;


  }


}



/* =========================================================
 FIN STYLE.CSS
 BANCA DI ASTI RESPONSIVE
========================================================= */

.iban{

  background:#f8f8f8;

  padding:10px;

  border-radius:10px;

  font-size:14px;

  letter-spacing:1px;

  word-break:break-all;

}



/* MONTANT */

.amount{

  color:var(--primary);

  font-weight:700;

}



/* GROUPE DE BOUTONS */

.button-group{

  display:flex;

  flex-wrap:wrap;

  gap:15px;

  margin-top:20px;

}



.button-group .btn-bonifico{

  width:auto;

  flex:1;

  min-width:180px;

}





/* BOUTONS GENERAUX */

button{

  border:none;

}





/* ZONE DANGEREUSE */

.danger-box{

  border:1px solid #dc2626;

}



.danger-box h2{

  color:#dc2626;

}





.danger-button{

  padding:14px 20px;

  border-radius:12px;

  background:#dc2626;

  color:white;

  font-weight:600;

  cursor:pointer;

  transition:.3s;

}



.danger-button:hover{

  transform:translateY(-2px);

  box-shadow:0 10px 20px rgba(220,38,38,.25);

}





/* BOUTON DANS LES PAGES */

.balance-card button{

  cursor:pointer;

}





/* MOBILE */

@media(max-width:600px){


  .button-group{

      flex-direction:column;

  }



  .button-group .btn-bonifico{

      width:100%;

  }


}

@media screen and (max-width:768px){

  .sidebar{
  
      overflow-y:auto;
  
  }
  
  .logout-btn{
  
      display:flex;
  
      justify-content:center;
  
      align-items:center;
  
  }
  
  }