/* BRM v2.0 - Stylesheet */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 15px; background: #f5f5f5; color: #222; }
a { color: #185FA5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
.dial-sw { display:flex;align-items:center;gap:0;border-radius:20px;border:1px solid rgba(255,255,255,0.2);overflow:hidden;position:relative;background:rgba(255,255,255,0.06); }
.dial-sw-slide { position:absolute;top:0;bottom:0;border-radius:20px;background:#185FA5;transition:left 0.18s,width 0.18s;z-index:0; }
.dial-sw-seg { font-size:11px;padding:3px 9px;cursor:pointer;color:rgba(255,255,255,0.4);white-space:nowrap;transition:color 0.15s;display:flex;align-items:center;gap:4px;z-index:1;position:relative;user-select:none; }
.dial-sw-seg.on { color:#fff; }
.dial-sw-seg:hover { color:rgba(255,255,255,0.8); }
.topnav { background: #1a1a2e; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; height: 46px; position: sticky; top: 0; z-index: 100; }
.nav-brand { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; }
.nav-links { display: flex; align-items: center; gap: 14px; }
.nav-links a { color: #ccc; font-size: 14px; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-user { color: #aaa; font-size: 14px; }
.nav-user-link { color: #ccc !important; font-size: 14px; text-decoration: none; }
.nav-user-link:hover { color: #fff !important; }
.nav-signout { background: #fff !important; border: none !important; color: #222 !important; padding: 0 5px !important; border-radius: 4px; display: inline-flex !important; align-items: center !important; height: 21px; }
.nav-signout:hover { background: #eee !important; }

/* LAYOUT */
.container { max-width: 1300px; margin: 0 auto; padding: 12px; }

/* CARDS */
.card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 14px; margin-bottom: 10px; }

/* BUTTONS */
.btn { background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 15px; color: #222; display: inline-block; white-space: nowrap; }
.btn:hover { background: #f0f0f0; text-decoration: none; }
.btn-primary { background: #185FA5; border-color: #185FA5; color: #fff; }
.btn-primary:hover { background: #0C447C; color: #fff; }
.btn-danger { background: #fff; border-color: #c00; color: #c00; }
.btn-danger:hover { background: #fff0f0; }
.btn-sm { padding: 0 10px; font-size: 14px; height: 32px; line-height: 32px; vertical-align: middle; }
.btn-full { width: 100%; text-align: center; padding: 10px; font-size: 14px; }

/* FORMS */
.field-block { margin-bottom: 10px; }
.field-block label, .form-label { display: block; font-size: 14px; color: #777; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
input, select, textarea { width: 100%; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 0 8px; font-size: 14px; color: #222; font-family: inherit; height: 32px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #185FA5; box-shadow: 0 0 0 2px rgba(24,95,165,0.12); }
textarea { resize: vertical; min-height: 65px; height: auto; padding: 6px 8px; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 14px; }
.inline-pair { display: flex; gap: 4px; }
.inline-pair .phone-input { flex: 4; }
.inline-pair .ext-input { flex: 1; }
.inline-pair .company-input { flex: 6; }
.inline-pair .production-input { flex: 4; }

/* INFO VIEW */
.info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.info-cell { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; }
.info-cell:nth-child(3n+1) { padding-left: 0; }
.info-cell.no-border { border-bottom: none; padding-left: 0; }
.info-label { font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px; }
.info-value { font-size: 14px; color: #222; line-height: 1.4; }
.info-value a { color: #185FA5; }
.dial-link { color: #185FA5; text-decoration: none; cursor: pointer; }
.dial-link:hover { text-decoration: underline; }
.info-address { font-size: 14px; color: #222; line-height: 1.7; user-select: text; cursor: text; }
.account-bar { display: flex; border-top: 1px solid #eee; margin-top: 6px; padding-top: 6px; }
.account-cell { flex: 1; padding: 3px 8px; }
.account-cell:first-child { padding-left: 0; }
.last-result-bar { background: #e8f0fb; border: 1px solid #b3c9f0; border-radius: 6px; padding: 6px 10px; margin-top: 8px; font-size: 15px; color: #1a4a8a; }
.edit-trigger { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.contact-created-at { font-size: 12px; color: #aaa; }
.pencil-btn { background: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 0 9px; cursor: pointer; font-size: 14px; color: #555; height: 32px; line-height: 32px; vertical-align: middle; display: inline-flex; align-items: center; }
.pencil-btn:hover { background: #f0f0f0; }

/* EDIT GRID */
.edit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.edit-cell { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; }
.edit-cell:nth-child(3n+1) { padding-left: 0; }
.edit-cell .form-label { font-size: 14px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.edit-cell.no-border { border-bottom: none; }
.section-divider { grid-column: 1/-1; padding: 7px 0 3px; font-size: 14px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid #eee; margin-bottom: 2px; }

/* TABS */
.tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 10px; }
.tab { padding: 7px 14px; cursor: pointer; font-size: 14px; color: #777; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: #185FA5; border-bottom-color: #185FA5; font-weight: 600; }
.tab:hover:not(.active) { color: #222; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ADD FORM */
.add-form { background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.add-form-title { font-size: 15px; color: #777; margin-bottom: 6px; }
.add-form-footer { display: flex; align-items: center; gap: 8px; }
.add-form-footer input[type="datetime-local"] { flex: 1; }

/* ENTRY CARDS */
.entry-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 5px; overflow: hidden; }
.entry-card:hover { border-color: #aaa; }
.entry-header { display: flex; align-items: flex-start; gap: 8px; padding: 6px 9px; }
.entry-main { flex: 1; min-width: 0; cursor: pointer; }
.entry-preview { font-size: 14px; color: #333; line-height: 1.45; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry-preview.expanded { display: block; }
.entry-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.entry-topline { display: flex; align-items: center; gap: 5px; }
.entry-date { font-size: 14px; color: #888; white-space: nowrap; }
.tag { font-size: 14px; padding: 1px 5px; border-radius: 4px; display: inline-block; white-space: nowrap; }
.tag-manual { background: #e6f4ea; color: #2a7a3b; }
.tag-auto   { background: #eee; color: #666; }
.tag-note   { background: #e8f0fb; color: #1a4a8a; }
.ebin-btn { background: #fff; border: 1px solid #e00; border-radius: 5px; padding: 0 8px; cursor: pointer; font-size: 14px; color: #c00; height: 32px; line-height: 32px; vertical-align: middle; display: inline-flex; align-items: center; }
.btn-delete-contact { background: #fff0f0; border: 1px solid #f5c6c6; border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 13px; color: #c00; height: 28px; line-height: 1; display: inline-flex; align-items: center; }
.btn-delete-contact:hover { background: #ffe0e0; border-color: #e00; }
.ebin-btn:hover { background: #fff0f0; }

/* SECONDARY CONTACTS - 2-line layout */
.sec-card { background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.sec-card:hover { border-color: #999; }
.sec-line1 { display: flex; align-items: flex-start; width: 100%; }
.sec-line2 { font-size: 12px; color: #666; margin-top: 5px; padding-top: 5px; border-top: 1px solid #f0f0f0; }
.sec-col { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; border-right: 1px solid #f0f0f0; overflow: hidden; }
.sec-col:first-child { padding-left: 0; }
.sec-col:last-child { border-right: none; }
.sec-col-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.sec-col-val { font-size: 13px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-col-name   { width: 180px; min-width: 180px; }
.sec-col-title  { width: 140px; min-width: 140px; }
.sec-col-phone  { width: 170px; min-width: 170px; }
.sec-col-mobile { width: 140px; min-width: 140px; }
.sec-col-email  { flex: 1; min-width: 160px; }
.sec-col-actions { width: 42px; min-width: 42px; display: flex; align-items: center; justify-content: center; border-right: none; padding: 0; }
.edit-panel { background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin-bottom: 8px; }

/* CONTACT LIST TABLE */
.list-wrap { overflow-x: auto; overflow-y: auto;
             max-height: calc(100vh - 260px); min-height: 120px; }
.list-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.list-table th { font-size: 15px; color: #888; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid #ccc; text-align: left; font-weight: 600; white-space: nowrap; }
.list-table td { font-size: 14px; padding: 8px; border-bottom: 1px solid #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.list-table tr.data-row { cursor: pointer; }
.list-table tr.data-row:hover td { background: #eef4fb; }
.col-company { width: 33%; }
.col-contact { width: 16%; }
.col-phone   { width: 18%; }
.col-mobile  { width: 15%; }
.col-email   { width: 29%; }
.td-muted { color: #555; }
.recent-label { font-size: 15px; color: #999; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0 4px; }
.recent-divider { border-bottom: 2px solid #dde8f5; margin: 4px 0 10px; }
.recent-row td { background: #f0f5ff !important; }
/* V5 search bar */
.v5-bar { display: flex; align-items: center; height: 36px; margin-bottom: 10px;
          border: 1px solid #ccc; border-radius: 6px; overflow: hidden;
          background: #fff; transition: border-color 0.15s; }
.v5-bar:focus-within { border-color: #185FA5; }
.v5-bar.searching { border-color: #185FA5; }
@keyframes spin { to { transform: rotate(360deg); } }
.v5-spinner { display: none; width: 14px; height: 14px; flex-shrink: 0; margin: 0 8px;
              border: 2px solid #e0e0e0; border-top-color: #185FA5; border-radius: 50%; }
.v5-spinner.active { display: block; animation: spin 0.7s linear infinite; }

/* ── Search filter panel ─────────────────────────────────── */
.v5-filter-icon { flex-shrink:0; margin:0 8px; cursor:pointer; display:flex; align-items:center;
                  color:#aaa; transition:color 0.15s; }
.v5-filter-icon:hover { color:#555; }
.v5-filter-icon.active { color:#185FA5; }
.v5-filter-icon.open { color:#185FA5; }
.v5-filter-panel { background:#fff; border:1px solid #ddd; border-top:none;
                   border-radius:0 0 8px 8px; padding:12px 14px;
                   margin-top:-1px; }
.fp-inner { display:flex; flex-direction:column; gap:10px; }
.fp-section { }
.fp-sec-title { font-size:10px; font-weight:500; color:#999; text-transform:uppercase;
                letter-spacing:0.05em; margin-bottom:5px; }
.fp-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px 8px; }
.fp-item { display:flex; align-items:center; gap:6px; padding:3px 6px; border-radius:4px;
           cursor:pointer; font-size:12px; color:#222; }
.fp-item:hover { background:#f5f5f5; }
.fp-item input[type=checkbox] { accent-color:#185FA5; width:13px; height:13px; cursor:pointer; flex-shrink:0; }
.fp-footer { display:flex; justify-content:space-between; align-items:center;
             padding-top:8px; border-top:1px solid #f0f0f0; margin-top:4px; }
.fp-count { font-size:11px; color:#aaa; }
.v5-zone { display: none; align-items: center; padding: 0 5px 0 10px; gap: 6px;
           background: #f0f4ff; border-right: 1px solid #ccc;
           height: 100%; flex-shrink: 0; white-space: nowrap; }
.v5-zone.show { display: flex; }
.v5-zone-text { font-size: 13px; color: #185FA5; font-weight: 500;
                max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.v5-zone-x { width: 20px; height: 20px; border-radius: 4px; background: #185FA5;
             color: #fff; font-size: 10px; display: flex; align-items: center;
             justify-content: center; cursor: pointer; flex-shrink: 0; }
.v5-zone-x:hover { background: #0c447c; }
.v5-inp { flex: 1; border: none; height: 36px; padding: 0 10px;
          font-size: 15px; color: #222; background: transparent;
          outline: none; min-width: 60px; }

/* BADGES */
.badge { display: inline-block; font-size: 15px; padding: 2px 8px; border-radius: 6px; background: #e8e8e8; color: #555; }
.badge-green { background: #e6f4ea; color: #2a7a3b; }
.badge-grey  { background: #eee; color: #888; }

/* TABLE */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 7px; font-size: 14px; color: #888; text-transform: uppercase; border-bottom: 1px solid #ddd; }
.data-table td { padding: 7px; border-bottom: none; vertical-align: middle; }

/* ALERTS */
.alert { padding: 9px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; }
.alert-error { background: #fff0f0; border: 1px solid #f5c6c6; color: #900; }
.alert-info  { background: #e8f0fb; border: 1px solid #b3c9f0; color: #1a4a8a; }

/* LOGIN */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #1a1a2e; }
.login-wrap { width: 100%; max-width: 360px; padding: 20px; }
.login-box { background: #fff; border-radius: 12px; padding: 30px; }
.login-title { font-size: 20px; font-weight: 700; margin-bottom: 22px; text-align: center; color: #1a1a2e; }

/* MODAL */
.modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal { background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 22px; min-width: 260px; max-width: 320px; }
.modal h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.modal p { font-size: 14px; color: #555; margin-bottom: 14px; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* PAGE HEADER */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-header h2 { font-size: 20px; font-weight: 600; }


/* NEW CONTACT FORM - only section dividers have borders, not individual fields */
.new-contact-form .edit-cell { border-bottom: none; }
.new-contact-form .section-divider { border-bottom: 1px solid #eee; }

/* ── Call tray ───────────────────────────────────────────── */
.call-tray { background: #f5f7fc; border: 1.5px solid #3f3f3f; border-top: none;
             padding: 7px 16px; display: flex; align-items: center; gap: 8px;
             position: sticky; top: 46px; z-index: 99; min-height: 50px; }
.tray-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
              letter-spacing: 0.06em; color: #1a1a2e; display: flex;
              align-items: center; gap: 5px; white-space: nowrap; margin-right: 4px; flex-shrink: 0; }
.tray-pulse { width: 7px; height: 7px; border-radius: 50%; background: #1a1a2e;
              animation: tray-p 1.5s infinite; flex-shrink: 0; }
@keyframes tray-p { 0%,100%{opacity:1} 50%{opacity:0.35} }
.tray-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.tray-pill { display: inline-flex; align-items: stretch; overflow: hidden;
             border-radius: 6px; background: #fff; border: 1px solid #bbb; }
.tray-pill-body { display: flex; align-items: center; gap: 8px; padding: 5px 12px; }
.tray-pill-name { font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; }
.tray-pill-company { font-size: 13px; color: #444; white-space: nowrap; }
.tray-pill-number { font-size: 13px; color: #888; white-space: nowrap; }
.tray-pill-open { border: none; border-left: 1px solid #ccc; padding: 5px 12px;
                  margin: 5px; font-size: 11px; cursor: pointer; font-weight: 500;
                  white-space: nowrap; border-radius: 4px; }
.tray-pill-open:hover { filter: brightness(0.94); }
.tray-pill-open.active  { background: #e8f5e9; color: #2e7d32; }
.tray-pill-open.waiting { background: #fff3e0; color: #e65100; }
.tray-pill-unknown { color: #185FA5 !important; }
.tray-pill-country { font-size: 11px; color: #aaa; white-space: nowrap; border-left: 1px solid #eee; padding: 0 8px; display: flex; align-items: center; }
.tray-pill-add { border: none; border-left: 1px solid #ccc; padding: 5px 12px;
                margin: 5px; font-size: 11px; cursor: pointer; font-weight: 500;
                white-space: nowrap; border-radius: 4px;
                background: #185FA5; color: #fff; }
.tray-pill-add:hover { background: #0c447c; }
.tray-pill-x { border: 1px solid #ccc; border-radius: 4px; background: #fff;
               font-size: 12px; cursor: pointer; padding: 5px 8px;
               margin: 5px 5px 5px 0; color: #888; display: flex; align-items: center; }
.tray-pill-x:hover { background: #f0f0f0; color: #333; }

.tray-notif-status { font-size: 11px; font-weight: 500; white-space: nowrap;
                    flex-shrink: 0; flex-grow: 0; width: 180px; text-align: right;
                    overflow: hidden; text-overflow: ellipsis; }
.tray-notif-status.on      { color: #2e7d32; }
.tray-notif-status.off     { color: #999; }
.tray-notif-status.blocked { color: #999; cursor: pointer; }
.tray-notif-status.blocked:hover { text-decoration: underline; }