/* GLOBAL RESET */
* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: #f0f0f0;
}

.hidden {
    display: none !important;
}

/* SETUP SCREEN */
.setup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #e9e9e9;
}

.setup-box {
    background: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 8px;
}

.start-btn {
    width: 100%;
    padding: 10px;
    background: #337ab7;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

/* MAIN INTERFACE LAYOUT */
.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 1. TOP HEADER (Black) */
.top-header {
    background: #2d2d2d;
    color: white;
    padding: 0 15px;
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    /* Increased slightly to fit controls */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Timer in Header */
.timer-section {
    font-size: 14px;
    color: #fff;
}

/* Calculator Button in Header */
.calc-btn.header-btn {
    padding: 4px 10px;
    background-color: #444;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.calc-btn.header-btn:hover {
    background-color: #666;
}

/* ... REMOVED INFO BAR ... */

/* ... REMOVED CALCULATOR BAR ... */

/* 3. SECTION TABS */
.section-bar {
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 0 10px;
    height: 35px;
    display: flex;
    align-items: flex-end;
}

.tab {
    padding: 8px 15px;
    background: #eee;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    color: #555;
}

.tab.active {
    background: #337ab7;
    color: white;
    border-color: #337ab7;
}

/* 4. WORKSPACE (SPLIT SCREEN) */
.workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* LEFT PANE */
.left-pane {
    flex: 78;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    background: #fff;
}

.pdf-wrapper {
    flex: 1;
    background: #555;
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.question-control-area {
    height: 140px;
    border-top: 5px solid #e0e0e0;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.question-header-strip {
    border-bottom: 1px solid #ccc;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.marks-info {
    color: red;
    font-size: 12px;
}

.options-container {
    padding: 10px 15px;
    background: #f9f9f9;
    display: flex;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.opt-label {
    font-weight: bold;
    margin-right: 10px;
}

.opt-radio {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
}

.action-buttons {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn {
    padding: 8px 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    border-radius: 2px;
}

.btn-review {
    background: #fff;
    border: 1px solid #ccc;
}

.btn-review:hover {
    background: #f0f0f0;
}

.btn-clear {
    background: #fff;
    border: 1px solid #ccc;
}

.btn-save {
    background: #337ab7;
    color: white;
    border: 1px solid #2e6da4;
}

.btn-save:hover {
    background: #286090;
}

/* RIGHT PANE (SIDEBAR) */
.right-pane {
    flex: 22;
    display: flex;
    flex-direction: column;
    background: #eef3f7;
    max-width: 320px;
    border-left: 1px solid #ddd;
}

.profile-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    height: 50px;
}

.avatar {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.user-name {
    font-weight: bold;
    font-size: 13px;
}

.legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 10px;
    background: #fff;
    font-size: 11px;
    border-bottom: 1px solid #ccc;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.full-width {
    grid-column: span 2;
}

.badge {
    height: 20px;
    width: 25px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    color: white;
    font-weight: bold;
    border-radius: 2px;
    background-image: url('data:image/svg+xml;utf8,<svg ...>');
    /* Optional shape simulation */
}

/* Legend Colors */
.badge.answered {
    background: #5cb85c;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
}

/* Green Pointy */
.badge.not-answered {
    background: #d9534f;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
}

/* Red Pointy */
.badge.not-visited {
    background: #e0e0e0;
    color: black;
    border: 1px solid #ccc;
}

/* Square */
.badge.marked {
    background: #a05ccb;
    border-radius: 50%;
}

/* Circle */
.badge.marked-ans {
    background: #a05ccb;
    position: relative;
    border-radius: 50%;
}

.badge.marked-ans::after {
    content: '✔';
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 8px;
    color: #5cb85c;
}

.sidebar-section-header {
    background: #337ab7;
    color: white;
    padding: 8px;
    font-weight: bold;
    font-size: 13px;
}

.palette-wrapper {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #fff;
}

.palette-label {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.q-btn {
    height: 35px;
    width: 100%;
    border: 1px solid #ccc;
    background: #e0e0e0;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.q-btn:hover {
    border: 1px solid #337ab7;
}

/* Active Question Outline */
.q-btn.active-q {
    border: 2px solid black !important;
}

/* Color Classes for Palette Buttons */
.q-btn.answered {
    background: #5cb85c;
    color: white;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    border: none;
}

.q-btn.not-answered {
    background: #d9534f;
    color: white;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    border: none;
}

.q-btn.marked {
    background: #a05ccb;
    color: white;
    border-radius: 50%;
}

.q-btn.marked-ans {
    background: #a05ccb;
    color: white;
    border-radius: 50%;
    position: relative;
}

.q-btn.marked-ans::after {
    content: '✔';
    position: absolute;
    bottom: 2px;
    right: 8px;
    color: #5cb85c;
    font-size: 10px;
    font-weight: bold;
}

/* SUBMIT AREA */
.submit-area {
    background: #d4ebf9;
    padding: 10px;
    border-top: 1px solid #ccc;
    text-align: center;
}

.btn-submit {
    background: #337ab7;
    color: white;
    padding: 8px 30px;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.btn-submit:hover {
    background: #286090;
}

/* Calculator Button Area - Consolidated into Header */


.calc-btn {
    padding: 6px 15px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.calc-btn:hover {
    background-color: #555;
}

/* Draggable Calculator */
/* Draggable Calculator (TCS Style) */
.calculator {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    background-color: #dadada;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px;
}

.calc-header {
    background-color: #e0e0e0;
    /* Grey header typical of windows */
    color: #000;
    padding: 5px 10px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #999;
}

.close-calc {
    cursor: pointer;
    background: transparent;
    color: #444;
    font-weight: bold;
    font-size: 16px;
    padding: 0 5px;
}

.close-calc:hover {
    color: red;
}

.calc-body {
    padding: 10px;
}

/* Inputs */
.keyPad_TextBox1 {
    width: 100%;
    height: 20px;
    border: 1px solid #a9a9a9;
    background-color: #fff;
    text-align: right;
    padding: 2px 5px;
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.keyPad_TextBox {
    width: 100%;
    height: 35px;
    border: 1px solid #a9a9a9;
    background-color: #fff;
    text-align: right;
    padding: 5px 5px;
    font-size: 20px;
    color: #000;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-weight: bold;
}

/* Keys Layout */
.calc-keys-tcs {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.key-row-tcs {
    display: flex;
    gap: 3px;
    justify-content: center;
    /* Center align rows */
}

/* Button Base Style */
.calc-keys-tcs button {
    height: 28px;
    min-width: 38px;
    /* Standard width */
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #888;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    outline: none;
    font-family: Arial, sans-serif;
    transition: all 0.1s;
}

.calc-keys-tcs button:active {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Button Categories */
.keyPad_btnNumeric {
    background: #f1f1f1;
    color: #000;
}

.keyPad_btnUnaryOp,
.keyPad_btnBinaryOp,
.keyPad_btnMemoryOp {
    background: #e6e6e6;
    /* Slightly darker */
    color: #0000ff;
    /* Often blueish text for ops */
}

.keyPad_btnCommand {
    background: #e74c3c;
    /* Red */
    color: #fff !important;
    border-color: #c0392b;
}

#keyPad_btnEnter {
    background: #2ecc71;
    /* Green */
    border-color: #27ae60;
}

/* --- Review Screen Styles --- */
.review-container {
    padding: 20px;
    background: #eef3f7;
    height: calc(100vh - 50px);
    overflow-y: auto;
    box-sizing: border-box;
    /* Ensure padding is included in height */
}

.review-summary {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.summary-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.stat-box {
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.stat-val {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.review-details {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-responsive {
    overflow-x: auto;
}

.review-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

.review-table th,
.review-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.review-table th {
    background-color: #337ab7;
    color: white;
    position: sticky;
    top: 0;
    /* Does not work if container has overflow, unless th is relative to the scroll parent.
       Actually, sticky header is great for long tables. 
       Let's stick it to the valid container if possible. 
    */
}

.review-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Status Colors for Review */
.status-correct {
    color: green;
    font-weight: bold;
}

.status-wrong {
    color: red;
    font-weight: bold;
}

.status-unattempted {
    color: #999;
    font-style: italic;
}

.status-manual {
    color: #f39c12;
    /* Orange for manual check */
    font-weight: bold;
}