/* css/main.css - Global styles for the app
   Version: 3.26.0
   Purpose: Ensure mobile/tablet/desktop compatibility and accessibility
   Notes: Builds on reset.css with media queries and high-contrast options */

@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap');
@import url('reset.css');

/* App-specific styles */
body {
  font-family: Arial, sans-serif;
  color: #333;
  background-color: #f9f9f9;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.nav-links .week-item-icon,
.nav-mobile-bottom .week-item-icon {
  color: inherit;
}

/* Global form controls */
input,
textarea,
select {
  border-radius: 6px;
  border: 1px solid #9f9f9f;
  background-color: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  padding: 8px;
}

input[type="number"] {
  text-align: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.number-stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}

.stepper-btn {
  border: 1px solid #e0e0e0;
  background: #f7f7f7;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: #555;
}

.stepper-btn:hover {
  background: #ededed;
}

.stepper-input {
  width: 100%;
  text-align: center;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

body.child-theme h1,
body.child-theme h2,
body.child-theme h3,
body.child-theme h4,
body.child-theme h5,
body.child-theme h6,
body.child-theme .button,
body.child-theme button,
body.child-theme input[type="submit"],
body.child-theme .routine-primary-button,
body.child-theme .routine-flow-close,
body.child-theme .routine-flow-title,
body.child-theme .routine-flow-next-inline .value,
body.child-theme .points-progress-title,
body.child-theme .points-progress-total,
body.child-theme .points-progress-value,
body.child-theme .points-extra,
body.child-theme .points-total-label,
body.child-theme .points-total-value,
body.child-theme .status-summary strong,
body.child-theme .summary-footer span,
body.child-theme .summary-footer strong,
body.child-theme .summary-bonus,
body.child-theme .card-actions .button,
body.child-theme .start-next-button,
body.child-theme .routine-card header h3,
body.child-theme .points-progress-wrap + .points-extra {
  font-family: 'Sigmar One', cursive;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

header,
main,
footer {
  text-align: center;
  margin-bottom: 20px;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  h1 {
    font-size: 1.5em;
  }
}

/* High-contrast mode (toggleable later) */
.high-contrast {
  background-color: #000;
  color: #fff;
}

/* Dashboard specific styles */
.family-members-list { 
    margin: 20px 0; 
}
.member-item { 
    background: #f5f5f5; 
    padding: 15px; 
    margin: 10px 0; 
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.edit-btn { 
    background: #2196f3; 
}
.delete-btn { 
    background: #f44336; 
}
.role-badge {
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #4caf50;
    color: white;
}
.role-type {
    font-size: 0.9em;
    color: #666;
}