/* =====================================================
   DigitalHands.in — Client Portal Stylesheet
   ===================================================== */

:root {
  --green:  #1a3a2a;
  --gold:   #c9a96e;
  --navy:   #0f1628;
  --blue:   #4a6cf7;
  --cream:  #faf7f2;
  --text:   #2c2c2c;
  --white:  #ffffff;
  --border: #e8e0d5;
  --bg:     #f6f3ee;
  --card:   #ffffff;
  --radius: 10px;
  --shadow: 0 2px 16px rgba(0,0,0,.08);
  --t:      .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }

/* ── Login ── */
.cp-login {
  min-height: 100vh;
  background: linear-gradient(160deg, #0d2218, #1a3a2a, #2d4a1e);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cp-login-card {
  background: var(--white); border-radius: 16px;
  padding: 48px 40px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.cp-brand { text-align: center; margin-bottom: 2rem; }
.cp-brand-logo { font-size: 2.8rem; margin-bottom: .6rem; }
.cp-brand-name {
  font-size: 1.25rem; font-weight: 700; color: var(--green);
  font-family: 'Georgia', serif;
}
.cp-brand-tag {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px;
}
.cp-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.cp-sub { font-size: .83rem; color: #888; margin-bottom: 1.8rem; }
.cp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.cp-field label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #666; }
.cp-field input {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 7px; padding: 11px 13px; color: var(--text);
  font-size: .93rem; outline: none; transition: border-color var(--t);
}
.cp-field input:focus { border-color: var(--green); background: var(--white); }
.cp-btn {
  width: 100%; padding: 13px;
  background: var(--green); color: var(--white);
  border: none; border-radius: 7px; font-size: .93rem; font-weight: 600;
  cursor: pointer; margin-top: 6px; transition: background var(--t);
}
.cp-btn:hover { background: #2d5a3d; }
.cp-hint {
  font-size: .78rem; color: #aaa; text-align: center;
  margin-top: 1.2rem;
}
.cp-hint span {
  background: var(--bg); padding: 3px 9px; border-radius: 4px;
  font-family: monospace; color: var(--green);
}
.cp-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #dc2626;
  border-radius: 7px; padding: 10px 13px; font-size: .85rem;
  margin-bottom: 14px; display: none;
}
.cp-error.show { display: block; }

/* ── Portal layout ── */
.portal-header {
  background: var(--green);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 64px;
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
}
.portal-logo {
  display: flex; align-items: center; gap: 10px;
}
.portal-logo-text {
  font-family: 'Georgia', serif;
  font-size: 1.05rem; color: var(--white); font-weight: 400;
}
.portal-logo-sub {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); display: block; margin-top: 1px;
}
.portal-header-right { display: flex; align-items: center; gap: 14px; }
.portal-user { font-size: .85rem; color: rgba(255,255,255,.8); }
.portal-logout {
  font-size: .78rem; color: var(--gold);
  cursor: pointer; border: 1px solid rgba(201,169,110,.3);
  padding: 6px 14px; border-radius: 5px;
  transition: all var(--t); background: none;
}
.portal-logout:hover { background: rgba(201,169,110,.1); color: var(--white); }

.portal-body { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }

.portal-welcome {
  background: linear-gradient(135deg, var(--green), #2d5a3d);
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 28px;
  color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.portal-welcome h2 { font-family: 'Georgia', serif; font-size: 1.4rem; font-weight: 400; margin-bottom: .3rem; }
.portal-welcome p { font-size: .88rem; color: rgba(255,255,255,.7); }
.portal-cta {
  background: var(--gold); color: var(--green); border: none;
  padding: 11px 24px; border-radius: 6px; font-size: .85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all var(--t);
}
.portal-cta:hover { background: #e2c48f; }

.portal-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
.p-stat {
  background: var(--card); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
}
.p-stat-num { font-size: 1.7rem; font-weight: 700; color: var(--green); line-height: 1; }
.p-stat-label { font-size: .78rem; color: #888; margin-top: .3rem; }

.portal-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.portal-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.portal-card-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.portal-card-title { font-size: .92rem; font-weight: 700; color: var(--green); }
.portal-card-body { padding: 20px; }

.site-preview-thumb {
  width: 100%; height: 200px; border-radius: 8px;
  background: linear-gradient(135deg, #1a3a2a, #2d5a3d);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; margin-bottom: 14px; overflow: hidden;
  position: relative;
}
.site-preview-thumb img { width:100%; height:100%; object-fit:cover; opacity:.7; }
.preview-btn { display:block; }

.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 8px; border: 1px solid var(--border);
  cursor: pointer; transition: all var(--t); background: var(--bg);
}
.action-item:hover { border-color: var(--green); background: #edf7f0; }
.action-icon { font-size: 1.2rem; }
.action-text { font-size: .87rem; font-weight: 500; color: var(--text); }
.action-sub { font-size: .75rem; color: #888; }

.powered-by {
  text-align: center; font-size: .75rem; color: #aaa;
  padding: 28px 0 12px;
}
.powered-by a { color: var(--gold); }

@media (max-width: 768px) {
  .portal-stats { grid-template-columns: repeat(2,1fr); }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-welcome { flex-direction: column; }
  .cp-login-card { padding: 32px 24px; }
}