/* ===== Base ===== */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f7fb;
}

/* ===== HEADER (Welcome to Serbia style) ===== */

.ws-header {
    background: #0b325f;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* Top strip */
.ws-header-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
}

/* Logo on the left with borders + red/white stripes */
.ws-header-logo {
    position: relative;
    padding: 24px 70px 26px 70px;
    display: flex;
    align-items: center;
    border-right: 1px solid #ffffff;
}

/* white vertical bar bottom-left */
.ws-header-logo::before {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 0;
    width: 4px;
    height: 28px;
    background: #ffffff;
}

/* red vertical bar top-left */
.ws-header-logo::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    width: 4px;
    height: 28px;
    background: #e53935;
}

.ws-header-logo img {
    height: 70px;   /* bigger logo */
    display: block;
}

/* White name box on the right */
.ws-header-user {
    background: #ffffff;
    color: #1e293b;
    padding: 0 40px;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 50px;
}

/* username text */
.ws-header-username {
    font-weight: 600;
}

/* circular user icon */
.ws-header-user-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #1e293b;
    margin-left: 10px; /* icon on right of name */
    position: relative;
}

/* simple head/body inside circle */
.ws-header-user-icon::before,
.ws-header-user-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
}

.ws-header-user-icon::before {
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ws-header-user-icon::after {
    bottom: 5px;
    width: 16px;
    height: 8px;
    border-radius: 10px 10px 0 0;
}

/* "Log in" link when not authenticated */
.ws-header-login-link {
    font-size: 15px;
    font-weight: 600;
    color: #0b5bd3;
    text-decoration: none;
    text-transform: none;
}

.ws-header-login-link:hover {
    text-decoration: underline;
}

/* Bottom nav strip */
.ws-header-nav {
    background: #0b325f;
    border-top: 3px solid #ffffff;      /* thicker border like original */
    border-bottom: 1px solid #ffffff44;
    display: flex;
    align-items: stretch;
    padding: 0;
}

/* Menu area */
.ws-nav-links {
    flex: 1;
    display: flex;
    justify-content: center; /* CENTER the menu horizontally */
}

/* MENU ITEMS = BOXES like original */
.ws-nav-links a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 45px;
    margin: 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    border-left: 1px solid #ffffff33;
    border-right: 1px solid #ffffff33;
    box-sizing: border-box;
}

.ws-nav-links a:first-child {
    border-left: none;
}

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

/* Language switch on the right */
.ws-lang-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 40px;
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.09em;
}

/* ===== Auth card similar to eid.gov.rs (for register page) ===== */
.auth-wrapper {
    max-width: 450px;
    margin: 70px auto;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    padding: 40px 50px;
    text-align: center;
}

.auth-title {
    font-size: 24px;
    margin-bottom: 20px;
}

.auth-field {
    text-align: left;
    margin-bottom: 20px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.auth-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 3px;
    border: 1px solid #c7c9d3;
    font-size: 14px;
    box-sizing: border-box;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 3px;
    background: #008751;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
}

.auth-btn:hover {
    opacity: 0.9;
}

.auth-links {
    margin-top: 15px;
    font-size: 13px;
}

/* ===== Page content (title) ===== */
.page-title {
    text-align: center;
    margin: 40px 0 30px;
    font-size: 32px;
    font-weight: 600;
    color: #1f3554; /* dark navy like original */
}

/* ===== MY REQUESTS – TWO-COLUMN FLEX LAYOUT ===== */

/* outer container now owns the top + bottom borders
   so there is NO extra line between header and first row */
.requests-section {
    max-width: 1380px;
    margin: 0 auto 80px;
    padding: 0 40px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

/* header row: labels only, no borders */
.requests-header-row {
    display: flex;
    align-items: flex-end;
    padding-top: 8px;
    padding-bottom: 4px;      /* small gap above first row */
    color: #9ca3af;
    font-weight: 600;
    font-size: 13px;
}

.req-main-header {
    flex: 1;
    display: flex;
}

.req-action-header {
    flex: 0 0 140px; /* same width as button column */
}

/* each data row: 2 columns (left content + right button), NO borders */
.requests-row {
    display: flex;
    align-items: center;
    padding: 0 0 10px;      /* vertical spacing row-to-row */
}

/* LEFT column – values only, no borders */
.req-main {
    flex: 1;
    display: flex;
}

/* RIGHT column – button only */
.req-action {
    flex: 0 0 140px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 24px;
}

/* columns inside left part */
.req-col {
    padding-right: 40px;
}

.req-col-number { flex: 0 0 140px; }
.req-col-name   { flex: 0 0 260px; }
.req-col-status { flex: 0 0 180px; }
.req-col-visa   { flex: 0 0 120px; }
.req-col-visid  { flex: 0 0 120px; }

.req-col-strong {
    font-weight: 600;
    color: #1f2937;
}

/* ===== Status badges ===== */
.status-badge {
    padding: 4px 10px;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    display: inline-block;
}

.status-submitted {
    background: #1b74d1; /* blue */
}

.status-approved {
    background: #16a34a; /* green */
}

/* Open Request button */
.open-request-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #0b325f;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.open-request-btn:hover {
    background: #0d447c;
}

/* ===== Utility ===== */
.text-right {
    text-align: right;
}

hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
}

/* ===== Login page (eid.gov.rs style) ===== */

.login-page-wrapper {
    max-width: 960px;
    margin: 40px auto 80px;
    font-family: Arial, sans-serif;
}

.login-page-title {
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 15px;
    padding: 10px 0;
}

/* Tabs row */
.login-tabs {
    display: flex;
    border: 1px solid #cdd3e0;
    border-bottom: none;
    background: #ffffff;
}

.login-tab {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    color: #1f2933;
    background: #f5f7fb;
    border-right: 1px solid #cdd3e0;
    box-sizing: border-box;
}

.login-tab:last-child {
    border-right: none;
}

.login-tab-active {
    background: #0b325f;
    color: #ffffff;
}

.login-tab-icon-small {
    margin-right: 6px;
}

/* Light blue panel with form */
.login-panel {
    border: 1px solid #cdd3e0;
    border-top: none;
    background: #f2f7ff;
    padding: 40px 80px 50px;
    box-sizing: border-box;
}

/* Circle icon at top */
.login-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #0b325f;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: #0b325f;
}

/* Subtitle text */
.login-subtitle {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 30px;
    font-size: 14px;
    color: #1f2933;
}

.login-link-underline {
    color: #0b325f;
    text-decoration: underline;
    font-weight: 600;
}

/* Error box */
.login-error-box {
    max-width: 520px;
    margin: 0 auto 15px;
    padding: 10px 12px;
    border-left: 3px solid #b91c1c;
    background: #fee2e2;
    color: #7f1d1d;
    font-size: 13px;
}

/* Center form inside panel */
.login-form {
    max-width: 520px;
    margin: 0 auto;
}

.login-form .auth-field label {
    font-size: 13px;
}

.login-label-hint {
    font-weight: normal;
}

/* Sign-in button full width */
.login-submit-btn {
    width: 100%;
    margin-top: 10px;
}

/* Forgot + register */
.login-forgot {
    margin-top: 8px;
    font-size: 13px;
}

.login-register-info {
    margin-top: 25px;
    font-size: 13px;
    text-align: center;
}

/* ===== Footer (Welcome to Serbia style) ===== */

.ws-footer-wrapper {
    margin-top: 40px;
    font-family: Arial, sans-serif;
}

/* Dark blue strip with "Top of the page" */
.ws-footer-bar {
    background: #20375a;
    padding: 6px 40px;
    text-align: right;
}

.ws-footer-top-link {
    color: #4ea3ff;
    font-size: 12px;
    text-decoration: none;
}

.ws-footer-top-link:hover {
    text-decoration: underline;
}

/* White area with logo + text */
.ws-footer {
    background: #ffffff;
    padding: 25px 40px 40px;
}

.ws-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.ws-footer-logo img {
    height: 80px;
    display: block;
}

.ws-footer-text {
    font-size: 13px;
    color: #4b5563;
}

.ws-footer-title {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
}

.ws-footer-subtitle {
    margin-top: 4px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #4b5563;
}

.ws-footer-legal {
    max-width: 600px;
    margin-bottom: 6px;
    line-height: 1.4;
}

.ws-footer-legal a {
    color: #2563eb;
    text-decoration: underline;
}

.ws-footer-links a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 600;
}