/* --- CORE THEME --- */
:root {
  --brand:#c20d0d; --brandDark:#8e0b0b;
  --ink:#0f1215; --muted:#5b6573; --bg:#f6f7fb; --card:#ffffff; --line:#e8ebf2;
  --radius:14px; --sidebarW: 260px; --topH: 64px; --footerH: 56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui, Segoe UI, Arial}
a{color:inherit;text-decoration:none}
.input, select{height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;}
.btn{
  height:36px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  border-radius:10px;
  padding:0 12px;
  font-weight:600;
  cursor:pointer;
  /* ADDED: Centers text inside the button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn.ghost{background:#fff;color:var(--brand)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding: 24px;}

/* --- APP LAYOUT --- */
.app-wrap{
  display:grid;
  grid-template-columns:var(--sidebarW) 1fr;
  grid-template-rows:var(--topH) 1fr var(--footerH);
  grid-template-areas:"sidebar topbar" "sidebar main" "sidebar footer";
  min-height:100vh;
  /* ADDED: Creates 1px borders between grid areas for perfect alignment */
  grid-gap: 1px;
  background-color: var(--line);
}
/* ADDED: Sets the background for all grid areas */
#side-bar, #top-bar, .content, #footer {
    background-color: var(--card);
}
#side-bar{grid-area:sidebar;display:flex;flex-direction:column}
#top-bar{grid-area:topbar;}
.content{grid-area:main;padding:14px;min-height:0;overflow:auto}
#footer{grid-area:footer;}

/* --- SIDEBAR & BRAND --- */
.brand{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.brand img{width:50px;height:50px;border-radius:8px;object-fit: contain;}
.brand h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px}
.nav{display:flex;flex-direction:column;padding:8px 8px 18px;overflow:auto}
.nav h4{margin:14px 10px 6px;font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
.nav a{padding:10px 12px;border-radius:12px;margin:2px 8px;color:#1d232b;border:1px solid transparent;font-weight:600;}
.nav a:hover{background:#f7f7fb;border-color:var(--line)}
.nav a.active{background:#fff1f1;border-color:#ffd1d1;color:var(--brand)}

/* --- TOPBAR --- */
.topbar{display:grid;grid-template-columns:auto 1fr auto; align-items:center;gap:20px;padding:0 24px;height:100%;}
.top-left{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.page-title{font-weight:800;font-size:16px}
/* ADDED: Centers the scripture text */
.top-center { display: flex; justify-content: center; align-items: center; text-align: center; }
.top-right{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.search{width:260px}
.profile{width:32px;height:32px;border-radius:999px;background:#ffe3e3;color:#8e0b0b;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid #ffd1d1}

/* --- FOOTER --- */
.footer{height:var(--footerH);display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:12px;color:var(--muted)}
.footer strong{color:#495057}

/* --- TIMECLOCK PAGE STYLES --- */
.timeclock-card { text-align: center; max-width: 600px; margin: 20px auto; }
.timeclock-card h1 { font-size: 24px; color: var(--ink); }
#timeclock-status { font-size: 16px; color: var(--muted); margin: 10px 0 20px; }
#timeclock-interface .btn { padding: 12px 24px; font-size: 16px; min-width: 120px; }
.log-card { max-width: 600px; margin: 20px auto; }
#log-list { padding: 0; list-style-type: none; margin-top: 20px; }
#log-list li { background: #f9f9f9; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
/* --- NEW AESTHETIC CLOCK STYLES --- */
.clock-container {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    position: relative;
    background-image: url('/logo.jpg'); /* Your 3:16 Logo */
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    border: 8px solid var(--brand);
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    background-color: var(--ink);
    border-radius: 2px;
}
.hour-hand { width: 4px; height: 40px; }
.minute-hand { width: 3px; height: 60px; }
.second-hand { width: 2px; height: 70px; background-color: var(--brand); }
.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--brand);
    border-radius: 50%;
    z-index: 10;
}