/*
 * Imperare classic UI — clean reimplementation of the legacy look.
 * Source of truth: docs-project/ui-spec.md (extracted from the customized
 * Bartik theme + module markup). Legacy class names are kept so the view
 * templates read like the original pages; the CSS itself is rewritten.
 */

/* ---------- 1. Global chrome ---------- */

html, body { margin: 0; padding: 0; height: 100%; }

/* Deployed palette (Drupal color module, color_bartik_palette):
   header top/bottom + footer #102370, main background #ffffff. */
body.classic {
  background: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 87.5%;
  line-height: 1.5;
  color: #3b3b3b;
}

#page-wrapper { min-height: 100%; min-width: 960px; display: flex; flex-direction: column; }
#page { width: 960px; margin: 0 auto; background: #ffffff; color: #102370; flex: 1 0 auto; }

a { color: #102370; text-decoration: none; }
a:hover, a:active, a:focus { text-decoration: underline; color: #404f8d; }

/* Header */
#header {
  background: #102370;
  color: #fffeff;
  overflow: hidden;
}
#header .section { width: 960px; margin: 0 auto; position: relative; }
#logo { float: left; padding: 15px 15px 15px 10px; }
#logo img { display: block; border: 0; }
#secondary-menu-links {
  float: right; margin: 10px 10px 0; font-size: 0.929em; list-style: none; padding: 0;
}
#secondary-menu-links li { display: inline; padding: 0 10px; }
#secondary-menu-links a { color: #fffeff; }

/* Main menu tabs */
#main-menu { clear: both; }
#main-menu-links { font-size: 0.929em; margin: 0; padding: 0 15px; list-style: none; overflow: hidden; }
#main-menu-links li { float: left; padding: 0 1px; margin: 0 1px; }
#main-menu-links a {
  color: #ffffff; background-color: #29a8df;
  float: left; height: 2.4em; line-height: 2.4em;
  padding: 0 0.8em; text-decoration: none;
}
#main-menu-links a:hover, #main-menu-links a:focus { background-color: #9bcaed; }
#main-menu-links a.active { color: #102370; background: #ffffff; }

/* Content area */
#main { width: 960px; margin: 20px auto 40px; }
.content { margin-top: 10px; }

/* Footer */
#footer-wrapper {
  background: #102370; color: rgba(255, 255, 255, 0.65);
  font-size: 0.857em; padding: 20px 0 30px;
}
#footer { width: 960px; margin: 0 auto; text-align: center; }
#footer a { color: rgba(255, 255, 255, 0.8); }
#footer a:hover { text-decoration: underline; }

/* ---------- 2. Tables (the app's layout primitive) ---------- */

table { border: 0; border-collapse: separate; border-spacing: 0; font-size: 0.857em; margin: 10px 0; width: 100%; }
tr { background: #efefef; }
tr td, tr th { padding: 4px 9px; border: 1px solid #ffffff; text-align: left; vertical-align: middle; }
table tr th { background: #757575; color: #ffffff; font-weight: bold; }
table tr th a { color: #ffffff; }

table.neutral { font-size: 1em; margin: 0; }
table.neutral tr, table.neutral-300 tr { background: transparent; }
table.neutral-300 { font-size: 1em; margin: 0; width: 300px; }
table.narrow-300 { width: 300px; }
table.narrow-600 { width: 600px; }
table.narrow-800 { width: 800px; }

td.no-v-borders, th.no-v-borders {
  border-top: 4px solid #ffffff; border-bottom: 4px solid #ffffff;
  border-left: none; border-right: none; padding: 4px 9px;
}

/* Cell colors */
td.ltwhi, th.ltwhi { background: #ffffff; }
td.ltwhi-30 { background: #ffffff; width: 30px; }
td.ltwhi-rt { background: #ffffff; text-align: right; }
td.ltwhi-neutral { background: #ffffff; font-size: 1.2em; }
td.whigrey { background: #f7f7f7; }
td.ltblue { background: #dde6f5; }
td.midblue { background: #29a8df; }
td.navy { background: #102370; }
td.ltlilac { background: #e3cfde; }
td.ltpink { background: #f5e1e1; }
td.attnred { background: #ff6464; }
td.inactiv { background: #cccccc; }
td.ltgreen { background: #d6f0e0; }
td.ltgrey { background: #efefef; } /* legacy referenced-but-undefined; renders default grey */

/* Text + link helpers */
.errortext { color: #dd3333; }
.oktext { color: #009900; }
.greytext { color: #777777; }
a.blak { color: #000000; } a.blak:hover { color: #000000; }
a.gryy { color: #606060; } a.gryy:hover { color: #606060; }
a.whii { color: #ffffff; } a.whii:hover { color: #ffffff; }
a.underlined-link { text-decoration: underline; }

/* ---------- 3. Forms ---------- */

.impinput { width: 96%; background: #fafafa; border: 1px solid #000000; }
.imp200input { width: 96%; height: 200px; background: #fafafa; border: 1px solid #000000; }
.imp-input { background: #fafafa; border: 1px solid #000000; }
input, select, textarea, button {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 0.929em;
}

input.form-submit, a.button {
  background: #fff url(images/buttons.png) 0 0 repeat-x;
  border: 1px solid #e4e4e4;
  border-bottom-color: #b4b4b4;
  border-left-color: #d2d2d2;
  border-right-color: #d2d2d2;
  color: #3a3a3a;
  cursor: pointer;
  padding: 4px 17px;
  border-radius: 15px;
}
input.form-submit:hover, a.button:hover { background: #dedede; }

/* ---------- 4. Login (front page + inner sidebar) ---------- */

.form-submit-login, .form-submit-login-narrow {
  color: #ffffff; background: url(../legacy/icon_enter_ltblue.png) no-repeat center #102370;
  padding: 5px 10px; font-size: 17px; border: none;
  width: 200px; height: 34px; text-align: center; vertical-align: middle;
  margin: 4px 0; cursor: pointer;
}
.form-text-login, .form-text-login-narrow {
  color: #102370; background-color: #ffffff;
  padding: 5px 10px; font-size: 17px; border: none;
  width: 180px; height: 24px; text-align: left; vertical-align: middle; margin: 4px 0;
}
.form-text-login.username { background: url(../legacy/icon_user_ltblue.png) no-repeat center #ffffff; }
.form-text-login.password { background: url(../legacy/icon_pwd_ltblue.png) no-repeat center #ffffff; }
.form-text-login:focus.username, .form-text-login:focus.password { background-image: none; }

/* Front page */
body.body-imperare-front-page {
  background-color: #29a8df;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0; text-align: center;
}
img.front-page-background {
  min-height: 100%; min-width: 1200px; width: 100%; height: auto;
  position: fixed; top: 0; left: 0; z-index: -10;
}
@media screen and (max-width: 1200px) {
  img.front-page-background { left: 50%; margin-left: -600px; }
}
.front-page-logo { width: 345px; height: 137px; margin: 0 10px; }
@media screen and (max-width: 385px) { .front-page-logo { width: 90%; height: auto; } }
.norm-text-whi-13px { color: #ffffff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; }

/* ---------- 5. Icons, tooltips, balls ---------- */

img.icon { border: 0; vertical-align: middle; }

/* CSS hover tooltips: trigger element carries a hidden span */
.tip { position: relative; display: inline-block; }
.tip > span {
  display: none; position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 8px;
  width: 200px; padding: 14px 20px; font-size: 12px; font-weight: normal;
  background: #fff7e7; border: 1px solid #fff7e7; border-radius: 2px;
  box-shadow: 2px 2px 4px #e5e5e5; color: #3b3b3b; text-align: left;
  /* Triggers often sit in nowrap cells — the tooltip must still wrap. */
  white-space: normal; line-height: 16px;
}
.tip:hover > span { display: inline-block; }
.tip-rt > span { left: auto; right: 0; }
.tip-narrow > span { width: 80px; }

/* Admin section tab strip (legacy bartik tabs: grey rounded-top tabs on a
   1px bottom border, active tab white and flush with the page) */
.admin-tabs { border-bottom: 1px solid #cccccc; padding: 6px 0 0 9px; margin: 0 0 9px 0; }
.admin-tabs a {
  display: inline-block; background: #ededed; color: #000000;
  border-radius: 6px 6px 0 0; padding: 2px 10px 3px; margin-right: 5px;
  text-decoration: none; text-shadow: 0 1px 0 #ffffff; font-size: 0.929em;
}
.admin-tabs a.active {
  background: #ffffff; color: #102370;
  border: 1px solid #cccccc; border-bottom: 1px solid #ffffff; margin-bottom: -1px;
}

/* Icon-backed trigger divs */
div.tip-form-icon { background: url(images/form_wide_s.png) no-repeat center #ffffff; width: 23px; height: 13px; }
div.tip-timemachine-passive { background: url(images/calendar_s.png) no-repeat center #ffffff; width: 18px; height: 16px; }
div.tip-timemachine-active { background: url(images/calendar_s_attn.png) no-repeat center #ffffff; width: 18px; height: 16px; }
div.tip-new-plus { background: url(images/add.png) no-repeat center; width: 30px; height: 16px; }
div.tip-plus-empty-1 { background: url(images/plus_empty_1.png) no-repeat center; width: 7px; height: 9px; }
div.tip-plus-empty-2 { background: url(images/plus_empty_2.png) no-repeat center; width: 7px; height: 9px; }
div.tip-plus-normal-2 { background: url(images/plus_normal_2.png) no-repeat center; width: 7px; height: 9px; }

/* Depth/language "ball" links: the anchor itself is the 26px circle */
td.ball {
  background: none; border: none; padding: 0 4px;
  width: 26px; vertical-align: middle;
}
/* The 52x52 PNGs hold a 26x26 circle at offset (3,2) on a white canvas —
   paint at natural size, shifted so the circle fills the box exactly. */
td.ball a {
  display: block; width: 26px; height: 26px;
  line-height: 26px; text-align: center; font-size: 12px;
  background: url(images/bgr_ball_ltgrey.png) no-repeat -3px -2px;
  white-space: nowrap;
}
td.ball a:hover { text-decoration: none; }
td.ball.selected a { background-image: url(images/bgr_ball_navy.png); }

/* Admin sub-tabs (Drupal primary tabs look) */
.tabs { border-bottom: 1px solid #b4b4b4; margin: 10px 0; }
ul.tabs-primary { list-style: none; margin: 0; padding: 0 5px; overflow: visible; display: flex; }
ul.tabs-primary li { margin-right: 5px; }
ul.tabs-primary li a {
  display: block; background: #ededed; color: #000000;
  padding: 0 10px 3px; border-radius: 6px 6px 0 0;
  text-shadow: 0 1px 0 #ffffff; margin-bottom: -1px; border-bottom: 1px solid #b4b4b4;
}
ul.tabs-primary li a.active {
  background: #ffffff; color: #102370; border-bottom: 1px solid #ffffff;
}

/* ---------- 6. Misc ---------- */

#pickdate { }
.element-invisible { position: absolute; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; }
@media print {
  .no-print { display: none !important; }
  .print-only-logo { display: block; }
}
.print-only-logo { display: none; }