:root{
  /* Baby blue theme - soft and calming */
  --bg:#e6f3ff;
  --panel:#ffffff;
  --panel-2:#f0f8ff;
  --muted:#6b8cae;
  --text:#2c5282;
  --brand:#4a90e2;
  --accent:#87ceeb;
  --border:#b8d4f1;
  --red:#e74c3c;
  --sidebar-bg: #b8d4f1;
  --sidebar-hover: #87ceeb;
  
  /* Modern design variables */
  --shadow-sm: 0 1px 2px 0 rgba(44, 82, 130, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(44, 82, 130, 0.1), 0 2px 4px -1px rgba(44, 82, 130, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(44, 82, 130, 0.1), 0 4px 6px -2px rgba(44, 82, 130, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(44, 82, 130, 0.1), 0 10px 10px -5px rgba(44, 82, 130, 0.04);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
}

*{
  box-sizing:border-box
}
html,body{
  height:100%
}
body{
  margin:0; 
  color:var(--text);
  background:radial-gradient(1200px 600px at 60% -10%, #ffffff 0, var(--bg) 50%);
  font:500 15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;
}
a{
  color:inherit;
  text-decoration:none;
}
input,textarea,button{
  font:inherit
}

/* --- Fixed sidebar --- */
.sidebar{
  position:fixed; 
  top:0; 
  left:0; 
  bottom:0;
  width:230px; 
  height:100vh;
  background:var(--sidebar-bg); 
  border-right:1px solid var(--border); 
  padding:18px;
  overflow-y:auto;
  transform: translateX(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
  box-shadow: var(--shadow-lg);
}

/* New: Style for the close button inside the sidebar */
.close-sidebar-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    padding: 8px;
    display: none; /* Hidden by default on desktop */
}

.brand{
  letter-spacing:.08em; 
  font-weight:800; 
  color:var(--brand); 
  margin-bottom:24px;
  font-size: 1.25rem;
}
.sidebar nav a{
  display:block; 
  padding:14px 16px; 
  border-radius:var(--radius-lg); 
  color:var(--muted);
  font-weight:500;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.sidebar nav a.active
{
  background:var(--sidebar-hover); 
  color:var(--text);
  font-weight:600;
  box-shadow: var(--shadow-sm);
}
.sidebar nav a:hover{
  background-color: var(--sidebar-hover);
  transform: translateX(4px);
}

/* Alert icon and abnormal heartbeat styles */
.nav-alert-icon{
  display:inline-block;
  margin-left:5px;
  color:var(--red);
  font-size:1.2em;
}
.heartbeat-alert{
  color:var(--red);
  font-weight:bold;
}
.abnormal-icon{
  margin-left:0.25rem;
}

/* --- Main content pushed right of fixed sidebar --- */
.content{
  margin-left:230px; /* same as .sidebar width */
  padding:16px 32px 40px 32px; min-width:0;
  position:relative; /* allow overlay elements like stats chart without shifting layout */
}

/* --- Mobile Nav Trigger --- */
.nav-trigger-btn{
  display:none; /* Hidden by default on desktop */
  position:fixed; top:18px; left:18px; 
  /* UPDATED: Lowered z-index */
  z-index:10; 
}

/* --- Toolbar / buttons --- */
/* Changed to display toolbar-actions aligned to the right by default */
.toolbar{display:flex; justify-content:flex-end; gap:10px}
.toolbar-actions{display:flex; gap:10px;}
/* Added for mobile: align toolbar elements to the left on small screens */
@media (max-width: 768px) {
    .toolbar {
        /* On mobile, the button trigger is on the left, but the toolbar buttons should align right
           relative to the content, or just take the space they need. */
        justify-content: flex-end; 
        flex-wrap: wrap; 
    }
}
.icon-btn{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:12px; border-radius:var(--radius-lg); cursor:pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.icon-btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter:brightness(0.95);
}
.primary{
  background:linear-gradient(135deg,var(--brand),var(--accent));
  border:none; 
  color:white; 
  font-weight:600; padding:14px 20px; border-radius:var(--radius-lg); cursor:pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-md);
}
.primary:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter:brightness(1.05);
}
.ghost{
  background:transparent; border:1px solid var(--border); color:var(--text); padding:12px 16px; border-radius:var(--radius-lg); cursor:pointer;
  transition: all 0.2s ease;
}
.ghost:hover{
  background:var(--panel-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- Headline --- */
.headline h2{margin:18px 0 6px 0}
.headline p{margin:0; color:var(--muted)}

/* --- Stats cards --- */
.stats{display:flex; gap:12px; margin:8px 0 12px}
.stat{
  background:var(--panel); border:1px solid var(--border); padding:20px; border-radius:var(--radius-xl); width:220px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.stat:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.stat .label{color:var(--muted); display:block; font-size:13px; font-weight:500}
.stat .value{font-size:32px; font-weight:800; margin-top:8px; color:var(--brand)}
/* Make stats stack on small screens */
@media (max-width: 600px) {
    .stats {
        /* Changed to allow side-by-side display */
        flex-direction: row; 
        gap: 10px;
        /* Added for equal spacing */
        justify-content: space-between;
    }
    .stat {
        /* Set width to nearly 50% to fit two side-by-side with gap */
        width: 49%; 
    }
}

/* --- Dashboard stats hover chart (overlay) --- */
.stats-chart{
  position:absolute;
  top:0; /* will be set dynamically from JS */
  left:0; /* will be set dynamically from JS */
  width:360px; /* default, overridden from JS */
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.18);
  padding:12px 14px;
  z-index:70; /* above cards, below modals (80) */
  display:none;
}
.stats-chart-body{
  height:260px;
  margin-top:8px;
}

/* --- Search --- */
.searchbar{
  margin:12px 0 22px
}
.searchbar input{
  width:100%; 
  background:var(--panel); 
  color:var(--text); 
  border:1px solid var(--border);
  border-radius:var(--radius-lg); 
  padding:14px 18px; 
  outline:none;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.searchbar input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* --- Grid of owner cards --- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:20px}

/* --- Card --- */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-xl); padding:20px; position:relative;
  display:flex; gap:16px; align-items:flex-start;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.initials{width:56px;height:56px;border-radius:var(--radius-lg);background:var(--brand);color:white;display:grid;place-items:center;font-weight:800; font-size:1.1rem}
.card h4{margin:0 0 8px 0; font-size:1.1rem; color:var(--text)}
.row{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);padding:8px 12px;border-radius:var(--radius-md);margin-top:8px;color:var(--muted);font-size:12px; font-weight:500}
.avatar{object-fit:cover;width:56px;height:56px;border-radius:var(--radius-lg);border:1px solid var(--border)}

/* --- Kebab / menus --- */
.kebab{ position:absolute; right:10px; top:10px; display:flex; gap:6px; }
.kebab .menu{
  position:absolute; right:0; top:38px; 
  /* UPDATED: Change to panel background */
  background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:none; min-width:120px;
  z-index:5;
}
.kebab .menu.open{display:block}
.kebab .menu button{
  width:100%; background:transparent; color:var(--text); border:none; padding:10px 12px; text-align:left; cursor:pointer;
}
/* UPDATED: Light theme hover effect */
.kebab .menu button:hover{background:var(--panel-2)}
.note-icon{
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px; cursor:pointer;
}

/* --- Notes right drawer --- */
.notes{
  position:fixed; right:0; top:0; height:100vh; width:380px; background:var(--panel);
  border-left:1px solid var(--border); transform:translateX(100%); transition:.25s transform ease; padding:16px; z-index:30;
}
.notes.open{transform:translateX(0)}
.notes-head{display:flex;justify-content:space-between;align-items:center}
.note-form{display:grid;gap:10px;margin:10px 0 14px}
.note-form textarea{resize:vertical;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px}
.notes-list{display:grid;gap:10px; max-height:70vh; overflow:auto}
.note-item{
  background:var(--panel-2); border:1px solid var(--border); padding:10px; border-radius:10px; display:grid; gap:6px
}
.note-meta{color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center}
.note-delete{background:transparent;border:1px solid var(--border);color:var(--red);border-radius:8px;padding:4px 8px;cursor:pointer}
/* Make Notes Drawer full width on small screens */
@media (max-width: 500px) {
    .notes {
        width: 100%;
    }
}


/* --- Modal --- */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
}
.modal.open{display:flex}
.modal-card{background:var(--panel); border:1px solid var(--border); border-radius:16px; width:min(720px,92vw); padding:16px}
.modal-head{display:flex;justify-content:space-between;align-items:center}

/* Shared content styling for small edit/confirm dialogs */
.modal-content{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.modal-header h3{
  font-size:18px;
  font-weight:700;
}
.modal-body label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.modal-body textarea{
  resize:vertical;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  padding:8px 10px;
}

.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.grid-form label{display:grid;gap:6px;color:var(--muted);font-size:13px}
.grid-form input{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
/* Make modal form single column on small screens */
@media (max-width: 768px) {
    .grid-form {
        grid-template-columns: 1fr;
    }
}

/* --- Toasts --- */
.toast-area{
  position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 60;
}
.toast{
  min-width: 260px; max-width: 420px;
  background: var(--panel); border:1px solid var(--border); color:var(--text);
  border-left: 6px solid var(--brand);
  /* UPDATED: Soften shadow for light theme */
  padding: 12px 14px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); 
  display: grid; gap: 4px; animation: toast-in .2s ease;
}
.toast.success{ border-left-color:#22c55e }
.toast.error{ border-left-color:var(--red) }
/* UPDATED: Use accent var */
.toast.info{ border-left-color:var(--accent) }
.toast .title{ font-weight: 800 }
.toast .msg{ color: var(--muted); font-size: 13px }
.toast .row{ display:flex; justify-content:space-between; align-items:center }
.toast button{
  background:transparent; border:none; color:var(--muted); cursor:pointer; padding:6px 8px; border-radius:8px;
}
/* UPDATED: Light theme hover effect */
.toast button:hover{ background:rgba(0,0,0,.05); color:var(--text) }
@keyframes toast-in{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }
@keyframes toast-out{ to{opacity:0; transform: translateY(8px)} }

/* --- Responsive Layout Breakpoints --- */
@media (max-width: 900px){
  /* Owner/Cat Grid Adjustment */
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

@media (max-width: 768px){
  /* Mobile Layout - Sidebar Overlay */
  .sidebar{
    transform: translateX(-100%); /* Start hidden */
  }
  /* NEW: Use .open class to show sidebar */
  .sidebar.open{
    transform: translateX(0); /* Slide in when open */
    /* UPDATED: Soften shadow for light theme */
    box-shadow: 0 0 50px rgba(0,0,0,.3);
  }
  
  /* NEW: Hide the menu button when the sidebar is open */
  .sidebar.open ~ .nav-trigger-btn {
      display: none;
  }
  
  .content{
    margin-left: 0; /* Full width content */
    padding: 16px 18px 60px 18px; /* Adjusted padding */
  }
  .nav-trigger-btn{
    display: block; /* Show the menu button */
    /* NEW: Move trigger button to the left */
    left: 18px;
  }
  /* NEW: Show the close button inside the sidebar on mobile */
  .close-sidebar-btn {
    display: block;
  }
  /* Grid Adjustment */
  .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}