/* Artboek CRM — shared stylesheet */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f2f2f2; color: #222; }

/* ── Top bar ── */
.topbar {
    background: #1a1a1a; color: #fff;
    padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; min-height: 52px;
}
.topbar h1 { font-size: 24px; white-space: nowrap; color: #FFF; font-family: "Reem Kufi", sans-serif}
.topbar a { color: #bbb; font-size: 13px; text-decoration: none; margin-left: 16px; }
.topbar a:hover { color: #fff; }

/* ── Buttons ── */
.btn { padding: 7px 16px; border: 1px solid #bbb; border-radius: 4px; font-size: 13px; cursor: pointer; background: #fff; color: #333; font-family: Arial, sans-serif; }
.btn:hover { background: #f0f0f0; }
.btn-primary { background: #222; color: #fff; border-color: #222; }
.btn-primary:hover { background: #444; border-color: #444; }
.btn-outline { background: #fff; color: #333; border-color: #ccc; }
.btn-outline:hover { background: #f5f5f5; }
.btn-success { background: #222; color: #fff; border-color: #222; }
.btn-success:hover { background: #444; border-color: #444; }
.btn-save { background: #222; color: #fff; border-color: #222; }
.btn-save:hover { background: #444; border-color: #444; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.form-footer { margin-top: 14px; }

/* ── Cards ── */
.card { background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.06); overflow: hidden; margin-bottom: 20px; }
.card-header { background: #222; color: #fff; padding: 9px 16px; border-radius: 6px 6px 0 0; display: flex; justify-content: space-between; align-items: center; }
.card-header h2 { margin: 0; font-size: 14px; font-weight: bold; letter-spacing: .3px; }
.card-body { padding: 16px; }

/* ── Dashboard toolbar ── */
.toolbar {
    background: #fff; border-radius: 6px;
    padding: 12px 16px; margin: 16px 16px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
}
.toolbar-group { display: flex; flex-direction: column; gap: 3px; }
.toolbar-group label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.toolbar input[type=text],
.toolbar input[type=date],
.toolbar select {
    padding: 6px 10px; border: 1px solid #d0d0d0; border-radius: 4px;
    font-size: 13px; background: #fff; color: #222;
}
.toolbar input[type=text] { min-width: 200px; }
.toolbar input[type=date] { width: 140px; }
.toolbar select { min-width: 120px; }
.date-range-group { display: flex; flex-direction: column; gap: 3px; }
.date-range-group label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.date-range-inputs { display: flex; align-items: center; gap: 6px; }
.date-range-inputs span { font-size: 12px; color: #999; }

.today-btn {
    padding: 4px 8px; font-size: 11px; background: #f0f0f0;
    color: #444; border: 1px solid #ccc; border-radius: 3px;
    cursor: pointer; white-space: nowrap;
}
.today-btn:hover { background: #e4e4e4; }

/* ── Follow-up alert banner (keep colored — it's a status signal) ── */
.followup-banner {
    background: #fff3cd; border: 1px solid #ffc107;
    border-radius: 6px; margin: 12px 16px 0;
    padding: 10px 16px; font-size: 13px; color: #856404;
    display: flex; align-items: center; gap: 8px;
}
.followup-banner strong { font-size: 14px; }

/* ── Dashboard table ── */
.container { margin: 12px 16px; }
.result-count { font-size: 13px; color: #888; margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead { background: #222; color: #fff; }
thead th { padding: 10px 12px; text-align: left; font-weight: 600; white-space: nowrap; }
thead th a { color: #fff; text-decoration: none; }
thead th a:hover { text-decoration: underline; opacity: .8; }
tbody tr:hover { background: #f7f7f7; }
tbody td { padding: 9px 12px; border-bottom: 1px solid #ebebeb; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
.company-link { color: #111; text-decoration: none; font-weight: 500; }
.company-link:hover { text-decoration: underline; }

/* ── STATUS BADGES — colored by design ── */

/* Follow-up date */
.date-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.date-overdue  { background: #fde8e8; color: #c0392b; }
.date-today    { background: #fff3cd; color: #856404; font-weight: bold; }
.date-soon     { background: #d4efdf; color: #1e8449; }
.date-upcoming { background: #eaf2fb; color: #2471a3; }
.date-none     { color: #bbb; }

/* Company / customer status */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-customer       { background: #d4efdf; color: #1e8449; }
.status-prospect-hot   { background: #fde8e8; color: #c0392b; }
.status-prospect-cold  { background: #eaf2fb; color: #2471a3; }
.status-lead           { background: #fff3cd; color: #856404; }
.status-unknown        { background: #f0f0f0; color: #888; }

/* ── Misc small labels ── */
.type-badge { font-size: 11px; color: #888; }
.recent-note-cell { max-width: 280px; }
.recent-note-text { display: block; font-size: 12px; color: #555; }
.recent-note-meta { display: block; font-size: 10px; color: #aaa; margin-top: 2px; }

/* ── Company detail page ── */
.page-wrap { display: flex; }
.main { flex: 1; padding: 24px 30px; max-width: 672px; }
h1 { font-size: 22px; color: #111; margin: 0 0 4px; }

.back-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: #333; text-decoration: none;
    background: #fff; border: 1px solid #d0d0d0;
    border-radius: 4px; padding: 5px 12px; font-weight: bold;
}
.back-link:hover { background: #f5f5f5; }

.saved-banner {
    background: #d4efdf; color: #1e8449; border: 1px solid #a9dfbf;
    padding: 8px 14px; border-radius: 4px; font-size: 13px;
}

/* Form grid — 4 column, letter-page optimized (7in content width at 96dpi) */
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.field { display: flex; flex-direction: column; }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.span4 { grid-column: span 4; }
.field label { font-size: 11px; color: #888; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }
.field input, .field select, .field textarea {
    border: 1px solid #d0d0d0; border-radius: 4px; padding: 5px 8px;
    font-size: 13px; background: #fff; font-family: Arial, sans-serif; color: #222; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #666; outline: none; }

@media print {
  .topbar, .back-link, .btn, .form-footer,
  .notes-input-area, .notes-hint,
  #org-info-toggle, .contact-toggle .arrow { display: none !important; }

  body { background: #fff; }
  .page-wrap, .main { max-width: 7in; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; margin-bottom: 14px; }
  .card-header { background: #fff !important; color: #000 !important; border-bottom: 1px solid #ccc; }
  .contact-block, .card { page-break-inside: avoid; }
  #notes-list { max-height: none; overflow: visible; }
}

/* Contacts accordion */
.contact-block { border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 10px; background: #fafafa; }
.contact-toggle { padding: 9px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: bold; color: #222; }
.contact-toggle:hover { background: #f0f0f0; border-radius: 5px 5px 0 0; }
.contact-toggle .arrow { font-size: 11px; color: #aaa; transition: transform .2s; }
.contact-form { display: none; padding: 14px; border-top: 1px solid #e8e8e8; }

/* Notes / activity log */
.notes-input-area { margin-bottom: 14px; }
.notes-input-area textarea {
    width: 100%; box-sizing: border-box; border: 1px solid #d0d0d0; border-radius: 4px;
    padding: 8px; font-size: 13px; font-family: Arial, sans-serif;
    resize: vertical; min-height: 64px; background: #fff;
}
.notes-input-area textarea:focus { border-color: #666; outline: none; }
.notes-hint { font-size: 11px; color: #999; margin-top: 4px; }
.note-entry { border-bottom: 1px solid #ebebeb; padding: 9px 0; }
.note-entry:last-child { border-bottom: none; }
.note-meta { font-size: 11px; color: #888; margin-bottom: 4px; }
.note-meta strong { color: #555; }
.note-text { font-size: 13px; color: #333; white-space: pre-wrap; }
.note-contact-tag { display: inline-block; background: #efefef; color: #555; border-radius: 3px; padding: 1px 6px; font-size: 10px; margin-left: 6px; }
#notes-list { max-height: 420px; overflow-y: auto; }
.notes-loading { color: #999; font-size: 13px; }

/* ── Login page ── */
body.login { background: #f0f2f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); padding: 40px; width: 360px; }
.login-card h1 { font-size: 22px; color: #333; margin-bottom: 8px; }
.login-card p.sub { font-size: 14px; color: #888; margin-bottom: 28px; }
.login-card label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; font-weight: bold; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; margin-bottom: 18px; }
.login-card input:focus { outline: none; border-color: #4a90d9; }
.login-card button { width: 100%; padding: 11px; background: #4a90d9; color: #fff; border: none; border-radius: 5px; font-size: 15px; cursor: pointer; }
.login-card button:hover { background: #357abd; }
.login-card .error { background: #fdecea; color: #c0392b; padding: 10px 14px; border-radius: 5px; font-size: 13px; margin-bottom: 18px; }