/*
Theme Name: Ranger Confie PWA
Theme URI: https://example.com/
Author: Confie Indonesia (Internal)
Description: Internal-only Marketing/Sales Activity Tracker + Revenue Dashboard + Customer Database with PWA (theme-only implementation).
Version: 1.8.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ranger-confie-pwa
Tags: pwa, internal, dashboard, productivity
*/

:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#0f766e;
  --accent2:#2563eb;
  --danger:#dc2626;
  --warning:#d97706;
  --ok:#16a34a;
  --border:#e5e7eb;
  --shadow: 0 12px 30px rgba(17,24,39,.10);
  --radius:16px;
  --radius2:22px;
  /* Professional minimalist type: Roboto primary (Android-friendly), Lato fallback */
  --font: "Roboto", "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(15,118,110,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(37,99,235,.08), transparent 55%),
    linear-gradient(180deg, #fbfcff, var(--bg));
}

a{color:inherit}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}

.container{max-width:1180px;margin:0 auto;padding:28px 18px}

.card{
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius2);
}

.surface{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: #f3f4f6;
  color: var(--muted);
  font-size:12px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{background:#f9fafb; border-color:#d1d5db; box-shadow:0 8px 18px rgba(17,24,39,.06)}
.btn:active{transform: translateY(1px)}
.btn.primary{
  border-color: rgba(15,118,110,.35);
  background: var(--accent);
  color:#ffffff;
}
.btn.primary:hover{background:#0b615a}
.btn.danger{
  border-color: rgba(220,38,38,.35);
  background: var(--danger);
  color:#ffffff;
}
.btn.danger:hover{background:#b91c1c}
.btn.ghost{background:transparent}

.input, .select, .textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: #ffffff;
  color:var(--text);
  outline:none;
}
.input::placeholder{color:#9ca3af}
.input:focus,.select:focus,.textarea:focus{border-color: rgba(15,118,110,.55); box-shadow:0 0 0 4px rgba(15,118,110,.10)}

/* Typography policy (app-wide): only 12px and 16px are used. */
.h1{font-size:16px; letter-spacing:-.3px; margin:0}
.h2{font-size:16px; margin:0}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:14px}
hr.sep{border:none;border-top:1px solid var(--border);margin:16px 0}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  border:1px solid var(--border);
  background: #f3f4f6;
  padding:2px 6px;
  border-radius:8px;
  color: #4b5563;
}

.rc-toast{
  position:fixed; left:50%; bottom:18px; transform: translateX(-50%);
  background: #ffffff;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:14px;
  box-shadow: var(--shadow);
  max-width:min(540px, calc(100% - 24px));
  display:none;
  z-index:9999;
}
.rc-toast.show{display:block}
.rc-toast strong{color:var(--text)}
.rc-toast span{color:var(--muted); margin-left:8px}

/* Landing (front page) */
.rc-landing{min-height: calc(100vh - 56px);display:grid;place-items:center}
.rc-landing-card{
  width:min(760px, 100%);
  padding:28px;
  border-radius: var(--radius2);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    radial-gradient(520px 320px at 12% 10%, rgba(15,118,110,.14), transparent 60%),
    radial-gradient(520px 320px at 92% 0%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fcfcff);
}
.rc-landing-mark{font-weight: 900;letter-spacing: -.4px;font-size: 16px}
.rc-landing-note{margin: 14px 0 0;color: var(--muted);font-size: 12px;line-height: 1.6}
.rc-landing-actions{margin-top: 18px;display:flex;gap:10px;flex-wrap:wrap}