/*
 * NavalGaming Main Stylesheet
 * Referenced in: inc/classes/pageconstruction.php (line 9)
 * Version: V12
 */

/* ===================================================================
   TABLE OF CONTENTS
   ===================================================================

   This stylesheet is currently undergoing reorganization to improve
   maintainability and navigation. See CSS_REORGANIZATION_PROJECT.md
   for the complete implementation plan.

   CURRENT STRUCTURE (Section markers added in Phase 1):

   1. RESET & BASE STYLES ..................... Line 90
      - CSS Reset
      - Box sizing
      - Base element styles

   2. TYPOGRAPHY & TEXT ....................... Line 118
      - Font families
      - Text utilities (.center, .bold-text, .smalltext)
      - Text colors and sizes

   3. LAYOUT & CONTAINERS ..................... Line 162
      - Body and main wrappers
      - Grid systems
      - Flexbox layouts
      - Spacing utilities

   4. BUTTONS & ACTIONS ....................... Line 188 (CONSOLIDATED ✅)
      - 4.1 Base Button Styles
      - 4.2 Standard Card Button System (PRIMARY)
      - 4.3 Server Toggle Buttons
      - 4.4 Page-Specific Buttons (create-operation, admin-link, declare-winner, server-btn, admin-btn)
      - 4.5 Specialized Buttons (ship-select, roster-control, watchlist)

   5. FORMS & INPUTS .......................... Line 642 (CONSOLIDATED ✅)
      - 5.1 Base Form Element Styles (input, textarea, select, form)
      - 5.2 Form Container Styles (pageform, smallform, roster, bidform)
      - 5.3 Search Forms (search-form, searchform)
      - 5.4 Operations Forms (operations-form-*)
      - 5.5 Ship Selection Forms (ship-form-*, inline-ship-selection-form)
      - 5.6 Utility Classes for Forms

   6. CARD COMPONENT SYSTEM ................... Line 1121 (CONSOLIDATED ✅)
      - Base Card Styles (.standard-card)
      - Themed Card Variants (parchment, blue, red)
      - Card-specific utilities and modifiers

   7. NAVIGATION & MENUS ...................... Line 2073 (NEW ✅)
      7.1 Main Navigation (#navbar, .navlinks) .. Line 2077
      7.2 Footer Navigation (#footer, .footer_*) . Line 2118

   8. PAGE-SPECIFIC COMPONENTS ................ Line 2176 (CONSOLIDATED ✅)
      8.1 Operations System ................... Line 2183
      8.2 Trading System ...................... Line 2475
      8.3 NAAPI Admin Interface ............... Line 2515
      8.4 Wardroom / Member Cards ............. Line 2883
      8.5 Scuttlebutt/Forums .................. Line 2926
      8.6 Profile/Dossier ..................... Line 3660

   9. UTILITY CLASSES ......................... Line 3983 (CONSOLIDATED ✅)
      9.1 Empty State Utilities ............... Line 3986
      9.2 Validation & Error States ........... Line 4021

  10. MEDIA QUERIES ........................... Line 4038 (CONSOLIDATED ✅)
      10.1 Small Devices (max-width: 600px) ... Line 4041
      10.2 Tablets/Larger Phones (768px) ...... Line 4075

  11. ADMIN DASHBOARD ......................... Line 5599
      - .dashboard-* grid for /admin/

  12. THE DAILY GAZETTE ....................... Line 5614
      - Period broadsheet styling, .gazette-page / .gz-*

  13. WORLD CHART ............................. Line 6252
      - Leaflet chart at /map/, .lm-*

   ===================================================================
   REORGANIZATION STATUS:
   - Phase 0: Preparation ✅ Complete
   - Phase 1: Section Markers ✅ Complete
   - Phase 2: Consolidate Buttons ✅ Complete (All button styles now in Section 4)
   - Phase 3: Consolidate Forms ✅ Complete (All form styles now in Section 5)
   - Phase 4: Consolidate Cards ✅ Complete (All card styles now in Section 6)
   - Phase 5: Consolidate Page-Specific ✅ Complete (All 6 subsections now in Section 8)
   - Phase 6: Consolidate Media Queries ✅ Complete (All media queries now in Section 10)
   - Phase 7: Extract Utility Classes ✅ Complete (All utility classes now in Section 9)
   Next: Phase 8 (Final Cleanup) → Phase 9 (Deploy)
   ================================================================ */

/* Google Fonts — period serifs + blackletter used by the Daily Gazette
   section at the bottom of this file. Must precede all selectors per
   CSS spec. */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=IM+Fell+DW+Pica:ital@0;1&family=IM+Fell+DW+Pica+SC&family=IM+Fell+Double+Pica:ital@0;1&family=Pinyon+Script&display=swap');

/* ===================================================================
   1. RESET & BASE STYLES
   ================================================================ */

* {box-sizing: border-box;}

/* reset styles test */
/* CSS Reset - Note: 'button' is intentionally excluded to preserve button gradient backgrounds */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, form {
	margin: 0; padding: 0;  border: 0; outline: 0; font-size: 100%;
	vertical-align: baseline; background: transparent;
}
body { line-height: 1; }

ol, ul {margin-left: 20px; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
td {vertical-align: top; padding: 5px;}
/* textarea moved to Section 5: FORMS & INPUTS */

/* ===================================================================
   2. TYPOGRAPHY & TEXT
   ================================================================ */

body {
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: inherit;
    font-weight: 400;
    color: #ffffff;
    /* background-color: #ffffff; */
    background-color: #e1ebf0;
    background-image: url(../images/compass-background.jpg);
    background-size: cover;
}

p {
    margin: 1em 0;
    text-align: left;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #0277bd;
}

a:hover {
    text-decoration: underline;
}

/* Links in body content show a subtle dotted underline; solid on hover */
p a, td a, li a, .standard-card-body a, .notice a {
    text-decoration: underline;
    text-decoration-style: dotted;
}
p a:hover, td a:hover, li a:hover, .standard-card-body a:hover, .notice a:hover {
    text-decoration-style: solid;
}

h2 {
    font-size: 24px;
}

h4 {
    font-weight: bold;
}

ol li {
    padding: 10px;
    margin-left: 35px;
}

/* ===================================================================
   3. LAYOUT & CONTAINERS
   ================================================================ */

/* ===== 3.1 PAGE STRUCTURE ===== */

/* Main Body Wrapper - Site-wide container */
#bodyWrap {
    max-width: 800px;
    margin: 0 auto;
    background-color: #1a365d;
    position: relative;
}

/* Banner - Alert/notification banner at top */
#banner {
    background-color: red;
    color: white;
    text-align: center;
    width: 100%;
    font-weight: bold;
    padding: 5px 0;
}

/* Page Art - Hero images at top of pages with parallax effect */
.pageart {
    height: 100px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 10px auto;
    border: 1px solid black;
    overflow: hidden;
    position: relative;
}

.pageart img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

/* END SECTION 3.1: PAGE STRUCTURE */

/* ===== 3.2 HEADER LAYOUT ===== */

/* Header Container - Logo and user info area */
#bodyTop {
    width: 100%;
    min-height: 80px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Logo Container */
#logo {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 10px 20px;
    color: #f2cf63;
    text-decoration: none;
}

#logo img {
    height: 100px;
    width: auto;
    display: block;
}

#logo .site-title {
    margin-left: auto;
    font-family: 'Pinyon Script', cursive;
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.1;
    text-align: right;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(242, 207, 99, 0.2);
}

@media (max-width: 600px) {
    #logo {
        gap: 14px;
        padding-inline: 12px;
    }

    #logo img {
        height: 72px;
    }
}

/* Account Row - Captain name and session action below the site header */
#account-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 28px;
    padding: 4px 20px;
    color: #e6d9c0;
    font-size: 14px;
}

#account-row .account-username {
    font-weight: 600;
}

#account-row .account-separator {
    color: rgba(230, 217, 192, 0.55);
}

#account-row a {
    color: #e6d9c0;
    font-weight: 600;
    text-decoration: none;
}

#account-row a:hover,
#account-row a:focus {
    color: #fff;
    text-decoration: underline;
}

/* Header Right - User info and login/logout */
#header-right {
    padding: 10px 20px;
    color: #e6d9c0;
    text-align: right;
    font-size: 18px;
}

#header-right a {
    color: #e6d9c0;
    text-decoration: none;
    font-weight: 500;
}

#header-right a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* END SECTION 3.2: HEADER LAYOUT */

/* END SECTION 3: LAYOUT & CONTAINERS */

/* ===================================================================
   4. BUTTONS & ACTIONS
   ================================================================ */

/* ===== 4.1 BASE BUTTON STYLES ===== */

button {
    cursor: pointer;
    background-color: #0288d1;
    color: #fff;
    padding: 12px;
    border-radius: 20px;
    margin: 5px;
}

/* ===== 4.2 STANDARD CARD BUTTON SYSTEM (PRIMARY SITE-WIDE STANDARD) ===== */

/* ==========================================
   STANDARD CARD BUTTON SYSTEM
   Use these classes for all buttons in .standard-card-footer
   ========================================== */

/* Base button styles - shared by all button types */
.card-btn-primary,
.card-btn-success,
.card-btn-danger,
.card-btn-secondary,
.card-btn-small,
.card-btn-discord {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 4px;
    text-align: center;
    width: auto;
    white-space: nowrap; /* Prevent text wrapping */
}

/* PRIMARY - Main action button (Navy) */
.card-btn-primary {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
    box-shadow: 0 2px 4px rgba(44, 90, 160, 0.2);
}

.card-btn-primary:hover {
    background: linear-gradient(135deg, #3d6bb0 0%, #2c5aa0 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 90, 160, 0.3);
}

/* SUCCESS - Positive actions (Green: Join, Confirm, Save) */
.card-btn-success {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.card-btn-success:hover {
    background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* DANGER - Destructive actions (Red: Delete, Remove, Exit) */
.card-btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.card-btn-danger:hover {
    background: linear-gradient(135deg, #e4606d 0%, #dc3545 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* SECONDARY - Alternative actions (Gray: Cancel, Back) */
.card-btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.card-btn-secondary:hover {
    background: linear-gradient(135deg, #7d8791 0%, #6c757d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* SMALL - Compact tertiary actions */
.card-btn-small {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    padding: 6px 12px;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.card-btn-small:hover {
    background: linear-gradient(135deg, #7d8791 0%, #6c757d 100%);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(108, 117, 125, 0.3);
}

/* DISCORD - Discord integration button */
.card-btn-discord {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    box-shadow: 0 2px 4px rgba(88, 101, 242, 0.2);
}

.card-btn-discord:hover {
    background: linear-gradient(135deg, #6b78f4 0%, #5865F2 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.3);
}

/* Button active/pressed state */
.card-btn-primary:active,
.card-btn-success:active,
.card-btn-danger:active,
.card-btn-secondary:active,
.card-btn-small:active,
.card-btn-discord:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Button text color is already set in base card button styles (line ~283) */
/* No override needed now that wildcard selectors exclude buttons */

/* Watchlist Button Color Overrides */
.card-btn-small.watchlist-add {
    background-color: #28a745;
    border-color: #28a745;
    transition: all 0.2s ease;
}

.card-btn-small.watchlist-add:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.card-btn-small.watchlist-delete {
    background-color: #dc3545;
    border-color: #dc3545;
    transition: all 0.2s ease;
}

.card-btn-small.watchlist-delete:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* ===== 4.3 SERVER TOGGLE BUTTONS ===== */

.server-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
}

.server-toggle-group {
    display: flex;
    gap: 15px;
}

.server-toggle-btn {
    display: block;
    width: 150px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #999;
    /* Default state: unselected - grayed out */
    filter: grayscale(70%);
    opacity: 0.6;
}

.server-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    text-decoration: none;
    filter: grayscale(40%);
    opacity: 0.8;
}

.server-toggle-btn.active {
    /* Active state: full color, sharp, prominent border */
    filter: grayscale(0%);
    opacity: 1;
    border-color: #1e3a5f;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.4);
    transform: scale(1.02);
}

.server-toggle-btn.active:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.5);
    filter: grayscale(0%);
    opacity: 1;
}

.main-btn {
    background-image: url('/images/main-server.png');
}

.peace-btn {
    background-image: url('/images/peace-server.png');
}

/* Small Server Toggle Buttons (for placement under titles) */
.server-toggle-container-small {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 2px 0 15px 0;
    padding: 8px;
    background: transparent;
}

.server-toggle-btn-small {
    display: block;
    width: 100px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #999;
    /* Default state: unselected - grayed out */
    filter: grayscale(70%);
    opacity: 0.6;
}

.server-toggle-btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    text-decoration: none;
    filter: grayscale(40%);
    opacity: 0.8;
}

.server-toggle-btn-small.active {
    /* Active state: full color, sharp, prominent border */
    filter: grayscale(0%);
    opacity: 1;
    border-color: #1e3a5f;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.4);
    transform: scale(1.02);
}

.server-toggle-btn-small.active:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 10px rgba(30, 58, 95, 0.5);
    filter: grayscale(0%);
    opacity: 1;
}

/* ===== 4.4 PAGE-SPECIFIC BUTTONS ===== */

/* NAAPI Admin Server Selector Button */
.server-btn {
    background: #6c757d;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.server-btn:hover {
    background: #545b62;
    transform: translateY(-1px);
}

.server-btn.active {
    background: #007bff;
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

/* Create Operation Button */
.create-operation-btn {
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.create-operation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Admin Link Button */
.admin-link-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-style: italic;
    display: inline;
}

.admin-link-btn:hover {
    color: #666;
}

/* Declare Winner Button */
.declare-winner-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.declare-winner-btn:hover {
    transform: translateY(-2px);
}

/* Admin Button (text link style) */
.admin-btn {
    color: #dc3545;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

.admin-btn:hover {
    text-decoration: underline;
}

/* ===== 4.5 SPECIALIZED BUTTONS ===== */

/* Ship Selection Modal Buttons */
/* Ship selection buttons now use standard card button classes (.card-btn-primary, .card-btn-secondary) */
/* Old specialized styles removed - see Section 4.2 for standard card button system */

/* Roster Control Buttons */
.roster-control-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px;
}

.roster-control-btn img {
    vertical-align: middle;
}

/* Delete Button - Red warning style for destructive actions */
.delete-button {
    background-color: #dc3545;
    color: white;
    border: 1px solid #bd2130;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #c82333;
    border-color: #a71d2a;
}

/* END SECTION 4: BUTTONS & ACTIONS */

img {
    max-width: 100%;
    height: auto;
}

/* ===================================================================
   5. FORMS & INPUTS (CONSOLIDATED IN PHASE 3)
   ================================================================ */

/* ===== 5.1 BASE FORM ELEMENT STYLES ===== */

/* Text Inputs */
input[type=text], input[type=password] {
    width: 80%;
    padding: 10px;
    margin-bottom: 20px;
}

input[type=number] {
    width: 100px;
    padding: 10px;
}

input.smallinput {
    width: 25%;
    padding: 5px;
    margin-bottom: 20px;
}

/* Textarea */
textarea {
    font-size: 18px;
    width: 80%;
    height: 100px;
}

/* Select Dropdowns */
select {
	width: 80%;
	padding: 10px;
	margin-bottom: 20px;
}

select.smallinput {
    width: 25%;
    padding: 5px;
    margin-bottom: 20px;
}

/* Base Form Element */
form {
    text-align: center;
}

/* ===== 5.2 FORM CONTAINER STYLES ===== */

/* Main Page Form (.pageform) - Used on 28 files site-wide */
.pageform {
    width: 80%;
    background-color: #f1f3ce;
    border: 4px solid #f62a00;
    padding: 10px;
    margin: auto;
    text-align: center;
    color: #000;
}

.pageform button {
    width: 200px;
}

.pageform select {
    width: 200px;
}

.pageform input[type=text] {
    width: 200px;
}

.pageform #art img {
    height: 50px;
}

/* Small Form (.smallform) - Compact form layout */
.smallform button {
    width: 200px;
}

.smallform select {
    width: 200px;
}

.smallform input[type=text] {
    width: 200px;
}

.smallform input[type=password] {
    width: 200px;
}

/* Roster Form - Used in operations and member management */
.roster {
    width: 90%;
    background-color: #f1f3ce;
    border: 1px solid black;
    padding: 10px;
    margin: auto;
    text-align: left;
    color: #000;
}

.roster img {
    height: 25px;
    width: 25px;
}

.roster textarea {
    height: 200px;
    width: 100%;
}

/* ===== 5.3 SEARCH FORMS ===== */

/* Modern Search Form - Flexbox layout */
.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.search-form input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.search-form button {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.search-form button:hover {
    background: #0056b3;
}

/* Legacy Search Form - Float-based layout */
form.searchform {
    float: left;
    text-align: left;
    width: 100%;
}

form.searchform button {
    width: 100px;
}

form.searchform input {
    width: 100px;
}

/* ===== 5.4 OPERATIONS FORMS ===== */

.operations-form-container {
    max-width: 600px;
    margin: 0 auto;
}

.operations-form-card {
    background: linear-gradient(to right, #e6d9c0 0%, #d4c4a8 30%, #c8b896 70%, #d0c2a6 100%) !important;
    border: 2px solid #8b6f3f !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25) !important;
    color: #2c1810;
}

.operations-form-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c1810;
    font-size: 20px;
    border-bottom: 2px solid #8b6f3f;
    padding-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
}

.operations-form-card #art img {
    height: 24px;
    width: auto;
}

.operations-form-field {
    margin-bottom: 15px;
}

.operations-form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #2c1810;
}

.operations-form-field input[type="text"],
.operations-form-field select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #8b6f3f;
    border-radius: 4px;
    background-color: #f8f4e6;
    color: #2c1810;
    font-size: 14px;
    box-sizing: border-box;
}

.operations-form-field input[type="text"]:focus,
.operations-form-field select:focus {
    outline: none;
    border-color: #654321;
    box-shadow: 0 0 4px rgba(101, 67, 33, 0.3);
}

.operations-form-field .form-help {
    font-size: 12px;
    color: #6b5b42;
    margin-top: 4px;
    font-style: italic;
}

.operations-form-button {
    background: linear-gradient(135deg, #8b6f3f 0%, #654321 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin-top: 10px;
}

.operations-form-button:hover {
    background: linear-gradient(135deg, #654321 0%, #4a3018 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.3);
}

/* ===== 5.5 SHIP SELECTION FORMS ===== */

.ship-form-field {
    margin-bottom: 20px;
}

.ship-form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c1810;
}

/* Inline Ship Selection Form */
.inline-ship-selection-form {
    margin: 12px 0 0 0;
    padding: 16px;
    background: linear-gradient(135deg, #f8f5f1 0%, #f0ebe3 50%, #e8e1d6 100%);
    border: 2px solid #d4c4a8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        padding: 0 16px;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 200px;
        padding: 16px;
    }
}

.ship-selection-content {
    max-width: 100%;
}

.inline-ship-selection-form .ship-autocomplete-container {
    position: relative;
    margin-bottom: 16px;
}

.inline-ship-selection-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #c8b896;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.inline-ship-selection-form input[type="text"]:focus {
    outline: none;
    border-color: #8b7355;
    box-shadow: 0 0 6px rgba(139, 115, 85, 0.3);
}

.inline-ship-selection-form .ship-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #c8b896;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.inline-ship-selection-form .ship-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0ebe3;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.inline-ship-selection-form .ship-autocomplete-item:hover,
.inline-ship-selection-form .ship-autocomplete-item.highlighted {
    background-color: #8b6f3f;
    color: #ffffff;
    font-weight: 500;
}

.inline-ship-selection-form .ship-autocomplete-item:last-child {
    border-bottom: none;
}

.inline-ship-selection-form .ship-autocomplete-item.loading,
.inline-ship-selection-form .ship-autocomplete-item.no-results,
.inline-ship-selection-form .ship-autocomplete-item.error {
    color: #666;
    font-style: italic;
    cursor: default;
}

.inline-ship-selection-form .ship-autocomplete-item.error {
    color: #dc3545;
}

/* Ship Form Buttons - now using standard card button classes (.card-btn-primary, .card-btn-secondary) */
.ship-form-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
}

/* Integration with member cards */
.member-card-wrapper .inline-ship-selection-form {
    margin-left: 0;
    margin-right: 0;
}

/* ===== 5.6 UTILITY CLASSES FOR FORMS ===== */

/* Quickstart images in forms */
.quickstart {
    float: right;
    margin: 10px;
    width: 40%;
    border: 2px solid #8b7355;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quickstart:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.standard-card-body:has(.quickstart) {
    min-height: 200px;
}

.standard-card-body .quickstart {
    margin-bottom: 15px;
}

.standard-card-body:has(.quickstart)::after {
    content: "";
    display: table;
    clear: both;
}

/* Featured Video Card Styling */
.standard-card-header h4:contains("🎥 Featured Video") {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
    color: white !important;
    padding: 10px 15px;
    border-radius: 6px;
    text-align: center;
}

/* YouTube iframe responsive styling */
.standard-card-body iframe {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===================================================================
   6. CARD COMPONENT SYSTEM (CONSOLIDATED IN PHASE 4)
   ================================================================ */

/* =====  6.1 BASE CARD STYLES & LAYOUTS ===== */

/* Standard Cards Grid Layout (formerly Trading Cards) */
.standard-cards-grid, .trading-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Standard Cards Stack Layout (vertical stacking) */
.standard-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.trading-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

/* Standard Card Base Styles */
/* Base Standard Card Style */
.standard-card,
.trading-search-card,
.trading-opportunity-card {
    background: linear-gradient(135deg, #e6d9c0 0%, #d4c4a8 100%);
    border: 2px solid #8b7355;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible;
}

.standard-card:hover,
.trading-search-card:hover,
.trading-opportunity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Standard Card Headers */
.standard-card-header, .trading-card-header {
    padding: 15px 20px;
    background: rgba(30, 58, 95, 0.1);
    border-bottom: 1px solid rgba(139, 115, 85, 0.3);
}

.standard-card-header, .trading-card-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e3a5f;
}

/* Standard Card Bodies */
.standard-card-body, .trading-card-body {
    padding: 20px;
}

.search-hint {
    margin: 15px 0 0 0;
    font-size: 13px;
    color: #6b5b42;
    font-style: italic;
    line-height: 1.4;
}

/* Trading Details */
.trading-detail {
    margin-bottom: 12px;
    font-size: 14px;
}

.detail-label {
    font-weight: 600;
    color: #1e3a5f;
    margin-right: 8px;
}

.price-value {
    color: #28a745;
    font-weight: 700;
    font-size: 16px;
}

/* Standard Card Footers */
.standard-card-footer, .trading-card-footer {
    padding: 15px 20px;
    background: rgba(30, 58, 95, 0.05);
    border-top: 1px solid rgba(139, 115, 85, 0.2);
    text-align: center;
}

/* Forms inside card footers should display inline */
.standard-card-footer form,
.trading-card-footer form {
    display: inline-block;
    margin: 0;
}

/* Ensure buttons inside forms maintain standard styling */
.standard-card-footer form button,
.trading-card-footer form button {
    margin: 0 4px;
}

/* Card Button System moved to Section 4: BUTTONS & ACTIONS */

/* END 6.1: BASE CARD STYLES & LAYOUTS */

/* ===== 6.2 THEMED CARD VARIANTS ===== */

/* Standard Parchment Card - Document style with warm cream/beige gradient */
.standard-parchment-card {
    background: linear-gradient(to right, #e6d9c0 0%, #d4c4a8 30%, #c8b896 70%, #d0c2a6 100%) !important;
    border: 2px solid #8b6f3f !important;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25) !important;
}

/* Clickable parchment cards (rendered as <a>) get a hover lift */
a.standard-parchment-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.standard-parchment-card:hover {
    transform: translateY(-3px);
    border-color: #6b4f1f !important;
    box-shadow: 0 8px 16px rgba(101, 67, 33, 0.4) !important;
}

.standard-parchment-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #2c1810;
    font-size: 20px;
    border-bottom: 2px solid #8b6f3f;
    padding-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.standard-parchment-card h3,
.standard-parchment-card h4 {
    color: #495057 !important;
}

/* Responsive 16:9 wrapper for the home page video embed. */
.home-video {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-top: 56.25%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(101, 67, 33, 0.35);
}

.home-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Site Disclaimer - highlighted fan-site notice (home page) */
.site-disclaimer {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 14px 18px;
    background: rgba(139, 111, 63, 0.10);
    border: 1px solid #8b6f3f;
    border-left: 5px solid #8b6f3f;
    border-radius: 0 6px 6px 0;
    text-align: left;
}

.site-disclaimer::before {
    content: "Fan Site";
    display: block;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: #6b4f1f;
    margin-bottom: 6px;
}

.site-disclaimer p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #2c1810;
}

/* Standard Blue Card - Deep navy blue for profile/naval content */
.standard-blue-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 50%, #1e3a5f 100%) !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.standard-blue-card h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 22px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 8px;
}

.standard-blue-card h3,
.standard-blue-card h4 {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.standard-blue-card .detail-label {
    color: #e6d9c0;
}

/* Blue variant of the grid card - keeps the header/body layout, themes it navy.
   The colors carry !important on purpose: the blanket `.standard-card *` rule
   (forces near-black text) would otherwise win and make text unreadable on navy. */
.standard-card.standard-card-blue {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 50%, #1e3a5f 100%);
    border-color: #4a90e2;
}

.standard-card.standard-card-blue .standard-card-header {
    background: rgba(0, 0, 0, 0.20);
    border-bottom-color: rgba(74, 144, 226, 0.5);
}

.standard-card.standard-card-blue .standard-card-header h4 {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.45);
}

/* Defeat `.standard-card * { color:#212529 !important }` for everything in the body */
.standard-card.standard-card-blue .standard-card-body,
.standard-card.standard-card-blue .standard-card-body * {
    color: #d7e2f0 !important;
}

/* Medallion reward shown on a fully-logged port card */
.standard-card.standard-card-blue .standard-card-body .shellback-medallion {
    display: block;
    width: 64px;
    height: 64px;
    margin: 6px auto 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* Status states (extra class on the body span keeps specificity above the rule above) */
.standard-card.standard-card-blue .standard-card-body .shellback-logged {
    color: #7ee0a0 !important;
    font-weight: 700;
}

.standard-card.standard-card-blue .standard-card-body .shellback-awaiting {
    color: #9fb3d1 !important;
}

/* Per-port chat declaration (revived from the screenshot-era quest) */
.standard-card.standard-card-blue .standard-card-body .shellback-declaration {
    color: #c5d6ee !important;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: left;
    margin: 10px 0 12px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18);
    border-left: 3px solid #4a90e2;
    border-radius: 4px;
}

.standard-card.standard-card-blue .standard-card-body .shellback-copy-btn {
    color: #082033 !important;
    background: #7ee0a0;
    border: 0;
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.standard-card.standard-card-blue .standard-card-body .shellback-copy-btn:hover {
    background: #5bd778;
}

.standard-card.standard-card-blue .standard-card-body .shellback-copy-btn.is-copied {
    color: #ffffff !important;
    background: #4a90e2;
}

/* "Paste this declaration in Global chat." cue under the button */
.standard-card.standard-card-blue .standard-card-body .shellback-copy-hint {
    color: #9fb3d1 !important;
    font-size: 11.5px;
    margin-top: 6px;
}

/* After "Copy declaration" is clicked, draw the eye to the paste step */
.standard-card.standard-card-blue .standard-card-body .shellback-copy-hint.is-active {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
}

/* Shown once the press is recorded (port still needs its contract detected) */
.standard-card.standard-card-blue .standard-card-body .shellback-decl-state {
    color: #7ee0a0 !important;
    font-weight: 700;
    font-size: 12.5px;
    margin-top: 8px;
}

/* Logged ports get a seafoam outline so remaining ports are scannable at a glance */
.standard-card.standard-card-blue.is-logged {
    border-color: #7ee0a0;
    box-shadow: 0 0 0 1px rgba(126, 224, 160, 0.45), 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Shellback quest progress band - navy panel tying the count + bar to the cards */
.shellback-intro {
    text-align: center;
    color: #ffffff;
    max-width: 52ch;
    margin: 0 auto 20px;
}

.shellback-contract-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 1.15em;
}

.shellback-contract-table th,
.shellback-contract-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.shellback-contract-table th { font-weight: 700; }

.shellback-progress {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 50%, #1e3a5f 100%);
    border: 2px solid #4a90e2;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.shellback-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #d7e2f0;
    font-size: 15px;
    margin-bottom: 10px;
}

.shellback-progress-label b { color: #ffffff; }

.shellback-progress-pct {
    color: #7ee0a0;
    font-weight: 700;
}

.shellback-progress-track {
    background: rgba(0, 0, 0, 0.30);
    border-radius: 6px;
    height: 12px;
    overflow: hidden;
}

.shellback-progress-fill {
    background: linear-gradient(90deg, #5bd778, #7ee0a0);
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}

/* Standard Red Card - Red theme for admin controls and alerts */
.standard-red-card {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important;
    border: 2px solid #bd2130 !important;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #ffffff;
}

.standard-red-card h2,
.standard-red-card h3 {
    margin-top: 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.standard-red-card h3 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 6px;
}

.standard-red-card h4 {
    color: #495057 !important;
}

/* ===================================================================
   Dossier — Quarterdeck command panel (admin-only)
   The commanding officer's actions on a sailor's file. Shares the navy +
   gold-braid vocabulary of the Wardroom service record; buttons reuse the
   site-wide .card-btn-* system, and destructive orders sit below a hairline
   so a delete is never a stray click. No new palette, no motion.
   ================================================================ */
.admin-panel {
    background: linear-gradient(160deg, #1e3a5f 0%, #16314f 55%, #102439 100%);
    border: 1px solid #0d1f33;
    border-top: 3px solid #c9a24b;
    border-radius: 6px;
    padding: 20px 22px 22px;
    margin: 22px 0;
    color: #e6d9c0;
    box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-panel-eyebrow {
    font-family: 'IM Fell DW Pica SC', Georgia, serif;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #c9a24b;
}
.admin-panel-title {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 26px;
    line-height: 1;
    color: #ffffff;
    margin: 2px 0 0;
    text-shadow: none;
}

/* Service-file data strip */
.admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 16px 0 18px;
    padding: 12px 0;
    border-top: 1px solid rgba(201,162,75,.30);
    border-bottom: 1px solid rgba(201,162,75,.30);
}
.admin-stat-label {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(230,217,192,.6);
    margin-bottom: 3px;
}
.admin-stat-value {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 20px;
    color: #ffffff;
}

/* Action groups */
.admin-group { margin-bottom: 16px; }
.admin-group:last-child { margin-bottom: 0; }
.admin-group h3 {
    font-family: 'IM Fell DW Pica SC', Georgia, serif;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #c9a24b;
    margin: 0 0 9px;
    border: 0;
    padding: 0;
}
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-actions a[class^="card-btn"] { margin: 0; }

/* Promotion eligibility checklist — why the Promote button will / won't take */
.admin-promo {
    margin: 0 0 12px;
    font-size: 13px;
}
.admin-promo-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.admin-promo-verdict {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 16px;
}
.admin-promo-verdict.is-eligible { color: #7bd88f; }
.admin-promo-verdict.is-blocked  { color: #e4a04b; }
.admin-promo-target {
    color: rgba(230,217,192,.6);
    font-size: 12px;
}
.admin-promo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.admin-promo-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}
.admin-promo-mark {
    width: 1.1em;
    flex: none;
    text-align: center;
    font-weight: 700;
}
.admin-promo-item.met   .admin-promo-mark { color: #7bd88f; }
.admin-promo-item.unmet .admin-promo-mark { color: #e4606d; }
.admin-promo-item.unmet .admin-promo-label { color: #ffffff; }
.admin-promo-label { flex: none; }
.admin-promo-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(201,162,75,.30);
    transform: translateY(-3px);
    min-width: 12px;
}
.admin-promo-detail {
    flex: none;
    color: rgba(230,217,192,.8);
    font-variant-numeric: tabular-nums;
}
.admin-promo-item.unmet .admin-promo-detail { color: #f0c9a0; }

.admin-meta {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(230,217,192,.85);
    margin: 0 0 9px;
}
.admin-meta a { color: #8fb8e8; }

/* Awarded ribbons as removable chips */
.admin-chips { margin: 0 0 9px; }
.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(201,162,75,.25);
    border-radius: 4px;
    padding: 5px 10px;
    margin: 0 6px 6px 0;
    font-size: 13px;
    color: #e6d9c0;
}
.admin-chip a {
    color: #e4606d;
    font-size: 12px;
    text-decoration: none;
}
.admin-chip a:hover { text-decoration: underline; }

/* Destructive orders, set apart below a hairline */
.admin-danger-zone {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(220,53,69,.45);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.admin-danger-zone a[class^="card-btn"] { margin: 0; }
.admin-danger-note {
    font-size: 12px;
    color: rgba(230,217,192,.55);
}

@media (max-width: 600px) {
    .admin-actions { flex-direction: column; align-items: stretch; }
    .admin-actions a[class^="card-btn"] { width: 100%; }
}

/* ===== 6.3 MEMBER CARDS ===== */

.member-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.member-card {
    background: linear-gradient(135deg, #e8d5bc 0%, #d4b896 25%, #c9a876 50%, #d4b896 75%, #e8d5bc 100%) !important;
    border: 2px solid #9d7e54 !important;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.4) !important;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.member-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 16px rgba(101, 67, 33, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: #a68b5b;
}

.member-card.on-leave {
    background: linear-gradient(145deg, #f0ede6 0%, #ddd6c1 50%, #e6dfc8 100%) !important;
    border-color: #998866 !important;
    opacity: 0.85;
}

.member-card.on-leave:before {
    content: "ON LEAVE";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #6c757d;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

.member-card.citizen {
    border-left: 4px solid #28a745;
}

.member-card-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 6px;
    text-decoration: none;
}

.member-card-ribbons a,
.member-card-avatar {
    position: relative;
    z-index: 1;
}

.member-card-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border: 2px solid #b8952a;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(101, 67, 33, 0.5), inset 0 0 0 1px rgba(255, 215, 100, 0.3);
    margin-right: 10px;
}

.member-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.member-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.member-card-insignia {
    flex-shrink: 0;
}

.member-card-insignia img {
    height: 36px;
    width: auto;
}

.member-card-info {
    flex: 1;
    min-width: 0;
}

.member-card-name {
    font-size: 18px;
    font-weight: bold;
    color: #1a1a1a;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.member-card-name a {
    color: #1a1a1a;
    text-decoration: none;
}

.member-card-name a:hover {
    text-decoration: underline;
}

.member-card-rank {
    font-size: 12px;
    color: #2c2c2c;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 2px 0 0 0;
}

.member-card-body {
    margin-left: 12px;
    flex: 1;
}

.member-card-details {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.member-card-detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.member-card-ribbons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: auto;
    padding-left: 12px;
}

.member-card-ribbons img {
    height: 36px;
    border-radius: 2px;
}

/* Rank-specific styling */
.member-card.rank-0 { border-left: 4px solid #28a745; } /* Citizen - Green */
.member-card.rank-1 { border-left: 4px solid #17a2b8; } /* Midshipman - Cyan */
.member-card.rank-2 { border-left: 4px solid #007bff; } /* Ensign - Blue */
.member-card.rank-3 { border-left: 4px solid #6610f2; } /* Lieutenant - Indigo */
.member-card.rank-4 { border-left: 4px solid #6f42c1; } /* Lt Commander - Purple */
.member-card.rank-5 { border-left: 4px solid #e83e8c; } /* Commander - Pink */
.member-card.rank-6 { border-left: 4px solid #dc3545; } /* Captain - Red */
.member-card.rank-7 { border-left: 4px solid #fd7e14; } /* Commodore - Orange */
.member-card.rank-8 { border-left: 4px solid #ffc107; } /* Rear Admiral - Yellow */
.member-card.rank-9 { border-left: 4px solid #20c997; } /* Vice Admiral - Teal */
.member-card.rank-10 { border-left: 4px solid #198754; } /* Admiral - Dark Green */

/* Member Card Wrapper with Commander Controls */
.member-card-wrapper {
    margin-bottom: 10px;
}

/* ===== 6.4 DOSSIER CARDS ===== */

.dossier-profile-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 50%, #1e3a5f 100%) !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    align-items: center;
    gap: 20px;
}

.dossier-profile-header {
    text-align: center;
}

.dossier-profile-header h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dossier-profile-insignia {
    text-align: center;
    margin-top: 15px;
}

.dossier-profile-insignia img {
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dossier-profile-nation img {
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-top: 8px;
}

.dossier-medals-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 50%, #1e3a5f 100%) !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dossier-medals-card h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 22px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 8px;
}

.dossier-medals-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.dossier-medals-grid img {
    height: 80px;
    border-radius: 4px;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dossier-medals-grid img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.dossier-medals-grid a {
    position: relative;
    display: inline-block;
}

.dossier-section-card {
    background: linear-gradient(to right, #e6d9c0 0%, #d4c4a8 30%, #c8b896 70%, #d0c2a6 100%) !important;
    border: 2px solid #8b6f3f !important;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25) !important;
}

.dossier-section-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #2c1810;
    font-size: 20px;
    border-bottom: 2px solid #8b6f3f;
    padding-bottom: 6px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.dossier-operation-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(139, 111, 63, 0.3);
}

.dossier-operation-item:last-child {
    border-bottom: none;
}

.dossier-operation-item a {
    color: #654321;
    text-decoration: none;
    font-weight: 500;
}

.dossier-operation-item a:hover {
    text-decoration: underline;
    color: #4a3018;
}

/* ===== DOSSIER OFFICER COMMISSION CARD ===== */

.dossier-officer-commission {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    text-align: center;
}

.dossier-officer-frame {
    flex-shrink: 0;
    padding: 4px;
    background: linear-gradient(145deg, #f0d878, #c9a227, #f0d060, #8b6514, #e8d48b);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

.dossier-officer-frame img,
.dossier-officer-frame video {
    display: block;
    border-radius: 3px;
    width: 140px;
}

.dossier-officer-frame-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.dossier-officer-frame-link:hover .dossier-officer-frame {
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 10px rgba(240,216,120,0.6);
}

.dossier-avatar-placeholder {
    width: 140px;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(145deg, #1a2030, #0d1420);
}

.dossier-avatar-placeholder-text {
    color: #c9a227;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    padding: 10px;
}

.dossier-officer-frame-link:hover .dossier-avatar-placeholder-text {
    color: #f0d878;
}

.dossier-avatar-edit-hint {
    font-size: 10px;
    color: #a0a0a0;
    letter-spacing: 0.08em;
    font-variant: small-caps;
}

.dossier-officer-frame-link:hover .dossier-avatar-edit-hint {
    color: #f0d878;
}

.dossier-officer-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 4px;
}

.dossier-commission-rank {
    font-size: 11px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: #f0d060;
    text-transform: uppercase;
    margin: 0 0 4px 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.dossier-commission-name {
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: normal;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    line-height: 1.15;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.dossier-gold-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9a227, transparent);
    margin-bottom: 12px;
    border: none;
}

.dossier-commission-nation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dossier-commission-nation img {
    height: 18px;
    width: auto;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.dossier-commission-insignia {
    margin-bottom: 12px;
}

.dossier-commission-insignia img {
    max-height: 90px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.dossier-commission-medals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.dossier-commission-medals a {
    display: inline-block;
}

.dossier-commission-medals img {
    height: 80px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dossier-commission-medals img:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 6px 14px rgba(0,0,0,0.55);
}

.dossier-discord-post {
    text-align: center;
    margin: 16px 0 6px;
}

.dossier-admin-card {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #dc3545 100%) !important;
    border: 2px solid #bd2130 !important;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #ffffff;
}

.dossier-admin-card h2,
.dossier-admin-card h3 {
    margin-top: 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dossier-admin-card h3 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 6px;
}

/* ===== 6.5 WELCOME PAGE CARDS ===== */

.welcome-hero-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
    border: 2px solid #4a90e2;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.welcome-hero-card .hero-images {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
}

.welcome-hero-card .hero-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 400px;
}

.welcome-hero-card img {
    width: 100%;
    height: auto;
    max-width: 400px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    margin-bottom: 0;
}

.welcome-hero-card img:hover {
    transform: scale(1.02);
}

/* ===== 6.6 BANNER CARDS ===== */

.welcome-banner {
    position: relative;
    aspect-ratio: 43 / 12;
    margin-bottom: 15px;
    overflow: hidden;
    border: 2px solid #8b6f3f;
    border-radius: 8px;
    background: #101d28;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.welcome-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.welcome-banner-title {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    color: #f2cf63;
    font-family: 'Pinyon Script', cursive;
    font-size: clamp(48px, 9vw, 80px);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.8);
}

.banner-card {
    border: 2px solid #8b6f3f;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}

.banner-card a {
    display: block;
    position: relative;
    text-decoration: none;
}

.banner-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.banner-card-overlay {
    position: absolute;
    bottom: 5px;
    left: 10px;
    text-align: left;
}

.banner-card-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: 2px;
    color: #fff;
    -webkit-text-stroke: 3px #000;
    text-stroke: 3px #000;
    paint-order: stroke fill;
}

.banner-card-subtitle {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    paint-order: stroke fill;
}

/* ===== 6.7 NAAPI ADMIN CARDS ===== */

.server-status-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #6c757d;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    color: #212529 !important;
}

.server-status-card * {
    color: #212529 !important;
}

.server-status-card.main-server {
    border-color: #007bff;
    background: linear-gradient(135deg, #e7f3ff 0%, #cce7ff 100%);
}

.server-status-card.peace-server {
    border-color: #28a745;
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
}

.port-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    color: #212529 !important;
}

.port-card * {
    color: #212529 !important;
}

.item-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
}

.itemtype-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.item-list-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}

/* ===== 6.7 TRADING COMPONENTS (Autocomplete, Search, Watchlist) ===== */

/* Search Input Styles */
.port-search-container,
.item-search-container {
    position: relative;
    width: 100%;
}

#port-search-input,
#item-search-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #d4c4a8;
    border-radius: 8px;
    font-size: 16px;
    background-color: #faf8f5;
    color: #654321;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#port-search-input:focus,
#item-search-input:focus {
    outline: none;
    border-color: #8b6f3f;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(139, 111, 63, 0.15);
}

/* Item Autocomplete Dropdown */
.item-autocomplete-container {
    position: relative;
}

.item-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #faf8f5;
    border: 2px solid #d4c4a8;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}

.item-autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(139, 111, 63, 0.2);
    color: #654321;
    transition: background-color 0.2s ease;
}

.item-autocomplete-item:last-child {
    border-bottom: none;
}

.item-autocomplete-item:hover,
.item-autocomplete-item.highlighted {
    background-color: #8b6f3f;
    color: #ffffff;
}

.item-autocomplete-loading,
.item-autocomplete-no-results {
    padding: 12px 16px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

/* Watchlist Items */
.watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
}

.watchlist-item:last-child {
    border-bottom: none;
}

.watchlist-link {
    color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
    flex: 1;
}

.watchlist-link:hover {
    text-decoration: underline;
    color: #1e3a5f;
}

.watchlist-remove {
    font-size: 11px !important;
    color: #dc3545 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(220, 53, 69, 0.1);
    transition: background-color 0.2s ease;
}

.watchlist-remove:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    text-decoration: none !important;
}



/* Trading Footer */
.trading-footer {
    text-align: center;
    padding: 30px 0 20px 0;
    margin-top: 30px;
    border-top: 1px solid rgba(139, 115, 85, 0.3);
}

.data-update-info {
    color: #6c757d;
    font-size: 13px;
    margin: 0 0 15px 0;
}

.admin-controls {
    margin-top: 15px;
}

/* .admin-btn moved to Section 4: BUTTONS & ACTIONS */

/* Card Type Specific Styles */
.port-search-card {
    border-color: #28a745;
}

.item-search-card {
    border-color: #17a2b8;
}

.trading-opportunity-card {
    border-color: #ffc107;
}


/* Section Headers */
.trading-search-section h3,
.trading-featured-section h3,
.trading-watchlist-section h3,
.trading-watchlist-section h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px 0;
    text-align: center;
}


/* Cartel Page - Consumables List */
.consumables-list {
    margin-top: 15px;
}

.consumable-list-item {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    gap: 10px;
}

.consumable-list-item:last-child {
    border-bottom: none;
}

.consumable-list-item .item-name {
    font-weight: 600;
    color: #495057;
}

/* Cartel item labels link to the market page; match the standard body link look. */
.consumable-list-item .item-name a {
    color: #0277bd;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.consumable-list-item .item-name a:hover {
    color: #0277bd;
    text-decoration-style: solid;
}

.item-price {
    color: #212529;
    font-weight: 500;
    text-align: left;
}

.item-markup {
    text-align: right;
}

/* Fix white text in standard cards */
.standard-card * {
    color: #212529 !important;
}

.standard-card .card-btn-primary,
.standard-card .card-btn-success,
.standard-card .card-btn-danger,
.standard-card .card-btn-secondary,
.standard-card .card-btn-small,
.standard-card .card-btn-discord {
    color: #ffffff !important;
}

/* Market Item Type Styles */
.itemtype-header {
    cursor: pointer;
    font-weight: bold;
}

.itemtype-content {
    margin-left: 20px;
    display: none;
}

/* Market Table Grid Styles */
.market-grid-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 10px;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 1px solid #8B4513;
    margin-bottom: 5px;
}

.market-grid-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid #DEB887;
}

/* Trading Item Section Styles */
.itemtype-section {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin: 15px 0 10px 0;
}

/* Market Links Hover Effects */
.market-grid-row a:hover,
.trading-detail a:hover {
    text-decoration: underline;
}

/* Watchlist Button Colors moved to Section 4: BUTTONS & ACTIONS */

/* ===== 6.3 TIME CONVERSION CARD =====
   Reusable card output by $sf->outputTimeConversion(). Anchors on Game Time
   (GMT) and converts the next 24 hours to local time as two rows of twelve
   hour chips. Built on .standard-card so it themes site-wide. */

.time-conv-card .tc-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.time-conv-card .tc-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: 0.3px;
}

/* Live "now" strip: Game Time -> Local */
.time-conv-card .tc-now {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

.time-conv-card .tc-now-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    background: rgba(30, 58, 95, 0.08);
    border: 1px solid rgba(139, 115, 85, 0.35);
    border-radius: 8px;
    min-width: 120px;
}

.time-conv-card .tc-now-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b5b42 !important;
}

.time-conv-card .tc-now-time {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #1e3a5f !important;
    font-variant-numeric: tabular-nums;
}

.time-conv-card .tc-now-arrow {
    align-self: center;
    font-size: 22px;
    color: #8b7355 !important;
}

/* 24 hour chips, forced into two rows of twelve */
.time-conv-card .tc-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.time-conv-card .tc-hour {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 2px 6px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(139, 115, 85, 0.35);
    border-radius: 7px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.time-conv-card .tc-hour:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.time-conv-card .tc-gmt {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 15px;
    font-weight: 700;
    color: #1e3a5f !important;
    font-variant-numeric: tabular-nums;
}

.time-conv-card .tc-local {
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #5a4a32 !important;
    font-variant-numeric: tabular-nums;
}

.time-conv-card .tc-civ {
    font-size: 10px;
    color: #8a7a5e !important;
    margin-top: 1px;
}

/* Current hour — glowing brass "NOW" chip */
.time-conv-card .tc-hour.is-now {
    background: linear-gradient(160deg, #fff6df 0%, #f3e4bd 100%);
    border-color: #b8902a;
    box-shadow: 0 0 0 2px rgba(184, 144, 42, 0.35), 0 3px 10px rgba(184, 144, 42, 0.3);
}

.time-conv-card .tc-nowtag {
    position: absolute;
    top: -7px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff !important;
    background: #b8902a;
    border-radius: 3px;
    padding: 1px 5px;
}

.time-conv-card .tc-hint {
    margin: 14px 0 0;
    font-size: 12px;
    font-style: italic;
    color: #6b5b42 !important;
    line-height: 1.4;
}

/* Footer: reusable timezone selector */
.time-conv-card .tc-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.time-conv-card .tc-tz-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e3a5f !important;
}

select.tz-selector {
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid #8b7355;
    border-radius: 6px;
    background: #fffdf7;
    color: #1e3a5f;
    font-size: 13px;
    cursor: pointer;
}

@media (max-width: 700px) {
    .time-conv-card .tc-gmt { font-size: 13px; }
    .time-conv-card .tc-local { font-size: 11px; }
    .time-conv-card .tc-civ { font-size: 9px; }
    .time-conv-card .tc-now-time { font-size: 22px; }
}

/* END 6.3: TIME CONVERSION CARD */

/* END SECTION 6: CARD COMPONENT SYSTEM */

/* ===================================================================
   7. NAVIGATION & MENUS
   ================================================================ */

/* ===== 7.1 MAIN NAVIGATION ===== */

/* Main Navigation Bar - Top navigation for site sections */
#navbar {
    padding: 15px 0;
    text-align: center;
}

/* Navigation Links Container */
.navlinks {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Navigation Link Styling */
.navlinks a {
    color: red;
    text-decoration: none;
    padding: 8px 5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    display: inline-block;
}

.navlinks a:hover {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    transform: scale(1.15) translateY(-2px);
}

/* Navigation Separator */
.navlinks a + a::before {
    content: " | ";
    color: white;
    margin: 0 5px;
}

/* Navigation Time Display */
.navbar-time {
    color: #b8d4f1;
    font-size: 13px;
    padding: 5px 0;
    text-align: center;
    margin-top: 5px;
}

/* Sub-Navigation Bar - Page-specific secondary navigation */
.page-sub-nav {
    padding: 10px 0;
    text-align: center;
    margin-bottom: 15px;
}

.page-sub-nav a {
    color: red;
    text-decoration: none;
    padding: 6px 4px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-block;
}

.page-sub-nav a:hover {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    transform: scale(1.15) translateY(-2px);
}

/* Sub-Navigation Separator */
.page-sub-nav a + a::before {
    content: " | ";
    color: white;
    margin: 0 5px;
}

/* END SECTION 7.1: MAIN NAVIGATION */

/* ===== 7.2 FOOTER NAVIGATION ===== */

/* Footer Container - Site-wide footer with navigation and info */
#footer {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    background-color: #384b59;
    padding: 30px 0;
    color: #fff;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    text-align: left;
}

/* Footer Menu - Horizontal navigation in footer */
#footerMenu {
    border-bottom: 1px solid rgba(255,255,255,.25);
    width: 370px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

#footerMenu li {
    list-style: none;
    float: left;
    padding: 10px 5px;
}

/* Footer Links */
#footer a {
    color: #fff;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

.footer_content {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 0 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.footer_box {
    flex: 1 1 180px;
    line-height: 2;
}

.footer_link {
    color: #fff;
    text-decoration: none;
}

.footer_link:hover {
    text-decoration: underline;
}

/* END SECTION 7.2: FOOTER NAVIGATION */

/* END SECTION 7: NAVIGATION & MENUS */

/* ===================================================================
   8. PAGE-SPECIFIC COMPONENTS (CONSOLIDATED IN PHASE 5)
   ================================================================ */

/* ===== 8.1 OPERATIONS SYSTEM ===== */

/* Operations Page Card Design */
.operations-nav-links {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    font-size: 14px;
}

.operations-nav-links a {
    color: #2c5aa0;
    text-decoration: none;
    padding: 0 10px;
    font-weight: 500;
}

.operations-nav-links a:hover {
    text-decoration: underline;
}

.operations-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.operation-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.operation-status.active {
    background: #28a745;
    color: white;
}

.operation-status.underway {
    background: #ff9800;
    color: white;
}

.operation-status.expired {
    background: #dc3545;
    color: white;
}

.operation-status.closed {
    background: #6c757d;
    color: white;
}

.operation-status .countdown {
    font-size: 13px;
    opacity: 0.9;
}

.operation-detail {
    margin-bottom: 14px;
    font-size: 16px;
    color: #4a4a4a;
}

.operation-detail:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-weight: 600;
    color: #1e3a5f;
    display: inline-block;
    min-width: 90px;
}

.open-position {
    color: #dc3545;
    font-style: italic;
}

.roster-count {
    color: #2c5aa0;
    font-weight: 500;
}

.br-count {
    color: #ff9800;
    font-weight: 600;
}

.create-operation-section {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
}

/* .create-operation-btn moved to Section 4: BUTTONS & ACTIONS */

/* Operation Detail Page Cards */
.op-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Admin Section at bottom of page */
.admin-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dotted #ccc;
}

.admin-section-content {
    text-align: center;
    font-size: 11px;
    color: #999;
}

.admin-label {
    font-style: italic;
    color: #999;
}

/* .admin-link-btn moved to Section 4: BUTTONS & ACTIONS */

.ship-br {
    padding: 4px 10px;
    background: #ff9800;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}



.log-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

/* Async log-entry form at the top of the Operation Log card */
.op-log-form {
    margin-bottom: 16px;
}

.op-log-form textarea.log-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 44px;
    font-family: inherit;
    line-height: 1.5;
}

.op-log-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.log-entries {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

.log-entry {
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
}

.log-entry-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.log-author {
    font-weight: 600;
    color: #1e3a5f;
}

.log-time {
    color: #999;
    font-size: 14px;
}

.log-entry-text {
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
}


/* Operations Member Cards */
.member-cards-container.ops-roster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 20px;
}

.ops-member-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ops-ship-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.ops-ship-info .ship-link {
    color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
}

.ops-ship-info .ship-link:hover {
    text-decoration: underline;
}

.ops-ship-info .select-ship-link {
    color: #dc3545;
    text-decoration: none;
    font-style: italic;
}

.ops-ship-info .select-ship-link:hover {
    text-decoration: underline;
}

.ops-ship-info .ship-br {
    padding: 3px 8px;
    background: #ff9800;
    color: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.ops-ship-info .no-ship {
    color: #999;
    font-style: italic;
}

.ops-member-actions {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.ops-member-actions .roster-action-btn img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.ops-member-actions .roster-action-btn:hover img {
    transform: scale(1.2);
}

.ops-action-section {
    margin-top: 20px;
    text-align: center;
}

/* .declare-winner-btn moved to Section 4: BUTTONS & ACTIONS */

/* END SECTION 8.1: OPERATIONS SYSTEM */

/* ===== 8.2 TRADING SYSTEM ===== */

/* Trading Page Card-Based Layout */

.trading-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.trading-nav-links {
    text-align: center;
    margin: 15px 0 30px 0;
    font-size: 16px;
}

.trading-nav-links a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-block;
}

.trading-nav-links a:hover {
    color: #495057;
    text-decoration: underline;
}

.nav-separator {
    margin: 0 20px;
    color: #adb5bd;
    font-weight: 300;
    font-size: 18px;
}

/* END SECTION 8.2: TRADING SYSTEM */

/* ===== 8.3 NAAPI ADMIN INTERFACE ===== */

/* NAAPI Admin Interface Styles - Global Text Color Override */
/* Uses specific element selectors (p, span, div, etc.) instead of wildcard (*) */
/* This approach preserves button styling by not affecting button elements or links styled as buttons */
.dossier-admin-card p,
.dossier-admin-card span,
.dossier-admin-card div,
.dossier-admin-card label,
.dossier-admin-card td,
.dossier-admin-card th,
.dossier-admin-card li,
.dossier-admin-card strong,
.dossier-admin-card em,
.dossier-section-card p,
.dossier-section-card span,
.dossier-section-card div,
.dossier-section-card label,
.dossier-section-card td,
.dossier-section-card th,
.dossier-section-card li,
.dossier-section-card strong,
.dossier-section-card em,
.standard-parchment-card p,
.standard-parchment-card span,
.standard-parchment-card div,
.standard-parchment-card label,
.standard-parchment-card td,
.standard-parchment-card th,
.standard-parchment-card li,
.standard-parchment-card strong,
.standard-parchment-card em,
.standard-red-card p,
.standard-red-card span,
.standard-red-card div,
.standard-red-card label,
.standard-red-card td,
.standard-red-card th,
.standard-red-card li,
.standard-red-card strong,
.standard-red-card em,
.server-status-card p,
.server-status-card span,
.server-status-card div,
.server-status-card label,
.server-status-card td,
.server-status-card th,
.server-status-card li,
.server-status-card strong,
.server-status-card em,
.port-card p,
.port-card span,
.port-card div,
.port-card label,
.port-card td,
.port-card th,
.port-card li,
.port-card strong,
.port-card em,
.item-card p,
.item-card span,
.item-card div,
.item-card label,
.item-card td,
.item-card th,
.item-card li,
.item-card strong,
.item-card em,
.itemtype-card p,
.itemtype-card span,
.itemtype-card div,
.itemtype-card label,
.itemtype-card td,
.itemtype-card th,
.itemtype-card li,
.itemtype-card strong,
.itemtype-card em,
.item-list-card p,
.item-list-card span,
.item-list-card div,
.item-list-card label,
.item-list-card td,
.item-list-card th,
.item-list-card li,
.item-list-card strong,
.item-list-card em,
.detail-item p,
.detail-item span,
.detail-item div,
.detail-item label,
.detail-item td,
.detail-item th,
.detail-item li,
.detail-item strong,
.detail-item em,
.shop-section p,
.shop-section span,
.shop-section div,
.shop-section label,
.shop-section td,
.shop-section th,
.shop-section li,
.shop-section strong,
.shop-section em {
    color: #212529;
}

.dossier-admin-card h3,
.dossier-section-card h3,
.dossier-admin-card h4,
.dossier-section-card h4,
.standard-parchment-card h3,
.standard-parchment-card h4,
.standard-red-card h3,
.standard-red-card h4 {
    color: #495057 !important;
}

/* NAAPI Admin Interface Styles */
.server-status-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #6c757d;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    color: #212529 !important;
}

.server-status-card * {
    color: #212529 !important;
}

.server-status-card.main-server {
    border-color: #007bff;
    background: linear-gradient(135deg, #e7f3ff 0%, #cce7ff 100%);
}

.server-status-card.peace-server {
    border-color: #28a745;
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
}

.server-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #212529 !important;
}

.server-detail, .server-age {
    font-size: 14px;
    color: #6c757d !important;
    margin-bottom: 4px;
}

.server-actions {
    margin-top: 10px;
}

.update-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    font-weight: bold;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.server-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* .server-btn moved to Section 4: BUTTONS & ACTIONS */

.data-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

/* Mobile responsiveness for data nav grid moved to Section 10: MEDIA QUERIES */

.data-nav-section h4 {
    color: #495057 !important;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-link {
    padding: 8px 12px;
    background: #f8f9fa;
    color: #495057 !important;
    text-decoration: none;
    border-radius: 4px;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background: #e9ecef;
    border-left-color: #007bff;
    transform: translateX(3px);
}

.nav-link.active {
    background: #007bff;
    color: white !important;
    border-left-color: #0056b3;
}

.ports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.port-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    color: #212529 !important;
}

.port-card * {
    color: #212529 !important;
}

.port-name {
    font-weight: bold;
    margin-bottom: 8px;
    color: #495057;
}

.port-actions {
    display: flex;
    gap: 8px;
}


.shop-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    color: #212529;
}

.shop-section h4 {
    color: #495057;
    margin-bottom: 12px;
    font-size: 16px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.item-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
}

.item-header {
    font-weight: bold;
    color: #495057;
    margin-bottom: 4px;
}

.item-type {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 8px;
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.item-details span {
    font-size: 12px;
    color: #6c757d;
}

.price-sell {
    color: #28a745;
}

.price-buy {
    color: #dc3545;
}

.resources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.resource-item {
    background: white;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    font-size: 12px;
    color: #495057;
}

.port-details-grid, .item-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.detail-item {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    border-left: 4px solid #007bff;
    color: #212529;
}

.detail-item strong {
    color: #495057;
}

.detail-array pre {
    background: #e9ecef;
    padding: 8px;
    border-radius: 3px;
    font-size: 11px;
    margin-top: 5px;
    overflow-x: auto;
}

.itemtypes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.itemtype-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.itemtype-link {
    color: #495057;
    text-decoration: none;
    font-weight: bold;
    display: block;
    transition: color 0.2s ease;
}

.itemtype-link:hover {
    color: #007bff;
}

.items-list {
    margin-top: 15px;
}

.item-list-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #212529;
}

.item-name a {
    color: #495057;
    text-decoration: none;
    font-weight: bold;
}

.item-name a:hover {
    color: #007bff;
}

.item-stats {
    display: flex;
    gap: 10px;
}

.stat {
    font-size: 12px;
    color: #6c757d;
    background: white;
    padding: 2px 6px;
    border-radius: 3px;
}

.item-summary {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    color: #212529;
}

.item-stat {
    margin-bottom: 8px;
    font-size: 14px;
}

.item-details-section {
    margin-top: 20px;
}

.item-details-section h4 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 16px;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
}

.json-data-detailed, .json-data-summary {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    color: #212529;
    max-height: 500px;
    overflow-y: auto;
}

/* END SECTION 8.3: NAAPI ADMIN INTERFACE */

/* ===== 8.4 WARDROOM / MEMBER CARDS ===== */

/* Member Card Layout System moved to Section 6.3: MEMBER CARDS */

/* Section headers for rank groups */
.rank-section-header {
    background: linear-gradient(90deg, #007bff, #0056b3);
    color: white;
    padding: 12px 20px;
    margin: 30px 0 20px 0;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rank-section-header.on-leave {
    background: linear-gradient(90deg, #6c757d, #495057);
}

/* Search section styling */
.naval-register-search {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #e9ecef;
}

.naval-register-search h3 {
    margin-top: 0;
    color: #495057;
}

/* .search-form moved to Section 5: FORMS & INPUTS */

/* END SECTION 8.4: WARDROOM / MEMBER CARDS */

/* ===== 8.5 SCUTTLEBUTT/FORUMS ===== */

/*################################# */
/*#### these primarily for scuttlebutt ######### */

.username_container_dark {
    width: 100%;
    min-height: 50px;
}
.username_container_light {
    width: 100%;
    min-height: 50px;
}

.username_container_dark a {
    color: #ffffff;
}

.username_container_light a {
    color: #000000;
}
.username_box {
    float: left;
    padding-top: 10px;
    width: 50%;
    font-size: 24px;
    font-style: italic;
}
.username_box img {
    width: 75px;
}

.insignia_box {
    float: left;
    padding: 10px 5px 5px 5px;
}

.insignia_box img {
    height: 30px;
}

.insignia_medal_container {
}

.insignia_medal_box {
    width: 150px;
    height: 200px;
    float: left;
    text-align: center;
}

.insignia_medal_box img {
    width: 100px;
}


.ribbon_wrapping {
    float: left;
}
.ribbon_wrapping img {
    width: 25px;
   margin: 2px 5px;
}
#ribbon_container img {
    height: 150px;
    width: auto;
    height: 25px;
}
#ribbon_container .ribbon_box {
    padding: 5px;
    margin: 5px;
    width: 110px;
    height: 225px;
}

.dossier_insignia img {
    width: 200px;
}

.dossier_nation img {
    float: none;
    height: 25px;
    width: 30px;
}

.dossier_clan_box {
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 100%;
}

.dossier_ribbon_box img {
    width: 100px;
}

.ClanBadgeSilver {
    border: 1px solid black;
    padding: 2px;
    font-size: 18px;
    font-weight: bold;
    background-image: url(../images/silver-metal.png);
    width: 100px;
    height: 25px;
    margin: auto;
    color: #404040;
}
.ClanBadgeGold {
    border: 1px solid black;
    padding: 2px;
    font-size: 18px;
    font-weight: bold;
    background-image: url(../images/gold-metal.png);
    width: 100px;
    height: 25px;
    margin: auto;
    color: #404040;
}

.ClanBadgeSilver-ribbon {
    float: left;
    border: 1px solid black;
    padding: 2px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-image: url(../images/silver-metal.png);
    width: 73px;
    height: 22px;
    margin: auto;
    color: #404040;
}

.ClanBadgeGold-ribbon {
    float: left;
    border: 1px solid black;
    padding: 2px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-image: url(../images/gold-metal.png);
    width: 73px;
    height: 22px;
    margin: auto;
    color: #404040;
}
.scoreboard-container {
    width: 100%;
}

.scoreboard-cell {
    width: 33%;
    height: 150px;
    float: left;
    text-align: center;
    padding: 5px;
    border: 1px solid gray;
}
.scoreboard-cell img {
    height: 80px;
}

.scoreboard-points {
    font-size: 80px;
}

.scoreboard-score {
    font-size: 80px;
}

/* ===================================================================
   Wardroom — Service Record + Promotion Meter (signature component)
   The officer's standing toward the next rank, rendered as a passage
   between their current and next insignia. Gold = the "qualified" state
   (officer's braid); reserved for nothing else. Display face is the
   period engraver's serif (IM Fell) already imported at the top.
   ================================================================ */
.svc-record {
    background: linear-gradient(160deg, #1e3a5f 0%, #16314f 55%, #102439 100%);
    border: 1px solid #0d1f33;
    border-radius: 6px;
    padding: 22px 24px 18px;
    margin: 18px 0 22px;
    color: #e6d9c0;
    box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.svc-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(201,162,75,.35);
}
.svc-rank {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .5px;
    color: #ffffff;
}
.svc-name {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: #c9a24b;
}
.svc-appointed {
    margin-left: auto;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(230,217,192,.6);
}

/* The meter — a pistol shot. Flat line of fire + a ball riding it. */
.svc-meter { padding: 6px 0 6px; }
.svc-cannon-scene {
    display: block;
    width: 100%;
    height: auto;
    margin: 2px 0;
    overflow: visible;
}
.svc-traj-plan {
    fill: none;
    stroke: rgba(230,217,192,.30);
    stroke-width: 2;
    stroke-dasharray: .5 9;
    stroke-linecap: round;
}
.svc-traj-trail {
    fill: none;
    stroke: #4f86d6;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--svc-trail, 0);
    animation: svcDraw .9s ease-out both;
}
.svc-traj-trail.is-qualified { stroke: #c9a24b; }
.svc-ball-group { animation: svcFire .9s ease-out both; }

@keyframes svcDraw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: var(--svc-trail, 0); }
}
@keyframes svcFire {
    from { transform: translateX(var(--svc-fire, 0)); }
    to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-traj-trail, .svc-ball-group { animation: none; }
}

.svc-meter-ends {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
.svc-end {
    flex: 0 0 auto;
    max-width: 34%;
    text-align: center;
}
.svc-end img {
    height: 54px;
    width: auto;
    display: block;
    margin: 0 auto 4px;
}
.svc-end span {
    display: block;
    font-size: 12px;
    color: rgba(230,217,192,.8);
}
.svc-end-to span { color: #e8cf8c; }
.svc-meter-status {
    flex: 1;
    align-self: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #e6d9c0;
}
.svc-meter-status strong { color: #e8cf8c; font-size: 16px; }

/* The points ledger */
.svc-ledger {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(201,162,75,.35);
}
.svc-ledger-title {
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(230,217,192,.55);
}
.svc-ledger-row, .svc-ledger-total {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    line-height: 1.7;
}
.svc-ledger-label em {
    margin-left: 6px;
    font-style: italic;
    font-size: 12px;
    color: rgba(230,217,192,.55);
}
.svc-dots {
    flex: 1;
    margin: 0 8px 5px;
    border-bottom: 1px dotted rgba(230,217,192,.35);
}
.svc-ledger-val { font-variant-numeric: tabular-nums; }
.svc-ledger-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-weight: bold;
    color: #ffffff;
}
.svc-ledger-total em {
    margin-left: 6px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: rgba(230,217,192,.6);
}
.svc-cert-line { font-size: 14px; }

/* Regulations — promotion rules, demoted to a quiet collapsible card */
/* Wardroom promotion cards (eligibility checklist + regulations) */
.wardroom-cards { margin-top: 20px; }
.svc-regs-card .standard-card-body p {
    font-size: 14px;
    color: #1a2a3a;
    margin: 0 0 12px;
}
.svc-regs-card .standard-card-body p:last-child { margin-bottom: 0; }

/* Promotion eligibility checklist */
.promo-verdict {
    font-family: 'IM Fell DW Pica', Georgia, serif;
    font-size: 16px;
    margin: 0 0 14px;
}
.promo-verdict.is-eligible { color: #1f7a3d; }
.promo-verdict.is-blocked  { color: #9a4a13; }

.promo-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.promo-req-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid rgba(139,115,85,.25);
}
.promo-req-item:first-child { border-top: none; }
.promo-req-mark {
    width: 1.2em;
    flex: none;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    align-self: flex-start;
    line-height: 1.4;
}
.promo-req-item.met   .promo-req-mark { color: #1f7a3d; }
.promo-req-item.unmet .promo-req-mark { color: #c0392b; }
.promo-req-text { flex: none; display: flex; flex-direction: column; }
.promo-req-label { font-weight: 600; color: #1e3a5f; }
.promo-req-item.unmet .promo-req-label { color: #8a2b1f; }
.promo-req-hint {
    font-style: italic;
    font-size: 12px;
    color: #6b5b42;
}
.promo-req-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(139,115,85,.45);
    transform: translateY(-3px);
    min-width: 12px;
}
.promo-req-detail {
    flex: none;
    color: #1a2a3a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .svc-record { padding: 18px 16px; }
    .svc-rank { font-size: 24px; }
    .svc-appointed { margin-left: 0; width: 100%; }
    .svc-meter-ends { flex-wrap: wrap; }
    .svc-meter-status { order: 3; flex-basis: 100%; margin-top: 8px; }
    .svc-end { max-width: 46%; }
}

.post_container {
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
    width: 100%;
    float: left;
    background-color: white;
}

.text_block {
    background-image: url(../images/parchment.jpg);
    float: left;
    width: 100%;
    color: #000000;
    background-color: #f1f3ce;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.15);
    border-radius: 3px;
    padding: 5px;
}

/* Float-clearing utility used across pages (certificate, readtopic, etc.) */
.clearFloat {
    clear: both;
}

/*################################# */
/*#### these primarily for public_profile  ######### */

.profile_container {
    display: inline-block;
    margin: auto;
    text-align: center;
    width: 100%;
}

.profile_container .username_box {
    display: inline-block;
    padding: 5px;
    width: 100%;
}

.profile_container .ribbon_box {
    display: inline-block;
    width: 410px;
    float: none;
}

.profile_container .ribbon_box img {
float: left;
width: 75px;
}
/*################################# */
#userHeader {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f0faff 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f0faff 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f0faff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0faff',GradientType=0 );
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#userHeader .userBox {
    float: left;
    text-align: center;
    width: 33.3333%;
    border-left: 1px solid gray;
    padding: 5px;
    display: table;

}

#userHeader .userBox .content {
    display: table-cell;
    vertical-align: middle;
}

#userHeader .userBoxLeft {
    float: left;
    text-align: left;
    width: 60%;
    padding: 5px;
    display: table;
    border-bottom: 1px solid gray;
    background: #ffffff;
}
#userHeader .userBoxRight {
    float: right;
    text-align: right;
    width: 40%;
    padding: 5px;
    display: table;
    border-bottom: 1px solid gray;
    background: #ffffff;

}

#userHeader .userImg {
    height: 50px;
    width: 50px;
    background-color: #9ea5b9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
    border-radius: 5px;
    margin-right: 10px;
}
#userHeader .userName span {
    font-size: 20px;
    font-weight: 700;
    color: #0277bd;
    line-height: 30px;
}

#senderHeader {
    position: relative;
    text-align: center;
    margin-top: 5px;
}

#senderHeader img{
    border-radius: 75px;
    height: 75px;
    width: 75px;
}

#userHeader button.logout {
    background-color: #e53935;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 15px 0;
    border-radius: 20px;
    width: auto;
}
#userHeader button.logout span {
    background-image: url(../images/logout_bg.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 24px;
    line-height: 16px;
}

#userHeader button.login {
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 15px 0;
    border-radius: 20px;
    width: auto;
}

#main {
    background-color: #e1ebf0;
    padding: 0px;
}

#rank_container {
padding: 5px;
width: 100%;
height: 200px;
}

.rank_list {
border: 1px solid white;
    float: left;
    padding: 5px;
    width: 110px;
height: 80px;
   font-size: 12px;
}
.rank_list img {width: 90px;}

#ribbon_container {
width: 100%;
float: left;
}
.widget_label {
    //background-color: #29b6f6;
    width: 100%;
    border: none;
  //  color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 20px;
    border-radius: 0px;
 //   box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    margin: 10px 0 0px;
    text-shadow: none;
}

.widget_body {
    padding: 20px;
    text-align: left;
}

button.red {
    background-color: #e53935;
}

/* .bidform and .bidform_options moved to Section 5: FORMS & INPUTS */
/* Footer styles moved to Section 7: NAVIGATION & MENUS */

/*#############################################*/
/* id widget divs */

#login_step1 {
    text-align: center;
}

/* END SECTION 8.5: SCUTTLEBUTT/FORUMS */

/* ===== 8.6 PROFILE/DOSSIER ===== */

/* Dossier Profile Cards moved to Section 6.4: DOSSIER CARDS */

/* Standard Themed Card Variants moved to Section 6.2: THEMED CARD VARIANTS */

/* Member Card Wrapper with Commander Controls */
.member-card-wrapper {
    margin-bottom: 10px;
}

/* Ship Info Bar - visible to everyone */
.ship-info-bar {
    padding: 8px 15px;
    background: #f0f4f8;
    border: 1px solid #d1d9e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
    font-size: 14px;
    color: #495057;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ship-info-left {
    flex-grow: 1;
    font-weight: 500;
}

.ship-info-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ship-info-bar a {
    color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
}

.ship-info-bar a:hover {
    text-decoration: underline;
}

.ship-br {
    color: #6c757d;
    margin-left: 8px;
}

/* .no-ship moved to Section 9: UTILITY CLASSES */

.select-ship-link {
    color: #dc3545;
    font-weight: 500;
}

/* .roster-control-btn moved to Section 4: BUTTONS & ACTIONS */

.operations-time-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: end;
}

.operations-nav-link {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.operations-nav-link:hover {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5aa0 100%);
    text-decoration: none;
    transform: translateY(-1px);
}


.port-autocomplete-container {
    position: relative;
}

.port-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f8f4e6;
    border: 2px solid #8b6f3f;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}

.port-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(139, 111, 63, 0.2);
    color: #2c1810;
    transition: background-color 0.2s ease;
}

.port-autocomplete-item:last-child {
    border-bottom: none;
}

.port-autocomplete-item:hover,
.port-autocomplete-item.highlighted {
    background-color: #8b6f3f;
    color: #ffffff;
}

.port-autocomplete-loading {
    padding: 10px 12px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

.port-autocomplete-no-results {
    padding: 10px 12px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

.clan-search-container {
    position: relative;
}

.clan-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f8f4e6;
    border: 2px solid #8b6f3f;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}

.clan-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(139, 111, 63, 0.2);
    color: #2c1810;
    transition: background-color 0.2s ease;
}

.clan-autocomplete-item:last-child {
    border-bottom: none;
}

.clan-autocomplete-item:hover,
.clan-autocomplete-item.highlighted {
    background-color: #8b6f3f;
    color: #ffffff;
}

.clan-autocomplete-item:hover .clan-ac-title,
.clan-autocomplete-item.highlighted .clan-ac-title {
    color: #f0e6d3;
}

.clan-ac-title {
    margin-left: 8px;
    font-size: 12px;
    color: #6b5b42;
}

.clan-autocomplete-loading,
.clan-autocomplete-no-results {
    padding: 10px 12px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

/* Clan detail — info card layout */
.clan-info-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.clan-img-col {
    flex: 0 0 200px;
}

.clan-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #8b7355;
    display: block;
}

.clan-img-placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed #8b7355;
    border-radius: 6px;
    color: #8b7355;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}

.clan-img-placeholder:hover {
    background-color: #8b7355;
    color: #fff;
}

.clan-img-placeholder--static {
    cursor: default;
}

.clan-img-placeholder--static:hover {
    background-color: transparent;
    color: #8b7355;
}

.clan-details-col {
    flex: 1;
    min-width: 0;
}

.clan-url-row {
    margin-top: 10px;
    font-size: 14px;
}

.clan-placeholder-link {
    color: #8b7355;
    font-style: italic;
    text-decoration: underline dotted;
}

.clan-placeholder-link:hover {
    color: #5a4a2a;
}

.clan-placeholder-static {
    color: #aaa;
}

.clan-edit-link {
    font-size: 13px;
    font-weight: normal;
    margin-left: auto;
    color: #1e3a5f;
    text-decoration: underline;
}

.notice {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #f0f4fa;
    border-left: 4px solid #1e3a5f;
}

.notice--warning {
    background: #fff8e6;
    border-left-color: #c8860a;
}

.clan-stats {
    display: flex;
    gap: 24px;
    margin: 10px 0;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-val {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.stat-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-top: 2px;
}

/* Hide the old search button when autocomplete is active */
.autocomplete-enabled .operations-form-button.port-search-btn {
    display: none;
}

/* Port selection validation states */
#portlookup.port-selected {
    border-color: #28a745;
    background-color: #f8fff9;
}

#portlookup.port-error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

/* Ship Selection Modal Styles */

.ship-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.ship-modal-content {
    background-color: #f8f4e6;
    margin: 10% auto;
    padding: 0;
    border: 2px solid #8b6f3f;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 24px rgba(101, 67, 33, 0.4);
}

.ship-modal-header {
    background: linear-gradient(135deg, #8b6f3f 0%, #a0825a 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ship-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.ship-modal-close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.ship-modal-close:hover {
    color: #ffddaa;
}

.ship-modal-body {
    padding: 20px;
}

/* .ship-form-field moved to Section 5: FORMS & INPUTS */

.ship-autocomplete-container {
    position: relative;
}

#shipSearch {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #8b6f3f;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    color: #2c1810;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

#shipSearch:focus {
    outline: none;
    border-color: #654321;
    background-color: #fffef8;
}

.ship-autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #f8f4e6;
    border: 2px solid #8b6f3f;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.25);
}

.ship-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(139, 111, 63, 0.2);
    color: #2c1810;
    transition: background-color 0.2s ease;
}

.ship-autocomplete-item:last-child {
    border-bottom: none;
}

.ship-autocomplete-item:hover,
.ship-autocomplete-item.highlighted {
    background-color: #8b6f3f;
    color: #ffffff;
}

.ship-autocomplete-loading {
    padding: 10px 12px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

.ship-autocomplete-no-results {
    padding: 10px 12px;
    color: #6b5b42;
    font-style: italic;
    text-align: center;
}

.ship-modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

/* .ship-select-btn and .ship-cancel-btn moved to Section 4: BUTTONS & ACTIONS */
/* Ship selection validation states moved to Section 9: UTILITY CLASSES */

/* END SECTION 8.6: PROFILE/DOSSIER */

/* -------------------------------------------------------------------
   8.7 Avatar Chat Panel
   ------------------------------------------------------------------- */

.avatar-chat-panel {
    border: 1px solid #a08050;
    border-radius: 6px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Override the blanket .standard-parchment-card div color rule */
.standard-parchment-card .avatar-chat-header {
    background: #1e3a5f;
    color: #fff !important;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #152d4a;
}

.avatar-chat-header-title {
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c8d8e8 !important;
}

.avatar-chat-thinking {
    display: none;
}

/* Message area */
.standard-parchment-card .avatar-chat-messages {
    min-height: 60px;
    max-height: 280px;
    overflow-y: auto;
    padding: 14px 14px 8px;
    background: rgba(255,252,245,0.6);
    font-size: 14px;
    color: #2d3748 !important;
}

/* Chat bubbles — user right, assistant left */
.avatar-chat-panel .ac-msg {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

.avatar-chat-panel .ac-user {
    align-items: flex-end;
}

.avatar-chat-panel .ac-assistant {
    align-items: flex-start;
}

.avatar-chat-panel .ac-bubble {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 14px;
    color: #2d3748 !important;
}

.avatar-chat-panel .ac-user .ac-bubble {
    background: #dbe8f7;
    border-bottom-right-radius: 3px;
    color: #1a2d45 !important;
}

.avatar-chat-panel .ac-assistant .ac-bubble {
    background: #fff8ef;
    border: 1px solid #e0d0b0;
    border-bottom-left-radius: 3px;
}

.avatar-chat-panel .ac-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 4px;
    color: #8a9ab0 !important;
}

.avatar-chat-panel .ac-assistant .ac-label {
    color: #9a7a40 !important;
}

/* Spinner bubble */
.avatar-chat-spinner-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
}

.avatar-chat-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #c0b090;
    border-top-color: #1e3a5f;
    border-radius: 50%;
    animation: avatar-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.avatar-chat-spinner-label {
    font-size: 12px;
    color: #9a8060 !important;
    font-style: italic;
}

@keyframes avatar-spin {
    to { transform: rotate(360deg); }
}

/* Input row */
.avatar-chat-input-row {
    display: flex;
    border-top: 1px solid #b8a070;
}

.standard-parchment-card .avatar-chat-input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    background: rgba(255,253,248,0.8);
    outline: none;
    color: #2d3748 !important;
}

.standard-parchment-card .avatar-chat-send {
    padding: 0 20px;
    background: #2a4a70 !important;
    color: #d8e8f0 !important;
    border: none;
    border-left: 1px solid #b8a070;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}

.standard-parchment-card .avatar-chat-send:hover {
    background: #1e3a5f !important;
    color: #fff !important;
}

/* Flow connector between chat and textarea */
.avatar-chat-flow-arrow {
    text-align: center;
    padding: 6px 0 4px;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #8a7a5a !important;
    user-select: none;
}

.avatar-chat-flow-arrow::before {
    content: '↓';
    display: block;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 2px;
    color: #a09070 !important;
}

/* Textarea flash when Claude updates it */
@keyframes avatar-desc-flash {
    0%   { background: rgba(200, 220, 255, 0.5); border-color: #4a80c0; }
    100% { background: #fffef9; border-color: #c0b090; }
}

.avatar-desc-updated {
    animation: avatar-desc-flash 0.8s ease-out forwards;
}

/* END SECTION 8.7 */

/* END SECTION 8: PAGE-SPECIFIC COMPONENTS */


/* ===================================================================
   9. UTILITY CLASSES (CONSOLIDATED IN PHASE 7)
   ================================================================ */

/* ===== 9.1 EMPTY STATE UTILITIES ===== */

/* No Data Message - Generic empty state indicator */
.no-data {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
    margin: 10px 0;
}

/* No Ship Selected - Empty state for ship selection */
.no-ship {
    color: #6c757d;
    font-style: italic;
}

/* No Reserves - Empty state for operation reserves */
.no-reserves {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

/* No Log Entries - Empty state for operation logs */
.no-log-entries {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 30px;
}

/* ===== 9.2 VALIDATION & ERROR STATES ===== */

/* Ship Selection Validation States */
#shipSearch.ship-selected {
    border-color: #28a745;
    background-color: #f8fff9;
}

#shipSearch.ship-error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

/* END SECTION 9: UTILITY CLASSES */


/* ===================================================================
   10. MEDIA QUERIES (CONSOLIDATED IN PHASE 6)
   ================================================================ */

/* ===== 10.1 SMALL DEVICES (max-width: 600px) ===== */

/* Data Navigation Grid - Mobile Single Column */
@media (max-width: 600px) {
    .data-nav-grid {
        grid-template-columns: 1fr;
    }
}

/* Ship Modal - Mobile Full Width */
@media (max-width: 600px) {
    .ship-modal-content {
        width: 95%;
        margin: 5% auto;
    }

    .ship-modal-header {
        padding: 12px 16px;
    }

    .ship-modal-body {
        padding: 16px;
    }

    .ship-modal-buttons {
        flex-direction: column;
    }

    .ship-modal-buttons .card-btn-primary,
    .ship-modal-buttons .card-btn-secondary {
        width: 100%;
    }
}

/* ===== 10.2 TABLETS AND LARGER PHONES (max-width: 768px) ===== */

/* Trading System - Mobile Responsive */
@media (max-width: 768px) {
    .trading-container {
        padding: 15px;
    }

    .trading-search-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trading-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .standard-card-header, .trading-card-header h4 {
        font-size: 16px;
    }

    .standard-card-body, .trading-card-body {
        padding: 15px;
    }

    .standard-card-footer, .trading-card-footer {
        padding: 12px 15px;
    }

    #port-search-input,
    #item-search-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Member Cards, Welcome Cards, Dossier - Mobile Responsive */
@media (max-width: 768px) {
    .member-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .member-card-header {
        gap: 8px;
    }

    .welcome-hero-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .member-card-name {
        font-size: 16px;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form input[type="text"] {
        min-width: auto;
    }

    .dossier-profile-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .dossier-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .dossier-profile-medals {
        margin-left: 0;
        justify-content: center;
        padding-left: 0;
    }
}

/* Operations Forms - Mobile Responsive */
@media (max-width: 768px) {
    .operations-form-container {
        margin: 0 10px;
    }

    .operations-time-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .operations-form-card {
        padding: 15px;
    }
}

/* Server Toggle - Mobile Responsive */
@media (max-width: 768px) {
    .server-toggle-container {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .server-toggle-group {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .server-toggle-btn {
        width: 130px;
        height: 52px;
    }

    .server-toggle-container-small {
        gap: 6px;
        margin: 8px 0 12px 0;
        padding: 6px;
    }

    .server-toggle-btn-small {
        width: 85px;
        height: 34px;
    }
}

/* END SECTION 10: MEDIA QUERIES */

/* ===================================================================
   11. ADMIN DASHBOARD
   =================================================================== */

/* Dashboard Container - Grid Layout */
.dashboard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
    padding: 0;
}

/* END SECTION 11: ADMIN DASHBOARD */

/* ===================================================================
   12. THE DAILY GAZETTE (period broadsheet section)

   Aesthetic: late-18th-century newspaper. Cream paper, ink-black type,
   blackletter masthead, IM Fell hand-set serifs, hair rules + printer's
   ornaments between sections. Used by /gazette/, /gazette/archive/,
   and /gazette/submit/. Scoped under .gazette-page and .gz-* classes.

   Google Fonts @import is at the top of this file (per CSS spec).
   ================================================================ */

:root {
  --gz-paper:        #f4ede0;
  --gz-paper-warm:   #ebe2cf;
  --gz-ink:          #1a1410;
  --gz-faded-ink:    #4a3c2e;
  --gz-faded:        #6a5a48;
  --gz-rule:         #b3a994;
  --gz-rule-soft:    #d4cab4;
  --gz-accent:       #7a1f1f;   /* oxblood */
  --gz-accent-soft:  #a04a3c;
  --gz-positive:    #2d5a2d;
  --gz-negative:    #7a1f1f;
}

/* Outer wrapper — the "newspaper" sits on the page like a folded broadsheet. */
.gazette-page {
  background: var(--gz-paper);
  color: var(--gz-ink);
  font-family: 'IM Fell DW Pica', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.66;
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 2.8rem 3.2rem 2rem 3.2rem;
  position: relative;
  box-shadow: 0 12px 40px rgba(40, 25, 10, 0.18), 0 2px 6px rgba(40, 25, 10, 0.08);
  /* Gentle paper warmth */
  background-image:
    radial-gradient(ellipse at top left,    rgba(255, 250, 235, 0.55), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(180, 150, 110, 0.07), transparent 60%);
}
@media (max-width: 760px) {
  .gazette-page {
    margin: 0;
    padding: 1.5rem 1.2rem;
    font-size: 17px;
    box-shadow: none;
  }
}

/* ─── Masthead ────────────────────────────────────────────────────── */

.gz-masthead {
  text-align: center;
  border-top: 3px double var(--gz-ink);
  border-bottom: 1px solid var(--gz-ink);
  margin-bottom: 0.4rem;
  padding: 0.4rem 0 0.1rem 0;
}
.gz-masthead-title {
  font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1;
  color: var(--gz-ink);
  margin: 0.2em 0 0.08em 0;
  font-weight: normal;
  letter-spacing: 0.005em;
}
.gz-masthead-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--gz-faded);
  text-transform: uppercase;
  padding: 0.2rem 0.2rem 0.3rem 0.2rem;
}
.gz-masthead-meta > :first-child { text-align: left; }
.gz-masthead-meta > :last-child  { text-align: right; }
.gz-masthead-date {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gz-ink);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Prev / Archive / Next nav */
.gz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.8rem 0 1.8rem 0;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gz-faded);
}
.gz-nav a {
  color: var(--gz-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.gz-nav a:hover { border-bottom-color: var(--gz-accent); }
.gz-nav .placeholder { color: transparent; user-select: none; }

/* ─── Section ornament + label ───────────────────────────────────── */

.gz-ornament {
  text-align: center;
  margin: 2.4rem 0 0.4rem 0;
  position: relative;
  color: var(--gz-accent);
  font-size: 1.3rem;
  line-height: 1;
}
.gz-ornament::before,
.gz-ornament::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 2.2em);
  border-top: 1px solid var(--gz-rule);
}
.gz-ornament::before { left: 0; }
.gz-ornament::after  { right: 0; }
.gz-section-label {
  text-align: center;
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gz-faded);
  font-size: 0.85rem;
  margin: 0.4rem 0 1.2rem 0;
}

/* ─── Section 1: Main Narrative ──────────────────────────────────── */

.gz-headline {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.15;
  text-align: center;
  margin: 0.4rem 0 1.6rem 0;
  color: var(--gz-ink);
  font-weight: normal;
}
.gz-narrative {
  font-family: 'IM Fell DW Pica', serif;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--gz-ink);
}
.gz-narrative p { margin: 0 0 1.1em 0; }
.gz-narrative p:last-child { margin-bottom: 0; }
.gz-narrative p:first-child::first-letter {
  font-family: 'UnifrakturMaguntia', serif;
  font-size: 4.5em;
  float: left;
  line-height: 0.86;
  margin: 0.04em 0.08em -0.02em 0;
  color: var(--gz-accent);
  font-weight: normal;
}
.gz-narrative em, .gz-narrative i { color: var(--gz-faded-ink); }

/* Emphasized proper nouns in the Main Narrative — period newspapers
   set clan tags + nation names in small caps for visual weight.
   Clans get the oxblood accent; nations stay in ink. */
.gz-narrative .gz-clan {
  font-family: 'IM Fell DW Pica SC', 'IM Fell DW Pica', serif;
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.06em;
  color: var(--gz-accent);
  text-decoration: none;
}
.gz-narrative .gz-clan:hover {
  text-decoration: underline;
}
.gz-narrative .gz-nation {
  font-family: 'IM Fell DW Pica SC', 'IM Fell DW Pica', serif;
  font-weight: 700;
  font-size: 1.08em;
  letter-spacing: 0.04em;
  color: var(--gz-ink);
}
.gz-narrative .gz-port-link {
  color: var(--gz-ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--gz-faded);
}
.gz-narrative .gz-port-link:hover {
  color: var(--gz-accent);
  border-bottom-color: var(--gz-accent);
}

/* "Quiet day" canned skipped-edition body */
.gz-narrative-quiet {
  font-style: italic;
  color: var(--gz-faded-ink);
  text-align: center;
  font-size: 1.05rem;
}

/* ─── Section 2: Statements/Comments ────────────────────────────── */

.gz-statement {
  margin: 1.4rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 2px solid var(--gz-accent);
}
.gz-statement-tag {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: var(--gz-accent);
  display: inline-block;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.gz-statement-body {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--gz-ink);
}
.gz-statement-byline {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.85rem;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}
.gz-statement-byline::before { content: '— '; }

/* ─── Section 4: Adverts ─────────────────────────────────────────── */

.gz-advert {
  margin: 1rem 0;
  padding: 0.85rem 1.2rem;
  background: rgba(255, 250, 235, 0.55);
  border-top: 1px solid var(--gz-rule);
  border-bottom: 1px solid var(--gz-rule);
}
.gz-advert + .gz-advert {
  border-top: none;
  margin-top: -1rem;
}
.gz-advert-title {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: var(--gz-ink);
  margin: 0 0 0.4rem 0;
  font-weight: normal;
}
.gz-advert-body {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded-ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.gz-advert-image {
  float: left;
  width: 110px;
  height: 110px;
  object-fit: cover;
  margin: 0 1rem 0.5rem 0;
  border: 1px solid var(--gz-rule);
}

/* Empty-section placeholder */
.gz-empty {
  text-align: center;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  padding: 0.4rem 0;
  font-size: 0.95rem;
}

/* ─── Upcoming Port Battles roster ────────────────────────────────── */

.gz-pb-now {
  text-align: center;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.9rem;
  margin: 0.1rem 0 0.4rem;
  letter-spacing: 0.02em;
}
.gz-pb-list {
  font-family: 'IM Fell DW Pica', serif;
  margin: 0.2rem 0 0.4rem;
}
.gz-pb-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gz-rule-soft);
}
.gz-pb-row:last-child { border-bottom: none; }
.gz-pb-thumb {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid var(--gz-rule-soft);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}
.gz-pb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gz-pb-body {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  min-width: 0;
}
.gz-pb-when {
  flex: 0 0 auto;
  min-width: 9.5rem;
  font-weight: 600;
  color: var(--gz-faded-ink);
  letter-spacing: 0.02em;
}
.gz-pb-tz { font-size: 0.78rem; color: var(--gz-faded); font-weight: 400; }
.gz-pb-updated {
  text-align: center;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.82rem;
  margin: 0.5rem 0 0.1rem;
  letter-spacing: 0.02em;
}
.gz-pb-port {
  flex: 0 0 auto;
  min-width: 10rem;
  font-size: 1.15rem;
}
.gz-pb-detail {
  flex: 1 1 14rem;
  color: var(--gz-ink);
}
.gz-pb-raiders { font-style: italic; color: var(--gz-faded-ink); }
.gz-pb-nation { color: var(--gz-faded); font-style: italic; }
.gz-pb-vs {
  font-style: italic;
  color: var(--gz-faded);
  padding: 0 0.15rem;
}

@media (max-width: 600px) {
  .gz-pb-when { min-width: 100%; }
  .gz-pb-port { min-width: 100%; }
}

/* Port-battle map card */
.gz-pb-map {
  height: 460px;
  margin: 0.4rem 0 0.2rem;
  border: 1px solid var(--gz-rule);
  border-radius: 2px;
  background: #0f172a;
  box-shadow: inset 0 0 0 4px var(--gz-paper), 0 1px 3px rgba(0,0,0,0.15);
}
.gz-pb-map .leaflet-container { background: #0f172a; font-family: inherit; }

@media (max-width: 600px) {
  .gz-pb-map { height: 340px; }
}

/* ─── Footer actions / CTA row ───────────────────────────────────── */

.gz-actions {
  text-align: center;
  margin: 2.8rem 0 0.8rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gz-rule);
}
.gz-btn {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--gz-ink);
  color: var(--gz-ink);
  background: transparent;
  text-decoration: none;
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin: 0.3rem 0.35rem;
  transition: background 0.15s, color 0.15s;
}
.gz-btn:hover, .gz-btn:focus {
  background: var(--gz-ink);
  color: var(--gz-paper);
}
.gz-btn-accent {
  border-color: var(--gz-accent);
  color: var(--gz-accent);
}
.gz-btn-accent:hover, .gz-btn-accent:focus {
  background: var(--gz-accent);
  color: var(--gz-paper);
}

/* ─── Archive page ───────────────────────────────────────────────── */

.gz-archive-intro {
  text-align: center;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.95rem;
  margin: 0.5rem 0 1.5rem 0;
}
.gz-archive-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IM Fell DW Pica', serif;
}
.gz-archive-table tr {
  border-bottom: 1px dotted var(--gz-rule-soft);
}
.gz-archive-table tr:first-child { border-top: 1px solid var(--gz-rule); }
.gz-archive-table tr:last-child  { border-bottom: 1px solid var(--gz-rule); }
.gz-archive-table td {
  padding: 0.7rem 0.4rem;
  vertical-align: baseline;
}
.gz-archive-date {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.1em;
  color: var(--gz-faded);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 0.78rem;
  width: 11rem;
}
.gz-archive-headline a {
  color: var(--gz-ink);
  font-size: 1.08rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gz-archive-headline a:hover {
  border-bottom-color: var(--gz-accent);
  color: var(--gz-accent);
}
.gz-archive-quiet {
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.85rem;
}
.gz-pagination {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--gz-faded);
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.gz-pagination a {
  color: var(--gz-accent);
  text-decoration: none;
  margin: 0 0.6rem;
  border-bottom: 1px solid transparent;
}
.gz-pagination a:hover { border-bottom-color: var(--gz-accent); }

/* ─── Submit page forms ──────────────────────────────────────────── */

.gz-intro-card {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded-ink);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  margin: 1rem 0 2rem 0;
}
.gz-intro-card strong { color: var(--gz-ink); font-style: normal; }
.gz-form-card {
  background: rgba(255, 250, 235, 0.5);
  border-top: 1px solid var(--gz-rule);
  border-bottom: 1px solid var(--gz-rule);
  padding: 1.4rem 1.6rem;
  margin: 1.5rem 0;
}
.gz-form-card h3 {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--gz-accent);
  margin: 0 0 1.2rem 0;
  text-align: center;
  font-weight: normal;
}
.gz-form-card label {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.1em;
  color: var(--gz-faded);
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.gz-form-card input[type="text"],
.gz-form-card textarea {
  width: 100%;
  background: var(--gz-paper);
  border: 1px solid var(--gz-rule);
  padding: 0.55rem 0.7rem;
  font-family: 'IM Fell DW Pica', serif;
  font-size: 1rem;
  color: var(--gz-ink);
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.gz-form-card input[type="text"]:focus,
.gz-form-card textarea:focus {
  border-color: var(--gz-accent);
  background: #fffaef;
  outline: none;
}
.gz-form-help {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  color: var(--gz-faded);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.gz-form-row { margin-bottom: 1rem; }
.gz-form-submit { margin-top: 0.4rem; }

/* Flash banner */
.gz-flash {
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  text-align: center;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  letter-spacing: 0.01em;
}
.gz-flash-ok  { color: var(--gz-positive); border-color: rgba(45,90,45,0.4); background: rgba(45,90,45,0.06); }
.gz-flash-err { color: var(--gz-accent);   border-color: rgba(122,31,31,0.4); background: rgba(122,31,31,0.06); }

/* "Your submissions" history table */
.gz-history-cat {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-faded);
  font-size: 0.82rem;
  margin: 1.4rem 0 0.4rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--gz-rule);
}
.gz-history-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IM Fell DW Pica', serif;
  font-size: 0.95rem;
}
.gz-history-table thead th {
  font-family: 'IM Fell DW Pica SC', serif;
  letter-spacing: 0.1em;
  font-weight: normal;
  color: var(--gz-faded);
  font-size: 0.72rem;
  text-align: left;
  padding: 0.35rem 0.4rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gz-rule-soft);
}
.gz-history-table tbody td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px dotted var(--gz-rule-soft);
  vertical-align: top;
}
.gz-status-badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.gz-status-pending  { color: var(--gz-faded);    border-color: var(--gz-rule); }
.gz-status-approved { color: var(--gz-positive); border-color: rgba(45,90,45,0.4); }
.gz-status-rejected { color: var(--gz-accent);   border-color: rgba(122,31,31,0.4); }

.gz-history-reason {
  display: block;
  margin-top: 0.3rem;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gz-accent);
}
.gz-history-table a {
  color: var(--gz-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gz-history-table a:hover { border-bottom-color: var(--gz-accent); }

/* END SECTION 12: THE DAILY GAZETTE */

/* ===================================================================
   13. WORLD CHART (/map/)

   Leaflet-based chart of the Letters of Marque world. The tiles are true
   spherical Mercator, so the page shows real latitude and longitude —
   the graticule labels and coordinate readout are genuine positions,
   not pixel offsets. Scoped under .lm-* classes.

   See inc/map/main.php and www/js/lom_map.js.
   =================================================================== */

.lm-card {
  padding: 0;
  overflow: hidden;
}

.lm-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: rgba(58, 45, 28, 0.06);
  border-bottom: 1px solid rgba(90, 74, 47, 0.25);
}

.lm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #3a2d1c;
  cursor: pointer;
  white-space: nowrap;
}

.lm-toggle input {
  cursor: pointer;
  margin: 0;
}

.lm-btn {
  background: #f2e8d5;
  color: #3a2d1c;
  border: 1px solid rgba(90, 74, 47, 0.45);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.lm-btn:hover  { background: #e6d9c0; }
.lm-btn.copied { background: #2d5a2d; border-color: #2d5a2d; color: #fff; }

.lm-hint {
  font-size: 12px;
  font-style: italic;
  color: #6b5a42;
}

/* "Find a port" — a datalist-backed jump, since 184 ports is well past what
   can be located by eye. */
.lm-find { display: inline-flex; }

.lm-input {
  background: #fbf6ea;
  color: #3a2d1c;
  border: 1px solid rgba(90, 74, 47, 0.45);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  font-family: inherit;
  width: 150px;
}

.lm-input:focus {
  outline: none;
  border-color: #8a6d3f;
  box-shadow: 0 0 0 2px rgba(138, 109, 63, 0.2);
}

.lm-map {
  height: 680px;
  background: #dfd0aa;   /* the sea paper, so gaps while tiles load are not jarring */
}

.lm-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Ink-and-paper re-inking of the tiles.
 *
 * The tiles are still the topographic render — a shallow-to-deep sea ramp, a
 * hypsometric land tint and a hillshade (GAMEFILES.md 11.4). The filter is
 * defined in inc/map/main.php, where the comments explain how it recovers a
 * land/sea mask from the render's own R > B land test and so replaces the sea
 * outright, leaving no shelf gradient behind.
 *
 * To fall back to the plain CSS chain, which tones the render but keeps the
 * gradient, swap the filter for:
 *   sepia(0.94) saturate(1.45) contrast(1.06) brightness(1.06) hue-rotate(-8deg) */
.lm-map .leaflet-tile {
  filter: url(#lm-chart-ink);
}

@media (max-width: 700px) {
  .lm-map  { height: 460px; }
  .lm-hint { display: none; }
}

/* Graticule degree labels, anchored at the edge of the visible grid. The
   margins hold them clear of the neatline band, which is 13px wide and drawn
   over everything in the map panes. */
.lm-grid-label {
  color: #3a2a18;
  font: 11px/1 'IM Fell DW Pica', Georgia, serif;
  text-shadow: 0 0 2px #e8dcbd, 0 0 2px #e8dcbd, 0 0 3px #e8dcbd;
  white-space: nowrap;
  pointer-events: none;
}

.lm-glat { margin-left: 17px; margin-top: -5px; }
.lm-glon { margin-left: 4px;  margin-top: -26px; }

/* Live cursor position, bottom-right of the map. */
.lm-readout {
  background: rgba(244, 236, 216, 0.94);
  border: 1px solid rgba(90, 74, 47, 0.5);
  padding: 3px 9px;
  font: 12px/1.35 'IM Fell DW Pica', Georgia, serif;
  letter-spacing: 0.02em;
  color: #3a2a18;
}

.lm-popup-title {
  font-family: 'IM Fell Double Pica', Georgia, serif;
  font-size: 16px;
  color: #2b2013;
  margin-bottom: 3px;
}

.lm-popup-sub {
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: #5a4a2f;
}

.lm-popup-note {
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-size: 12px;
  font-style: italic;
  color: #6b5a42;
  margin-top: 5px;
  max-width: 200px;
}

/* Port names. Leaflet tooltips, but drawn as bare map labels rather than
   boxes: no background, no border, no arrow. Density is controlled by the
   lm-lbl-* class the renderer puts on the map container per zoom level —
   all 184 at once is unreadable below z7. */
.lm-port-label,
.lm-port-label.leaflet-tooltip {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: #2b2013;
  font: italic 12.5px/1 'IM Fell DW Pica', Georgia, serif;
  /* --lm-label-scale is set per zoom by labelTier(); the shorthand above is
     the fallback if it is ever missing. */
  font-size: calc(12.5px * var(--lm-label-scale, 1));
  letter-spacing: 0.03em;
  text-shadow: 0 0 2px #e8dcbd, 0 0 2px #e8dcbd, 0 0 3px #e8dcbd;
  white-space: nowrap;
  pointer-events: none;
}

.lm-port-label.leaflet-tooltip::before { display: none; }   /* no callout arrow */

/* Capitals get the roman small-cap face, letterspaced, the way an engraver
   would distinguish a seat of government from an ordinary harbour. No
   text-transform: in DW Pica SC the lowercase letters already draw as small
   caps, so leaving the name as-is keeps its initial a full capital. */
.lm-port-label.lm-cap {
  font-family: 'IM Fell DW Pica SC', Georgia, serif;
  font-style: normal;
  font-size: calc(12.5px * var(--lm-label-scale, 1));
  letter-spacing: 0.13em;
  color: #6d1f12;
}

.lm-lbl-none .lm-port-label                 { display: none; }
.lm-lbl-caps .lm-port-label:not(.lm-cap)    { display: none; }

/* --- Chart furniture -------------------------------------------------------
   The neatline, paper grain, compass rose and title cartouche. Built in
   www/js/lom_map.js; these are the parts that make the page read as a chart
   rather than a web map. See GAMEFILES.md section 11.7. */

/* Fixed to the viewport above the map panes (z 400) and below the Leaflet
   controls (z 800), so they frame the chart without catching the mouse. The
   three layers are siblings, not one wrapper — see the note in addFurniture(). */
.lm-frame {
  position: absolute;
  inset: 0;
  z-index: 700;
  pointer-events: none;
}

.lm-neatline { width: 100%; height: 100%; }

/* Procedural paper grain. Kept in CSS rather than baked into the tiles: noise
   compresses badly in WebP and would multiply the 1.5MB pyramid several times
   over for something a single repeating layer does just as well. */
.lm-grain {
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Aged edges: the sheet darkens toward the borders. */
.lm-vignette {
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse 120% 120% at 50% 45%,
              rgba(120, 96, 58, 0) 55%, rgba(120, 96, 58, 0.22) 100%);
}

/* Compass rose, above the scale bar in the bottom-left. */
.lm-rose {
  margin: 0 0 6px 6px;
  opacity: 0.82;
  pointer-events: none;
}

.lm-rose-svg { display: block; }
.lm-rose-ring { fill: none; stroke: #3a2a18; stroke-width: 0.7; opacity: 0.7; }
.lm-rose-dark { fill: #3a2a18; }
.lm-rose-light { fill: #f2e8d0; stroke: #3a2a18; stroke-width: 0.5; }
.lm-rose-hub { fill: #f2e8d0; stroke: #3a2a18; stroke-width: 0.7; }

.lm-rose-n {
  fill: #6d1f12;
  font: 9px 'IM Fell DW Pica SC', Georgia, serif;
  letter-spacing: 0.1em;
  text-anchor: middle;
}

/* Title cartouche. Engraved charts put the title in open water; a corner
   block is the honest web equivalent, since the view can be panned anywhere. */
.lm-cartouche {
  margin: 10px 10px 0 0;
  max-width: 210px;
  padding: 12px 16px 13px;
  text-align: center;
  color: #2b2013;
  background: rgba(244, 236, 216, 0.9);
  border: 1px solid rgba(58, 42, 24, 0.75);
  box-shadow: inset 0 0 0 3px rgba(244, 236, 216, 0.9),
              inset 0 0 0 4px rgba(58, 42, 24, 0.45);
}

.lm-cart-orn { font-size: 12px; line-height: 1; color: #6d1f12; opacity: 0.8; }

.lm-cart-title {
  font-family: 'IM Fell Double Pica', Georgia, serif;
  font-size: 20px;
  line-height: 1.15;
  margin-top: 3px;
}

.lm-cart-rule {
  height: 1px;
  margin: 7px auto;
  width: 62%;
  background: rgba(58, 42, 24, 0.55);
}

.lm-cart-sub {
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-size: 13px;
  line-height: 1.4;
}

.lm-cart-foot {
  margin-top: 7px;
  font-family: 'IM Fell DW Pica', Georgia, serif;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.35;
  color: #6b5a42;
}

@media (max-width: 700px) {
  .lm-cartouche { display: none; }   /* the chart itself is the priority */
  .lm-rose      { transform: scale(0.75); transform-origin: bottom left; }
}

/* Leaflet's own chrome, brought onto the same paper. */
.lm-map .leaflet-bar a,
.lm-map .leaflet-bar a:hover {
  background: #f2e8d0;
  color: #3a2a18;
  border-bottom-color: rgba(58, 42, 24, 0.35);
}

.lm-map .leaflet-bar a:hover { background: #e6d9bd; }
.lm-map .leaflet-bar { border: 1px solid rgba(58, 42, 24, 0.6); border-radius: 0; }

.lm-map .leaflet-control-scale-line {
  background: rgba(244, 236, 216, 0.9);
  border: 1px solid rgba(58, 42, 24, 0.7);
  border-top: none;
  border-radius: 0;
  color: #3a2a18;
  font: 11px/1.4 'IM Fell DW Pica', Georgia, serif;
  letter-spacing: 0.03em;
  padding: 1px 6px;
}

.lm-map .leaflet-popup-content-wrapper {
  background: #f6efdc;
  color: #2b2013;
  border: 1px solid rgba(58, 42, 24, 0.6);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(43, 32, 19, 0.28);
}

.lm-map .leaflet-popup-tip { background: #f6efdc; border: 1px solid rgba(58, 42, 24, 0.6); }

.lm-map .leaflet-control-attribution {
  background: rgba(244, 236, 216, 0.82);
  color: #6b5a42;
  font-family: 'IM Fell DW Pica', Georgia, serif;
}

.lm-map .leaflet-control-attribution a { color: #6d1f12; }

/* END SECTION 13: WORLD CHART */