/**
 * Ptable CSS Grid Engine (18 Columns, 32 Columns Wide & Responsive)
 */

.ptable-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px;
  overflow-x: auto;
}

#Ptable {
  display: grid;
  grid-template-columns: repeat(18, minmax(48px, 1fr));
  grid-template-rows: repeat(10, minmax(52px, 1fr));
  gap: var(--cell-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  user-select: none;
}

/* Individual Element Cell */
#Ptable li.element {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: var(--cell-padding);
  border-radius: var(--cell-radius);
  background-color: var(--surface-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}

#Ptable li.element:hover {
  transform: scale(1.15);
  z-index: 50;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  outline: 2px solid var(--active-tab-color);
}

#Ptable li.element.active {
  outline: 2px solid #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
  z-index: 40;
}

#Ptable li.element b.atomic-num {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  opacity: 0.8;
}

#Ptable li.element abbr.symbol {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 2px 0;
}

#Ptable li.element em.name {
  font-style: normal;
  font-size: 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#Ptable li.element data.weight {
  font-size: 8.5px;
  opacity: 0.85;
  font-family: monospace;
}

/* Series Background Styling */
.series-nonmetal    { background-color: var(--series-nonmetal) !important; }
.series-noble       { background-color: var(--series-noble) !important; }
.series-alkali      { background-color: var(--series-alkali) !important; }
.series-alkaline    { background-color: var(--series-alkaline) !important; }
.series-metalloid   { background-color: var(--series-metalloid) !important; }
.series-halogen     { background-color: var(--series-halogen) !important; }
.series-transition  { background-color: var(--series-transition) !important; }
.series-poor        { background-color: var(--series-poor) !important; }
.series-lanthanoid  { background-color: var(--series-lanthanoid) !important; }
.series-actinoid    { background-color: var(--series-actinoid) !important; }
.series-unknown     { background-color: var(--series-unknown) !important; }

/* States of Matter Text Colors */
.state-solid        { color: var(--solid-color); }
.state-liquid       { color: var(--liquid-color); font-weight: bold; }
.state-gas          { color: var(--gas-color); font-weight: bold; }
.state-unknown      { color: var(--unknown-color); }

/* Dimmed elements (for timeline search or filter) */
#Ptable li.element.dimmed {
  opacity: 0.15 !important;
  pointer-events: none;
}

/* Standard 18-Column Grid Coordinates */
/* Period 1 */
.el-1  { grid-column: 1;  grid-row: 1; }
.el-2  { grid-column: 18; grid-row: 1; }
/* Period 2 */
.el-3  { grid-column: 1;  grid-row: 2; }
.el-4  { grid-column: 2;  grid-row: 2; }
.el-5  { grid-column: 13; grid-row: 2; }
.el-6  { grid-column: 14; grid-row: 2; }
.el-7  { grid-column: 15; grid-row: 2; }
.el-8  { grid-column: 16; grid-row: 2; }
.el-9  { grid-column: 17; grid-row: 2; }
.el-10 { grid-column: 18; grid-row: 2; }
/* Period 3 */
.el-11 { grid-column: 1;  grid-row: 3; }
.el-12 { grid-column: 2;  grid-row: 3; }
.el-13 { grid-column: 13; grid-row: 3; }
.el-14 { grid-column: 14; grid-row: 3; }
.el-15 { grid-column: 15; grid-row: 3; }
.el-16 { grid-column: 16; grid-row: 3; }
.el-17 { grid-column: 17; grid-row: 3; }
.el-18 { grid-column: 18; grid-row: 3; }
/* Period 4 (19 - 36) */
.el-19 { grid-column: 1;  grid-row: 4; }
.el-20 { grid-column: 2;  grid-row: 4; }
.el-21 { grid-column: 3;  grid-row: 4; }
.el-22 { grid-column: 4;  grid-row: 4; }
.el-23 { grid-column: 5;  grid-row: 4; }
.el-24 { grid-column: 6;  grid-row: 4; }
.el-25 { grid-column: 7;  grid-row: 4; }
.el-26 { grid-column: 8;  grid-row: 4; }
.el-27 { grid-column: 9;  grid-row: 4; }
.el-28 { grid-column: 10; grid-row: 4; }
.el-29 { grid-column: 11; grid-row: 4; }
.el-30 { grid-column: 12; grid-row: 4; }
.el-31 { grid-column: 13; grid-row: 4; }
.el-32 { grid-column: 14; grid-row: 4; }
.el-33 { grid-column: 15; grid-row: 4; }
.el-34 { grid-column: 16; grid-row: 4; }
.el-35 { grid-column: 17; grid-row: 4; }
.el-36 { grid-column: 18; grid-row: 4; }
/* Period 5 (37 - 54) */
.el-37 { grid-column: 1;  grid-row: 5; }
.el-38 { grid-column: 2;  grid-row: 5; }
.el-39 { grid-column: 3;  grid-row: 5; }
.el-40 { grid-column: 4;  grid-row: 5; }
.el-41 { grid-column: 5;  grid-row: 5; }
.el-42 { grid-column: 6;  grid-row: 5; }
.el-43 { grid-column: 7;  grid-row: 5; }
.el-44 { grid-column: 8;  grid-row: 5; }
.el-45 { grid-column: 9;  grid-row: 5; }
.el-46 { grid-column: 10; grid-row: 5; }
.el-47 { grid-column: 11; grid-row: 5; }
.el-48 { grid-column: 12; grid-row: 5; }
.el-49 { grid-column: 13; grid-row: 5; }
.el-50 { grid-column: 14; grid-row: 5; }
.el-51 { grid-column: 15; grid-row: 5; }
.el-52 { grid-column: 16; grid-row: 5; }
.el-53 { grid-column: 17; grid-row: 5; }
.el-54 { grid-column: 18; grid-row: 5; }
/* Period 6 (55 - 56, placeholder, 72 - 86) */
.el-55 { grid-column: 1;  grid-row: 6; }
.el-56 { grid-column: 2;  grid-row: 6; }
.el-placeholder-lanthanoid { grid-column: 3; grid-row: 6; font-size: 10px; font-weight: bold; background: var(--series-lanthanoid); }
.el-72 { grid-column: 4;  grid-row: 6; }
.el-73 { grid-column: 5;  grid-row: 6; }
.el-74 { grid-column: 6;  grid-row: 6; }
.el-75 { grid-column: 7;  grid-row: 6; }
.el-76 { grid-column: 8;  grid-row: 6; }
.el-77 { grid-column: 9;  grid-row: 6; }
.el-78 { grid-column: 10; grid-row: 6; }
.el-79 { grid-column: 11; grid-row: 6; }
.el-80 { grid-column: 12; grid-row: 6; }
.el-81 { grid-column: 13; grid-row: 6; }
.el-82 { grid-column: 14; grid-row: 6; }
.el-83 { grid-column: 15; grid-row: 6; }
.el-84 { grid-column: 16; grid-row: 6; }
.el-85 { grid-column: 17; grid-row: 6; }
.el-86 { grid-column: 18; grid-row: 6; }
/* Period 7 (87 - 88, placeholder, 104 - 118) */
.el-87 { grid-column: 1;  grid-row: 7; }
.el-88 { grid-column: 2;  grid-row: 7; }
.el-placeholder-actinoid { grid-column: 3; grid-row: 7; font-size: 10px; font-weight: bold; background: var(--series-actinoid); }
.el-104 { grid-column: 4;  grid-row: 7; }
.el-105 { grid-column: 5;  grid-row: 7; }
.el-106 { grid-column: 6;  grid-row: 7; }
.el-107 { grid-column: 7;  grid-row: 7; }
.el-108 { grid-column: 8;  grid-row: 7; }
.el-109 { grid-column: 9;  grid-row: 7; }
.el-110 { grid-column: 10; grid-row: 7; }
.el-111 { grid-column: 11; grid-row: 7; }
.el-112 { grid-column: 12; grid-row: 7; }
.el-113 { grid-column: 13; grid-row: 7; }
.el-114 { grid-column: 14; grid-row: 7; }
.el-115 { grid-column: 15; grid-row: 7; }
.el-116 { grid-column: 16; grid-row: 7; }
.el-117 { grid-column: 17; grid-row: 7; }
.el-118 { grid-column: 18; grid-row: 7; }

/* Lanthanoids Row 9 (57 - 71) */
.el-57 { grid-column: 4; grid-row: 9; }
.el-58 { grid-column: 5; grid-row: 9; }
.el-59 { grid-column: 6; grid-row: 9; }
.el-60 { grid-column: 7; grid-row: 9; }
.el-61 { grid-column: 8; grid-row: 9; }
.el-62 { grid-column: 9; grid-row: 9; }
.el-63 { grid-column: 10; grid-row: 9; }
.el-64 { grid-column: 11; grid-row: 9; }
.el-65 { grid-column: 12; grid-row: 9; }
.el-66 { grid-column: 13; grid-row: 9; }
.el-67 { grid-column: 14; grid-row: 9; }
.el-68 { grid-column: 15; grid-row: 9; }
.el-69 { grid-column: 16; grid-row: 9; }
.el-70 { grid-column: 17; grid-row: 9; }
.el-71 { grid-column: 18; grid-row: 9; }

/* Actinoids Row 10 (89 - 103) */
.el-89  { grid-column: 4; grid-row: 10; }
.el-90  { grid-column: 5; grid-row: 10; }
.el-91  { grid-column: 6; grid-row: 10; }
.el-92  { grid-column: 7; grid-row: 10; }
.el-93  { grid-column: 8; grid-row: 10; }
.el-94  { grid-column: 9; grid-row: 10; }
.el-95  { grid-column: 10; grid-row: 10; }
.el-96  { grid-column: 11; grid-row: 10; }
.el-97  { grid-column: 12; grid-row: 10; }
.el-98  { grid-column: 13; grid-row: 10; }
.el-99  { grid-column: 14; grid-row: 10; }
.el-100 { grid-column: 15; grid-row: 10; }
.el-101 { grid-column: 16; grid-row: 10; }
.el-102 { grid-column: 17; grid-row: 10; }
.el-103 { grid-column: 18; grid-row: 10; }

/* 32-Column Wide Layout Mode */
body.layout-wide #Ptable {
  grid-template-columns: repeat(32, minmax(38px, 1fr));
}
body.layout-wide .el-placeholder-lanthanoid,
body.layout-wide .el-placeholder-actinoid {
  display: none !important;
}
/* In 32-col layout, f-block inserts directly into rows 6 and 7 */
body.layout-wide .el-57 { grid-column: 3; grid-row: 6; }
body.layout-wide .el-58 { grid-column: 4; grid-row: 6; }
body.layout-wide .el-59 { grid-column: 5; grid-row: 6; }
body.layout-wide .el-60 { grid-column: 6; grid-row: 6; }
body.layout-wide .el-61 { grid-column: 7; grid-row: 6; }
body.layout-wide .el-62 { grid-column: 8; grid-row: 6; }
body.layout-wide .el-63 { grid-column: 9; grid-row: 6; }
body.layout-wide .el-64 { grid-column: 10; grid-row: 6; }
body.layout-wide .el-65 { grid-column: 11; grid-row: 6; }
body.layout-wide .el-66 { grid-column: 12; grid-row: 6; }
body.layout-wide .el-67 { grid-column: 13; grid-row: 6; }
body.layout-wide .el-68 { grid-column: 14; grid-row: 6; }
body.layout-wide .el-69 { grid-column: 15; grid-row: 6; }
body.layout-wide .el-70 { grid-column: 16; grid-row: 6; }
body.layout-wide .el-71 { grid-column: 17; grid-row: 6; }
body.layout-wide .el-72 { grid-column: 18; grid-row: 6; }

body.layout-wide .el-89  { grid-column: 3; grid-row: 7; }
body.layout-wide .el-90  { grid-column: 4; grid-row: 7; }
body.layout-wide .el-91  { grid-column: 5; grid-row: 7; }
body.layout-wide .el-92  { grid-column: 6; grid-row: 7; }
body.layout-wide .el-93  { grid-column: 7; grid-row: 7; }
body.layout-wide .el-94  { grid-column: 8; grid-row: 7; }
body.layout-wide .el-95  { grid-column: 9; grid-row: 7; }
body.layout-wide .el-96  { grid-column: 10; grid-row: 7; }
body.layout-wide .el-97  { grid-column: 11; grid-row: 7; }
body.layout-wide .el-98  { grid-column: 12; grid-row: 7; }
body.layout-wide .el-99  { grid-column: 13; grid-row: 7; }
body.layout-wide .el-100 { grid-column: 14; grid-row: 7; }
body.layout-wide .el-101 { grid-column: 15; grid-row: 7; }
body.layout-wide .el-102 { grid-column: 16; grid-row: 7; }
body.layout-wide .el-103 { grid-column: 17; grid-row: 7; }
body.layout-wide .el-104 { grid-column: 18; grid-row: 7; }