:root{--muted: blue;
--accent:#6495ed;
--text:#0c0104;}

body{
    font-family:Arial;
    background:white;
    color:black;
    margin:0;
    }
    
    .center{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    }
    
    .login-box{
    width:21rem;
    }
    
    .big{
    font-size: clamp(1.5rem, 2.35rem, 3rem);
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(90deg, #0d47a1, #0c0104);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
     margin-bottom: 0.5rem;
     text-align: center;
     position: relative;
     font-family: 'poppins', sans-serif;
     }

     

     .big::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    background: #2575fc;    
    }

    h1, h3{
        margin: 0.1rem 0;
    }
    
    input,textarea,select{
  width: 95%;
  max-width: 25rem;
  border: 0.1rem solid var(--accent);
  border-radius: 2em;
  font-size: 1rem;
  padding: .6em 1em;
  transition: width 0.3s ease-in-out;
  margin-bottom: .3rem;
 }

    textarea{resize:vertical}

input:focus {
  width: 97%;
  border: 0.1rem solid var(--muted);
}
    
    button{
  cursor:pointer;
  background:var(--accent);
  
  border: none;
  color: white;
  padding: 0.5em 1.2em;
  border-radius: 2em;
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

button:hover {
  background: var(--muted);
  color: #ffffff;
}

.dashout
{
   margin-right: 15px;

}
    .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    color: #222;
    }


    .header{
    color:#0d47a1;
    padding:15px;
    display:flex;
    justify-content:space-between;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.3s ease;
     margin-bottom: 20px;
     font-family: 'poppins', sans-serif;
     }

     .header:hover{
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
     }

     .medium{
    font-size: clamp(0.75rem, 1.175rem, 1.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(90deg, #0d47a1, #0c0104);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
     margin-bottom: 0.5rem;
     text-align: center;
     position: relative;
     font-family: 'poppins', sans-serif;
     }

     

     .medium::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 3px;
    background: #2575fc;    
    }
    
    .tabs button{
    margin:10px;
    
    padding: 0 48px;
    height: 2rem;
    
    cursor: pointer; 
    display: block; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
     
     font-family: 'poppins', sans-serif;
    }

    button img{
    margin-left:5px;
    transition: transform 0.3s ease;
   
    vertical-align: middle;
        }
    
        button:hover img{
            transform: translateX(5px);
    }
    
    .card{
    background:#e3f2fd;
    padding:15px;
    margin:10px;
    border-radius:5px;
    }
    
    .slide-panel{
    position:fixed;
    right:-500px;
    top:0;
    width:500px;
    height:100vh;
    max-height:100vh;
    background:white;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    transition:.3s;
    padding-left:20px;
    padding-right:20px;
    /* account for mobile browser safe areas (iOS) */
    padding-top: calc(20px + constant(safe-area-inset-top));
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + constant(safe-area-inset-bottom));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    z-index:800;
    }
    
    .slide-panel.open{
    right:0;
    }
    
    .spinner{
    border:4px solid #eee;
    border-top:4px solid #0d47a1;
    width:40px;
    height:40px;
    border-radius:50%;
    animation:spin 1s linear infinite;
    }
    
    .hidden{
    display:none;
    }
    
    @keyframes spin{
    100%{transform:rotate(360deg)}
    }
    
    @media(max-width:768px){
    
    .slide-panel{
    width:100%;
    }
    
    }
        /* Snackbar for notifications */
        .snackbar{
            visibility: hidden;
            min-width: 200px;
            max-width: 90%;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            padding: 12px 16px;
            position: fixed;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            z-index: 1000;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.25s ease, visibility 0.25s ease, bottom 0.25s ease;
        }

        .snackbar.show{
            visibility: visible;
            opacity: 1;
            bottom: 40px;
        }

        /* Spinner overlay to dim background while processing */
        .spinner-overlay{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display:flex;
            align-items:center;
            justify-content:center;
            background: rgba(0,0,0,0.25);
            z-index: 900;
        }

        /* Clinical Notes Modal */
        .modal{
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display:flex;
          align-items:center;
          justify-content:center;
          background: rgba(0,0,0,0.4);
          z-index: 1000;
        }
        .modal-content{
          background: #fff;
          padding: 20px;
          border-radius: 8px;
          width: 90%;
          max-width: 540px;
          box-shadow: 0 8px 30px rgba(0,0,0,0.15);
          box-sizing: border-box;
          /* allow scrolling inside the modal when content overflows */
          max-height: calc(100vh - 80px);
          overflow: auto; /* enables vertical and horizontal scroll when needed */
        }

        /* ensure modal inputs/textareas fill modal width */
        .modal-content input,
        .modal-content textarea,
        .modal-content select{width:100%;max-width:100%;}
        .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

        /* ensure hidden modal remains hidden even when .modal sets display */
        .modal.hidden{display:none !important;pointer-events:none}

        /* ensure spinner overlay hides when .hidden is applied */
        .spinner-overlay.hidden{display:none !important;pointer-events:none}