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


main{
    background-color: rgb(252, 255, 255);
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .container{
        width: 100%;
        height: 100%;
        background-color: rgb(252, 255, 255);
        overflow: auto;
    
        .details{
            height: 100%;
            margin: auto;
            padding: 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 30px;
        }
    }
}

.login-container{
    display: flex;
    z-index: 5;

    .login-details{
        max-width: 500px;
    
        div{
            color: grey;
        }
        h1{
            font-size: 30px;
            margin-top: 8px;
            color: black;
        }
        
        form{
            display: flex;
            flex-direction: column;
            gap: 20px;
            line-height: 1;
    
            div{
                display: flex;
                flex-direction: column;
            }
    
            label{
                color: rgb(7, 7, 7);
                font-size: 20px;
            }
            input{
                padding: 15px 5px;
                border-radius: 10px;
                border: .5px solid grey;
                outline: none;
                margin-top: 5px;
                
                &:focus{
                    outline: .5px solid #2f5aff;
                    border: none;
                }
            }
            button{
                background-color: #2f5aff;
                color: white;
                padding: 15px 20px ;
                border: none;
                border-radius: 10px;
    
            }
        }
    }
}


.home{
    background-color: #f6f7f9 !important;

    .header{
        width: 100%;
        height: 70px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid rgba(209, 209, 209, 0.685);

        h1{
            font-size: 20px;
        }
        p{
            font-size: 16px;
            color: grey;
        }

        svg{
            width: 30px;
            cursor: pointer;
        }
    }
    .home-details{
        max-width: 700px ;
        margin: auto ;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        position: relative;
        
        .get-email-container{
            border: .5px solid rgba(209, 209, 209, 0.685) ;
            background-color: white;
            height: 300px;
            /* max-height:300px ; */
            display: flex;
            flex-direction: column;
            border-radius: 15px;
            
            
            .label{
                min-height: 70px ;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                border-bottom: .5px solid rgba(209, 209, 209, 0.685) ;

                button{
                    background-color: white;
                    padding: 8px 30px;
                    border: none;
                    border-radius: 5px;
                    outline: .5px solid rgba(209, 209, 209, 0.685) ;
                    &:hover{
                        outline: .5px solid #2f5aff ;

                    }
                }
            }
            .emails-details{
               text-align: center;
               max-height: 270px ;
               overflow-y: auto;
            }
        }
        .compose-email-container{
            padding-bottom: 25px;
            border: .5px solid rgba(209, 209, 209, 0.685) ;
            background-color: white;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
            border-radius: 15px;
            
            .heading{
                height: 60px;
                align-content: center;
                padding: 10px;
                border-bottom: .5px solid rgba(209, 209, 209, 0.685) ;
                
                h6{
                    padding: 20px;
                    font-size: 16px;
                }
            }
            form{
                display: flex;
                flex-direction: column;
                padding: 0 20px;
                gap: 10px;

                label{
                    font-size: 15px;
                }

                .message, .subject{
                    height: 80px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    input, textarea{
                        width: 100%;
                        padding: 15px 10px;
                        border-radius: 7px;
                        border: .5px solid rgb(215, 214, 214);
                        outline: none;
                        margin-top: 5px;
                
                        &:focus{
                            outline: .5px solid #2f5aff;
                            border: none;
                        }
                    }
                }
                .message{
                    height: 150px;
                }

                .buttom{
                    display: flex;
                    justify-content: space-between;
                    align-items: end;

                    p{
                        font-size: 13px;
                    }
                    button{
                        background-color: #2f5aff;
                        width: 140px;
                        color: white;
                        padding: 15px 25px ;
                        border: none;
                        border-radius: 10px;
                        align-self: end;
                        margin-top:15px ;
                        cursor: pointer;

                        &:disabled{ 
                            background: #9CA3AF;
                            cursor: not-allowed;
                        }
                    }
                }

                
            }

        }
    }
}

table{ width:100%; border-collapse:collapse; }
thead th{
  position:sticky; top:0;
  background: #f6f7f9;
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:9px 20px;
  border-bottom:1px solid rgba(209, 209, 209, 0.685);
  z-index: 0;
}
tbody td{
  padding:8px 20px;
  font-size:13px;
  border-bottom:1px solid rgba(209, 209, 209, 0.685);
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: #F6F7F9; }

td.idx{ 
    color: #9CA3AF;
    width:40px;
}
td.addr{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    text-align: left;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:500;
  color: #9CA3AF;

  &.delivered{
    color: #22C55E;
    &::before{background: #22C55E}
  }
}

.badge::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background: #9CA3AF
}

.no-email{
    display: flex;
    height: 200px;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #9CA3AF;
}

.loader{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    img{
        width: 30px;
    }
}

.toast{
    gap:10px;
    opacity: 0;
    color:#fff;
    display: flex;
    position: fixed;
    font-size: 13px;
    align-items:center;
    padding: 12px 16px;
    border-radius: 10px;
    pointer-events: none;
    bottom: 24px; right:24px;
    transform: translateY(12px);
    background: rgb(33, 33, 33);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    transition: transform .25s ease, opacity .25s ease;

    &.show{ 
        transform:translateY(0);
        opacity:1;
    }

    .svg{
        width:16px;
        height:16px;
        border-radius:50%;
        background:#22C55E;
        display:flex; align-items:center; justify-content:center;
        flex-shrink:0;

        svg{
            width:9px; 
            height:9px; 
        }

        &.close{
            background:#c52222;
        }
    }
}

.model{
    height: 100%;
    width: 100%;
    position: fixed;
    font-size: 13px;
    display: none;
    bottom: 0; 
    right: 0;
    
    .appear{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.37);
    }

    .contain{
        background: #f6f7f9;
        width: 400px;
        height: 100%;
        z-index: 2;
        padding: 30px 10px;

        .menu-top {
            padding: 15px;
            background: #ffffff;
            border-radius: 12px;
            margin-bottom: 20px;
            border: .5px solid rgba(209, 209, 209, 0.685);
            height: 15%;

            small {
                display: block;
                color: #777;
                margin-bottom: 8px;
            }

            .sent-count {
                font-size: 21px;
                font-weight: bold;
                color: #111;
            
                span {
                    color: #999;
                    font-size: 16px;
                    font-weight: normal;
                }
            }
            
            .progress {
                height: 6px;
                background: #ddd;
                border-radius: 10px;
                margin-top: 12px;
                overflow: hidden;
            
                .progress-bar {
                    width: 80%;
                    height: 100%;
                    background: #111;
                    border-radius: 10px;
                }
            }
        }

        .menu {
            height: 85%;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 16px;

            a {
                display: block;
                padding: 14px;
                margin-bottom: 5px;
                color: #333;
                text-decoration: none;
                border-bottom: .5px solid rgba(209, 209, 209, 0.395);

                &:hover {
                    background: #f1f1f1;
                }
            }
        }
    }

    &.show{
        display: flex;
    }
}

.modal{
    width: 100%;
    height: 100%;
    background-color: #f6f7f9;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    flex-direction: column;
    gap: 40px;
    padding: 20px;

    .header{
        border-radius: 15px;
        border: .5px solid rgba(209, 209, 209, 0.685) !important;
        justify-content: start !important;
        gap: 10px;
        align-items: center;

        svg{
            width: 35px;
            border-radius: 50%;
            background-color: #ebebebb4;
            padding: 10px;
        }

        h4{
            font-size: 15px;
        }
    }

    .compose-email-container{
        padding: 20px 0;
    }
}