/* ============================================================
   DATATOMICALLY APP — Application Styles
   ============================================================ */

:root {
  --navy:        #0B1E3D;
  --blue:        #1A5FD4;
  --blue-bright: #2272FF;
  --blue-pale:   #EBF2FF;
  --yellow:      #F5C518;
  --yellow-pale: #FFFBEA;
  --yellow-deep: #D4A000;
  --white:       #FFFFFF;
  --off-white:   #F7F9FC;
  --gray-50:     #FAFBFC;
  --gray-100:    #EFF2F7;
  --gray-200:    #DDE3EE;
  --gray-400:    #8B97B4;
  --gray-600:    #4F5D7A;
  --gray-800:    #1E2942;
  --text:        #0B1E3D;
  --text-muted:  #5A6580;
  --green:       #1A7A42;
  --green-pale:  #E6F5EC;
  --red:         #C0392B;
  --red-pale:    #FFEAEA;
  --purple:      #6741D9;
  --purple-pale: #F3EEFF;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

/* ── App shell ── */
#app-shell { display:flex; flex-direction:column; height:100%; }

/* ── App topbar ── */
#app-topbar {
  height: 52px; background: var(--navy);
  display: flex; align-items: center;
  padding: 0 1rem; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0; z-index: 50;
}
.topbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 1rem; color: #fff;
  text-decoration: none; margin-right: .5rem;
}
.topbar-logo-mark {
  width: 26px; height: 26px; background: var(--yellow);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.topbar-logo-mark::after { content:''; width:9px; height:9px; background:var(--navy); border-radius:2px; }
.topbar-sep { width:1px; height:20px; background:rgba(255,255,255,0.15); }
.topbar-workspace {
  font-size:.83rem; color:rgba(255,255,255,.65);
  font-weight:500; cursor:pointer; padding:4px 8px;
  border-radius:5px; transition:background .2s;
}
.topbar-workspace:hover { background:rgba(255,255,255,.08); }
.topbar-base {
  font-size:.83rem; color:#fff; font-weight:700;
  cursor:pointer; padding:4px 8px; border-radius:5px;
  display:flex; align-items:center; gap:5px; transition:background .2s;
}
.topbar-base:hover { background:rgba(255,255,255,.08); }
.topbar-chevron { opacity:.5; font-size:.65rem; }
.topbar-spacer { flex:1; }
.topbar-btn {
  padding:5px 12px; border-radius:6px; font-size:.78rem;
  font-weight:600; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.topbar-btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); }
.topbar-btn-ghost:hover { background:rgba(255,255,255,.08); color:#fff; }
.topbar-btn-yellow { background:var(--yellow); border:none; color:var(--navy); }
.topbar-btn-yellow:hover { background:#FFD53D; }
.topbar-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--blue-pale); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; cursor:pointer;
  border:2px solid rgba(255,255,255,.2);
}

/* ── Main body ── */
#app-body { display:flex; flex:1; overflow:hidden; }

/* ── Sidebar ── */
#app-sidebar {
  width: 220px; background: var(--white);
  border-right: 1px solid var(--gray-200);
  display: flex; flex-direction: column;
  flex-shrink: 0; overflow-y: auto;
  transition: width .25s; z-index: 10;
}
#app-sidebar.collapsed { width: 0; overflow: hidden; }
.sidebar-section { padding: 10px 8px; }
.sidebar-section-title {
  font-size:.67rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--gray-400); padding:0 8px; margin-bottom:6px;
}
.sidebar-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:7px;
  font-size:.83rem; color:var(--gray-600);
  cursor:pointer; transition:all .15s;
  white-space:nowrap; overflow:hidden;
}
.sidebar-item:hover { background:var(--gray-100); color:var(--navy); }
.sidebar-item.active { background:var(--blue-pale); color:var(--blue); font-weight:600; }
.sidebar-item-icon {
  width:16px; height:16px; border-radius:4px;
  background:var(--gray-200); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem;
}
.sidebar-item.active .sidebar-item-icon { background:rgba(26,95,212,.2); }
.sidebar-add { color:var(--blue); font-weight:600; }
.sidebar-add .sidebar-item-icon { background:var(--blue-pale); color:var(--blue); }
.sidebar-divider { height:1px; background:var(--gray-200); margin:4px 8px; }
.sidebar-table-item {
  display:flex; align-items:center; gap:7px;
  padding:5px 8px; border-radius:6px;
  font-size:.8rem; color:var(--gray-600);
  cursor:pointer; transition:all .15s; margin-bottom:1px;
}
.sidebar-table-item:hover { background:var(--gray-100); color:var(--navy); }
.sidebar-table-item.active { background:var(--blue-pale); color:var(--blue); font-weight:600; }
.table-color-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }

/* ── Main content ── */
#app-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ── Table toolbar ── */
#table-toolbar {
  padding:8px 16px; background:var(--white);
  border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.toolbar-table-name {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:.95rem; color:var(--navy);
  margin-right:.25rem;
}
.toolbar-sep { width:1px; height:18px; background:var(--gray-200); margin:0 4px; }
.tb-action {
  display:flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:6px;
  font-size:.78rem; font-weight:600; color:var(--gray-600);
  cursor:pointer; border:none; background:transparent;
  transition:all .15s; white-space:nowrap;
}
.tb-action:hover { background:var(--gray-100); color:var(--navy); }
.tb-action.active { background:var(--blue-pale); color:var(--blue); }
.tb-add-record {
  margin-left:auto; background:var(--yellow); color:var(--navy);
  border:none; border-radius:6px;
  padding:6px 14px; font-size:.8rem; font-weight:700;
  cursor:pointer; transition:all .2s;
}
.tb-add-record:hover { background:#FFD53D; }
#search-input {
  padding:5px 10px; border-radius:6px;
  border:1.5px solid var(--gray-200); font-size:.8rem;
  font-family:'DM Sans',sans-serif; outline:none;
  width:180px; transition:border .2s;
}
#search-input:focus { border-color:var(--blue); }

/* ── View tabs ── */
#view-tabs {
  display:flex; padding:0 16px;
  background:var(--white); border-bottom:1px solid var(--gray-200);
  flex-shrink:0;
}
.view-tab-btn {
  padding:7px 14px; font-size:.78rem; font-weight:600;
  color:var(--gray-400); border-bottom:2px solid transparent;
  cursor:pointer; transition:all .15s; white-space:nowrap;
  display:flex; align-items:center; gap:5px;
}
.view-tab-btn:hover { color:var(--navy); }
.view-tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }

/* ── Grid view ── */
#grid-view { flex:1; overflow:auto; position:relative; }
.grid-table { border-collapse:collapse; width:100%; }
.grid-table th {
  background:var(--gray-50); position:sticky; top:0; z-index:5;
  border-bottom:2px solid var(--gray-200); border-right:1px solid var(--gray-200);
  padding:0; height:36px; white-space:nowrap;
}
.th-inner {
  display:flex; align-items:center; gap:6px;
  padding:0 12px; height:100%; cursor:pointer;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--gray-400); user-select:none;
}
.th-inner:hover { background:rgba(0,0,0,.03); }
.th-type-icon { font-size:.7rem; opacity:.7; }
.th-checkbox { width:44px; text-align:center; }
.th-row-num { width:44px; }
.grid-table td {
  border-bottom:1px solid var(--gray-200);
  border-right:1px solid var(--gray-200);
  padding:0; height:36px; vertical-align:middle;
  min-width:0; max-width:280px;
}
.grid-table tr:hover td { background:var(--gray-50); }
.grid-table tr.selected td { background:#F0F5FF; }
.td-checkbox { width:44px; text-align:center; }
.td-row-num { width:44px; text-align:center; font-size:.72rem; color:var(--gray-400); }
.cell-inner {
  padding:0 10px; height:100%;
  display:flex; align-items:center;
  font-size:.83rem; cursor:default;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cell-inner.editable { cursor:text; }
.cell-inner:focus-within { outline:2px solid var(--blue); outline-offset:-2px; background:#fff; }
.cell-edit {
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:.83rem;
  width:100%; padding:0; color:var(--text);
}
.cell-tag {
  display:inline-flex; align-items:center;
  padding:1px 8px; border-radius:100px;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.t-b { background:var(--blue-pale); color:var(--blue); }
.t-g { background:var(--green-pale); color:var(--green); }
.t-y { background:var(--yellow-pale); color:var(--yellow-deep); }
.t-r { background:var(--red-pale); color:var(--red); }
.t-p { background:var(--purple-pale); color:var(--purple); }
.t-gray { background:var(--gray-100); color:var(--gray-600); }
.add-field-btn {
  background:transparent; border:none; border-right:1px solid var(--gray-200);
  padding:0 16px; height:36px; font-size:.78rem;
  font-weight:600; color:var(--blue); cursor:pointer;
  white-space:nowrap; transition:background .15s;
}
.add-field-btn:hover { background:var(--blue-pale); }
.add-row-btn {
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; font-size:.8rem;
  color:var(--gray-400); cursor:pointer; transition:background .15s;
}
.add-row-btn:hover { background:var(--gray-100); color:var(--blue); }
.row-expand-btn {
  padding:0 6px; opacity:0; cursor:pointer;
  font-size:.7rem; color:var(--gray-400);
  border:none; background:none; transition:opacity .15s;
}
tr:hover .row-expand-btn { opacity:1; }

/* ── Kanban view ── */
#kanban-view {
  flex:1; display:flex; gap:12px;
  padding:16px; overflow-x:auto; overflow-y:hidden; align-items:flex-start;
}
.kanban-col {
  flex-shrink:0; width:260px; display:flex; flex-direction:column;
}
.kanban-col-header {
  display:flex; align-items:center; gap:7px;
  padding:8px 10px; border-radius:8px 8px 0 0;
  background:var(--gray-100);
}
.kanban-col-title { font-size:.78rem; font-weight:700; color:var(--navy); flex:1; }
.kanban-col-count { font-size:.72rem; color:var(--gray-400); font-weight:600; }
.kanban-col-dot { width:8px; height:8px; border-radius:50%; }
.kanban-cards {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-top:none; border-radius:0 0 8px 8px;
  padding:6px; display:flex; flex-direction:column;
  gap:6px; min-height:100px; flex:1;
}
.kanban-card {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:8px; padding:10px 12px;
  cursor:pointer; transition:all .18s;
}
.kanban-card:hover { box-shadow:0 4px 12px rgba(11,30,61,.1); transform:translateY(-1px); border-color:var(--gray-400); }
.kc-title { font-size:.83rem; font-weight:600; color:var(--navy); line-height:1.35; margin-bottom:6px; }
.kc-meta { display:flex; flex-wrap:wrap; gap:4px; }
.kanban-add-btn {
  margin-top:6px; padding:7px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:1.5px dashed var(--gray-200);
  border-radius:8px; font-size:.78rem; font-weight:600;
  color:var(--gray-400); cursor:pointer; transition:all .18s;
}
.kanban-add-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-pale); }

/* ── Empty state ── */
.empty-state {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:3rem; text-align:center; gap:.75rem;
}
.empty-state-icon { font-size:2.5rem; }
.empty-state h3 { font-size:1rem; color:var(--navy); }
.empty-state p { font-size:.85rem; color:var(--text-muted); max-width:300px; line-height:1.6; }

/* ── Record detail panel ── */
#record-panel {
  width:420px; flex-shrink:0;
  background:var(--white); border-left:1px solid var(--gray-200);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s;
  position:absolute; right:0; top:0; bottom:0; z-index:20;
}
#record-panel.open { transform:translateX(0); position:relative; }
.panel-header {
  padding:14px 16px; border-bottom:1px solid var(--gray-200);
  display:flex; align-items:center; gap:8px;
}
.panel-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.95rem; flex:1; color:var(--navy); }
.panel-close { background:none; border:none; cursor:pointer; font-size:1rem; color:var(--gray-400); padding:4px; border-radius:4px; }
.panel-close:hover { background:var(--gray-100); }
.panel-body { flex:1; overflow-y:auto; padding:1rem; }
.panel-field { margin-bottom:1.25rem; }
.panel-field-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); margin-bottom:.4rem; }
.panel-field-value { font-size:.88rem; color:var(--text); padding:7px 10px; border:1.5px solid var(--gray-200); border-radius:7px; min-height:34px; background:var(--white); }
.panel-field-value:focus-within { border-color:var(--blue); }

/* ── Field type modal ── */
#field-modal {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
}
#field-modal.open { display:flex; }
.modal-card { background:#fff; border-radius:16px; padding:1.5rem; width:320px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.modal-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1rem; margin-bottom:1rem; }
.field-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.ft-option {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  border:1.5px solid var(--gray-200); cursor:pointer;
  font-size:.8rem; font-weight:500; transition:all .18s;
  background:#fff; color:var(--gray-600);
}
.ft-option:hover { border-color:var(--blue); background:var(--blue-pale); color:var(--blue); }
.ft-icon { font-size:.9rem; }
.modal-actions { display:flex; gap:.5rem; margin-top:1rem; }
.modal-btn { flex:1; padding:9px; border-radius:8px; font-size:.85rem; font-weight:700; cursor:pointer; }
.modal-btn-cancel { background:#fff; border:1.5px solid var(--gray-200); color:var(--gray-600); }
.modal-btn-cancel:hover { background:var(--gray-100); }
.modal-btn-add { background:var(--yellow); border:none; color:var(--navy); }
.modal-btn-add:hover { background:#FFD53D; }
.modal-input { width:100%; padding:9px 11px; border:1.5px solid var(--gray-200); border-radius:7px; font-family:'DM Sans',sans-serif; font-size:.88rem; outline:none; margin-bottom:.75rem; }
.modal-input:focus { border-color:var(--blue); }

/* ── Context menu ── */
#ctx-menu {
  position:fixed; z-index:2000;
  background:#fff; border:1px solid var(--gray-200);
  border-radius:10px; padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  min-width:160px; display:none;
}
#ctx-menu.open { display:block; }
.ctx-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:7px;
  font-size:.83rem; cursor:pointer; transition:background .15s;
}
.ctx-item:hover { background:var(--gray-100); }
.ctx-item.danger { color:var(--red); }
.ctx-item.danger:hover { background:var(--red-pale); }
.ctx-sep { height:1px; background:var(--gray-200); margin:3px 0; }

/* ── Checkbox styles ── */
input[type=checkbox] {
  width:14px; height:14px; cursor:pointer; accent-color:var(--blue);
}

/* ── Notifications ── */
#toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:3000;
  background:var(--navy); color:#fff; border-radius:10px;
  padding:.75rem 1.25rem; font-size:.84rem; font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transform:translateY(100px); opacity:0;
  transition:all .3s;
}
#toast.show { transform:translateY(0); opacity:1; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }