/**
 * FiCast Application Site Styles
 *
 * Core application-specific styles for FiCast including:
 * - Login forms
 * - Generic forms
 * - Tab navigation
 * - Tableau visualization reports
 * - Privacy policy pages
 * - FiCast-specific UI elements
 *
 * @package FiCast
 * @subpackage CSS
 */

/* ============================================================================
   FICAST CSS VARIABLES
   ============================================================================ */

:root {
    /* FiCast Brand Colors */
    --ficast-primary: #183143;
    --ficast-green: #01764e;
    --ficast-form-bg: #ffffff;
    --ficast-border: #000000;
    --ficast-text: #000000;
    --ficast-error: red;
    --ficast-white: #ffffff;

    /* Layout Dimensions */
    --ficast-form-width: 300px;
    --ficast-input-width: 125px;
    --ficast-tab-width: 122px;
}

/* Dark mode overrides for FiCast */
[data-theme="dark"] {
    --ficast-primary: #1e3a5f;
    --ficast-form-bg: #334155;
    --ficast-border: #475569;
    --ficast-text: #f1f5f9;
    --ficast-error: #f87171;
    --ficast-white: #1e293b;
}


/* ============================================================================
   GLOBAL BODY STYLES
   ============================================================================ */

body {
    margin: 0;
    padding: 0;
}


/* ============================================================================
   FORM STYLES - PACKAGE COMPLETION
   ============================================================================ */

#pkgcompbtns form {
    margin: 0;
    padding: 0;
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/*
 * NOTE: Basic utility classes (.hidden, .clear, .left, .right) are now in
 * shared/css/core/utilities.css. They have been removed from this file to
 * prevent duplication.
 *
 * If you need these utilities, ensure shared utilities CSS is loaded first.
 */

/*
 * Error text color
 * Replaces: style="color: red"
 */
.text-error {
    color: var(--ficast-error);
}

/*
 * Indented paragraph for product info
 * Replaces: style="margin-left:.3in"
 */
.paragraph-indented {
    margin-left: 0.3in;
}

/*
 * Navy background header
 * Replaces: style="background: navy; color: white"
 */
.header-navy {
    background: navy;
    color: white;
    padding: 0 0.5em;
}

/*
 * Product info table styling
 * Replaces: style="font-style:normal; font-family:Arial"
 */
.product-info-table {
    width: 720px;
    border: 0;
    font-style: normal;
    font-family: Arial, sans-serif;
}


/* ============================================================================
   INPUT ELEMENTS
   ============================================================================ */

input[type='submit'] {
    padding: 2px 8px 2px 8px;
}

/* Fix text selection color for submit buttons and links */
input[type='submit']::selection,
a::selection {
    background-color: var(--ficast-primary) !important;
    color: var(--ficast-white) !important;
}

input[type='submit']::-moz-selection,
a::-moz-selection {
    background-color: var(--ficast-primary) !important;
    color: var(--ficast-white) !important;
}

input#username {
    width: var(--ficast-input-width);
}

input#password {
    width: var(--ficast-input-width);
}


/* ============================================================================
   FORM STYLES - LOGIN
   ============================================================================ */

form.login {
    border: solid 1px var(--ficast-border);
    width: var(--ficast-form-width);
    margin-top: 15px;
    padding: 5px 5px 10px 5px;
    background-color: var(--ficast-form-bg);
    font-size: 10pt;
}

form.login table tr td.f-hdr {
    text-align: center;
    padding: 10px 0 10px 0;
    font-weight: bold;
    font-size: 11pt;
}

form.login table tr td.f-lbl {
    text-align: right;
    padding-bottom: 5px;
}

form.login table tr td.f-val {
    text-align: left;
    padding-bottom: 5px;
}

form.login table tr td.f-ftr {
    text-align: center;
}

form.login table tr td.f-val input[type='submit'] {
    margin-top: 5px;
    width: var(--ficast-input-width);
}

/* Login form inputs - dark mode support */
form.login input[type='text'],
form.login input[type='password'] {
    background-color: var(--ficast-white);
    color: var(--ficast-text);
    border: 1px solid var(--ficast-border);
}

[data-theme="dark"] form.login input[type='text'],
[data-theme="dark"] form.login input[type='password'] {
    color-scheme: dark;
}

[data-theme="dark"] form.login input[type='submit'] {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--ficast-border);
}


/* ============================================================================
   FORM STYLES - GENERIC
   ============================================================================ */

form.generic table tr td.f-hdr {
    text-align: center;
    padding: 10px 0 10px 0;
    font-weight: bold;
    font-size: 11pt;
}

form.generic table tr td.f-lhdr {
    text-align: left;
    padding: 10px 0 10px 0;
    font-weight: bold;
    font-size: 11pt;
}

form.generic table tr td.f-lbl {
    text-align: right;
    padding-bottom: 10px;
    font-size: 11pt;
}

form.generic table tr td.f-val {
    text-align: left;
    padding-bottom: 10px;
    font-size: 11pt;
}

form.generic table tr td.f-ftr {
    text-align: center;
}

form.generic table tr td.f-lhdr ul {
    margin-top: 0;
    padding-top: 0;
}

form.generic table tr {
    margin: 0;
    padding: 0;
}

/* Generic form inputs - dark mode support */
form.generic input[type='text'],
form.generic input[type='password'] {
    background-color: var(--ficast-white);
    color: var(--ficast-text);
    border: 1px solid var(--ficast-border);
}

[data-theme="dark"] form.generic input[type='text'],
[data-theme="dark"] form.generic input[type='password'] {
    color-scheme: dark;
}

[data-theme="dark"] form.generic input[type='submit'] {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--ficast-border);
}


/* ============================================================================
   FORM STYLES - CLOSE
   ============================================================================ */

form.close table tr td.f-hdr {
    text-align: center;
    padding: 10px 0 10px 0;
    font-weight: bold;
    font-size: 11pt;
}

form.close table tr td.f-lbl {
    text-align: right;
    padding-bottom: 0px;
    font-size: 11pt;
}

form.close table tr td.f-val {
    text-align: left;
    padding-bottom: 0px;
    font-size: 11pt;
}

form.close table tr td.f-ftr {
    text-align: center;
}


/* ============================================================================
   TEXT STYLING
   ============================================================================ */

span.instname {
    font-size: 1.2em;
    font-weight: bold;
}

a.dnlink {
    font-size: 1.2em;
}


/* ============================================================================
   ERROR MESSAGES
   ============================================================================ */

#ErrorMsg {
    text-align: left;
    padding: 15px 0 15px 15px;
    color: var(--ficast-error);
}


/* ============================================================================
   LAYOUT - MAIN SECTIONS
   ============================================================================ */

#main {
    clear: both;
}

#main2 {
    clear: both;
}


/* ============================================================================
   HELP SECTION
   ============================================================================ */

#help {
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: arial, sans-serif;
    font-size: 7.5pt;
}

.help {
    padding: 10px 20px 10px 20px;
    font-family: Arial, sans-serif;
    font-size: 10pt;
}


/* ============================================================================
   FOOTER
   ============================================================================ */

#footer {
    padding-top: 15px;
    font-family: arial, sans-serif;
    font-size: 7.5pt;
}


/* ============================================================================
   UPLOAD SECTION
   ============================================================================ */

#uploadhow {
    text-align: left;
    margin-left: 80px;
}


/* ============================================================================
   HORIZONTAL DIVIDERS
   ============================================================================ */

.black-line3 {
    background-color: var(--ficast-border);
    width: 520px;
    height: 1px;
    padding: 0;
    margin: 3px 0 3px 0;
    font-size: 0;
}

.black-line20 {
    background-color: var(--ficast-border);
    width: 520px;
    height: 1px;
    padding: 0;
    margin: 20px 0 20px 0;
    font-size: 0;
}


/* ============================================================================
   PRIVACY POLICY PAGE
   ============================================================================ */

div#privacy {
    padding-top: 10px;
    margin: 0 15px 0 15px;
    font-size: 11pt;
    font-family: "Times New Roman", serif;
    text-align: left;
}

div#privacy h1 {
    font-size: 14pt;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
}

div#privacy h2 {
    font-style: italic;
    font-size: 11pt;
    font-weight: normal;
    margin-top: 0;
}

div#privacy h3 {
    display: inline;
    font-style: italic;
    font-size: 11pt;
    font-weight: normal;
}

div#privacy h4 {
    font-style: italic;
    font-weight: bold;
    margin: 0;
    padding: 0;
}


/* ============================================================================
   TAB NAVIGATION
   ============================================================================ */

table.tab {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    font-size: 8.0pt;
}

table.tab tr {
    height: 10px;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

table.tab tr td {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

table.tab tr td.tab-l {
    background-image: url(../../shared/images/ficast/tab_bar_left.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-color: var(--ficast-green);
}

table.tab tr td.tab-m {
    background-color: var(--ficast-green);
}

table.tab tr td.tab-r {
    background-image: url(../../shared/images/ficast/tab_bar_right.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-color: var(--ficast-green);
}

/* Tab Links */
table.tab tr#tabrow a:link {
    text-decoration: none;
    color: var(--ficast-text);
    font-size: 9pt;
}

table.tab tr#tabrow a:visited {
    text-decoration: none;
    color: var(--ficast-text);
}

table.tab tr#tabrow a:hover {
    text-decoration: underline;
    color: var(--ficast-text);
}

/* Tab Cells */
table.tab tr#tabrow td {
    font-family: Tahoma, sans-serif;
    font-size: 8pt;
    text-align: center;
}

/* Tab States - Not Selected */
table.tab tr#tabrow td.not a:link,
table.tab tr#tabrow td.not a:visited {
    text-decoration: none;
    color: var(--ficast-text);
}

table.tab tr#tabrow td.not a:hover {
    text-decoration: underline;
    color: var(--ficast-text);
}

table.tab tr#tabrow td.not {
    text-align: center;
    width: var(--ficast-tab-width);
    background-image: url("../../shared/images/ficast/tab_unsel_T2.png");
    background-repeat: no-repeat;
}

/* Tab States - Selected */
table.tab tr#tabrow td.sel a:link,
table.tab tr#tabrow td.sel a:visited {
    font-weight: bold;
    text-decoration: none;
    color: white;
}

table.tab tr#tabrow td.sel a:hover {
    font-weight: bold;
    text-decoration: underline;
    color: white;
}

table.tab tr#tabrow td.sel {
    text-align: center;
    width: var(--ficast-tab-width);
    background-image: url("../../shared/images/ficast/tab_sel_T2.png");
    background-repeat: no-repeat;
}


/* ============================================================================
   TABLEAU VISUALIZATION REPORTS
   ============================================================================ */

div#TableauReports {
    padding-left: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 300px;
    width: 600px;
    font-size: 14pt;
    overflow: auto;
    border: 1px solid var(--ficast-border);
}

div#TableauReports table#tableauTable {
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    font-family: Arial, sans-serif;
}

div#TableauReports table#tableauTable tr {
    border-bottom: 0px solid var(--ficast-border);
}

div#TableauReports table#tableauTable tr td {
    border-bottom: 1px solid var(--ficast-border);
}

div#TableauReports table#tableauTable tr td#tableauLabel {
    font-weight: bold;
    text-align: left;
}

div#TableauReports table#tableauTable tr td#tableauData {
    font-weight: bold;
    text-align: left;
}