/* Global Reset & Base */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, table, th, td {
    margin:0; 
    padding:0; 
    border:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent;
}
body {
    line-height:1; 
}
ol, ul {
    list-style:none;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}

/* Global Styles */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background:#f5f5f7;
    color:#1d1d1f;
    margin:0;
    padding:0;
}

/* Header */
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border-bottom:1px solid #ddd;
    padding:10px 20px;
    box-sizing:border-box;
    height:60px; /* Taller header for a more prominent top bar */
}
.header-title {
    font-size:20px;
    font-weight:500;
    color:#1d1d1f;
}
.nav-buttons {
    display:flex;
    align-items:center;
    gap:20px; /* more space between nav buttons */
}
.nav-button {
    background:#007aff;
    color:#fff;
    text-decoration:none;
    padding:12px 20px; /* bigger padding for a more "Apple-like" feel */
    border-radius:8px;
    font-size:16px; /* larger font for more prominence */
    border:none;
    transition:background-color 0.3s;
    text-align:center;
    font-weight:500;
    display:inline-block;
}
.nav-button:hover {
    background:#005bb5;
}
.logout-button {
    background:#ff3b30;
}
.logout-button:hover {
    background:#c1271a;
}

/* Containers & Layout */
.container {
    max-width:1200px;
    margin:20px auto; /* Keep the layout consistent as before */
    padding:20px;
    box-sizing:border-box;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    text-align:left;
}

.create-form {
    margin-bottom:20px; 
}

.permissions-cell form {
    display:block;
    margin:5px 0;
}

table {
    width:100%;
    margin:0 auto; 
}

.main-container {
    max-width:1200px;
    margin:20px auto; /* Use 20px auto as before to avoid big top gap */
    padding:20px;
    box-sizing:border-box;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    text-align:left;
    display:flex;
    flex-direction:row;
    gap:20px;
    justify-content:center;
    align-items:flex-start;
}
.left-panel, .right-panel {
    background:#fff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.left-panel {
    flex:0 0 300px;
    display:flex;
    flex-direction:column;
    text-align:left;
}
.right-panel {
    flex:1;
    position:relative;
    min-height:600px;
    text-align:left;
}

/* Typography */
h1 {
    font-size:36px;
    font-weight:400;
    color:#1d1d1f;
    margin-bottom:40px;
    text-align:center;
    position:relative;
}
h2 {
    font-size:20px;
    margin-bottom:15px;
    font-weight:400;
    color:#1d1d1f;
}

/* Tools Container & Buttons */
.tools-container {
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:40px;
    align-items:center;
}
.tool-button {
    display:inline-block;
    background:#ffffff;
    color:#007aff;
    text-decoration:none;
    padding:15px 25px;
    border-radius:12px;
    font-size:1.2em;
    font-weight:500;
    transition:background-color 0.3s, box-shadow 0.3s;
    width:100%;
    max-width:300px;
    box-shadow:0 4px 8px rgba(0,0,0,0.05);
    border:1px solid #ddd;
    text-align:center;
}
.tool-button:hover {
    background-color:#f0f0f5;
    box-shadow:0 8px 16px rgba(0,0,0,0.1);
}

/* Forms & Inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], select {
    width:100%;
    box-sizing:border-box;
    padding:10px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:15px;
    transition:border 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, select:focus {
    border-color:#2c7be5;
    outline:none;
    box-shadow:0 0 5px rgba(44,123,229,0.5);
}

/* Buttons */
.button {
    background:#2c7be5;
    color:#fff;
    padding:12px 25px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    margin-top:5px;
    text-decoration:none;
    display:inline-block;
    transition:background 0.3s, box-shadow 0.3s;
    font-weight:500;
}
.button:hover {
    background:#1a5cb8;
    box-shadow:0 0 8px rgba(26,92,184,0.5);
}

/* Alerts */
.error, .success, .warning {
    margin-bottom:20px;
    padding:10px;
    border-radius:4px;
    font-size:14px;
}
.error {
    background:#fdd;
    border:1px solid #f99;
}
.success {
    background:#e9f7ef;
    border:1px solid #c7e8d3;
    color:#1d1d1f;
}
.warning {
    background:#a00000;
    border:1px solid #800000;
    color:#fff;
    font-weight:bold;
}

/* Tables */
table {
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    font-size:14px;
    background:#fafafa;
    border:1px solid #ddd;
}
th, td {
    border:1px solid #ddd;
    padding:10px;
    text-align:left;
    vertical-align:middle;
}
th {
    background:#f0f0f5;
    font-weight:500;
    color:#1d1d1f;
}

/* Additional styles if needed */
mark {
    background:yellow;
    color:#333;
    padding:0 2px;
    border-radius:2px;
}

/* New Styles for Text Comparison Tool Page (NO padding-top on #main-content) */
#main-content {
    max-width:1200px;
    margin:20px auto; /* A small margin to give slight spacing from header */
    text-align:center;
}
#description {
    font-size:18px;
    color:#555555;
    margin:20px auto;
    max-width:600px;
    line-height:1.5;
}
#difference-percentage {
    font-size:20px;
    margin-top:40px;
    margin-bottom:20px;
    color:#1c1c1e;
}
#legend {
    margin:20px auto;
    text-align:center;
    padding:15px;
    border-radius:12px;
    background-color:#ffffff;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    width:fit-content;
    margin-bottom:20px;
}
.legend-item {
    display:inline-flex;
    align-items:center;
    margin:5px 15px;
    font-size:16px;
    color:#1c1c1e;
}
.legend-color {
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:8px;
    border-radius:4px;
}
#controls {
    text-align:center;
    margin-top:20px;
    margin-bottom:10px;
}
#warning-message {
    color:red;
    font-size:16px;
    margin-bottom:10px;
    text-align:center;
    display:none;
}
#title-container {
    text-align:center;
    margin-bottom:20px;
}
#title-input {
    width:50%;
    padding:10px;
    font-size:16px;
    border-radius:8px;
    border:1px solid #ccc;
    box-sizing:border-box;
    font-weight:bold;
}
#container {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin:20px auto;
    max-width:1200px;
}
textarea {
    width:45%;
    height:200px;
    border-radius:8px;
    padding:10px;
    font-size:16px;
    resize:vertical;
    box-sizing:border-box;
    border:1px solid #ccc;
    background-color:#ffffff;
    color:#1c1c1e;
    white-space:pre-wrap;
    overflow-wrap:break-word;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-weight:normal;
}
@media screen and (max-width:768px) {
    textarea {
        width:90%;
    }
}
#comparison-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    max-width:1200px;
    margin:20px auto;
}
.comparison-column {
    width:45%;
    background-color:#ffffff;
    padding:15px;
    border-radius:8px;
    border:1px solid #e0e0e0;
    box-sizing:border-box;
    white-space:pre-wrap;
    word-wrap:break-word;
    margin-bottom:20px;
    color:#1c1c1e;
    font-family:'Helvetica Neue', Arial, sans-serif;
    font-weight:normal;
    position:relative;
}
.comparison-column h2 {
    text-align:center;
    background-color:#f0f0f0;
    padding:10px;
    margin:-15px -15px 15px -15px;
    border-radius:8px 8px 0 0;
    font-size:24px;
    color:#1c1c1e;
}
@media screen and (max-width:768px) {
    .comparison-column {
        width:90%;
    }
}
.line-diff {
    background-color:#fffbe0;
    border-radius:4px;
    padding:2px;
}
.word-diff-insert {
    background-color:#a6f3a6;
    border-radius:4px;
    padding:1px;
}
.word-diff-delete {
    background-color:#f3a6a6;
    border-radius:4px;
    padding:1px;
}
#word-frequency-container {
    margin-top:20px;
    text-align:center;
}
#word-frequency-table {
    width:90%;
    margin:10px auto 20px auto;
    border-collapse:collapse;
    background-color:#ffffff;
    color:#1c1c1e;
    font-size:14px;
}
#word-frequency-table th, #word-frequency-table td {
    padding:8px;
    text-align:left;
    border-bottom:1px solid #e0e0e0;
    cursor:pointer;
}
#word-frequency-table th {
    background-color:#f0f0f0;
    font-weight:500;
    position:relative;
}
#word-frequency-table th.sort-asc::after {
    content:' ▲';
}
#word-frequency-table th.sort-desc::after {
    content:' ▼';
}