/* ═══════════════════════════════════════
   Royal Okey CRM — Standalone Styles
   (not part of the main site design)
   ═══════════════════════════════════════ */
:root {
  --crm-primary: #059669;
  --crm-primary-dark: #047857;
  --crm-bg: #f1f5f9;
  --crm-card: #ffffff;
  --crm-text: #0f172a;
  --crm-text-2: #475569;
  --crm-border: #e2e8f0;
  --crm-radius: 8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans','Inter',system-ui,sans-serif;color:var(--crm-text);background:var(--crm-bg);line-height:1.5}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{max-width:100%;display:block}

/* ── CRM LAYOUT ── */
.crm-page { display: flex; flex-direction: column; min-height: 100vh; }
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 56px;
  background: var(--crm-card); border-bottom: 1px solid var(--crm-border);
}
.crm-header .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; }
.header-link { font-size: .82rem; color: var(--crm-primary); font-weight: 600; }
.crm-shell { flex: 1; padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* ── TOP ── */
.crm-top { display: flex; gap: 24px; align-items: start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.crm-top h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-text-2); font-weight: 600; margin-bottom: 2px; }
.crm-top p { font-size: .84rem; color: var(--crm-text-2); }
.token-form { display: flex; gap: 8px; align-items: end; }
.token-form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; }
.token-form input { padding: 8px 12px; border: 1.5px solid var(--crm-border); border-radius: var(--crm-radius); font-size: .85rem; min-width: 200px; }
.token-form input:focus { outline: none; border-color: var(--crm-primary); }
.token-form button { padding: 8px 16px; background: var(--crm-primary); color: #fff; border: none; border-radius: var(--crm-radius); font-weight: 600; font-size: .85rem; }

/* ── STATS ── */
.crm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.crm-stats > div { background: var(--crm-card); padding: 16px 20px; border-radius: var(--crm-radius); border: 1px solid var(--crm-border); }
.crm-stats span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-text-2); font-weight: 600; margin-bottom: 4px; }
.crm-stats strong { font-size: 1.5rem; font-weight: 700; color: var(--crm-primary); }

/* ── TABS ── */
.crm-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid var(--crm-border); }
.crm-tabs button { padding: 10px 20px; background: none; border: none; font-size: .85rem; font-weight: 600; color: var(--crm-text-2); position: relative; }
.crm-tabs button.active { color: var(--crm-primary); }
.crm-tabs button.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--crm-primary); }

/* ── PANELS ── */
.crm-panel { display: none; }
.crm-panel.active { display: block; }
.form-status { font-size: .82rem; padding: 8px 12px; border-radius: var(--crm-radius); margin-bottom: 12px; text-align: center; font-weight: 600; display: none; }
.form-status.success { display: block; background: #d1fae5; color: #047857; }
.form-status.error { display: block; background: #fef2f2; color: #dc2626; }

/* ── SECTION HEAD ── */
.crm-section-head { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.mini-stats { display: flex; gap: 16px; }
.mini-stats span { font-size: .78rem; color: var(--crm-text-2); }
.mini-stats b { color: var(--crm-primary); }

/* ── FILTERBAR ── */
.crm-filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.crm-search { padding: 8px 12px; border: 1.5px solid var(--crm-border); border-radius: var(--crm-radius); font-size: .82rem; }
.crm-search:focus { outline: none; border-color: var(--crm-primary); }
.view-toggle { display: flex; gap: 0; border: 1px solid var(--crm-border); border-radius: var(--crm-radius); overflow: hidden; }
.view-toggle button { padding: 6px 12px; font-size: .78rem; background: #fff; border: none; color: var(--crm-text-2); font-weight: 500; }
.view-toggle button.active { background: var(--crm-primary); color: #fff; }
.export-btn { padding: 6px 12px; background: #fff; border: 1px solid var(--crm-border); border-radius: var(--crm-radius); font-size: .78rem; color: var(--crm-text-2); }

/* ── TABLE ── */
.crm-table-wrap { overflow-x: auto; background: var(--crm-card); border-radius: var(--crm-radius); border: 1px solid var(--crm-border); }
.crm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.crm-table th { background: var(--crm-bg); padding: 10px 14px; text-align: left; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--crm-border); }
.crm-table td { padding: 10px 14px; border-bottom: 1px solid var(--crm-border); }
.crm-table tr:hover td { background: #f8fafc; }
.crm-table .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .7rem; font-weight: 600; }
.crm-table .badge-new { background: #dbeafe; color: #1d4ed8; }
.crm-table .badge-contact { background: #fef3c7; color: #b45309; }
.crm-table .badge-meeting { background: #d1fae5; color: #047857; }
.crm-table .badge-closed { background: #f1f5f9; color: #64748b; }
.crm-table .badge-lost { background: #fee2e2; color: #dc2626; }

/* ── WORKSPACE ── */
.crm-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.crm-card-form { background: var(--crm-card); padding: 20px; border-radius: var(--crm-radius); border: 1px solid var(--crm-border); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--crm-text-2); }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { padding: 8px 12px; border: 1.5px solid var(--crm-border); border-radius: var(--crm-radius); font-size: .85rem; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--crm-primary); }
.crm-form-divider { font-size: .82rem; font-weight: 700; color: var(--crm-text); padding: 12px 0 4px; border-top: 1px solid var(--crm-border); margin-top: 4px; grid-column: 1 / -1; }
.submit-button { padding: 10px 20px; background: var(--crm-primary); color: #fff; border: none; border-radius: var(--crm-radius); font-weight: 600; font-size: .85rem; margin-top: 8px; grid-column: 1 / -1; }
.submit-button:hover { background: var(--crm-primary-dark); }
.customer-cards { display: flex; flex-direction: column; gap: 8px; }
.customer-card { background: var(--crm-card); padding: 14px 16px; border-radius: var(--crm-radius); border: 1px solid var(--crm-border); cursor: pointer; }
.customer-card:hover { border-color: var(--crm-primary); }
.customer-card h4 { font-size: .88rem; margin-bottom: 2px; }
.customer-card p { font-size: .78rem; color: var(--crm-text-2); }
.customer-detail { background: var(--crm-card); padding: 20px; border-radius: var(--crm-radius); border: 1px solid var(--crm-border); }

/* ── EXPENSE ── */
.expense-workspace { grid-template-columns: 1fr 1fr; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .crm-shell { padding: 16px; }
  .crm-top { flex-direction: column; }
  .token-form { width: 100%; }
  .token-form input { flex: 1; min-width: 0; }
  .crm-workspace, .expense-workspace { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}