/****************************************************************** 
 * Shared Base Styles
 * Common styles used across all themes
 ******************************************************************/

/* Responsive Breakpoint Variables */
:root {
  --breakpoint-mobile: 575px;
  --breakpoint-mobile-large: 767px;
  --breakpoint-tablet: 991px;
  --breakpoint-desktop-small: 1199px;
}

/* CSS Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-weight: 400;
}

/* Common Layout Elements */
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-content-head-table {
  width: 100%;
  border-collapse: separate;
  table-layout: fixed;
}

.page-content-head-table > tbody > tr > td {
  vertical-align: top;
}

.page-content-head-table > tbody > tr > td:first-child {
  width: auto;
}

.page-content-head-table > tbody > tr > td:first-child:not(:only-child) {
  padding-right: 10px;
}

.page-content-head-table > tbody > tr > td:last-child:not(:only-child) {
  width: 300px;
  padding-left: 10px;
}

/* Common Table Styles */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: 8px;
  text-align: left;
}

.table td {
  padding: 8px;
  border: 1px solid var(--color-border, #c0c0c0);
}

/* Common Button Styles */
.os-button {
  display: inline-block;
  padding: 2px 5px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-family-primary, Arial, sans-serif);
  font-size: 12px;
  font-weight: bold;
  border: 2px outset var(--color-button-border, #ffffff);
  background-color: var(--color-button-bg, #c0c0c0);
  color: var(--color-button-text, #000000);
}

.os-button:hover {
  border: 2px inset var(--color-button-border, #ffffff);
  background-color: var(--color-button-hover, #d0d0d0);
}

.os-button:active {
  border: 2px inset var(--color-button-border, #ffffff);
}

/* Common Link Styles */
a {
  color: var(--color-link, #000080);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover, #0000ff);
  text-decoration: underline;
}

/* Common Form Styles */
.retro-form input[type="text"],
.retro-form input[type="email"],
.retro-form textarea {
  width: 100%;
  height: 20px;
  border: 1px solid var(--color-form-border, #000000);
  background-color: var(--color-form-bg, #ffffff);
  font-family: var(--font-family-primary, Arial, sans-serif);
  font-size: 12px;
  padding: 2px;
}

.retro-form textarea {
  height: 120px;
  resize: none;
}

.retro-form select {
  width: 100%;
  height: 24px;
  border: 1px solid var(--color-form-border, #000000);
  background-color: var(--color-form-bg, #ffffff);
  font-family: var(--font-family-primary, Arial, sans-serif);
  font-size: 14px;
  padding: 2px 5px;
  box-sizing: border-box;
}

.retro-form input[type="submit"] {
  height: 24px;
  border: 2px outset var(--color-button-border, #c0c0c0);
  border-top-color: var(--color-button-border-light, #ffffff);
  border-left-color: var(--color-button-border-light, #ffffff);
  border-right-color: var(--color-button-border-dark, #808080);
  border-bottom-color: var(--color-button-border-dark, #808080);
  background-color: var(--color-button-bg, #c0c0c0);
  font-family: var(--font-family-primary, Arial, sans-serif);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 0;
  box-shadow: 1px 1px 0 var(--color-shadow, #000000);
}

.retro-form input[type="submit"]:active {
  border: 2px inset var(--color-button-border, #c0c0c0);
  border-top-color: var(--color-button-border-dark, #808080);
  border-left-color: var(--color-button-border-dark, #808080);
  border-right-color: var(--color-button-border-light, #ffffff);
  border-bottom-color: var(--color-button-border-light, #ffffff);
  background-color: var(--color-button-bg, #c0c0c0);
  box-shadow: none;
}

/* Common Alert Styles */
.alert {
  border: 2px solid var(--color-border, #000000);
  padding: 15px;
  margin-bottom: 20px;
}

.alert-success {
  background-color: var(--color-success-bg, #90ee90);
  border-color: var(--color-success, #008000);
}

.alert-danger {
  background-color: var(--color-danger-bg, #ffb6c1);
  border-color: var(--color-danger, #ff0000);
}

.alert-warning {
  background-color: var(--color-warning-bg, #ffd700);
  border-color: var(--color-warning, #ffa500);
}

.alert-info {
  background-color: var(--color-info-bg, #87ceeb);
  border-color: var(--color-info, #0000ff);
}

/* Common Badge Styles */
.new-badge {
  display: inline-block;
  background-color: var(--color-badge-bg, #ff0000);
  color: var(--color-badge-text, #ffffff);
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 2px;
  margin-left: 5px;
  animation: blinker 1s linear infinite;
}

.os-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
  border-radius: 4px;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  background: linear-gradient(to bottom, #90ee90 0%, #6ca000 50%, #5a8a00 100%);
  border: 1px solid #5a8a00;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  white-space: nowrap;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}

.os-badge:hover {
  opacity: 0.9;
  text-decoration: none;
  cursor: default;
}

/* OS-specific badge colors - download button style */
.os-badge.windows {
  background: linear-gradient(to bottom, #4da6ff 0%, #0066cc 50%, #004080 100%);
  border-color: #004080;
  color: white;
}

.os-badge.mac,
.os-badge.macos {
  background: linear-gradient(to bottom, #cc99ff 0%, #9966cc 50%, #800080 100%);
  border-color: #800080;
  color: white;
}

.os-badge.linux {
  background: linear-gradient(to bottom, #ffd700 0%, #ff9900 50%, #cc6600 100%);
  border-color: #cc6600;
  color: #000000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}

.os-badge.dos {
  background: linear-gradient(to bottom, #b3b3b3 0%, #808080 50%, #666666 100%);
  border-color: #666666;
  color: white;
}

.os-badge.android {
  background: linear-gradient(to bottom, #90ee90 0%, #66cc99 50%, #009933 100%);
  border-color: #009933;
  color: white;
}

.os-badge.ios {
  background: linear-gradient(to bottom, #99ccff 0%, #6699ff 50%, #0066cc 100%);
  border-color: #0066cc;
  color: white;
}

/* Version number badge */
.version-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 5px;
  border-radius: 4px;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  background: linear-gradient(to bottom, #4dd0e1 0%, #26c6da 50%, #00acc1 100%);
  border: 1px solid #00acc1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
  white-space: nowrap;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
  margin: 2px 4px 2px 0;
}

.version-badge:hover {
  opacity: 0.9;
  text-decoration: none;
  cursor: default;
}

/* OS filter indicator - styled like download box (box2) */
.os-filter-indicator {
  display: block;
  width: 100%;
  border: 1px solid #c0c0c0;
  padding: 1px;
  background: #fff;
  margin: 10px 0;
}

.os-filter-indicator .inner {
  background: #e7f6c7;
  padding: 10px;
  color: #4c4c4c;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.os-filter-indicator .os-badge {
  margin-left: 0;
}

.os-filter-indicator .show-all-link {
  font-weight: bold;
  color: #856404;
  text-decoration: underline;
}

.os-filter-indicator .show-all-link:hover {
  color: #856404;
  text-decoration: underline;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/* Common Icon Styles */
.software-icon {
  width: 32px;
  height: 32px;
}

.software-icon-large {
  width: 64px;
  height: 64px;
  border: 1px solid var(--color-border, #000080);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Common Animation Styles */
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Common Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 30px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }
.mt-5 { margin-top: 30px; }

.p-0 { padding: 0; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }
.p-5 { padding: 30px; }

/* Responsive Utilities */
@media (max-width: 768px) {
  .page-content {
    padding: 10px;
  }
  
  .page-content-head-table > tbody > tr > td:last-child:not(:only-child) {
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
  }
}
