/* =============================================================================
   Visitor mail by Clebex – ceo.css
   ========================================================================== */

/* =============================================================================
   THEME VARIABLES
   ========================================================================== */
:root{
  --bg: #0b0d12;
  --text: #e7e7ea;
  --muted: #b8c0cc;

  --panel: #141823;
  --border: #2a2f3a;
  --thead-bg: var(--panel);

  --cell-bg: transparent;
  --cell-alt-bg: rgba(255,255,255,.03);

  --btn-bg: #0f1117;
  --btn-text: var(--text);
  --btn-border: var(--border);

  /* Enhancement #13(a): stronger button contour */
  --btn-border-strong: rgba(255,255,255,.26);

  --btn-primary-bg: #10333a;
  --btn-primary-text: #9ff3ff;
  --btn-primary-border: #1e6070;

  --btn-danger-bg: #3b1f1f;
  --btn-danger-text: #ffb4b4;
  --btn-danger-border: #6b2b2b;

  --ok-bg: #103d2b;
  --ok-border: #198754;
  --ok-text: #70f1a5;

  --cancel-bg: #3b1f1f;
  --cancel-border: #6b2b2b;
  --cancel-text: #ffb4b4;

  --tab-bg: transparent;
  --tab-text: var(--text);
  --tab-hover-bg: rgba(255,255,255,.06);
  --tab-active-bg: rgba(34,211,238,.16);
  --tab-active-text: var(--text);
  --tab-active-border: #22d3ee;

  --primary: #22d3ee;
  --focus-ring: rgba(255,255,255,.15);
  --shadow: 0 2px 12px rgba(0,0,0,.25);

  --topbar-h: 52px;
  --toolbar-h: 28px;

  --control-radius: 12px;
  --control-border: rgba(255,255,255,.20);
  --control-border-strong: rgba(34,211,238,.55);
  --control-bg: rgba(255,255,255,.04);
}

body.theme-white{
  --bg:#ffffff;
  --text:#0c0d10;
  --muted:#31363f;

  --panel:#f2f4f7;
  --border:#d9dee6;
  --thead-bg:#f7f9fb;

  --cell-bg:#ffffff;
  --cell-alt-bg:#fafbfc;

  --btn-bg:#ffffff;
  --btn-text:#0c0d10;
  --btn-border:#cfd6e1;

  /* Enhancement #13(a): stronger button contour */
  --btn-border-strong: rgba(0,0,0,.22);

  --btn-primary-bg:#e8f7fb;
  --btn-primary-text:#0e5561;
  --btn-primary-border:#a8dbe7;

  --btn-danger-bg:#fff1f1;
  --btn-danger-text:#7b1d1d;
  --btn-danger-border:#f1c7c7;

  --ok-bg:#e8f9f0;
  --ok-border:#6fd2a0;
  --ok-text:#0a5a36;

  --cancel-bg:#fff1f1;
  --cancel-border:#efb4b4;
  --cancel-text:#7b1d1d;

  --tab-bg: transparent;
  --tab-text: #0c0d10;
  --tab-hover-bg: #eef3f7;
  --tab-active-bg: #e8f7fb;
  --tab-active-text: #0e5561;
  --tab-active-border: #a8dbe7;

  --focus-ring: rgba(0,0,0,.12);
  --shadow: 0 2px 10px rgba(0,0,0,.08);

  --primary:#0ea5b8;

  --control-border: rgba(0,0,0,.18);
  --control-border-strong: rgba(14,165,184,.55);
  --control-bg: rgba(0,0,0,.03);
}

body.theme-teal{
  --bg: rgb(36,183,175);
  --text:#062b2a;
  --muted:#0a4342;

  --panel: rgba(255,255,255,.65);
  --border: rgba(0,0,0,.18);
  --thead-bg: rgba(255,255,255,.78);

  --cell-bg: rgba(255,255,255,.92);
  --cell-alt-bg: rgba(255,255,255,.85);

  --btn-bg: rgba(255,255,255,.88);
  --btn-text:#062b2a;
  --btn-border: rgba(0,0,0,.18);

  /* Enhancement #13(a): stronger button contour */
  --btn-border-strong: rgba(0,0,0,.28);

  --btn-primary-bg:#0b544f;
  --btn-primary-text:#ccfffd;
  --btn-primary-border:#083a37;

  --btn-danger-bg:#7a2f2f;
  --btn-danger-text:#ffe2e2;
  --btn-danger-border:#5b2020;

  --ok-bg:#0e5c41;
  --ok-border:#1f7d58;
  --ok-text:#bff7da;

  --cancel-bg:#7a2f2f;
  --cancel-border:#5b2020;
  --cancel-text:#ffe2e2;

  --tab-bg: transparent;
  --tab-text: #062b2a;
  --tab-hover-bg: rgba(255,255,255,.35);
  --tab-active-bg: rgba(255,255,255,.6);
  --tab-active-text: #062b2a;
  --tab-active-border: rgba(0,0,0,.25);

  --focus-ring: rgba(0,0,0,.15);
  --shadow: 0 8px 24px rgba(0,0,0,.15);

  --primary:#0a6b65;

  --control-border: rgba(0,0,0,.22);
  --control-border-strong: rgba(0,0,0,.28);
  --control-bg: rgba(255,255,255,.22);
}

/* =============================================================================
   BASE / RESETS
   ========================================================================== */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{ color:inherit; text-decoration:none; }

.container{ max-width:100%; padding:12px 12px 28px; }

/* =============================================================================
   TOPBAR + MENU
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:12px;
  padding:8px 10px;
  background:rgba(0,0,0,.06);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
  min-width: 0;
}

.brand img.logo{
  height: 26px;
  width: auto;
  display:block;
  border-radius: 6px;
}

.menu{ display:flex; gap:10px; flex-wrap:wrap; }
.menu a{
  padding:6px 10px; border-radius:8px;
  color: var(--tab-text);
  background: var(--tab-bg);
  border:1px solid transparent;
}
.menu a:hover{ background: var(--tab-hover-bg); }
.menu a.active{
  background: var(--tab-active-bg);
  color: var(--tab-active-text);
  border-color: var(--tab-active-border);
}

/* theme toggle */
.theme-toggle.btn.tiny{
  width:22px; height:22px; border-radius:6px;
  border:2px solid var(--btn-border-strong); padding:0;
}

/* =============================================================================
   BUTTONS  (Enhancement #13(a): stronger contour)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:10px;

  /* stronger border for visibility in all themes */
  border:2px solid var(--btn-border-strong);

  background:var(--btn-bg);
  color:var(--btn-text);
  cursor:pointer;
  box-shadow:none;
  user-select:none;
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn.primary{
  background:var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color:var(--btn-primary-text);
}
.btn.danger{
  background:var(--btn-danger-bg);
  border-color:var(--btn-danger-border);
  color:var(--btn-danger-text);
}
.btn.ghost{
  background:transparent;
  border-color: var(--btn-border-strong);
}
.btn.small{ padding:5px 8px; border-radius:9px; }
.btn.tiny{ padding:4px 6px; border-radius:8px; }

/* =============================================================================
   TOOLBAR + INPUTS
   ========================================================================== */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px 0 8px;
  flex-wrap:wrap;
}
.dropdown.hidden{ display:none; }

.search-wrap{ display:flex; align-items:center; gap:6px; }
.search-input{
  padding:8px 10px;
  border-radius: var(--control-radius);
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color:inherit;
  outline:none;
}
.search-input:focus{
  border-color: var(--control-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Unified rounded rectangle controls */
#filterPanel select{
  padding:8px 10px;
  border-radius: var(--control-radius);
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color:inherit;
  outline:none;
}
#filterPanel select:focus{
  border-color: var(--control-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.table-wrap select,
.table-wrap select.search-input{
  padding:6px 10px;
  border-radius: var(--control-radius);
  border:2px solid var(--control-border-strong);
  background: var(--control-bg);
  color:inherit;
  outline:none;
}
.table-wrap select:focus{
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.table-wrap td.editable{
  border:1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  padding:6px 10px;
  min-height: 34px;
  vertical-align: middle;
}
.table-wrap td.editable:focus{
  outline:none;
  border-color: var(--control-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.table-wrap td.readonly{ opacity:.85; }

/* =============================================================================
   TABLE / SCROLLER
   ========================================================================== */
.table-wrap{
  position:relative;
  overflow:auto;
  max-height: calc(100vh - var(--topbar-h) - var(--toolbar-h) - 40px);
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(0,0,0,.02);
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing: 0 6px;
}

thead th{
  position:sticky;
  top:0;
  z-index:2;
  text-align:left;
  font-weight:700;
  background: var(--thead-bg);
  border-bottom:1px solid var(--border);
  padding:10px 10px;
  white-space:nowrap;
}

tbody td{
  padding:6px 10px;
  background: var(--cell-bg);
  border-top:1px solid transparent;
  white-space:nowrap;
  vertical-align: middle;
}
tbody tr:nth-child(even) td{ background: var(--cell-alt-bg); }

.actions-cell{ white-space:nowrap; }
.status-cell{ white-space:nowrap; }

/* =============================================================================
   CARDS / FOOTER / NOTES
   ========================================================================== */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,.03);
  box-shadow: var(--shadow);
  padding:12px;
}
.note{ color:var(--muted); }

.footer{
  padding:14px 12px 20px;
  border-top:1px solid var(--border);
  opacity:.85;
}

/* =============================================================================
   CELL EDITOR OVERLAY
   ========================================================================== */
.cell-editor-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.cell-editor{
  width:min(900px, 96vw);
  max-height:92vh;
  overflow:auto;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding:12px;
}
.cell-editor__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.cell-editor__title{ font-weight:700; opacity:.92; }
.cell-editor__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cell-editor__textarea{
  width:100%;
  min-height: 360px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color:inherit;
  outline:none;
}
.cell-editor__textarea:focus{
  border-color: var(--control-border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ============================================================
   Templates page add-on (scoped to templates.php; no regressions)
   Works with templates.php structure using: .tpl-card .tpl-grid--v2
   ============================================================ */

/* ============================================================
   Templates page add-on (scoped; no regressions)
   - Fix topline overlap (ID, Language, Ref in one row)
   - Add inner large rounded rectangle container
   - Ensure enough vertical space so buttons always visible
   ============================================================ */

.tpl-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Fit ~3 cards vertically but never hide buttons */
.tpl-card{
  border-radius: 16px;
  overflow: visible;                 /* allow actions to show */
  min-height: 30vh;                  /* more height than before */
  max-height: none;                  /* avoid clipping */
  padding: 10px;
}

/* Inner “large rounded rectangle” around all fields */
.tpl-form{
  height: 100%;
}
.tpl-grid--v2{
  /* outer structure: left 30% / right 70% */
  display:grid !important;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto auto auto auto; /* topline + 3 title rows */
  gap: 10px;

  /* big rounded rectangle container */
  border: 1px solid var(--control-border, rgba(255,255,255,.20));
  background: var(--control-bg, rgba(255,255,255,.04));
  border-radius: 16px;
  padding: 10px;

  /* allow it to size with content and leave room for actions */
  min-height: 22vh;
}

/* Make sure cells never overflow their column */
.tpl-grid--v2 .cell{
  min-width: 0;
}

/* ---------- Right side (Body) occupies full height of left column area ---------- */
.tpl-grid--v2 .cell-body{
  grid-column: 2;
  grid-row: 1 / span 4;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.tpl-grid--v2 .cell-body textarea{
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
}

/* ---------- Left side placements ---------- */
.tpl-grid--v2 .cell-id{       grid-column: 1; grid-row: 1; }
.tpl-grid--v2 .cell-language{ grid-column: 1; grid-row: 1; }
.tpl-grid--v2 .cell-ref{      grid-column: 1; grid-row: 1; }

.tpl-grid--v2 .cell-title1{   grid-column: 1; grid-row: 2; }
.tpl-grid--v2 .cell-title2{   grid-column: 1; grid-row: 3; }
.tpl-grid--v2 .cell-title3{   grid-column: 1; grid-row: 4; }

/* ---------- (a) Topline: prevent overlap, force one row left->right ---------- */
/* Cancel any previous float-based attempts */
.tpl-grid--v2 .cell-id,
.tpl-grid--v2 .cell-language,
.tpl-grid--v2 .cell-ref{
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
  We don't have a wrapper div, so we make each topline cell an inline-flex
  and rely on them sharing the same grid slot (col 1,row1).
  Then we “stack” them horizontally by giving each an explicit left offset
  using flex-basis with inline-block positioning via translate.
*/
.tpl-grid--v2 .cell-id,
.tpl-grid--v2 .cell-language,
.tpl-grid--v2 .cell-ref{
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom;
}

/* Provide deterministic widths so they do not overlap */
.tpl-grid--v2 .cell-id{ width: 32%; }
.tpl-grid--v2 .cell-language{ width: 32%; margin-left: 2%; }
.tpl-grid--v2 .cell-ref{ width: 32%; margin-left: 2%; }

/* Make them actually sit on one line */
.tpl-grid--v2 .cell-id,
.tpl-grid--v2 .cell-language,
.tpl-grid--v2 .cell-ref{
  box-sizing: border-box;
}

/* Ensure inputs fill their own box (no half-width now; they’ll be compact naturally) */
.tpl-grid--v2 .cell-id input,
.tpl-grid--v2 .cell-language input,
.tpl-grid--v2 .cell-ref input{
  width: 100% !important;
  min-width: 0;
}

/* ---------- (b) Controls: match theme model, rounded rectangles ---------- */
.tpl-form input[type="text"],
.tpl-form textarea{
  border-radius: var(--control-radius, 12px) !important;
  border: 1px solid var(--control-border, rgba(255,255,255,.20)) !important;
  background: rgba(0,0,0,0) !important; /* inherit from container look (non-white) */
  color: inherit !important;
  outline: none;
}

body.theme-white .tpl-form input[type="text"],
body.theme-white .tpl-form textarea{
  background: rgba(255,255,255,.55) !important; /* keep white theme readable but not pure white */
}

.tpl-form input[type="text"]:focus,
.tpl-form textarea:focus{
  border-color: var(--control-border-strong, rgba(34,211,238,.55)) !important;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(255,255,255,.15)) !important;
}

/* Titles should be left-column width only */
.tpl-grid--v2 .cell-title1 textarea,
.tpl-grid--v2 .cell-title2 textarea,
.tpl-grid--v2 .cell-title3 textarea{
  width: 100% !important;
  max-width: 100% !important;
  resize: none;
  line-height: 1.25;
  height: calc(1.25em * 2 + 16px); /* 2 lines */
}

/* ---------- (c) Ensure buttons visible ---------- */
.tpl-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:10px;
}

/* If any ancestor had overflow hidden, ensure actions are not clipped */
.tpl-card .tpl-actions{
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 980px){
  .tpl-card{ min-height: auto; }
  .tpl-grid--v2{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  .tpl-grid--v2 .cell-body{
    grid-column: 1;
    grid-row: auto;
  }
  .tpl-grid--v2 .cell-id,
  .tpl-grid--v2 .cell-language,
  .tpl-grid--v2 .cell-ref{
    display:block;
    width: 100%;
    margin-left: 0 !important;
  }
  .tpl-grid--v2 .cell-body textarea{
    min-height: 220px;
    resize: vertical;
  }
}








/* Templates layout v3 (wrapper-based, no overlap) */
.tpl-grid--v3{
  display:grid;
  grid-template-columns: 30% 70%;
  gap:10px;

  border: 1px solid var(--control-border, rgba(255,255,255,.20));
  background: var(--control-bg, rgba(255,255,255,.04));
  border-radius: 16px;
  padding: 10px;

  min-height: 22vh;
}

.tpl-left{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width: 0;
}

.tpl-topline{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  align-items:end;
}

.tpl-right{
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.tpl-right .cell-body{
  display:flex;
  flex-direction:column;
  height:100%;
}

.tpl-right .cell-body textarea{
  flex:1 1 auto;
  min-height:0;
  resize:none;
}

@media (max-width: 980px){
  .tpl-grid--v3{ grid-template-columns: 1fr; }
  .tpl-right .cell-body textarea{ min-height:220px; resize:vertical; }
}




/* ===== Templates v3 fine tuning ===== */

/* Topline: keep 3 fields on one row but compact inputs */
.tpl-topline{
  display:flex;                 /* easier to nudge left */
  gap:12px;
  align-items:flex-end;
}

/* Give each block a consistent, non-stretching width */
.tpl-topline .cell{
  flex: 0 0 auto;               /* do not stretch */
  min-width: 0;
}

/* (a) ID: narrow overall block, input half width */
.tpl-topline .cell-id{
  width: 110px;
}
.tpl-topline .cell-id input{
  width: 55px;                  /* ~half */
}

/* (b) Language: move left (no stretch), input half width */
.tpl-topline .cell-language{
  width: 140px;
}
.tpl-topline .cell-language input{
  width: 70px;                  /* ~half */
}

/* (c) Ref: move left by making it compact and not stretching */
.tpl-topline .cell-ref{
  width: 180px;
}
.tpl-topline .cell-ref input{
  width: 120px;                 /* compact, left aligned */
}

/* Ensure inputs don’t exceed their container */
.tpl-topline input{
  max-width: 100%;
}

/* (d) Titles: double vertical space + no resize handles */
.tpl-left .twolines textarea{
  resize: none !important;
  line-height: 1.25;
  height: calc(1.25em * 4 + 18px) !important; /* 4 lines */
}

/* Keep body textarea non-resizable to preserve layout */
.tpl-right .cell-body textarea{
  resize: none !important;
}

/* Mobile: allow full width inputs */
@media (max-width: 980px){
  .tpl-topline{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .tpl-topline .cell-id,
  .tpl-topline .cell-language,
  .tpl-topline .cell-ref{
    width:auto;
  }
  .tpl-topline .cell-id input,
  .tpl-topline .cell-language input,
  .tpl-topline .cell-ref input{
    width:100%;
  }
}


.tpl-left .twolines textarea{ width: 100% !important; max-width: none !important; }