/* ============================================
   ATLAS Portal - Estilo AD 2005
   Tahoma, gradientes, outset, table layout
   ============================================ */

body {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 11px;
  color: #000;
  background: #5a7ba8 url("data:image/gif;base64,R0lGODlhCAAIAIABAP///wAAACH5BAEKAAEALAAAAAAIAAgAAAINjB+gC+jP2ptn0WskFQA7") repeat;
  margin: 0;
  padding: 10px;
}

a { color: #003399; text-decoration: underline; }
a:visited { color: #660099; }
a:hover { color: #cc0000; }

h1 {
  font-size: 16px;
  color: #ffffff;
  background: #316ac5;
  background: linear-gradient(to bottom, #4a8ad8 0%, #1a5bb5 100%);
  padding: 4px 8px;
  border: 1px solid #0a3b85;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 0 #000;
}

hr { border: 0; border-top: 1px dashed #666; }

pre { font-family: "Courier New", monospace; font-size: 11px; background: #ffffe0; border: 1px dashed #aaa; padding: 6px; overflow: auto; }
code { font-family: "Courier New", monospace; background: #ffffe0; padding: 1px 3px; border: 1px dotted #999; }
small { font-size: 10px; color: #555; }

/* ------- Frame principal ------- */
table.frame {
  width: 100%;
  background: #ece9d8;
  border: 2px solid #0a3b85;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}

td.header {
  background: #0a246a;
  background: linear-gradient(to bottom, #316ac5 0%, #0a246a 100%);
  color: #fff;
  padding: 6px 10px;
  border-bottom: 2px ridge #a8bde0;
}
td.header .logo { font-weight: bold; font-size: 22px; letter-spacing: 2px; font-family: "Trebuchet MS", Verdana, sans-serif; }
td.header .logo-a  { color: #ffff00; text-shadow: 2px 2px 0 #000; }
td.header .logo-t  { color: #00ff00; text-shadow: 2px 2px 0 #000; }
td.header .logo-l  { color: #ff00ff; text-shadow: 2px 2px 0 #000; }
td.header .logo-a2 { color: #00ffff; text-shadow: 2px 2px 0 #000; }
td.header .logo-s  { color: #ff8800; text-shadow: 2px 2px 0 #000; }
td.header .sub { font-size: 11px; color: #cde; margin-left: 10px; font-weight: normal; letter-spacing: 0; }
td.header-right { text-align: right; color: #fff; padding: 6px 10px; }
td.header-right a { color: #ffff80; }

td.marquee-row {
  background: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid #666;
}

/* ------- Sidebar ------- */
td.sidebar {
  width: 170px;
  background: #d4d0c8;
  background: linear-gradient(to right, #ece9d8 0%, #c8c4b8 100%);
  border-right: 2px ridge #a8a8a8;
  padding: 8px 6px;
  vertical-align: top;
}
.menu-title {
  font-weight: bold;
  color: #0a246a;
  background: #c0c0c0;
  background: linear-gradient(to bottom, #e0e0e0, #a0a0a0);
  padding: 2px 6px;
  border: 1px outset #fff;
  margin-bottom: 2px;
}
ul.menu { list-style: none; margin: 0; padding: 4px; background: #fff; border: 1px inset #888; }
ul.menu li { padding: 3px 4px; border-bottom: 1px dotted #ccc; }
ul.menu li a { text-decoration: none; color: #003399; font-weight: bold; }
ul.menu li:hover { background: #316ac5; }
ul.menu li:hover a { color: #fff; }

.visitors { margin-top: 20px; text-align: center; }
.counter {
  font-family: "Courier New", monospace;
  background: #000;
  color: #00ff00;
  letter-spacing: 3px;
  padding: 3px;
  border: 2px inset #888;
  font-size: 14px;
  font-weight: bold;
}
.since { font-size: 9px; color: #555; }

/* ------- Conteudo ------- */
td.content { padding: 12px; vertical-align: top; background: #ffffff; }

/* ------- Panel (janela de dialogo) ------- */
.panel {
  border: 1px solid #0a3b85;
  background: #ece9d8;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 8px;
}
.panel-title {
  background: #316ac5;
  background: linear-gradient(to bottom, #4a8ad8 0%, #1a5bb5 100%);
  color: #fff;
  padding: 3px 8px;
  font-weight: bold;
  border-bottom: 1px solid #0a3b85;
}
.panel-body { padding: 10px; }

/* ------- Grid (tabelas de dados) ------- */
table.grid { border-collapse: collapse; }
table.grid td, table.grid th {
  padding: 3px 6px;
  border-bottom: 1px dotted #bbb;
  vertical-align: middle;
}
table.grid tr.th, table.grid th {
  background: #d4d0c8;
  background: linear-gradient(to bottom, #ece9d8 0%, #bab6a8 100%);
  font-weight: bold;
  text-align: left;
  border-bottom: 1px solid #888;
  padding: 4px 6px;
}
table.grid tr:hover { background: #fff8c4; }

/* ------- Inputs ------- */
input[type=text], input[type=password], input:not([type]), select, textarea {
  border: 1px inset #888;
  background: #fff;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  padding: 2px 4px;
}
input:focus, select:focus { background: #ffffe0; outline: 1px dashed #316ac5; }

/* ------- Buttons 3D ------- */
.btn-3d, button.btn-3d {
  display: inline-block;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000;
  background: #d4d0c8;
  background: linear-gradient(to bottom, #ffffff 0%, #d4d0c8 50%, #a8a498 100%);
  border: 2px outset #fff;
  padding: 2px 10px;
  text-decoration: none;
  cursor: pointer;
  margin: 1px 2px;
}
.btn-3d:hover { background: linear-gradient(to bottom, #ffffff 0%, #e8e4d8 50%, #c8c4b8 100%); }
.btn-3d:active { border-style: inset; }
.btn-3d.bad { color: #800; }

/* ------- Flash ------- */
.flash {
  padding: 6px 10px;
  margin: 4px 0 10px 0;
  border: 1px solid;
}
.flash-ok  { background: #dfd; border-color: #080; color: #040; }
.flash-err { background: #fdd; border-color: #c00; color: #600; }

/* ------- Status dots ------- */
.ok  { color: #080; font-weight: bold; }
.bad { color: #c00; font-weight: bold; }

/* ------- Barras de progresso (CPU/RAM/Disco) ------- */
.bar {
  display: block;
  width: 100%;
  height: 14px;
  background: #fff;
  border: 1px inset #888;
  position: relative;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #4a8ad8;
  background: linear-gradient(to bottom, #6fa8e8 0%, #2a6bb5 100%);
}
.bar-fill.bar-yel {
  background: #e8c060;
  background: linear-gradient(to bottom, #ffd880 0%, #c89020 100%);
}
.bar-fill.bar-red {
  background: #d85050;
  background: linear-gradient(to bottom, #ff7070 0%, #b02020 100%);
}

/* ------- Badges (status colorido) ------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-weight: bold;
  font-size: 11px;
  border: 1px outset #999;
  border-radius: 2px;
  letter-spacing: 1px;
}
.badge-green { background: linear-gradient(to bottom,#8aff8a,#2a8a2a); color:#003000; }
.badge-yel   { background: linear-gradient(to bottom,#ffe070,#c89020); color:#402000; }
.badge-red   { background: linear-gradient(to bottom,#ff7070,#b02020); color:#fff; }
.badge-blue  { background: linear-gradient(to bottom,#7ab8ff,#2060c0); color:#fff; }
.badge-grey  { background: linear-gradient(to bottom,#d0d0d0,#808080); color:#222; }

/* ------- Footer ------- */
td.footer {
  background: #d4d0c8;
  background: linear-gradient(to bottom, #ece9d8 0%, #c8c4b8 100%);
  border-top: 2px ridge #a8a8a8;
  padding: 6px 10px;
  text-align: center;
  font-size: 10px;
  color: #444;
}

/* =========================================================
   CRT Monitor (estilo VB6 IDE / form designer "monitor")
   ========================================================= */
.crt-stand-wrap { display:inline-block; padding:10px 4px 4px 4px; }

.crt-monitor {
  width: 460px;
  margin: 0 auto;
  position: relative;
}

.crt-bezel {
  position: relative;
  width: 460px;
  height: 360px;
  background: #d4d0c8;
  background: linear-gradient(to bottom, #ece9e0 0%, #c8c2b4 50%, #aea89a 100%);
  border: 2px solid #5a544a;
  border-radius: 18px 18px 14px 14px;
  box-shadow:
    inset 2px 2px 0 #fff,
    inset -2px -2px 0 #888,
    3px 4px 0 rgba(0,0,0,0.35);
  padding: 22px 26px 56px 26px;
  box-sizing: border-box;
}

.crt-screen {
  position: relative;
  width: 100%;
  height: 240px;
  background: #000;
  border: 3px inset #5a544a;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.85),
    inset 0 0 60px rgba(0,40,80,0.6);
  border-radius: 8px / 6px;
  overflow: hidden;
}

/* leve curvatura */
.crt-screen::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
  border-radius: 8px / 6px;
}

/* scanlines */
.crt-scan {
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,0.18) 3px
  );
  pointer-events:none;
  mix-blend-mode: multiply;
}

/* a imagem dentro do tubo */
.crt-img {
  display:block;
  width:100%;
  height:100%;
  /* default = esticado */
  object-fit: fill;
}
.crt-img-0  { object-fit: none;       object-position: center; } /* centralizado */
.crt-img-2  { object-fit: fill; }                                /* esticado */
.crt-img-6  { object-fit: contain;    background:#000; }         /* ajustar */
.crt-img-10 { object-fit: cover; }                               /* preencher */
.crt-img-22 { object-fit: cover; }                               /* estender */

/* sem imagem -> "no signal" */
.crt-noimg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#7ad7ff;
  font-family: "Courier New", monospace;
  text-shadow: 0 0 6px #2af, 0 0 12px #07c;
}
.crt-bsod { text-align:center; line-height:1.5; }

/* logo / brand abaixo da tela */
.crt-brand {
  position:absolute;
  left:0; right:0;
  bottom: 22px;
  text-align:center;
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
  color: #3a342a;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 #fff;
}

/* LED de power */
.crt-led {
  position:absolute;
  bottom: 16px; right: 22px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #afff7a, #19a200 60%, #064d00);
  box-shadow: 0 0 6px #4cff00, inset 0 0 2px #fff;
}

/* botoes do bezel */
.crt-btn {
  position:absolute;
  bottom: 14px;
  width: 22px; height: 6px;
  background: #b8b2a3;
  border: 1px solid #6f6a5e;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777;
}
.crt-btn-1 { left: 30px; }
.crt-btn-2 { left: 60px; }
.crt-btn-3 { left: 90px; }

/* pescoco e base */
.crt-neck {
  width: 200px;
  height: 14px;
  margin: -2px auto 0 auto;
  background: linear-gradient(to bottom, #b8b2a3 0%, #8b8576 100%);
  border: 2px solid #5a544a;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 1px 0 0 #fff;
}
.crt-base {
  width: 320px;
  height: 18px;
  margin: 0 auto;
  background: #d4d0c8;
  background: linear-gradient(to bottom, #ece9e0 0%, #aea89a 100%);
  border: 2px solid #5a544a;
  border-radius: 4px 4px 28px 28px / 4px 4px 12px 12px;
  box-shadow:
    inset 2px 2px 0 #fff,
    inset -2px -2px 0 #888,
    3px 4px 0 rgba(0,0,0,0.35);
}