@charset "UTF-8";

/*
 * Author: Bhavnath
 * Website: https://daystracker.bhavnath.com
 * Copyright (c) 2025 Bhavnath
 * Licensed under MIT License
 */
 
 body {
      font: 400 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      -webkit-font-smoothing: antialiased;
      color:#fff;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      padding: 10px;
      max-width: 1000px;
      margin: 0px auto;
      width: 100%;
      box-sizing: border-box;
      background:#1e1e1e;
    }
    
    h1 {
      color:#fff;
      font-weight: 700;    
      letter-spacing:-1.3px;
      font-size:35px;
    }
    
    h1,h2,h5{
        margin:0;
    }
   
    h3{
        margin-top:0;
    }
    
    .top-header {
      text-align: left;
      margin-bottom: 20px;
    }
    
    select, input[type="date"] {     
      font-size: 1em;
      font-weight:600;
      background-color:mediumvioletred;
      color: rgb(255, 255, 255);
      border: 1px solid mediumvioletred;
      padding: 8px;
      border-radius: 5px;
    }
    
    input[type="date"]:disabled {
        background-color: #2c2c2c !important;
        color: #fff !important;
        opacity: 1 !important; /* Override default fade */
        -webkit-text-fill-color: #fff !important; /* Chrome/Safari fix */
        border: 1px solid #444;
        cursor: not-allowed;
        }

    button {
      cursor: pointer;
      background-color: #3498db;
      color: white;
      transition: background-color 0.3s ease;
      font-size:13px;
      font-weight:bolder;
      padding: 10px;
      border: 1px solid #1e1e1e;
      border-radius: 5px;
    }
    
    button:hover {
      background-color: #2980b9;
    }
    
    .removeVisit button {
        background-color:indianred;
    }
    
    .removeVisit button:hover {
        background-color:red;
    }
    
    .exit-section button
    {
        background:purple;
        color:#fff;
    }
    .exit-section button:hover
    {
        background:darkviolet;
        color:#fff;
    }
    .addVisit button
    {
        background:royalblue;
    }
    
    .addVisit button:hover
    {
        background:blue;
    }
/*
    .visit {
        background: #262626;
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid rgb(46, 204, 113);
        border-radius: 15px;
    }
*/    
    .visit {
        border: 2px solid transparent;
        border-radius: 15px;
        background: 
            linear-gradient(#1e1e1e, #1e1e1e) padding-box,
            linear-gradient(45deg, #ff4d4d, #ffcc00, #00ffcc, #9966ff) border-box;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    
    .visit-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    
    .highlight-box {
        padding: 10px;
        border-left-width: 5px;
        border-left-style: solid;
        border-left-color: rgb(46, 204, 113);
        border-radius: 5px;
        margin: 10px 0px;
    }
    .remaining-days-box {
        padding: 20px;
        border-radius: 10px;
        margin-left: 20px;
        flex: 1;
    }
    
    .label-block {
      display: block;
      margin: 10px 0;
    }
    .main-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    #visitsContainer {
      flex: 2;
      min-width: 300px;
    }
    #totalDaysDisplay {
      font-weight: bold;
      margin:0;
    }
    .warning {
      background:red;
      color:yellow;
      font-weight: bold;
      text-transform:uppercase;
      font-size:15px;
    }
    .highlight {
      font-weight: bold;
      color:coral;
      font-size: 1.2em;
    }
    
    .days-spent{
        color:#fff;
    }
    .daysNumber{
        color: greenyellow;font-weight: 500;
    }
    
    .leaveBy{
        font-weight:bolder;
        color:coral;
    }
    
    .visitname{
        color:mediumaquamarine;font-size:1.2em;padding-bottom:3px;
    }
    
    .visit.previousbg {
         border:1px solid #5e6166;
    }
    .visit.previousbg .visitname{
         color:darkgrey;
    }
    
    #yearlyStats ul {
        list-style-type: disc;
        color:yellowgreen;
        font-size: 1.2em;
    }
    
    footer{margin-top:auto;color:white;font-size: 0.85em;text-align:left;}
    footer a{color:white;}
    
    .gradient-text {
      background: linear-gradient(90deg, #9B5DE5, #00BBF9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    

    @media (max-width: 768px) {
      .main-content {
        flex-direction: column;
      }
      .remaining-days-box {
        margin-left: 0;
      }
    }