/*
  Apple-inspired Modern Minimalist CSS
  - Clean, elegant, and spacious
  - Rounded corners, soft shadows, subtle gradients
  - Consistent spacing, font sizes, and transitions
  - Light and dark mode support
*/

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

:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.95rem;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,0.08), 0 1.5px 4px rgba(0,0,0,0.04);
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
  /* Light theme colors */
  --color-primary: #007aff;
  --color-accent: #ff2d55;
  --color-success: #34c759;
  --color-danger: #ff3b30;
  --color-bg: #f8f8fa;
  --color-surface: #fff;
  --color-border: #e0e0e5;
  --color-text: #222;
  --color-muted: #888;
  --color-link: #007aff;
  --color-link-hover: #0051a8;
}

body.light-mode {
  --color-primary: #007aff;
  --color-accent: #ff2d55;
  --color-success: #34c759;
  --color-danger: #ff3b30;
  --color-bg: #f8f8fa;
  --color-surface: #fff;
  --color-border: #e0e0e5;
  --color-text: #222;
  --color-muted: #888;
  --color-link: #007aff;
  --color-link-hover: #0051a8;
}

body.dark-mode {
  --color-primary: #0a84ff;
  --color-accent: #ff375f;
  --color-success: #30d158;
  --color-danger: #ff453a;
  --color-bg: #18181c;
  --color-surface: #23232a;
  --color-border: #2c2c36;
  --color-text: #f5f5f7;
  --color-muted: #aaa;
  --color-link: #0a84ff;
  --color-link-hover: #64baff;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}

body.dark-mode {
  background: var(--color-bg);
  color: var(--color-text);
}

.container, .panel, .apple-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem 2rem;
  margin: 2rem auto;
  transition: box-shadow var(--transition), background var(--transition);
}

body.dark-mode .container,
body.dark-mode .panel,
body.dark-mode .apple-card {
  background: var(--color-surface-dark);
  box-shadow: 0 8px 32px rgba(0,0,0,0.32);
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 0;
  margin-bottom: 1.2rem;
}

input[type="text"],
input[type="password"],
input[type="search"],
textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #f4f4f7;
  color: var(--color-text);
  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;
  outline: none;
  transition: border var(--transition), background var(--transition);
  box-sizing: border-box;
}
input:focus, textarea:focus {
  border-color: var(--color-primary);
  background: #fff;
}
body.dark-mode input,
body.dark-mode textarea {
  background: #23232a;
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-dark);
}
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  background: #23232a;
  border-color: var(--color-primary);
}

button, input[type="submit"], .apple-btn {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  border: none;
  padding: 0.85rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  margin-bottom: 0.5rem;
}
button:hover, input[type="submit"]:hover, .apple-btn:hover {
  background: var(--color-link-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px) scale(1.03);
}

.apple-btn-accent {
  background: var(--color-accent);
}
.apple-btn-success {
  background: var(--color-success);
  color: #fff;
}
.apple-btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.tabs {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 2rem;
  background: #f4f4f7;
  border: 1px solid var(--color-border);
}
body.dark-mode .tabs {
  background: #23232a;
  border: 1px solid var(--color-border-dark);
}
.tab {
  flex: 1;
  padding: 1rem 0;
  text-align: center;
  cursor: pointer;
  color: var(--color-muted);
  font-weight: 600;
  background: transparent;
  transition: background var(--transition), color var(--transition);
  border: none;
}
.tab.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.08);
}

.theme-toggle {
  width: 56px;
  height: 32px;
  background: var(--color-border);
  border-radius: 32px;
  position: relative;
  border: 2px solid var(--color-border);
  margin: 1.5rem auto 0 auto;
  cursor: pointer;
  transition: background var(--transition), border var(--transition);
  display: flex;
  align-items: center;
}
.theme-toggle .slider {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: left var(--transition), background var(--transition);
}
body.dark-mode .theme-toggle {
  background: var(--color-surface);
  border-color: var(--color-border);
}
body.dark-mode .theme-toggle .slider {
  left: 26px;
  background: var(--color-bg);
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-bottom: 1.2rem;
}
input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 1.1em;
  height: 1.1em;
  border-radius: 4px;
  margin-right: 0.5em;
}

.logo {
  font-family: 'Inter', 'Gloria Hallelujah', cursive, var(--font-family);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 8px rgba(0,122,255,0.08);
}
.tagline {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-bottom: 2rem;
}

/* Panel Layouts for Notes Page */
.layout-flex {
  display: flex;
  min-height: 80vh;
  gap: 2rem;
}
.left-panel, .center-panel, .right-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  transition: box-shadow var(--transition), background var(--transition);
}
body.dark-mode .left-panel,
body.dark-mode .center-panel,
body.dark-mode .right-panel {
  background: var(--color-surface-dark);
}
.left-panel {
  flex: 1 1 22%;
  min-width: 220px;
  max-width: 320px;
}
.center-panel {
  flex: 2 1 50%;
  min-width: 320px;
}
.right-panel {
  flex: 1 1 22%;
  min-width: 220px;
  max-width: 320px;
}

.note-item {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  background: #f4f4f7;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
  box-shadow: none;
}
.note-item.active, .note-item:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,122,255,0.08);
  border: 1px solid var(--color-primary);
}
body.dark-mode .note-item {
  background: var(--color-surface);
  color: var(--color-text);
}
body.dark-mode .note-item.active, body.dark-mode .note-item:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Utility classes */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.gap-2 { gap: 2rem; }

/* Subtle fade-in animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Subtle button press animation */
button:active, .apple-btn:active {
  transform: scale(0.98);
}

/* Error and success messages */
.error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  min-height: 1.5em;
  margin-top: 0.5em;
  text-align: left;
}
.success {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  min-height: 1.5em;
  margin-top: 0.5em;
  text-align: left;
}

/* Responsive */
@media (max-width: 1200px) {
  .layout-flex { gap: 1.2rem; }
  .container, .panel, .apple-card { padding: 2rem 1rem; }
}
@media (max-width: 900px) {
  .layout-flex { flex-direction: column; gap: 1.2rem; }
  .left-panel, .center-panel, .right-panel { min-width: 0; max-width: 100%; padding: 1.2rem 0.7rem; }
}
@media (max-width: 600px) {
  .container, .panel, .apple-card { padding: 1rem 0.5rem; margin: 1rem 0.2rem; }
  .left-panel, .center-panel, .right-panel { padding: 1rem 0.5rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  h3, h4, h5 { font-size: 1.05rem; }
  .logo { font-size: 1.3rem; }
  .tabs { flex-direction: column; }
  .tab { padding: 0.7rem 0; }
  input, textarea, button, .apple-btn { font-size: 1rem; padding: 0.7rem 1rem; }
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Utility for theme icons */
.theme-toggle .slider::before {
  content: '\2600'; /* sun by default */
  position: absolute;
  left: 6px;
  top: 4px;
  font-size: 1.1em;
  color: #f7b500;
  transition: opacity 0.2s;
}
body.dark-mode .theme-toggle .slider::before {
  content: '\1F319'; /* moon */
  left: 6px;
  color: #ffd700;
}