:root {
    --primary: #2c3e50;
    --secondary: #ff6b6b;
    --accent: #3d5a80;
    --light-bg: #f8f9fa;
    --teal: #4ecdc4;
    --border-color: #e0e0e0;
    --text-color: #000000;
    --text-light: #666;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    background-color: var(--light-bg);
}

/* Apply Times New Roman to all text elements */
body, .calculator, .calculator *, 
.display, .expression, .result, 
.btn, .control-btn, .mode-btn, .tab-btn,
input, select, button, .history-item,
.section-title, .conversion-result, .memory-display,
.status-bar, .toast {
    font-family: 'Times New Roman', Times, serif;
    color: #000;
}

/* Container and Layout */
.page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

/* Sidebars */
.sidebar {
    display: none;
}

/* Calculator Container */
.calculator-container {
    width: 100%;
}

/* Calculator Styles */
.calculator {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Moved H1 inside calculator */
.calculator-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.calculator-header h1 {
    font-size: 1.25rem;
    color: #000;
    margin-bottom: 5px;
}

.calculator-title {
    color: #000;
    font-size: 1rem;
}

.display {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    min-height: 70px;
    text-align: right;
}

.expression {
    min-height: 20px;
    font-size: 1rem;
    color: #000;
    overflow-x: auto;
    white-space: nowrap;
}

.result {
    font-size: 1.25rem;
    font-weight: bold;
    min-height: 30px;
    color: #000;
}

.mode-selector {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.mode-btn {
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: #000;
}

.mode-btn.active {
    background-color: var(--accent);
    color: white;
}

.memory-display {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #000;
}

.tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: #000;
}

.tab-btn.active {
    background-color: var(--primary);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.btn {
    padding: 12px 5px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    color: #000;
}

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

.btn.memory {
    background-color: #e0f7fa;
}

.btn.special {
    background-color: #ffebee;
}

.btn.function {
    background-color: #e3f2fd;
}

.btn.operation {
    background-color: #f3e5f5;
}

/* Conversion Interface */
.conversion-interface {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.input-field {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    color: #000;
}

.select-field {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    color: #000;
}

.control-btn {
    padding: 10px 15px;
    background-color: #ff6b6b;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.control-btn:hover {
    background-color: #2c4d8f;
}

.control-btn.secondary {
    background-color: #4ecdc4;
}

/* Teal buttons */
#export-pdf, 
#export-image, 
#convert-btn,
#print-report {
    background-color: var(--teal) !important;
}
#export-pdf:hover, 
#export-image:hover, 
#convert-btn:hover,
#print-report:hover {
    background-color: #3db9b1 !important;
}

/* Reset calculator button color */
#reset-calc {
    background-color: var(--secondary) !important;
}
#reset-calc:hover {
    background-color: #e55a5a !important;
}

.conversion-result {
    padding: 10px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    min-height: 40px;
    color: #000;
}

/* History */
.history-list {
    margin-bottom: 15px;
}

.history-item {
    padding: 10px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    color: #000;
}

.history-item:hover {
    background-color: #f5f5f5;
}

/* Status Bar */
.status-bar {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #000;
    margin-top: 15px;
}

/* Visualization */
.section {
    display: none;
    margin-top: 30px;
}

.section.visible {
    display: block;
}

.section-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #000;
    font-weight: bold;
    display: block;
}

.visualization {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.chart-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chart-title {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #000;
}

.chart-container {
    height: 250px;
    margin-top: 10px;
}

/* Data & Results */
.table-container {
    overflow-x: auto;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: #000;
}

th {
    background-color: var(--light-bg);
    font-weight: normal;
    font-size: 1rem;
}

/* Controls */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.controls .control-btn {
    flex: 1;
    min-width: 120px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 1000;
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

/* Two Argument Input */
#two-arg-input {
    display: none;
    grid-template-columns: 1fr auto 1fr auto auto;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

#operator-display {
    padding: 8px 15px;
    background-color: var(--light-bg);
    border-radius: 4px;
    color: #000;
}

/* Ad Containers */
.ad-container {
    display: none;
    margin: 20px 0;
    text-align: center;
    background-color: var(--light-bg);
    border-radius: 8px;
    padding: 10px;
    min-height: 100px;
    justify-content: center;
    align-items: center;
}

#ad-tablet, #ad-mobile {
    display: none;
}

#ad-tablet .ad-placeholder,
#ad-mobile .ad-placeholder {
    width: 100%;
    padding: 20px;
    background-color: #e9ecef;
    border-radius: 4px;
    color: #000;
}

/* Related Tools - Updated CSS */
#related-tools {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
    font-size: 1rem;
}

.tools-list {
    list-style: none;
}

.tools-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.tools-list li:last-child {
    border-bottom: none;
}

.tools-list a {
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tools-list a:hover {
    color: var(--teal);
}

/* Mobile and Tablet Related Tools */
#mobile-related-tools {
    display: none;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

/* Box for ads */
.ad-box {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    text-align: center;
    color: #000;
}

/* H1 Responsive Sizes */
h1, .calculator-header h1 {
    color: #000;
}

/* H2 Elements with Special Color */
h2 {
    color: #ff6b6b;
}

/* H3 Elements */
h3 {
    color: #000;
}

/* H4 Elements */
h4 {
    color: #000;
}

/* Tablet Layout (768px-1024px) */
@media (min-width: 768px) {
    .calculator-header h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.25rem;
        color: #ff6b6b;
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    .keypad {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .visualization {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .chart-card {
        flex: 1;
        min-width: 300px;
    }
    
    #ad-tablet {
        display: flex;
        max-width: 300px;
        min-height: 250px;
        margin: 10px auto 0;
    }
    
    #related-tools {
        display: block;
        max-width: 300px;
        min-height: 200px;
        margin: 20px auto 0;
    }
    
    /* Show mobile-related-tools on tablet */
    #mobile-related-tools {
        display: block;
        max-width: 300px;
        min-height: 200px;
        margin: 20px auto 0;
    }
}

/* Desktop Layout (1025px+) */
@media (min-width: 1025px) {
    .container {
        flex-direction: row;
    }
    
    .sidebar {
        display: block;
        width: 300px;
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
    
    .left-sidebar {
        order: 1;
    }
    
    .calculator-container {
        order: 2;
        flex: 1;
        max-width: calc(100% - 600px);
    }
    
    .right-sidebar {
        order: 3;
    }
    
    .calculator-header h1 {
        font-size: 1.5rem;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.375rem;
        color: #ff6b6b;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.125rem;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    #ad-left, #ad-right {
        display: flex;
        min-height: 250px;
        margin-bottom: 20px;
        margin-top:0px;
    }
    
    #ad-right {
        min-height: 600px;
    }
    
    #related-tools {
        display: block;
        min-height: 200px;
    }
    
    .visualization {
        flex-wrap: nowrap;
    }
    
    /* Hide tablet ad on desktop */
    #ad-tablet {
        display: none !important;
    }
    
    /* Hide mobile-related-tools on desktop */
    #mobile-related-tools {
        display: none !important;
    }
}

/* Mobile Layout (up to 767px) */
@media (max-width: 767px) {
    h1, .calculator-header h1 {
        font-size: 1.25rem;
    }
    
    h2 {
        font-size: 1.125rem;
        color: #ff6b6b;
    }
    
    h3 {
        font-size: 1rem;
    }
    
    h4 {
        font-size: 0.9375rem;
    }
    
    .tab-btn {
        font-size: 0.875rem;
    }
    
    .keypad {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Arrange numbers in standard calculator layout for BASIC tab */
    #basic-tab .keypad {
        display: grid;
        grid-template-areas:
            "mc mr mplus mminus del ac"
            "sin cos tan pi e power"
            "log ln sqrt seven eight nine"
            "open close fact four five six"
            "div mult minus one two three"
            "plus zero dot equal equal equal";
    }
    
    /* Assign grid areas to number buttons for BASIC tab */
    .btn[data-value="7"] { grid-area: seven; }
    .btn[data-value="8"] { grid-area: eight; }
    .btn[data-value="9"] { grid-area: nine; }
    .btn[data-value="4"] { grid-area: four; }
    .btn[data-value="5"] { grid-area: five; }
    .btn[data-value="6"] { grid-area: six; }
    .btn[data-value="1"] { grid-area: one; }
    .btn[data-value="2"] { grid-area: two; }
    .btn[data-value="3"] { grid-area: three; }
    .btn[data-value="0"] { grid-area: zero; }
    
    /* Assign grid areas to other buttons for BASIC tab */
    .btn[data-value="mc"] { grid-area: mc; }
    .btn[data-value="mr"] { grid-area: mr; }
    .btn[data-value="m+"] { grid-area: mplus; }
    .btn[data-value="m-"] { grid-area: mminus; }
    .btn[data-value="del"] { grid-area: del; }
    .btn[data-value="clear"] { grid-area: ac; }
    
    .btn[data-value="sin"] { grid-area: sin; }
    .btn[data-value="cos"] { grid-area: cos; }
    .btn[data-value="tan"] { grid-area: tan; }
    .btn[data-value="π"] { grid-area: pi; }
    .btn[data-value="e"] { grid-area: e; }
    .btn[data-value="^"] { grid-area: power; }
    
    .btn[data-value="log"] { grid-area: log; }
    .btn[data-value="ln"] { grid-area: ln; }
    .btn[data-value="√"] { grid-area: sqrt; }
    
    .btn[data-value="("] { grid-area: open; }
    .btn[data-value=")"] { grid-area: close; }
    .btn[data-value="!"] { grid-area: fact; }
    
    .btn[data-value="/"] { grid-area: div; }
    .btn[data-value="*"] { grid-area: mult; }
    .btn[data-value="-"] { grid-area: minus; }
    
    .btn[data-value="+"] { grid-area: plus; }
    .btn[data-value="."] { grid-area: dot; }
    .btn[data-value="="] { grid-area: equal; }
    
    /* Arrange numbers in standard calculator layout for ADVANCED tab */
    #advanced-tab .keypad {
        display: grid;
        grid-template-areas:
            "asin acos atan sinh cosh tanh"
            "tenpow epow mod oneoverx abs exp"
            "ncr npr rand percent yrootx ac"
            "seven eight nine div mult del"
            "four five six minus plus open"
            "one two three zero dot equal";
    }
    
    /* Assign grid areas to number buttons for ADVANCED tab */
    #advanced-tab .btn[data-value="7"] { grid-area: seven; }
    #advanced-tab .btn[data-value="8"] { grid-area: eight; }
    #advanced-tab .btn[data-value="9"] { grid-area: nine; }
    #advanced-tab .btn[data-value="4"] { grid-area: four; }
    #advanced-tab .btn[data-value="5"] { grid-area: five; }
    #advanced-tab .btn[data-value="6"] { grid-area: six; }
    #advanced-tab .btn[data-value="1"] { grid-area: one; }
    #advanced-tab .btn[data-value="2"] { grid-area: two; }
    #advanced-tab .btn[data-value="3"] { grid-area: three; }
    #advanced-tab .btn[data-value="0"] { grid-area: zero; }
    
    /* Assign grid areas to other buttons for ADVANCED tab */
    #advanced-tab .btn[data-value="asin"] { grid-area: asin; }
    #advanced-tab .btn[data-value="acos"] { grid-area: acos; }
    #advanced-tab .btn[data-value="atan"] { grid-area: atan; }
    #advanced-tab .btn[data-value="sinh"] { grid-area: sinh; }
    #advanced-tab .btn[data-value="cosh"] { grid-area: cosh; }
    #advanced-tab .btn[data-value="tanh"] { grid-area: tanh; }
    
    #advanced-tab .btn[data-value="10^"] { grid-area: tenpow; }
    #advanced-tab .btn[data-value="e^"] { grid-area: epow; }
    #advanced-tab .btn[data-value="mod"] { grid-area: mod; }
    #advanced-tab .btn[data-value="1/x"] { grid-area: oneoverx; }
    #advanced-tab .btn[data-value="abs"] { grid-area: abs; }
    #advanced-tab .btn[data-value="exp"] { grid-area: exp; }
    
    #advanced-tab .btn[data-value="nCr"] { grid-area: ncr; }
    #advanced-tab .btn[data-value="nPr"] { grid-area: npr; }
    #advanced-tab .btn[data-value="rand"] { grid-area: rand; }
    #advanced-tab .btn[data-value="%"] { grid-area: percent; }
    #advanced-tab .btn[data-value="y√x"] { grid-area: yrootx; }
    #advanced-tab .btn[data-value="clear"] { grid-area: ac; }
    
    #advanced-tab .btn[data-value="/"] { grid-area: div; }
    #advanced-tab .btn[data-value="*"] { grid-area: mult; }
    #advanced-tab .btn[data-value="del"] { grid-area: del; }
    
    #advanced-tab .btn[data-value="-"] { grid-area: minus; }
    #advanced-tab .btn[data-value="+"] { grid-area: plus; }
    #advanced-tab .btn[data-value="("] { grid-area: open; }
    
    #advanced-tab .btn[data-value="."] { grid-area: dot; }
    #advanced-tab .btn[data-value="="] { grid-area: equal; }
    
    .btn.function, .btn.memory {
        font-size: 1rem;
        padding: 8px 2px;
    }
    
    #ad-mobile {
        display: flex;
        min-height: 100px;
        max-width: 320px;
        margin: 20px auto 0;
    }
    
    /* FIXED: Two-argument input layout for mobile */
    #two-arg-input {
        display: none;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: 
            "arg1"
            "operator"
            "arg2"
            "calculate"
            "cancel";
        gap: 10px;
        margin-bottom: 15px;
        align-items: center;
    }
    
    #arg1 { 
        grid-area: arg1; 
        width: 100%;
    }
    
    #operator-display { 
        grid-area: operator; 
        text-align: center;
        padding: 8px;
        background-color: var(--light-bg);
        border-radius: 4px;
    }
    
    #arg2 { 
        grid-area: arg2; 
        width: 100%;
    }
    
    #calculate-two-arg { 
        grid-area: calculate; 
        width: 100%;
    }
    
    #cancel-two-arg { 
        grid-area: cancel; 
        width: 100%;
    }
    
    /* Show mobile-related-tools on mobile */
    #mobile-related-tools {
        display: block;
        margin: 20px auto 0;
        max-width: 320px;
    }
    
    /* Conversion section adjustments for mobile */
    .conversion-interface .input-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .conversion-interface .input-field,
    .conversion-interface .select-field {
        width: 100%;
        margin-bottom: 5px;
    }
    
    /* Reorder elements using flex-direction */
    .conversion-interface {
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure the conversion button stays in the right place */
    #convert-btn {
        order: 3;
        margin: 10px 0;
    }
    
    /* Conversion result styling */
    .conversion-result {
        order: 4;
        margin-bottom: 10px;
    }
    
    /* The "to" dropdown should be last */
    .conversion-interface .input-group:last-child {
        order: 5;
    }
}

/* Accessibility: Ensure proper contrast */
a, button, .btn, .control-btn, .mode-btn, .tab-btn {
    color: #000;
}

/* Focus states for accessibility */
button:focus, .btn:focus, .control-btn:focus, 
.input-field:focus, .select-field:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Add breadcrumb styles */
.breadcrumb {
    padding: 0px 10px;
    color: #000;
    margin-bottom: 5px;
    font-size: 1rem;
}

.breadcrumb a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: var(--secondary);
    text-decoration: underline;
}
    .mobile-table {
        overflow-x: auto;
        margin: 20px 0;
        border: 1px solid #eee;
        border-radius: 8px;
    }
    .mobile-table table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
    }
    .mobile-table th, .mobile-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .mobile-table th {
        background-color: #4ecdc4;
        font-weight: bold;
    }
    .mobile-table tr:nth-child(even) {
        background-color: #fafafa;
    }